feat: add config to redux store

.eslintrc

@@ -20,6 +20,7 @@
       "error",
       { "ignoreComments": true, "tabWidth": 2, "code": 100, "ignoreStrings": true }
     ],
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "react/prop-types": "off", // Turn this back on when prop types are implemented
     "react/jsx-filename-extension": "off", // Turn this on if we ever rename things to .jsk
     "global-require": "off", // We use this for dynamic config requiring
@@ -34,6 +35,8 @@
     "react/jsx-props-no-spreading": "off",
     "import/no-dynamic-require": "off",
     "no-restricted-globals": "off", // For isNan
-    "import/no-named-as-default": 0
+    "import/no-named-as-default": 0,
+    "default-case": 0,
+    "no-param-reassign": 0
   }
 }

config/webpackDevServer.js

@@ -1,4 +1,3 @@
-/*eslint-disable func-names, prefer-arrow-callback, no-console */
 const path = require('path');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
@@ -9,7 +8,7 @@ const paths = require('./paths');
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
 
-module.exports = function(proxy, allowedHost) {
+module.exports = (proxy, allowedHost) => {
   // noinspection WebpackConfigHighlighting
   return {
     clientLogLevel: 'none',

package.json

@@ -29,12 +29,8 @@
     "lint:styles": "stylelint 'src/**/*.{js,jsx}'",
     "publish": "node tools/publish",
     "serve": "http-server -p 3000 build",
-    "size": "npm run build && size-limit",
     "start": "node tools/start",
-    "test": "is-ci \"test:coverage\" \"test:watch\"",
-    "test:coverage": "jest --bail --coverage",
-    "test:watch": "jest --watch --verbose",
-    "validate": "npm run lint && npm run lint:styles && npm run test:coverage && flow && npm run build && npm run test:e2e && size-limit"
+    "test": "jest --watch --verbose"
   },
   "lint-staged": {
     "*.(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)": [
@@ -60,6 +56,7 @@
     "connected-react-router": "^6.8.0",
     "core-js": "^3.2.1",
     "events-polyfill": "^2.1.2",
+    "fhirclient": "^2.3.1",
     "history": "^4.10.1",
     "immer": "^4.0.1",
     "mobile-detect": "^1.4.4",

setenv.sh

@@ -0,0 +1 @@
+export CLIENT_ID='test'

src/config.js

@@ -4,8 +4,12 @@
  */
 
 const config = {
-  name: 'React Redux Saga Boilerplate',
-  description: 'Boilerplate with React and Redux with Redux Saga',
+  name: 'FHIR App Starter',
+  description: 'FHIR App Starter',
+  clientId: '', // Make sure to set your environment up correctly when starting/building
+  scope: '',
+  iss: '',
+  redirectUri: '',
 };
 
 export default config;

src/containers/App/constants.js

@@ -2,3 +2,6 @@
  * App Action Types
  *
  */
+
+export const LOAD_CONFIG = 'App/LOAD_CONFIG';
+export const LOAD_CONFIG_SUCCESS = 'App/LOAD_CONFIG_SUCCESS';

src/containers/App/index.js

@@ -5,38 +5,58 @@ import { Router, Switch, Route } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { Grid, Container, Header, Divider } from 'semantic-ui-react';
 
+import config from '../../config';
 import history from '../../modules/history';
 import Home from '../Home';
 
 const Wrapper = styled.div`
   margin-top: 3rem;
 `;
 
-const App = () => {
-  return (
-    <Router history={history}>
-      <Helmet />
-      <Wrapper>
-        <Container>
-          <Grid columns="1" stackable>
-            <Grid.Column>
-              <Grid.Row>
-                <Header as="h1">FHIR App Starter</Header>
-                <Divider />
-              </Grid.Row>
-              <Switch>
-                <Route path="/" exact component={Home} />
-              </Switch>
-            </Grid.Column>
-          </Grid>
-        </Container>
-      </Wrapper>
-    </Router>
-  );
-};
-
-function mapStateToProps() {
-  return {};
+class App extends React.Component {
+  componentDidMount() {
+    const { loadConfig, loaded } = this.props;
+
+    if (!loaded) {
+      loadConfig();
+    }
+  }
+
+  render() {
+    return (
+      <Router history={history}>
+        <Helmet />
+        <Wrapper>
+          <Container>
+            <Grid columns="1" stackable>
+              <Grid.Column>
+                <Grid.Row>
+                  <Header as="h1">FHIR App Starter</Header>
+                  <Divider />
+                </Grid.Row>
+                <Switch>
+                  <Route path="/" exact component={Home} />
+                </Switch>
+              </Grid.Column>
+            </Grid>
+          </Container>
+        </Wrapper>
+      </Router>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  // TODO: replace with selector here
+  return { loaded: !!state.app.config };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    loadConfig: () => {
+      return dispatch({ type: 'App/LOAD_CONFIG', payload: config });
+    },
+  };
 }
 
-export default connect(mapStateToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/containers/App/reducers.js

@@ -16,6 +16,15 @@ export const initialState = {
   container: 'App',
 };
 
-const appReducer = (state = initialState /* action */) => produce(state, (/* draft */) => {});
+const appReducer = (state = initialState, action) =>
+  produce(state, draft => {
+    console.log(action);
+    switch (action.type) {
+      case 'App/LOAD_CONFIG':
+        console.log('recevied LOAD_CONFIG');
+        draft.config = action.payload;
+        break;
+    }
+  });
 
 export default appReducer;

src/containers/App/sagas.js

@@ -2,6 +2,16 @@
  * sagas
  */
 
-// import { all, put, select, takeLatest } from 'redux-saga/effects';
+import { put, takeLatest } from 'redux-saga/effects';
+import { LOAD_CONFIG, LOAD_CONFIG_SUCCESS } from './constants';
 
-// import constants from './constants';
+import config from '../../config';
+
+export function* loadConfig() {
+  // replace the below with an action creator
+  yield put({ type: LOAD_CONFIG_SUCCESS, payload: config });
+}
+
+export default function* root() {
+  yield takeLatest(LOAD_CONFIG, loadConfig);
+}

src/containers/Home/index.js

@@ -49,7 +49,8 @@ const Home = () => {
       </List>
       Good luck!
       <Message>
-        Made with <Red>&hearts;</Red> by <a href="https://twitter.com/zeevosec">Shane O'Neill</a>
+        Made with <Red>&hearts;</Red> by{' '}
+        <a href="https://twitter.com/zeevosec">Shane O&apos;Neill</a>
       </Message>
     </Grid.Row>
   );

src/store/index.js

@@ -6,6 +6,7 @@ import { createStore, applyMiddleware, compose } from 'redux';
 import { routerMiddleware } from 'connected-react-router';
 import createSagaMiddleware from 'redux-saga';
 
+import sagas from './sagas';
 import rootReducer from './reducers';
 
 export default function configureStore(initialState = {}, history) {
@@ -42,5 +43,7 @@ export default function configureStore(initialState = {}, history) {
   // Extensions
   store.runSaga = sagaMiddleware.run;
 
+  store.runSaga(sagas);
+
   return store;
 }

src/store/reducers.js

@@ -4,14 +4,14 @@
 
 import { combineReducers } from 'redux';
 
-import globalReducer from '../containers/App/reducers';
+import appReducer from '../containers/App/reducers';
 import homeReducer from '../containers/Home/reducers';
 
 /**
  * Merges the main reducer with the router state and dynamically injected reducers
  */
 const rootReducer = combineReducers({
-  global: globalReducer,
+  app: appReducer,
   home: homeReducer,
 });
 

src/store/sagas.js

@@ -0,0 +1,7 @@
+import { all } from 'redux-saga/effects';
+
+import appSaga from '../containers/App/sagas';
+
+export default function* sagas() {
+  yield all([appSaga()]);
+}

yarn.lock

@@ -1662,6 +1662,11 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
+abortcontroller-polyfill@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.4.0.tgz#0d5eb58e522a461774af8086414f68e1dda7a6c4"
+  integrity sha512-3ZFfCRfDzx3GFjO6RAkYx81lPGpUS20ISxux9gLxuKnqafNcFQo59+IoZqpO2WvQlyc287B62HDnDdNYRmlvWA==
+
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -3482,6 +3487,14 @@ cross-fetch@^2.2.2:
     node-fetch "2.1.2"
     whatwg-fetch "2.0.4"
 
+cross-fetch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.4.tgz#7bef7020207e684a7638ef5f2f698e24d9eb283c"
+  integrity sha512-MSHgpjQqgbT/94D4CyADeNoYh52zMkCX4pcJvPP5WqPsLFMKjr2TCMg381ox5qI0ii2dPwaLx/00477knXqXVw==
+  dependencies:
+    node-fetch "2.6.0"
+    whatwg-fetch "3.0.0"
+
 cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -5213,6 +5226,16 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+fhirclient@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/fhirclient/-/fhirclient-2.3.1.tgz#2dafa6da7a0241472363ecfdbbc5ed81d6997bc5"
+  integrity sha512-POGiCKzXqFoT/adhH5g8UTrTLMZHUhO8QpakPwLMLCGRKyQFeVIX+A/8nA3ydlHzmJummqJlUIp+dI5WkhZKCQ==
+  dependencies:
+    abortcontroller-polyfill "^1.4.0"
+    core-js "^3.5.0"
+    cross-fetch "^3.0.4"
+    debug "^4.1.1"
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -9027,6 +9050,11 @@ node-fetch@2.1.2:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.2.tgz#ab884e8e7e57e38a944753cec706f788d1768bb5"
   integrity sha1-q4hOjn5X44qUR1POxwb3iNF2i7U=
 
+node-fetch@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -14043,7 +14071,7 @@ whatwg-fetch@2.0.4:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
   integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==
 
-whatwg-fetch@^3.0.0:
+whatwg-fetch@3.0.0, whatwg-fetch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==