feat: setup rules configuration interface

Author: AntoineGonzalez

src/components/App.tsx

@@ -8,6 +8,10 @@ import './App.css'
 import { CssBaseline } from '@material-ui/core'
 import { Provider } from 'react-redux'
 import store from '../store'
+import { Rules } from './Rules'
+import { ItemsList } from './Rules/ItemsList'
+import { CreateItemForm } from './Rules/CreateItemForm'
+import { EditItemForm } from './Rules/EditItemForm'
 
 const router = createBrowserRouter([
   {
@@ -17,6 +21,24 @@ const router = createBrowserRouter([
   {
     path: '/gitclicker',
     element: <Game />
+  },
+  {
+    path: '/rules',
+    element: <Rules />,
+    children: [
+      {
+        path: '/rules',
+        element: <ItemsList />
+      },
+      {
+        path: '/rules/add',
+        element: <CreateItemForm />
+      },
+      {
+        path: '/rules/edit/:id',
+        element: <EditItemForm />
+      }
+    ]
   }
 ])
 

src/components/Home.tsx

@@ -40,6 +40,13 @@ export function Home() {
                     </Button>
                   </Link>
                 </Grid>
+                <Grid item>
+                  <Link to="/rules">
+                    <Button variant="contained" color="primary">
+                      Rules
+                    </Button>
+                  </Link>
+                </Grid>
               </Grid>
             </div>
           </Container>

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,82 @@
+import { useSelector } from 'react-redux'
+import DeleteIcon from '@material-ui/icons/Delete'
+import EditIcon from '@material-ui/icons/Edit'
+import IconButton from '@material-ui/core/IconButton'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableContainer from '@material-ui/core/TableContainer'
+import TableHead from '@material-ui/core/TableHead'
+import TableRow from '@material-ui/core/TableRow'
+import Paper from '@material-ui/core/Paper'
+import AddIcon from '@material-ui/icons/Add'
+import numberFormat from '../../utils/numberFormat'
+import { RootState } from '../../store'
+import { useNavigate } from 'react-router-dom'
+import { Fab, makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles((theme) => ({
+  heroContent: {
+    padding: theme.spacing(8, 0, 6),
+  },
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+}))
+
+
+export const ItemsList = () => {
+  const items = useSelector((state: RootState) => state.rules.items)
+  const classes = useStyles()
+  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="secondary"
+                    aria-label="delete"
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <Fab
+        onClick={() => navigate('/rules/add')}
+        className={classes.fab}
+        color="primary"
+        aria-label="add"
+      >
+        <AddIcon />
+      </Fab>
+    </>
+  )
+}

src/components/Rules/Rules.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+import { Outlet } from 'react-router-dom'
+import Typography from '@material-ui/core/Typography'
+import { makeStyles } from '@material-ui/core/styles'
+import Container from '@material-ui/core/Container'
+import { fetchItems } from '../../modules/rules'
+import { Navbar } from '../layout/Navbar'
+import { useAppDispatch } from '../../store'
+
+const useStyles = makeStyles((theme) => ({
+  heroContent: {
+    padding: theme.spacing(8, 0, 6),
+  },
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+}))
+
+export const Rules = () => {
+  const classes = useStyles()
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    dispatch(fetchItems())
+  }, [])
+
+  return (
+    <>
+      <Navbar />
+      <main>
+        <div className={classes.heroContent}>
+          <Container maxWidth="sm">
+            <Typography component="h1" variant="h2" align="center" color="textPrimary" gutterBottom>
+              Configurator
+            </Typography>
+            <Outlet />
+          </Container>
+        </div>
+      </main>
+    </>
+  )
+}

src/components/Rules/index.ts

@@ -0,0 +1 @@
+export { Rules } from './Rules'

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: game.reducer
+    game: game.reducer,
+    rules: rules.reducer
 })

src/modules/rules.ts

@@ -0,0 +1,42 @@
+import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+import { Item } from '../type'
+
+// 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(`${process.env.REACT_APP_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

src/utils/getItemIcon.test.ts

@@ -0,0 +1,27 @@
+import BashIcon from 'devicon/icons/bash/bash-original.svg'
+import IEIcon from 'devicon/icons/ie10/ie10-original.svg'
+import getItemIcon from './getItemIcon'
+
+describe('getItemIcon', () => {
+  it('provides icon for a known item', () => {
+    const item = {
+      id: 1,
+      name: 'Bash',
+      price: 10,
+      linesPerMillisecond: 0.5
+    }
+
+    expect(getItemIcon(item)).toBe(BashIcon)
+  })
+
+  it('provides default icon for unknown item', () => {
+    const item = {
+      id: 1,
+      name: 'Unknown item',
+      price: 10,
+      linesPerMillisecond: 0.5
+    }
+
+    expect(getItemIcon(item)).toBe(IEIcon)
+  })
+})