10 (API) - Side Effect

.env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8787

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/game/__tests__/Game.test.tsx

@@ -8,6 +8,12 @@ describe('Game', () => {
         lines: 6,
         linesPerMillisecond: 2,
         skills: {},
+        items: [{
+          id: 1,
+          name: 'Bash',
+          price: 10,
+          linesPerMillisecond: 0.1,
+        }],
       },
     }
 
@@ -17,6 +23,7 @@ describe('Game', () => {
     expect(screen.getByText(/per second: 20/)).toBeInTheDocument()
     expect(screen.getByText(/Skills/)).toBeInTheDocument()
     expect(screen.getByText(/Store/)).toBeInTheDocument()
+    expect(screen.getByText(/Bash/)).toBeInTheDocument()
 
     await screen.findByText(/8 lines/, undefined, { timeout: 150 })
     await screen.findByText(/10 lines/, undefined, { timeout: 150 })

src/components/game/core/__tests__/Score.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@/test-setup'
 describe('Score', () => {
   it('should display the number of lines', () => {
     const initialState = {
-      game: { lines: 6, linesPerMillisecond: 2, skills: {} },
+      game: { lines: 6, linesPerMillisecond: 2, skills: {}, items: [] },
     }
 
     render(<Score />, { preloadedState: initialState })

src/components/game/skills/Section.tsx

@@ -1,12 +1,15 @@
-import { items } from '@/constants/items'
+import { RootState } from '@/store'
+import getItemIcon from '@/utils/getItemIcon'
 import { Box, Grid2 as Grid, Typography } from '@mui/material'
+import { useSelector } from 'react-redux'
 
 type Props = {
   itemName: string
   number: number
 }
 
 export const Section = ({ itemName, number }: Props) => {
+  const items = useSelector((state: RootState) => state.game.items)
   const item = items.find(element => element.name === itemName)
 
   if (item == null) {
@@ -22,7 +25,7 @@ export const Section = ({ itemName, number }: Props) => {
             key={index}
           >
             <img
-              src={item.icon}
+              src={getItemIcon(item)}
               alt={item.name}
               style={{
                 width: '2rem',

src/components/game/skills/__tests__/Section.test.tsx

@@ -1,9 +1,22 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen } from '@/test-setup'
 import { Section } from '../Section'
 
 describe('Section', () => {
   it('displays the owned skills', () => {
-    render(<Section itemName="Bash" number={3} />)
+    const initialState = {
+      game: {
+        lines: 6,
+        linesPerMillisecond: 2,
+        skills: {},
+        items: [{
+          id: 1,
+          name: 'Bash',
+          price: 10,
+          linesPerMillisecond: 0.1,
+        }],
+      },
+    }
+    render(<Section itemName="Bash" number={3} />, { preloadedState: initialState })
 
     expect(screen.getByText('Bash')).toBeInTheDocument()
     expect(screen.getAllByAltText('Bash')).toHaveLength(3)

src/components/game/skills/__tests__/Skills.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@/test-setup'
 import { Skills } from '../Skills'
+import { items } from '@/utils/__mocks__/items.mock'
 
 describe('Skills', () => {
   it('renders correctly', () => {
@@ -8,6 +9,7 @@ describe('Skills', () => {
         lines: 6,
         linesPerMillisecond: 2,
         skills: { Bash: 2, Git: 3, Javascript: 4 },
+        items,
       },
     }
 

src/components/game/store/Item.tsx

@@ -1,6 +1,7 @@
 import '@/styles/game/store/item.css'
 import { Typography, Button } from '@mui/material'
 import { Item as ItemType } from '@/types'
+import getItemIcon from '@/utils/getItemIcon'
 
 type Props = {
   item: ItemType
@@ -19,14 +20,10 @@ export function Item({ item, lines, onBuy }: Props) {
       onClick={() => canBuy && onBuy(item)}
     >
       <div className="title">
-        <img src={item.icon} alt={item.name} />
+        <img src={getItemIcon(item)} alt={item.name} />
         <div>
           <Typography variant="subtitle1">{item.name}</Typography>
-          <small>
-            {linePerSecond}
-            {' '}
-            lines per second
-          </small>
+          <small>{linePerSecond} lines per second</small>
         </div>
       </div>
       <Button

src/components/game/store/Store.tsx

@@ -1,13 +1,13 @@
 import { Item as ItemType } from '@/types'
 import { Item } from './Item.tsx'
-import { items } from '@/constants/items.ts'
 import { Grid2 as Grid } from '@mui/material'
 import { buyItem } from '@/modules/game.ts'
 import { RootState } from '@/store.ts'
 import { useSelector, useDispatch } from 'react-redux'
 
 export function Store() {
   const lines = useSelector((state: RootState) => state.game.lines)
+  const items = useSelector((state: RootState) => state.game.items)
   const dispatch = useDispatch()
   const handleBuy = (item: ItemType) => dispatch(buyItem(item))
 

src/components/game/store/__tests__/Item.test.tsx

@@ -1,21 +1,14 @@
-import BashIcon from 'devicon/icons/bash/bash-original.svg'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { Item } from '../Item'
+import { items } from '@/utils/__mocks__/items.mock'
 
 describe('Item', () => {
   it('Renders a buyable item', () => {
-    const item = {
-      name: 'Bash',
-      price: 10,
-      linesPerMillisecond: 0.1,
-      icon: BashIcon,
-    }
-
     const onBuy = vi.fn()
 
     render(
       <Item
-        item={item}
+        item={items[0]}
         lines={150}
         onBuy={onBuy}
       />,
@@ -27,22 +20,15 @@ describe('Item', () => {
 
     fireEvent.click(screen.getByRole('button'))
 
-    expect(onBuy).toHaveBeenCalledWith(item)
+    expect(onBuy).toHaveBeenCalledWith(items[0])
   })
 
   it('Renders a non buyable item', () => {
-    const item = {
-      name: 'Bash',
-      price: 10,
-      linesPerMillisecond: 0.1,
-      icon: BashIcon,
-    }
-
     const onBuy = vi.fn()
 
     render(
       <Item
-        item={item}
+        item={items[0]}
         lines={0}
         onBuy={onBuy}
       />,
@@ -54,6 +40,6 @@ describe('Item', () => {
 
     fireEvent.click(screen.getByRole('button'))
 
-    expect(onBuy).not.toHaveBeenCalledWith(item)
+    expect(onBuy).not.toHaveBeenCalledWith(items[0])
   })
 })

src/components/game/store/__tests__/Store.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@/test-setup'
 import { Store } from '../Store'
+import { items } from '@/utils/__mocks__/items.mock'
 
 describe('Store', () => {
   it('renders correctly', () => {
@@ -8,6 +9,7 @@ describe('Store', () => {
         lines: 6,
         linesPerMillisecond: 2,
         skills: {},
+        items,
       },
     }
 

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"
         >