Resolve "Add admin-view"

.gitignore

@@ -2,5 +2,6 @@ __pycache__
 *.db
 */env
 *.coverage
+*/coverage
 htmlcov
 .pytest_cache
\ No newline at end of file

.vscode/tasks.json

@@ -17,7 +17,7 @@
             "type": "npm",
             "script": "test:coverage:html",
             "path": "client/",
-            "group": "test",
+            "group": "build",
             "problemMatcher": [],
         },
         {

client/package-lock.json

@@ -1753,6 +1753,14 @@
         "react-transition-group": "^4.4.0"
       }
     },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/lab": {
       "version": "4.0.0-alpha.57",
       "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz",

client/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
@@ -63,11 +64,12 @@
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,tsx,ts}",
       "!src/index.tsx",
-      "!src/reportWebVitals.ts"
+      "!src/reportWebVitals.ts",
+      "!src/components/TestConnection.tsx"
     ],
     "coverageReporters": [
       "text",
-      "cobertura", 
+      "cobertura",
       "html"
     ]
   },

client/src/App.tsx

 import React from 'react'
-import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import './App.css'
-import LoginForm from './components/Login'
-import TestConnection from './components/TestConnection'
+import Main from './Main'
 
 const App: React.FC = () => {
   return (
@@ -11,15 +9,7 @@ const App: React.FC = () => {
         rel="stylesheet"
         href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
       />
-      <h1>Application</h1>
-      <TestConnection />
-      <BrowserRouter>
-        <Switch>
-          <Route path="/">
-            <LoginForm />
-          </Route>
-        </Switch>
-      </BrowserRouter>
+      <Main />
     </div>
   )
 }

client/src/Main.tsx

+import React from 'react'
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import AdminView from './components/AdminView'
+import LoginForm from './components/Login'
+
+const Main = () => {
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route exact path="/" component={LoginForm} />
+        <Route path="/admin" component={AdminView} />
+      </Switch>
+    </BrowserRouter>
+  )
+}
+
+export default Main

client/src/components/AdminView.css

+.background {
+  background: linear-gradient(to top, #efd5ff 0%, #3d55b3 100%);
+  height: 100%;
+}
+
+.top-bar {
+  display:flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
\ No newline at end of file

client/src/components/AdminView.test.tsx

+import { render } from '@testing-library/react'
+import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+import AdminView from './AdminView'
+
+it('renders admin view', () => {
+  render(
+    <BrowserRouter>
+      <AdminView />
+    </BrowserRouter>
+  )
+})

client/src/components/AdminView.tsx

+import {
+  AppBar,
+  Button,
+  CssBaseline,
+  Divider,
+  Drawer,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+  Typography
+} from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import DashboardIcon from '@material-ui/icons/Dashboard'
+import MailIcon from '@material-ui/icons/Mail'
+import React from 'react'
+import { Link, Route, Switch, useRouteMatch } from 'react-router-dom'
+import './AdminView.css'
+import CompetitionManager from './CompetitionManager'
+import Regions from './Regions'
+
+const drawerWidth = 240
+const menuItems = ['Startsida', 'Regioner', 'Användare', 'Tävlingshanterare']
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex'
+    },
+    appBar: {
+      width: `calc(100% - ${drawerWidth}px)`,
+      marginLeft: drawerWidth
+    },
+    drawer: {
+      width: drawerWidth,
+      flexShrink: 0,
+      marginRight: drawerWidth
+    },
+    drawerPaper: {
+      width: drawerWidth
+    },
+    // necessary for content to be below app bar
+    toolbar: theme.mixins.toolbar,
+    content: {
+      flexGrow: 1,
+      backgroundColor: theme.palette.background.default,
+      paddingLeft: theme.spacing(30)
+    }
+  })
+)
+
+const AdminView: React.FC = (props) => {
+  const classes = useStyles()
+  const [openIndex, setOpenIndex] = React.useState(0)
+  const match = useRouteMatch()
+  console.log(match)
+  const { path, url } = match
+  return (
+    <div className={classes.root}>
+      <CssBaseline />
+      <AppBar position="fixed" className={classes.appBar}>
+        <Toolbar>
+          <Typography variant="h5" noWrap>
+            {menuItems[openIndex]}
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        className={(classes.drawer, 'background')}
+        variant="permanent"
+        classes={{
+          paper: classes.drawerPaper
+        }}
+        anchor="left"
+      >
+        <div className="background">
+          <div className={classes.toolbar} />
+          <Divider />
+          <List>
+            {menuItems.map((text, index) => (
+              <ListItem
+                button
+                component={Link}
+                key={text}
+                to={`${url}/${text.toLowerCase()}`}
+                selected={index === openIndex}
+                onClick={() => setOpenIndex(index)}
+              >
+                <ListItemIcon>
+                  {text === 'Dashboard' ? <DashboardIcon /> : <MailIcon />}
+                </ListItemIcon>
+                <ListItemText primary={text} />
+              </ListItem>
+            ))}
+          </List>
+          <Divider />
+          <List>
+            <ListItem>
+              <Button
+                component={Link}
+                to="/"
+                type="submit"
+                fullWidth
+                variant="contained"
+                color="primary"
+              >
+                Logga ut
+              </Button>
+            </ListItem>
+          </List>
+        </div>
+      </Drawer>
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+        <Switch>
+          <Route exact path={[path, `${path}/startsida`]}>
+            <Typography variant="h1" noWrap>
+              Startsida
+            </Typography>
+          </Route>
+          <Route path={`${path}/regioner`}>
+            <Regions />
+          </Route>
+          <Route path={`${path}/användare`}>
+            <Typography variant="h1" noWrap>
+              Användare
+            </Typography>
+          </Route>
+          <Route path={`${path}/tävlingshanterare`}>
+            <CompetitionManager />
+          </Route>
+        </Switch>
+      </main>
+    </div>
+  )
+}
+
+export default AdminView

