Merge branch 'dev' of github.com:codeforboston/cliff-effects into cle…

…an-style-2

package.json

@@ -5,7 +5,9 @@
   "dependencies": {
     "ajv": "6.5.4",
     "chart.js": "2.7.2",
+    "cross-env": "^5.2.0",
     "highcharts": "^6.2.0",
+    "localforage": "^1.7.3",
     "lodash": "4.17.10",
     "moment": "2.22.1",
     "react": "16.3.2",
@@ -20,7 +22,7 @@
     "semantic-ui-react": "0.75.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cross-env NODE_ENV=development; react-scripts start",
     "build": "npm run docs && react-scripts build && node postbuild.js",
     "test": "react-scripts test",
     "coverage": "react-scripts test --coverage",

src/App.js

@@ -5,6 +5,7 @@ import {
   Switch,
 } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
+import localforage from 'localforage';
 
 import { Confirmer } from './utils/getUserConfirmation';
 
@@ -18,14 +19,30 @@ import Header from './components/Header';
 // Development HUD
 import { DevSwitch } from './containers/DevSwitch';
 import { DevHud } from './components/dev/DevHud';
+import {
+  printSummaryToConsole,
+  addClientGetterProperty,
+  addEnableDevProperty,
+} from './dev/command-line-utils';
 
 // Object Manipulation
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import merge from 'lodash/merge';
 import { CLIENT_DEFAULTS } from './utils/CLIENT_DEFAULTS';
 
 // LOCALIZATION
 import { getTextForLanguage } from './utils/getTextForLanguage';
 
+
+const DEV_PROPS_STORAGE_KEY = 'cliffEffectsDevProps';
+
+const LOADED_CLIENT_STORAGE_KEY = 'cliffEffects_loadedClient';
+
+const CLIENT_LAST_LOADED_STORAGE_KEY = 'cliffEffects_clientLastLoaded';
+
+// Time-to-live for stored client data, in milliseconds
+const STORED_CLIENT_TTL = 1000 * 60 * 60 * 24; // 1 day
+
 /**
  * Main top-level component of the app. Contains the router that controls access
  * to the {@link HomePage}, {@link VisitPage}, and {@link AboutPage}, as well
@@ -48,14 +65,6 @@ class App extends Component {
 
     let defaults = cloneDeep(CLIENT_DEFAULTS);
 
-    // Development variables are the only things stored
-    let localDev = localStorage.getItem(`cliffEffectsDevProps`);
-    if (typeof localDev !== `string`) {
-      localDev = {};
-    } else {
-      localDev = JSON.parse(localDev);
-    }
-
     /**
      *  React state.
      *  @property {string} langCode - [ISO 639-1 code]{@link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes} of currently selected language
@@ -84,12 +93,66 @@ class App extends Component {
         english:    true,
         nonEnglish: true,
         warningOff: true,
-        ...localDev,
       },
       distrustConfirmed: false,
     };
   };  // End constructor()
 
+  componentDidMount() {
+    // Webpack should remove this whole conditional when not built for development environment
+    if (process.env.NODE_ENV === 'development') {
+      Promise.all([
+        localforage.getItem(DEV_PROPS_STORAGE_KEY),
+        localforage.getItem(CLIENT_LAST_LOADED_STORAGE_KEY),
+        localforage.getItem(LOADED_CLIENT_STORAGE_KEY),
+      ]).then(
+        ([
+          localDev,
+          clientLastLoaded,
+          loadedClient,
+        ]) => {
+          if (localDev) {
+            this.setState((prevState) => {
+              const now = Date.now();
+
+              clientLastLoaded = clientLastLoaded || 0;
+
+              let state = merge(
+                {},
+                prevState,
+                { devProps: localDev }
+              );
+
+              // This will clear out a loaded client from local storage
+              // if it's been there too long--this is for security purposes,
+              // as the loaded client could potentially have sensitive client
+              // data and we want to minimize exposure of that info.
+              if (now - clientLastLoaded >= STORED_CLIENT_TTL) {
+                localforage.removeItem(LOADED_CLIENT_STORAGE_KEY);
+                localforage.removeItem(CLIENT_LAST_LOADED_STORAGE_KEY);
+              }
+              else {
+                state.clients.loaded = loadedClient;
+              }
+
+              return state;
+            });
+          }
+        }
+      );
+
+      printSummaryToConsole();
+
+      addEnableDevProperty(() => {
+        return this.setDev('dev', true);
+      });
+
+      addClientGetterProperty(() => {
+        return this.state.clients.loaded;
+      });
+    } // End development environment conditional
+  }
+
   /**
    * Set the human language of the app (i.e. the language in which the UI will
    * display text for users to read, NOT the coding language).
@@ -115,9 +178,11 @@ class App extends Component {
 
       let props = prevState.devProps;
       if (props[ key ] !== value) {
-
         let newProps = { ...props, [ key ]: value };
-        localStorage.setItem(`cliffEffectsDevProps`, JSON.stringify(newProps));
+
+        if (process.env.NODE_ENV === 'development') {
+          localforage.setItem(DEV_PROPS_STORAGE_KEY, newProps);
+        }
 
         return { devProps: newProps };
       }
@@ -139,6 +204,11 @@ class App extends Component {
             defaults = cloneDeep(clients.default),
             newData  = Object.assign(defaults, toLoad);
 
+      if (process.env.NODE_ENV === 'development') {
+        localforage.setItem(CLIENT_LAST_LOADED_STORAGE_KEY, Date.now());
+        localforage.setItem(LOADED_CLIENT_STORAGE_KEY, newData);
+      }
+
       return { clients: { ...clients, loaded: newData }};
     });
   };  // End loadClient()

src/components/MainMenu.js

@@ -11,30 +11,30 @@ const MainMenu = function ({ translations }) {
     <Menu
       inverted
       secondary
-      size='large'>
+      size = { `large` }>
 
       <Menu.Item>
         <Link
-          className="main-nav"
-          to="/">
+          className = { `main-nav` }
+          to        = { `/` }>
           { translations.i_homeNav }
         </Link>
       </Menu.Item>
       <Menu.Item>
         <Link
-          className="main-nav"
-          to="/about">
+          className = { `main-nav` }
+          to        = { `/about` }>
           { translations.i_aboutNav }
         </Link>
       </Menu.Item>
       <Menu.Item>{ translations.i_githubNav }</Menu.Item>
-      <Menu.Item position='right'>
+      <Menu.Item position={ `right` }>
         {/*<Link to="/login"><Button inverted>Log in</Button></Link>*/}
         {/*<Button as='a' inverted style={{ marginLeft: '0.5em' }}>Sign Up</Button>*/}
       </Menu.Item>
     </Menu>
   );
