Setup foundation of centralizing user state (#142)

Setup foundation of centralizing user state

Author: thadk

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2017,
+    sourceType: 'module',
+  },
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+  },
+}

globals.d.ts

@@ -0,0 +1,9 @@
+declare namespace NodeJS {
+  // By default, Typescript does not have sessionStorage on the Global type. We add it here.
+  interface Global {
+    sessionStorage: {
+      getItem: (key: string) => string
+      setItem: (key: string, value: string) => void
+    }
+  }
+}

package.json

@@ -10,7 +10,9 @@
     "@observablehq/runtime": "4.2.1",
     "@reach/router": "^1.2.1",
     "@rebass/grid": "^6.0.0",
+    "@types/react-datepicker": "^2.10.0",
     "@types/react-helmet": "^5.0.8",
+    "@types/use-persisted-state": "^0.3.0",
     "babel-preset-gatsby": "^0.1.11",
     "d3": "^5.11.0",
     "dayjs": "^1.8.15",
@@ -36,14 +38,20 @@
     "react-helmet": "^5.2.0",
     "tesseract.js": "^2.0.0-alpha.11",
     "typescript": "^3.3.4000",
+    "use-persisted-state": "^0.3.0",
     "windfall-awareness-notebook-prototype": "https://api.observablehq.com/@thadk/windfall-awareness-notebook-prototype.tgz?v=1"
   },
   "devDependencies": {
     "@types/rc-slider": "^8.6.5",
     "@types/react": "^16.8.8",
     "@types/react-dom": "^16.8.3",
+    "@typescript-eslint/eslint-plugin": "^2.15.0",
+    "@typescript-eslint/parser": "^2.15.0",
     "babel-jest": "^24.9.0",
     "babel-plugin-emotion": "^10.0.9",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "prettier": "^1.16.4",
@@ -59,7 +67,7 @@
     "format": "prettier --write src/**/*.{js,jsx,tsx}",
     "start": "npm run develop",
     "serve": "gatsby serve",
-    "test": "jest"
+    "test": "eslint . --ext=ts,tsx && jest"
   },
   "repository": {
     "type": "git",

src/layouts/index.tsx

@@ -5,6 +5,7 @@ import { Location } from "@reach/router";
 import { Header, QuestionProvider, Footer, ButtonLink, ButtonLinkGreen } from "../components";
 import "./layout.css";
 import { ProgressTracker } from "../components/progress-tracker";
+import UserStateManager from "../library/user-state-manager"
 
 const Wrapper = styled("div")`
   display: block;
@@ -89,20 +90,24 @@ const Layout = ({ children }) => (
         <Header />
         <link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat&display=swap" rel="stylesheet"/>
         <ContentContainer>
-        <Location>
-          {({ location }) => (
-            <ProgressTracker
-              linkProps={LINKSPATH}
-              activePath={location.pathname}
-            />
-          )}
-        </Location>
+          <Location>
+            {({ location }) => (
+              <ProgressTracker
+                linkProps={LINKSPATH}
+                activePath={location.pathname}
+              />
+            )}
+          </Location>
           <Main id='child-wrapper'>
-            {/* TODO test out this provider */}
-            <QuestionProvider>{children}</QuestionProvider>
+            <UserStateManager>
+              {/* TODO test out this provider */}
+              <QuestionProvider>
+                {children}
+              </QuestionProvider>
+            </UserStateManager>
           </Main>
-          </ContentContainer>
-          <Footer>
+        </ContentContainer>
+        <Footer>
         <Location>
           {({ location }) => {
             const index = LINKSPATH.findIndex(path => path.path === location.pathname)
@@ -149,4 +154,4 @@ const Layout = ({ children }) => (
   />
 );
 
-export default Layout;
+export default Layout;

src/library/user-state-actions-context.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+export interface UserStateActions {
+  setBirthDate: (date: Date) => void
+  setRetireDate: (date: Date) => void
+}
+
+const UserStateActionsContext = React.createContext<UserStateActions | null>(null)
+
+export const UserStateActionsContextProvider = UserStateActionsContext.Provider
+
+export function useUserStateActions(): UserStateActions {
+  const actions = React.useContext(UserStateActionsContext)
+  if (!actions) {
+    throw new Error('Cannot access user state actions outside of a `<UserStateManager>`.')
+  }
+  return actions
+}

src/library/user-state-context.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+export interface UserState {
+  birthDate: Date | null
+  retireDate: Date | null
+}
+
+const UserStateContext = React.createContext<UserState | null>(null)
+
+export const UserStateContextProvider = UserStateContext.Provider
+
+export function useUserState(): UserState {
+  const userState = React.useContext(UserStateContext)
+  if (!userState) {
+    throw new Error('Cannot access user state outside of a `<UserStateManager>`.')
+  }
+  return userState
+}

src/library/user-state-manager.tsx

@@ -0,0 +1,49 @@
+import React, {useMemo} from 'react'
+import createPersistedState from 'use-persisted-state';
+import dayjs from 'dayjs'
+
+import {UserStateContextProvider, UserState} from './user-state-context'
+import {UserStateActions, UserStateActionsContextProvider} from './user-state-actions-context'
+
+// Must use sessionStorage (not localStorage) or else it conflicts with other uses of sessionStorage within app
+const useBirthDateState = createPersistedState('BirthDate', global.sessionStorage);
+const useRetireDateState = createPersistedState('RetireDate', global.sessionStorage);
+
+/**
+ * Helper function to get a Date object equivalent to the start of the date given
+ */
+function startOfDay(date: Date): Date {
+  return dayjs(date).startOf('day').toDate()
+}
+
+interface UserStateManagerProps {
+  children: React.ReactNode
+}
+
+/**
+ * Serve as a multi-context provider for descendent components, providing them with access to
+ * the user state and a set of actions to mutate that state, while persisting it to session storage.
+ */
+export default function UserStateManager(props: UserStateManagerProps): JSX.Element {
+  const {children} = props
+  const [birthDate, setBirthDate] = useBirthDateState<Date | null>(null)
+  const [retireDate, setRetireDate] = useRetireDateState<Date | null>(null)
+
+  const actions: UserStateActions = useMemo(() => ({
+    setBirthDate: date => setBirthDate(startOfDay(date)),
+    setRetireDate: date => setRetireDate(startOfDay(date)),
+  }), [setBirthDate, setRetireDate])
+
+  const userState: UserState = useMemo(() => ({
+    birthDate: birthDate ? new Date(birthDate) : null,
+    retireDate: retireDate ? new Date(retireDate) : null,
+  }), [birthDate, retireDate])
+
+  return (
+    <UserStateContextProvider value={userState}>
+      <UserStateActionsContextProvider value={actions}>
+        {children}
+      </UserStateActionsContextProvider>
+    </UserStateContextProvider>
+  )
+}

src/pages/prescreen-1a.tsx

@@ -7,6 +7,9 @@ import { colors } from "../constants";
 import { SessionStore } from "../library/session-store";
 import dayjs from "dayjs";
 
+import {UserState, useUserState} from '../library/user-state-context'
+import {UserStateActions, useUserStateActions} from '../library/user-state-actions-context'
+
 import {
   TextBlock,
   SEO,
@@ -31,26 +34,25 @@ const H4 = styled.h4`
 margin: 5px 0;
 `
 
-export default class Prescreen1c extends React.Component {
+interface Prescreen1aProps {
+  userState: UserState
+  userStateActions: UserStateActions
+}
+
+interface Prescreen1aState {
+  retireAge: number | null
+}
+
+class Prescreen1a extends React.Component<Prescreen1aProps, Prescreen1aState> {
+  public state: Prescreen1aState = {
+    retireAge: null,
+  }
   constructor(props, context){
     super(props, context)
     this.handleDateChange = this.handleDateChange.bind(this);
-    this.state = {
-      birthDate: null,
-      retireAge: null,
-      retireDate: null
-    };
   }
 
   componentDidMount() {
-    if (SessionStore.get("BirthDate") && (this.state.birthDate === null)){
-      var birthdate = new Date(JSON.parse(SessionStore.get("BirthDate")))
-      this.setState({
-        birthDate: birthdate
-      })
-
-    }
-
     if (this.state.retireAge === null) {
       if (SessionStore.get("RetireAge") !== null) {
         var retireAge = JSON.parse(SessionStore.get("RetireAge"))
@@ -63,25 +65,24 @@ export default class Prescreen1c extends React.Component {
     }
   }
 
-  async handleDateChange(name, value){
+  async handleDateChange(name, value) {
+    const {userStateActions, userState} = this.props
+    const {birthDate} = userState
     if (name === "birthDatePicked") {
-      SessionStore.push("BirthDate", JSON.stringify(value))
+      userStateActions.setBirthDate(value)
       var year62 = new Date(value).getFullYear() + 62;
       SessionStore.push("Year62", year62)
-      var fullRetirementAge = await ObsFuncs.getFullRetirementDateSimple(this.state.birthDate)
+      var fullRetirementAge = await ObsFuncs.getFullRetirementDateSimple(birthDate)
       this.setRetireDate(value, fullRetirementAge)
-      var state = {birthDate: value}
-      this.setState(state)
     }
   }
 
   async setRetireDate(dateOfBirth, retireAge) {
+    const {userStateActions} = this.props
     var retireDate = dayjs(dateOfBirth).add(await retireAge, 'years').toDate()
-    SessionStore.push("RetireDate", JSON.stringify(retireDate))
+    userStateActions.setRetireDate(retireDate)
     this.setState({
       retireAge: JSON.stringify(retireAge),
-      retireDate: JSON.stringify(retireDate),
-      retireDateYear: JSON.stringify(retireDate.getFullYear()),
     })
   }
 
@@ -96,6 +97,9 @@ export default class Prescreen1c extends React.Component {
 //   }
 
     render() {
+        const {userState} = this.props
+        const {birthDate, retireDate} = userState
+        const retireDateYear = retireDate ? retireDate.getFullYear() : null
         return (
             <div>
                 <SEO title="Pre-Screen 1a" keywords={[`gatsby`, `application`, `react`]} />
@@ -108,21 +112,29 @@ export default class Prescreen1c extends React.Component {
                     <StyledDatePicker
                     id="birthDatePicked"
                     placeholderText="Click to select a date"
-                    selected={this.state.birthDate}
+                    selected={birthDate}
                     showYearDropdown
-                    openToDate={this.state.birthDate || dayjs().subtract(64, 'years').toDate()}
+                    openToDate={birthDate || dayjs().subtract(64, 'years').toDate()}
                     onChange={(value) => this.handleDateChange("birthDatePicked", value)}
                     />
                   </Card>
-                  { this.state.retireDateYear && 
+                  { retireDateYear && 
                     <Card>
                     <H4>Retirement Age</H4>
                     <p>Your Full Retirement Age (FRA) to collect Social Security
                        Benefits is {this.state.retireAge} years old, which is in
-                        year {this.state.retireDateYear}.</p>
+                        year {retireDateYear}.</p>
                   </Card>
                   }
             </div>
          )
     }
 }
+
+export default function Prescreen1aWrapper() {
+  const userStateActions = useUserStateActions()
+  const userState = useUserState()
+  return (
+    <Prescreen1a userState={userState} userStateActions={userStateActions} />
+  )
+}