client/src/components/CompetitionManager.test.tsx

+import { render } from '@testing-library/react'
+import React from 'react'
+import CompetitionManager from './CompetitionManager'
+
+it('renders competition manager', () => {
+  render(<CompetitionManager />)
+})

client/src/components/CompetitionManager.tsx

+import { Typography } from '@material-ui/core'
+import React from 'react'
+
+const CompetitionManager: React.FC = (props) => {
+  return (
+    <Typography variant="h1" noWrap>
+      Tävlingshanterare
+    </Typography>
+  )
+}
+
+export default CompetitionManager

client/src/components/Login.test.tsx

+import { render } from '@testing-library/react'
+import React from 'react'
+import LoginForm from './Login'
+
+it('renders login form', () => {
+  render(<LoginForm />)
+})

client/src/components/Login.tsx

@@ -28,12 +28,10 @@ interface ServerResponse {
 const schema: Yup.SchemaOf<LoginFormModel> = Yup.object({
   model: Yup.object()
     .shape({
-      email: Yup.string()
-        .email('Email not valid')
-        .required('Email is required'),
+      email: Yup.string().email('Email inte giltig').required('Email krävs'),
       password: Yup.string()
-        .required('Password is required')
-        .min(6, 'Password must be at least 6 characters')
+        .required('Lösenord krävs')
+        .min(6, 'Lösenord måste vara minst 6 karaktärer')
     })
     .required(),
   error: Yup.string().optional()
@@ -69,7 +67,7 @@ const LoginForm: React.FC = (props) => {
         {(formik) => (
           <form onSubmit={formik.handleSubmit} className="login-form">
             <TextField
-              label="Email Address"
+              label="Email Adress"
               name="model.email"
               helperText={
                 formik.touched.model?.email ? formik.errors.model?.email : ''
@@ -80,7 +78,7 @@ const LoginForm: React.FC = (props) => {
               margin="normal"
             />
             <TextField
-              label="Password"
+              label="Lösenord"
               name="model.password"
               type="password"
               helperText={

client/src/components/Regions.test.tsx

+import { render } from '@testing-library/react'
+import React from 'react'
+import Regions from './Regions'
+
+it('renders regions', () => {
+  render(<Regions />)
+})

client/src/components/Regions.tsx

+import Typography from '@material-ui/core/Typography'
+import React from 'react'
+
+const Regions: React.FC = (props) => {
+  return (
+    <Typography variant="h1" noWrap>
+      Regions
+    </Typography>
+  )
+}
+
+export default Regions