-};  // End MainMenu(<>)
+};  // Ends <MainMenu>
 
 
 export { MainMenu };

src/components/PageLayout.js

@@ -4,28 +4,32 @@ import {
   Segment,
 } from 'semantic-ui-react';
 
-const PageLayout = (props) => {
+
+const PageLayout = ({ children }) => {
   return (
     <div>
       <Segment
-        className="pl-segment"
+        className = { `pl-segment` }
         vertical>
         <Grid
           container
           stackable
-          verticalAlign='middle'>
+          verticalAlign = { `middle` }>
           <Grid.Row>
             <Grid.Column width={ 10 }>
-              {props.children}
+
+              { children }
+
             </Grid.Column>
             <Grid.Column
-              floated='right'
-              width={ 6 } />
+              floated = { `right` }
+              width   = { 6 } />
           </Grid.Row>
         </Grid>
       </Segment>
     </div>
   );
 };
 
+
 export { PageLayout };

src/components/StepBar.js

@@ -3,25 +3,29 @@ import { Step } from 'semantic-ui-react';
 
 import { STEP_VALS } from '../forms/STEP_VALS';
 
+
 const StepBar = ({ currentStepKey, goToStep, translations }) => {
 
   let cleanSteps = [];
 
   STEP_VALS.forEach((step, index) => {
     let newStep = { title: { content: translations[ `i_` + step.key ] }};
-    newStep.active = step.key === currentStepKey;
-    newStep.onClick = (e) => {
-      goToStep({ key: step.key });
-    };
-    newStep.key = index;
+
+    newStep.active  = step.key === currentStepKey;
+    newStep.onClick = function (event) { goToStep({ key: step.key }); };
+    newStep.key     = index;
+
     cleanSteps[ index ] = newStep;
   });
 
-  return (<Step.Group
-    className='six'
-    size='mini'
-    ordered
-    items={ cleanSteps } />);
+  return (
+    <Step.Group
+      className = { `six` }
+      size      = { `mini` }
+      items     = { cleanSteps }
+      ordered />
+  );
 };
 
-export default StepBar;
+
+export { StepBar };