feat: step 8 - Routing and page skeleton for configurator

src/components/App.js

@@ -9,6 +9,7 @@ import CssBaseline from '@material-ui/core/CssBaseline'
 import './App.css'
 import { Game } from './Game'
 import { Home } from './Home'
+import { Rules } from './Rules'
 import configureStore from '../configureStore'
 
 const store = configureStore()
@@ -25,6 +26,9 @@ export const App = () => {
           <Route path="/game">
             <Game />
           </Route>
+          <Route path="/rules">
+            <Rules />
+          </Route>
         </Switch>
       </Router>
     </Provider>

src/components/Home.js

@@ -43,9 +43,11 @@ export const Home = () => {
                   </Link>
                 </Grid>
                 <Grid item>
-                  <Button variant="outlined" color="primary">
-                    Secondary action
-                  </Button>
+                  <Link to="/rules">
+                    <Button variant="outlined" color="primary">
+                      Rules
+                    </Button>
+                  </Link>
                 </Grid>
               </Grid>
             </div>

src/components/Rules/CreateItemForm.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const CreateItemForm = () => {
+  return (
+    <h1>CreateItemForm</h1>
+  )
+}

src/components/Rules/EditItemForm.js

@@ -0,0 +1,8 @@
+import React from 'react'
+
+export const EditItemForm = () => {
+  return (
+    <h1>EditItemForm</h1>
+  )
+}
+

src/components/Rules/ItemsList.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { useHistory } from 'react-router'
+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 numberFormat from 'utils/numberFormat'
+
+export const ItemsList = () => {
+  const items = useSelector(state => state.rules.items)
+  const history = useHistory()
+
+   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.multiplier * 10)}</TableCell>
+               <TableCell align="right">
+                 <IconButton
+                   onClick={() => history.push(`/rules/edit/${item.id}`)}
+                   aria-label="edit"
+                 >
+                   <EditIcon />
+                 </IconButton>
+                 <IconButton
+                   color="secondary"
+                   aria-label="delete"
+                 >
+                   <DeleteIcon />
+                 </IconButton>
+               </TableCell>
+             </TableRow>
+           ))}
+         </TableBody>
+       </Table>
+     </TableContainer>
+   )
+}

src/components/Rules/Rules.js

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react'
+import { Switch, Route } from 'react-router-dom'
+import { useHistory } from 'react-router'
+import { useDispatch } from 'react-redux'
+import AddIcon from '@material-ui/icons/Add'
+import Fab from '@material-ui/core/Fab'
+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 { ItemsList } from './ItemsList'
+import { CreateItemForm } from './CreateItemForm'
+import { EditItemForm } from './EditItemForm'
+
+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 = useDispatch()
+  const history = useHistory()
+
+  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>
+
+            <Switch>
+              <Route exact path="/rules">
+                <ItemsList />
+              </Route>
+              <Route path="/rules/add">
+                <CreateItemForm />
+              </Route>
+              <Route path="/rules/edit/:id">
+                <EditItemForm />
+              </Route>
+            </Switch>
+          </Container>
+        </div>
+      </main>
+
+      <Switch>
+        <Route exact path="/rules">
+          <Fab 
+            onClick={() => history.push('/rules/add') }
+            className={classes.fab} 
+            color="primary" 
+            aria-label="add"
+          >
+            <AddIcon />
+          </Fab>
+        </Route>
+      </Switch>
+    </>
+  )
+}
+

src/components/Rules/index.js

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

src/modules/index.js

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

src/modules/rules.js

@@ -0,0 +1,30 @@
+// Actions
+export const FETCHED_ITEMS = 'rules::FETCH_ITEMS'
+
+// Side effects
+export const fetchItems = () => async dispatch => {
+  const response = await fetch(`${process.env.REACT_APP_API_URL}/api/shop/items`)
+  const items = await response.json()
+
+  return dispatch({
+    type: FETCHED_ITEMS,
+    items
+  })
+}
+
+const INITIAL_STATE = {
+  items: []
+}
+
+export const reducer = (state = INITIAL_STATE, action) => {
+  const { type } = action
+
+  if (type === FETCHED_ITEMS) {
+    return {
+      ...state,
+      items: action.items
+    }
+  }
+
+  return state
+}