10 - Side Effect

src/components/game/Game.tsx

@@ -4,20 +4,22 @@ import { Grid2 as Grid, Card, CardContent, CardHeader } from '@mui/material'
 import { Score, Gitcoin } from '@/components/game/core'
 import { Skills } from '@/components/game/skills'
 import { Store } from '@/components/game/store'
-import { loop } from '@/modules/game'
-
-import { useDispatch } from 'react-redux'
+import { loop, start, stop } from '@/modules/game'
+import { useAppDispatch } from '@/store'
 
 export function Game() {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
   useEffect(() => {
+    dispatch(start())
     const interval = setInterval(() => {
       dispatch(loop())
     }, 100)
 
-    return () => clearInterval(interval)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    return () => {
+      clearInterval(interval)
+      dispatch(stop())
+    }
   }, [])
 
   return (

src/components/layout/__tests__/__snapshots__/Navbar.test.tsx.snap

@@ -14,17 +14,10 @@ exports[`Navbar page > renders correctly 1`] = `
         data-discover="true"
         href="/"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
-          data-testid="GitHubIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"
-          />
-        </svg>
+        <img
+          alt="Gitcoin"
+          src="data:image/svg+xml,%3csvg%20width='98'%20height='96'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M48.854%200C21.839%200%200%2022%200%2049.217c0%2021.756%2013.993%2040.172%2033.405%2046.69%202.427.49%203.316-1.059%203.316-2.362%200-1.141-.08-5.052-.08-9.127-13.59%202.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015%204.934.326%207.523%205.052%207.523%205.052%204.367%207.496%2011.404%205.378%2014.235%204.074.404-3.178%201.699-5.378%203.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283%200-5.378%201.94-9.778%205.014-13.2-.485-1.222-2.184-6.275.486-13.038%200%200%204.125-1.304%2013.426%205.052a46.97%2046.97%200%200%201%2012.214-1.63c4.125%200%208.33.571%2012.213%201.63%209.302-6.356%2013.427-5.052%2013.427-5.052%202.67%206.763.97%2011.816.485%2013.038%203.155%203.422%205.015%207.822%205.015%2013.2%200%2018.905-11.404%2023.06-22.324%2024.283%201.78%201.548%203.316%204.481%203.316%209.126%200%206.6-.08%2011.897-.08%2013.526%200%201.304.89%202.853%203.316%202.364%2019.412-6.52%2033.405-24.935%2033.405-46.691C97.707%2022%2075.788%200%2048.854%200z'%20fill='%2324292f'/%3e%3c/svg%3e"
+        />
         <h6
           class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap css-1tl44qx-MuiTypography-root"
         >

src/modules/__tests__/game.test.ts

@@ -1,4 +1,4 @@
-import game, { buyItem, click, loop } from '../game'
+import gameReducer, { buyItem, click, loop } from '../game'
 
 describe('game reducer', () => {
   it('should handle loop action', () => {
@@ -16,7 +16,7 @@ describe('game reducer', () => {
       skills: {},
     }
 
-    expect(game(state, action)).toEqual(expectedState)
+    expect(gameReducer(state, action)).toEqual(expectedState)
   })
 
   it('should handle click action', () => {
@@ -34,7 +34,7 @@ describe('game reducer', () => {
       skills: {},
     }
 
-    expect(game(state, action)).toEqual(expectedState)
+    expect(gameReducer(state, action)).toEqual(expectedState)
   })
 
   it('should handle buyItem action, with no existing skills', () => {
@@ -61,7 +61,7 @@ describe('game reducer', () => {
       },
     }
 
-    expect(game(state, action)).toEqual(expectedState)
+    expect(gameReducer(state, action)).toEqual(expectedState)
   })
 
   it('should handle buyItem action, when the skill has already been bought', () => {
@@ -90,7 +90,7 @@ describe('game reducer', () => {
       },
     }
 
-    expect(game(state, action)).toEqual(expectedState)
+    expect(gameReducer(state, action)).toEqual(expectedState)
   })
 
   it('should handle buyItem action, when another skill has already been bought', () => {
@@ -123,7 +123,7 @@ describe('game reducer', () => {
       },
     }
 
-    expect(game(state, action)).toEqual(expectedState)
+    expect(gameReducer(state, action)).toEqual(expectedState)
   })
 
   it('should handle unknown action', () => {
@@ -135,6 +135,6 @@ describe('game reducer', () => {
 
     const action = { type: 'UNKNOWN ACTION' }
 
-    expect(game(state, action)).toEqual(state)
+    expect(gameReducer(state, action)).toEqual(state)
   })
 })

src/modules/game.ts

@@ -1,5 +1,6 @@
+import { RootState } from '@/store'
 import type { OwnedItems, Item } from '@/types'
-import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 
 // Initial state
 type GameState = {
@@ -14,10 +15,37 @@ const INITIAL_STATE: GameState = {
   skills: {},
 }
 
+// Side Effects / thunks
+export const start = createAsyncThunk(
+  'game/start',
+  async (_, { dispatch }) => {
+    const localStoredGame = localStorage.getItem('game')
+    const initalGameState = localStoredGame ? JSON.parse(localStoredGame) : {}
+
+    dispatch(initGame(initalGameState))
+  },
+)
+
+export const stop = createAsyncThunk(
+  'game/stop',
+  async (_, { getState }) => {
+    const state = getState() as RootState
+    const serializedGameState = JSON.stringify(state.game)
+
+    localStorage.setItem('game', serializedGameState)
+  },
+)
+
 const game = createSlice({
   name: 'game',
   initialState: INITIAL_STATE,
   reducers: {
+    initGame: (state, action: PayloadAction<GameState>) => {
+      return {
+        ...state,
+        ...action.payload,
+      }
+    },
     click: (state) => {
       state.lines += 1
     },
@@ -40,6 +68,6 @@ const game = createSlice({
   },
 })
 
-export const { click, buyItem, loop } = game.actions
+export const { click, buyItem, loop, initGame } = game.actions
 
 export default game.reducer

src/store.ts

@@ -1,5 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { rootReducer } from './modules'
+import { useDispatch } from 'react-redux'
 
 export function createStore(preloadedState = {}) {
   return configureStore({
@@ -12,4 +13,7 @@ const store = createStore()
 
 export type RootState = ReturnType<typeof store.getState>
 
+export type AppDispatch = typeof store.dispatch
+export const useAppDispatch: () => AppDispatch = useDispatch
+
 export default store