only cache parts of state we want (#16)

Author: Adam Haglund

src/state/epics/cacheEpics.ts

@@ -4,12 +4,34 @@ import { isActionOf } from 'typesafe-actions'
 
 import { IRootActions, IRootState } from '@state/index'
 import { setTime } from '@state/actions/timerActions'
-import { addUser, removeUser, setActive, setOrder } from '@state/actions/usersActions'
+import {
+  addUser,
+  removeUser,
+  setActive,
+  setOrder,
+} from '@state/actions/usersActions'
 
 type EpicType = Epic<IRootActions, IRootActions, IRootState>
 const SAVE_TIMEOUT = 1000
 let saveTimer: number | null
 
+export interface ICachedState {
+  timer: {
+    timeLeft: {
+      minutes: number
+      seconds: number
+    }
+    duration: {
+      minutes: number
+      seconds: number
+    }
+  }
+  users: {
+    list: string[]
+    activeUser: number
+  }
+}
+
 export const cacheSaveSettingsEpic: EpicType = (action$, state$) =>
   action$.pipe(
     filter(isActionOf([setTime, addUser, removeUser, setOrder, setActive])), // More?
@@ -18,9 +40,19 @@ export const cacheSaveSettingsEpic: EpicType = (action$, state$) =>
         clearTimeout(saveTimer)
       }
 
-      const stateToSave: any = JSON.parse(JSON.stringify(state$.value))
-      stateToSave.timer.timeLeft = stateToSave.timer.duration
-      stateToSave.timer.timerLoop = null
+      const state = state$.value
+      const stateToSave: ICachedState = {
+        timer: {
+          // Set time left to duration so when people refresh page
+          // the timer has reset
+          timeLeft: state.timer.duration,
+          duration: state.timer.duration,
+        },
+        users: {
+          list: state.users.list as string[],
+          activeUser: state.users.activeUser,
+        },
+      }
 
       saveTimer = window.setTimeout(() => {
         localStorage.setItem('cache', JSON.stringify(stateToSave))

src/state/reducers/timerReducers.ts

@@ -1,6 +1,7 @@
 import { Reducer } from 'redux'
 
 import { IRootActions } from '@state/index'
+import { ICachedState } from '@state/epics/cacheEpics'
 import {
   COUNT_DOWN_ONE_SECOND,
   SET_TIME,
@@ -12,10 +13,10 @@ import {
 import { Time } from '../../time'
 
 export interface IStateTimer {
-  readonly counting: boolean
-  readonly timeLeft: Time
-  readonly duration: Time
-  readonly notifications: ReadonlyArray<Notification>
+  counting: boolean
+  timeLeft: Time
+  duration: Time
+  notifications: ReadonlyArray<Notification>
 }
 
 const initialState: IStateTimer = {
@@ -25,18 +26,23 @@ const initialState: IStateTimer = {
   notifications: [],
 }
 
-const cachedSettings = JSON.parse(
+const { timer: cachedTimer } = JSON.parse(
   localStorage.getItem('cache') || '{ "timer": null }'
-).timer
-
-if (cachedSettings) {
-  cachedSettings.timeLeft = Time.fromTime(cachedSettings.timeLeft)
-
-  cachedSettings.duration = Time.fromTime(cachedSettings.duration)
+) as ICachedState
+
+if (cachedTimer) {
+  initialState.timeLeft = new Time(
+    initialState.timeLeft.minutes,
+    initialState.timeLeft.seconds
+  )
+  initialState.duration = new Time(
+    cachedTimer.duration.minutes,
+    cachedTimer.duration.seconds
+  )
 }
 
 export const timerReducers: Reducer<IStateTimer, IRootActions> = (
-  state = { ...initialState, ...cachedSettings },
+  state = { ...initialState },
   action
 ) => {
   switch (action.type) {
@@ -75,13 +81,9 @@ export const timerReducers: Reducer<IStateTimer, IRootActions> = (
     case ADD_NOTIFICATION:
       return {
         ...state,
-        notifications: [
-          action.payload,
-          ...state.notifications,
-        ],
+        notifications: [action.payload, ...state.notifications],
       }
 
-
     default:
       return state
   }

src/state/reducers/usersReducers.ts

@@ -1,6 +1,7 @@
 import { Reducer } from 'redux'
 
 import { IRootActions } from '@state/index'
+import { ICachedState } from '@state/epics/cacheEpics'
 import {
   ADD_USER,
   REMOVE_USER,
@@ -11,9 +12,9 @@ import {
 } from '@state/actions/constants'
 
 export interface IStateUsers {
-  readonly list: ReadonlyArray<string>
-  readonly activeUser: number
-  readonly hideUserList: boolean
+  list: ReadonlyArray<string>
+  activeUser: number
+  hideUserList: boolean
 }
 
 const initialState: IStateUsers = {
@@ -22,12 +23,17 @@ const initialState: IStateUsers = {
   hideUserList: true,
 }
 
-const cachedSettings = JSON.parse(
+const { users: cachedUsers } = JSON.parse(
   localStorage.getItem('cache') || '{ "users": null }'
-).users
+) as ICachedState
+
+if (cachedUsers) {
+  initialState.list = cachedUsers.list
+  initialState.activeUser = cachedUsers.activeUser
+}
 
 export const usersReducers: Reducer<IStateUsers, IRootActions> = (
-  state = { ...initialState, ...cachedSettings },
+  state = { ...initialState },
   action
 ) => {
   switch (action.type) {

src/time.ts

@@ -3,12 +3,8 @@ export class Time {
   public readonly seconds: number
 
   constructor(minutes: number = 0, seconds: number = 0) {
-    this.minutes = this.clamp(minutes, 0, 99)
-    this.seconds = this.clamp(seconds, 0, 59)
-  }
-
-  private clamp(x: number, min: number, max: number) {
-    return Math.max(min, Math.min(x, max))
+    this.minutes = Time.clamp(minutes, 0, 99)
+    this.seconds = Time.clamp(seconds, 0, 59)
   }
 
   public toString() {
@@ -32,21 +28,15 @@ export class Time {
     return new Time(newMinutes, newSeconds)
   }
 
-  public static fromTime = (time: Time) => new Time(time.minutes, time.seconds)
-
-  public static fromString = (str: string) => {
-    const match = str.match(/^(\d{2}):(\d{2})$/)
-
-    if (!match || !match[1] || !match[2] || match[3]) {
-      throw new Error('Invalid Time String')
-    }
-
-    return new Time(Number(match[1]), Number(match[2]))
-  }
-
   public equals(other: Time) {
     return this.minutes === other.minutes && this.seconds === other.seconds
   }
 
   public toSeconds = () => this.minutes * 60 + this.seconds
+
+  private static clamp(x: number, min: number, max: number) {
+    return Math.max(min, Math.min(x, max))
+  }
+
+  public static fromTime = (time: Time) => new Time(time.minutes, time.seconds)
 }