[WIP] Redux store

package.json

@@ -5,15 +5,23 @@
   "dependencies": {
     "ajv": "6.5.4",
     "chart.js": "2.7.2",
+    "connected-react-router": "^4.5.0",
+    "i": "^0.3.6",
+    "immutable": "^3.8.2",
     "lodash": "4.17.10",
     "moment": "2.22.1",
+    "npm": "^6.4.1",
     "react": "16.3.2",
     "react-chartjs-2": "2.7.2",
     "react-dom": "16.3.2",
     "react-helmet": "5.2.0",
+    "react-immutable-proptypes": "^2.1.0",
+    "react-redux": "^5.0.7",
     "react-router": "4.2.0",
     "react-router-dom": "4.2.2",
     "react-scripts": "1.1.5",
+    "redux": "^4.0.1",
+    "redux-immutable": "^4.0.0",
     "semantic-ui-css": "2.2.12",
     "semantic-ui-react": "0.75.1"
   },

src/actions/client.js

@@ -0,0 +1,125 @@
+export const SET_CLIENT_VALUE = 'SET_CLIENT_VALUE';
+
+export const setClientValue = ({ time, route, value }) => {
+  return {
+    type:    SET_CLIENT_VALUE,
+    payload: {
+      time,
+      route,
+      value,
+    },
+  };
+};
+
+export const REMOVE_MEMBER = 'REMOVE_MEMBER';
+
+export const removeMember = ({ time = 'current', index }) => {
+  return {
+    type:    REMOVE_MEMBER,
+    payload: {
+      time,
+      index,
+    },
+  };
+};
+
+export const ADD_MEMBER = 'ADD_MEMBER';
+
+export const addMember = ({ time = 'current', member }) => {
+  return {
+    type:    ADD_MEMBER,
+    payload: {
+      time,
+      member,
+    },
+  };
+};
+
+export const SET_MEMBER_IS_DISABLED = 'SET_MEMBER_IS_DISABLED';
+
+export const setMemberIsDisabled = ({ time = 'current', index, isDisabled }) => {
+  return {
+    type:    SET_MEMBER_IS_DISABLED,
+    payload: {
+      time,
+      index,
+      isDisabled: !!isDisabled,
+    },
+  };
+};
+
+export const SET_MEMBER_ROLE = 'SET_MEMBER_ROLE';
+
+export const setMemberRole = ({ time = 'current', index, role }) => {
+  return {
+    type:    SET_MEMBER_ROLE,
+    payload: {
+      time,
+      index,
+      role,
+    },
+  };
+};
+
+export const SET_MEMBER_AGE = 'SET_MEMBER_AGE';
+
+export const setMemberAge = ({ time = 'current', index, age }) => {
+  return {
+    type:    SET_MEMBER_AGE,
+    payload: {
+      time,
+      index,
+      age,
+    },
+  };
+};
+
+export const SET_CASH_VALUE = 'SET_CASH_VALUE';
+
+export const setCashValue = ({ time, name, value }) => {
+  return {
+    type:    SET_CASH_VALUE,
+    payload: {
+      time,
+      name,
+      value,
+    },
+  };
+};
+
+export const SET_HOUSING_TYPE = 'SET_HOUSING_TYPE';
+
+export const setHousingType = ({ time, housingType }) => {
+  return {
+    type:    SET_HOUSING_TYPE,
+    payload: {
+      time,
+      housingType,
+    },
+  };
+};
+
+export const SET_PAYS_UTILITY = 'SET_PAYS_UTILITY';
+
+export const setPaysUtility = ({ time, utility, paysUtility }) => {
+  return {
+    type:    SET_PAYS_UTILITY,
+    payload: {
+      time,
+      utility,
+      paysUtility,
+    },
+  };
+};
+
+export const SET_GETS_FUEL_ASSISTANCE = 'SET_GETS_FUEL_ASSISTANCE';
+
+export const setGetsFuelAssistance = ({ time, getsAssistance }) => {
+  return {
+    type:    SET_GETS_FUEL_ASSISTANCE,
+    payload: {
+      time,
+      getsAssistance,
+    },
+  };
+};

