Merge branch 'axios' into 'dev'

Axios

See merge request !17

src/components/AuthUser/SignInForm/InputField.tsx

+import React, { FC } from 'react';
+import { TextField } from '@material-ui/core';
+
+type Props = {
+  id: string;
+  label: string;
+  error: boolean;
+  errorMessage: string;
+};
+
+export const InputField: FC<Props> = (props: Props) => {
+  const { id, label, error, errorMessage } = props;
+  return (
+    <TextField
+      variant="outlined"
+      margin="normal"
+      required
+      fullWidth
+      id={id}
+      label={label}
+      name={id}
+      autoComplete={id}
+      autoFocus
+      error={error}
+      helperText={error && errorMessage}
+    />
+  );
+};

src/components/AuthUser/SignInForm/SignInForm.tsx

 import React, { FC } from 'react';
-import { useForm, Controller } from 'react-hook-form';
+import { useForm, Controller, appendErrors } from 'react-hook-form';
+import { useIntl } from 'react-intl';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { TextField, Button } from '@material-ui/core';
 import { DevTool } from '@hookform/devtools';
+import { InputField } from './InputField';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -20,6 +22,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
   }),
 );
+
 // TODO: real time form validation
 export const SignInForm: FC = () => {
   interface FormData {
@@ -39,6 +42,7 @@ export const SignInForm: FC = () => {
   const onSubmit: any = (values: FormData) => {
     alert(JSON.stringify(values));
   };
+  const intl = useIntl();
   const classes = useStyles();
   return (
     <>
@@ -54,21 +58,17 @@ export const SignInForm: FC = () => {
           rules={{
             validate: (value) =>
               /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
-            required: { value: true, message: 'You must enter your email' },
+            required: {
+              value: true,
+              message: intl.formatMessage({ id: 'email' }),
+            },
           }}
           render={() => (
-            <TextField
-              variant="outlined"
-              margin="normal"
-              required
-              fullWidth
+            <InputField
               id="email"
-              label="Email Address"
-              name="email"
-              autoComplete="email"
-              autoFocus
+              label={intl.formatMessage({ id: 'email' })}
               error={Boolean(errors.email)}
-              helperText={errors.email && 'Incorrect entry.'}
+              errorMessage={intl.formatMessage({ id: 'error' })}
             />
           )}
         />
@@ -83,19 +83,11 @@ export const SignInForm: FC = () => {
             required: { value: true, message: 'You must enter your name' },
           }}
           render={() => (
-            <TextField
-              variant="outlined"
-              margin="normal"
-              required
-              fullWidth
-              name="password"
-              label="Password"
-              type="password"
+            <InputField
               id="password"
-              autoComplete="password"
-              autoFocus
+              label="Password"
               error={Boolean(errors.password)}
-              helperText={errors.password && 'Incorrect entry.'}
+              errorMessage="Incorrect entry."
             />
           )}
         />

src/components/HomePage/HomePage.tsx

 import React, { FC } from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
 
-export const HomePage: FC = () => <div>Welcome</div>;
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+    },
+    appBar: {
+      zIndex: theme.zIndex.drawer + 1,
+    },
+    drawer: {
+      width: drawerWidth,
+      flexShrink: 0,
+    },
+    drawerPaper: {
+      width: drawerWidth,
+    },
+    drawerContainer: {
+      overflow: 'auto',
+    },
+    content: {
+      flexGrow: 1,
+      padding: theme.spacing(3),
+    },
+  }),
+);
+
+export const HomePage: FC = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <CssBaseline />
+      <AppBar position="fixed" className={classes.appBar}>
+        <Toolbar>
+          <Typography variant="h6" noWrap>
+            Moveaid
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        className={classes.drawer}
+        variant="permanent"
+        classes={{
+          paper: classes.drawerPaper,
+        }}
+      >
+        <Toolbar />
+        <div className={classes.drawerContainer}>
+          <List>
+            {['Reservation'].map((text) => (
+              <ListItem button key={text}>
+                <ListItemText primary={text} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </Drawer>
+      <main className={classes.content}>
+        <Toolbar />
+        <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
+          dolor purus non enim praesent elementum facilisis leo vel. Risus at
+          ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum
+          quisque non tellus. Convallis convallis tellus id interdum velit
+          laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed
+          adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
+          integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
+          eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
+          quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
+          vivamus at augue. At augue eget arcu dictum varius duis at consectetur
+          lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien
+          faucibus et molestie ac.
+        </Typography>
+        <Typography paragraph>
+          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
+          ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
+          elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse
+          sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat
+          mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis
+          risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas
+          purus viverra accumsan in. In hendrerit gravida rutrum quisque non
+          tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
+          morbi tristique senectus et. Adipiscing elit duis tristique
+          sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
+          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
+          posuere sollicitudin aliquam ultrices sagittis orci a.
+        </Typography>
+      </main>
+    </div>
+  );
+};