Form starter

package.json

@@ -14,6 +14,7 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@mui/icons-material": "^7.0.2",
     "@mui/material": "^6.4.8",
     "@reduxjs/toolkit": "^2.6.1",
     "devicon": "^2.16.0",

src/App.tsx

@@ -2,6 +2,10 @@ import { BrowserRouter, Routes, Route } from 'react-router'
 import Home from '@/pages/Home'
 import { Navbar } from '@/components/layout/Navbar'
 import GitClicker from '@/pages/GitClicker'
+import Rules from '@/pages/Rules'
+import { ItemsList } from '@/components/rules/ItemsList'
+import { CreateItemForm } from '@/components/rules/CreateItemForm'
+import { EditItemForm } from '@/components/rules/EditItemForm'
 
 export default function App() {
   return (
@@ -10,6 +14,11 @@ export default function App() {
         <Route path="/" element={<Navbar />}>
           <Route index element={<Home />} />
           <Route path="gitclicker" element={<GitClicker />} />
+          <Route path="rules" element={<Rules />}>
+            <Route index element={<ItemsList />} />
+            <Route path="add" element={<CreateItemForm />} />
+            <Route path="edit/:id" element={<EditItemForm />} />
+          </Route>
         </Route>
       </Routes>
     </BrowserRouter>

src/components/rules/CreateItemForm.tsx

@@ -0,0 +1,7 @@
+export function CreateItemForm() {
+  return (
+    <div>
+      CREATE ITEM FORM
+    </div>
+  )
+}

src/components/rules/EditItemForm.tsx

@@ -0,0 +1,7 @@
+export function EditItemForm() {
+  return (
+    <div>
+      EDIT ITEM FORM
+    </div>
+  )
+}

src/components/rules/ItemsList.tsx

@@ -0,0 +1,65 @@
+import { RootState } from '@/store'
+import numberFormat from '@/tests/numberFormat'
+import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, IconButton, Fab } from '@mui/material'
+import EditIcon from '@mui/icons-material/Edit'
+import DeleteIcon from '@mui/icons-material/Delete'
+import AddIcon from '@mui/icons-material/Add'
+import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router'
+
+export function ItemsList() {
+  const items = useSelector((state: RootState) => state.rules.items)
+  const navigate = useNavigate()
+
+  return (
+    <>
+      <TableContainer component={Paper}>
+        <Table aria-label="simple table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell align="right">Price</TableCell>
+              <TableCell align="right">Lines per seconds</TableCell>
+              <TableCell align="right">Action</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {items.map(item => (
+              <TableRow key={item.id}>
+                <TableCell component="th" scope="row">{item.name}</TableCell>
+                <TableCell align="right">{numberFormat(item.price)}</TableCell>
+                <TableCell align="right">{numberFormat(item.linesPerMillisecond * 10)}</TableCell>
+                <TableCell align="right">
+                  <IconButton
+                    onClick={() => navigate(`/rules/edit/${item.id}`)}
+                    aria-label="edit"
+                  >
+                    <EditIcon />
+                  </IconButton>
+                  <IconButton
+                    color="error"
+                    aria-label="delete"
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <Fab
+        onClick={() => navigate('/rules/add')}
+        color="primary"
+        aria-label="add"
+        sx={{
+          position: 'fixed',
+          bottom: 16,
+          right: 16,
+        }}
+      >
+        <AddIcon />
+      </Fab>
+    </>
+  )
+}

src/modules/index.ts

@@ -1,6 +1,8 @@
 import { combineReducers } from '@reduxjs/toolkit'
 import game from './game'
+import rules from './rules'
 
 export const rootReducer = combineReducers({
   game,
+  rules,
 })

src/modules/rules.ts

@@ -0,0 +1,42 @@
+import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+import { Item } from '@/types'
+
+// Initial state
+type RulesState = {
+  items: Item[]
+}
+
+const INITIAL_STATE: RulesState = {
+  items: [],
+}
+
+// Side Effects / thunks
+export const fetchItems = createAsyncThunk(
+  'rules/fetchItems',
+  async (_, { dispatch }) => {
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/shop/items`)
+    const items = await response.json() as Item[]
+
+    dispatch(fetchedItems(items))
+  },
+)
+
+const rules = createSlice({
+  name: 'rule',
+  initialState: INITIAL_STATE,
+  reducers: {
+    fetchedItems: (state, action: PayloadAction<Item[]>) => {
+      state.items = action.payload
+    },
+  },
+})
+
+const {
+  fetchedItems,
+} = rules.actions
+
+export {
+  fetchedItems,
+}
+
+export default rules.reducer

src/pages/Home.tsx

@@ -5,7 +5,7 @@ export default function Home() {
   return (
     <Container maxWidth="sm" component="main">
       <Grid container spacing={2} justifyContent="center">
-        <Typography component="h1" variant="h2" color="textPrimary">
+        <Typography component="h1" variant="h2" color="textPrimary" paddingTop={10}>
           Gitclicker
         </Typography>
         <Typography component="p" variant="h5" align="center" color="textSecondary">
@@ -17,6 +17,12 @@ export default function Home() {
             Play
           </Button>
         </Link>
+
+        <Link to="/rules">
+          <Button variant="contained" color="primary">
+            Rules
+          </Button>
+        </Link>
       </Grid>
     </Container>
   )

src/pages/Rules.tsx

@@ -0,0 +1,24 @@
+import { fetchItems } from '@/modules/rules'
+import { useAppDispatch } from '@/store'
+import { Container, Grid2 as Grid, Typography } from '@mui/material'
+import { useEffect } from 'react'
+import { Outlet } from 'react-router'
+
+export default function Rules() {
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    dispatch(fetchItems())
+  }, [])
+
+  return (
+    <Container maxWidth="sm" component="main">
+      <Grid container spacing={2} justifyContent="center">
+        <Typography component="h1" variant="h2" color="textPrimary" paddingBlock={10}>
+          Configurator
+        </Typography>
+      </Grid>
+      <Outlet />
+    </Container>
+  )
+}