src/actions/geography.js

@@ -0,0 +1,8 @@
+export const SET_US_STATE = 'SET_US_STATE';
+
+export const setUSState = ({ state }) => {
+  return {
+    type:    SET_US_STATE,
+    payload: { state },
+  };
+};

src/actions/index.js

@@ -0,0 +1,3 @@
+export * from './geography';
+export * from './localization';
+export * from './client';

src/actions/localization.js

@@ -0,0 +1,8 @@
+export const SET_LANGUAGE = 'SET_LANGUAGE';
+
+export const setLanguage = ({ language }) => {
+  return {
+    type:    SET_LANGUAGE,
+    payload: { language },
+  };
+};

src/App.js → src/components/App.js

@@ -6,25 +6,27 @@ import {
 } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 
-import { Confirmer } from './utils/getUserConfirmation';
+import { Confirmer } from '../utils/getUserConfirmation';
 
 // CUSTOM COMPONENTS
-import HomePage from './containers/HomePage';
-import AboutPage from './containers/AboutPage';
-import VisitPage from './containers/VisitPage';
-import Footer from './components/Footer';
-import Header from './components/Header';
+import HomePage from '../containers/HomePage';
+import AboutPage from '../containers/AboutPage';
+import VisitPage from '../containers/VisitPage';
+import Footer from './Footer';
+import Header from './Header';
 
 // Development HUD
-import { DevSwitch } from './containers/DevSwitch';
-import { DevHud } from './components/dev/DevHud';
+import { DevSwitch } from '../containers/DevSwitch';
+import { DevHud } from './dev/DevHud';
 
 // Object Manipulation
 import { cloneDeep } from 'lodash';
-import { CLIENT_DEFAULTS } from './utils/CLIENT_DEFAULTS';
+import { CLIENT_DEFAULTS } from '../utils/CLIENT_DEFAULTS';
 
 // LOCALIZATION
-import { getTextForLanguage } from './utils/getTextForLanguage';
+import { getTextForLanguage } from '../utils/getTextForLanguage';
+
+
 
 /**
  * Main top-level component of the app. Contains the router that controls access
@@ -88,6 +90,9 @@ class App extends Component {
       },
       distrustConfirmed: false,
     };
+
+    this.props.setLanguage({ language: this.state.langCode });
+    this.props.setUSState({ state: 'MA' });
   };  // End constructor()
 
   /**
@@ -101,6 +106,7 @@ class App extends Component {
   setLanguage = (evnt, inputProps) => {
     var snippets = getTextForLanguage(inputProps.value);
     this.setState({ language: inputProps.value, snippets: snippets });
+    this.props.setLanguage({ language: inputProps.value });
   };
 
   /** Set the value of a specified key in the app state's devProps.
@@ -271,5 +277,4 @@ class App extends Component {
   };  // End render()
 }
 
-
 export default App;

src/configure-store.js

@@ -0,0 +1,31 @@
+/* global module, process */
+
+import { createStore, compose } from 'redux';
+import { Map } from 'immutable';
+import createReducer from './reducers';
+
+
+export default function configureStore(initialState = Map()) {
+  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
+  const composeEnhancers = process.env.NODE_ENV !== 'production' &&
+	typeof window === 'object' &&
+	window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
+    : compose;
+
+  const store = createStore(
+    createReducer(),
+    initialState,
+    composeEnhancers()
+  );
+
+  // Make reducers hot reloadable, see http://mxs.is/googmo
+  /* istanbul ignore next */
+  if (module.hot) {
+    module.hot.accept('./reducers', () => {
+      store.replaceReducer(createReducer());
+    });
+  }
+
+  return store;
+}

