Add missing files

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
   },
   plugins: ['react', 'react-hooks'],
   rules: {
+    'react/prop-types': ['off'],
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
     'react/default-props-match-prop-types': ['error'],

package.json

@@ -17,6 +17,7 @@
     "msw": "^0.28.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
+    "ramda": "^0.27.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.15.5",
@@ -60,4 +61,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

src/App.js

@@ -1,17 +1,121 @@
 import './App.css'
 
-import { Redirect, Route, Router, Switch } from 'react-router-dom'
+import { Button, AppBar, Toolbar, Typography } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import {
+  Redirect,
+  Route,
+  Router,
+  Switch,
+  useParams,
+  Link,
+} from 'react-router-dom'
 import { history } from 'utils/history'
 
 import { Example01 } from './examples/01'
+import { Example02 } from './examples/02'
+import { Example03 } from './examples/03'
+import { Example04 } from './examples/04'
+import { Example05 } from './examples/05'
+import { Example06 } from './examples/06'
 
-export const App = () => (
-  <Router history={history}>
-    <Switch>
-      <Route exact path='/'>
-        <Redirect to='/example01' />
-      </Route>
-      <Route path='/example01' component={Example01} />
-    </Switch>
-  </Router>
-)
+const examples = [
+  { key: 1, Component: Example01 },
+  { key: 2, Component: Example02 },
+  { key: 3, Component: Example03 },
+  { key: 4, Component: Example04 },
+  { key: 5, Component: Example05 },
+  { key: 6, Component: Example06 },
+]
+
+const fallbackUi = () => <h1>Example not found</h1>
+
+export const App = () => {
+  const classes = useStyles()
+  return (
+    <Router history={history}>
+      <div className={classes.container}>
+        <div className={classes.examples}>
+          <Switch>
+            <Route exact path='/'>
+              <Redirect to='/examples/01' />
+            </Route>
+            <Route
+              exact
+              path='/examples/:exampleId'
+              component={RenderExample}
+            />
+          </Switch>
+        </div>
+      </div>
+    </Router>
+  )
+}
+
+const Menu = () => {
+  const classes = useStyles()
+  const { exampleId } = useParams()
+
+  const id = Number(exampleId)
+  const first = Number(id) === 1
+  const last = Number(id) >= examples.length
+
+  return (
+    <AppBar position='fixed' color='primary' className={classes.appBar}>
+      <Toolbar className={classes.toolbar}>
+        {!first && (
+          <Button
+            variant='outlined'
+            component={Link}
+            to={`/examples/${id - 1}`}>
+            Previous
+          </Button>
+        )}
+        <Typography variant='h4'>Example #{id}</Typography>
+        {!last && (
+          <Button
+            variant='outlined'
+            component={Link}
+            to={`/examples/${id + 1}`}>
+            Next
+          </Button>
+        )}
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+const RenderExample = () => {
+  const { exampleId } = useParams()
+  const example = examples.find(({ key }) => Number(key) === Number(exampleId))
+  const Component = example?.Component ?? fallbackUi
+  return (
+    <>
+      <Menu />
+      <Component />
+    </>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  container: {
+    width: '100v',
+    height: '100vh',
+    display: 'flex',
+  },
+  examples: {
+    margin: 'auto',
+    maxWidth: '800px',
+  },
+  appBar: {
+    top: 'auto',
+    bottom: 0,
+  },
+  toolbar: {
+    justifyContent: 'center',
+    '& > *': {
+      marginLeft: 8,
+      marginRight: 8,
+    },
+  },
+}))

yarn.lock

@@ -8379,6 +8379,10 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
+ramda@^0.27.1:
+  version "0.27.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"