src/containers/App.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+
+import App from '../components/App';
+import { setUSState, setLanguage } from '../actions';
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setUSState({ state }) {
+      dispatch(setUSState({ state }));
+    },
+
+    setLanguage({ language }) {
+      dispatch(setLanguage({ language }));
+    },
+  };
+};
+
+export default connect(null, mapDispatchToProps)(App);

src/containers/VisitPage.js

@@ -4,6 +4,7 @@ import {
   Responsive,
 } from 'semantic-ui-react';
 import { Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
 
 // DATA MANAGEMENT
 import { setNestedProperty } from '../utils/setNestedProperty';
@@ -22,15 +23,16 @@ import ErrorListener from '../components/prompts/ErrorListener';
 import FeedbackPrompt from '../components/prompts/FeedbackPrompt';
 import FeedbackForm from '../components/prompts/FeedbackForm';
 import { FeedbackAnytime } from '../components/prompts/FeedbackAnytime';
-import { CurrentIncomeStep } from '../forms/CurrentIncome';
-import { CurrentExpensesStep } from '../forms/CurrentExpenses';
-import { PredictionsStep } from '../forms/Predictions';
-import { HouseholdStep } from '../forms/Household';
-import { CurrentBenefitsStep } from '../forms/CurrentBenefits';
+import { CurrentIncomeStep } from '../containers/forms/CurrentIncome';
+import { CurrentExpensesStep } from '../containers/forms/CurrentExpenses';
+import { PredictionsStep } from '../containers/forms/Predictions';
+import { HouseholdStep } from '../containers/forms/Household';
+import { CurrentBenefitsStep } from './forms/CurrentBenefits';
 import StepBar from '../components/StepBar';
 import { BigButton } from '../forms/inputs';
 import { ButtonReset } from '../forms/ButtonReset';
 import PredictionsWarning from '../components/prompts/PredictionsWarning';
+import { setClientValue } from '../actions';
 
 class VisitPage extends Component {
   constructor (props) {
@@ -65,9 +67,8 @@ class VisitPage extends Component {
 
     this.steps = [
       {
-        form:              CurrentBenefitsStep,
-        key:               'currentBenefits',
-        updateClientValue: this.changeCurrent,
+        form: CurrentBenefitsStep,
+        key:  'currentBenefits',
       },
       {
         form:              HouseholdStep,
@@ -157,7 +158,9 @@ class VisitPage extends Component {
         routeList   = route.split('/'),
         id          = routeList[ 0 ],  // `routeList` gets mutated
         newEvent    = { time: time, route: routeList, value: value };
-
+
+    this.props.setClientValue({ time, route: routeList, value });      
+
     setNestedProperty(newEvent, clone, this.state.userChanged[ id ]);
     // Only set if the input was valid...? For now, always.
     // Also, userChanged should be only one step deep
@@ -396,4 +399,14 @@ class VisitPage extends Component {
   }
 }
 
-export default VisitPage;
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setClientValue({ time, route, value }) {
+      dispatch(
+        setClientValue({ time, route, value })
+      );
+    },
+  };
+};
+
+export default connect(null, mapDispatchToProps)(VisitPage);

src/containers/forms/CurrentBenefits.js

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+
+import { CurrentBenefitsStep } from '../../forms/CurrentBenefits';
+import { setClientValue } from '../../actions';
+
+const mapStateToProps = (state) => {
+  return {
+    currentClient: state.getIn([
+      'client',
+      'current', 
+    ]),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setHasBenefit({ benefit, value }) {
+      dispatch(
+        setClientValue({
+          time:  'current',
+          route: [ benefit ],
+          value,
+        })
+      );
+    },
+  };
+};
+
+const CurrentBenefitsContainer = connect(mapStateToProps, mapDispatchToProps)(CurrentBenefitsStep);
+
+export { CurrentBenefitsContainer as CurrentBenefitsStep };