#583 - improved styling and validation of Add Drive form

frontend-react/package.json

@@ -8,7 +8,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.3",
-    "@reduxjs/toolkit": "^1.5.0",
+    "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

frontend-react/src/App.js

@@ -16,7 +16,7 @@ import {
 } from '@material-ui/core';
 import { MenuOpen } from '@material-ui/icons';
 import {
-  createMuiTheme,
+  createTheme,
   jssPreset,
   StylesProvider,
   ThemeProvider,
@@ -38,11 +38,11 @@ const jss = create({
   ],
 });
 
-const ltrTheme = createMuiTheme({
+const ltrTheme = createTheme({
   ...themeObject,
   direction: DIRECTIONS.LTR,
 });
-const rtlTheme = createMuiTheme({
+const rtlTheme = createTheme({
   ...themeObject,
   direction: DIRECTIONS.RTL,
 });
@@ -92,7 +92,7 @@ const App = () => {
                   container
                   wrap="nowrap"
                   alignItems="flex-start"
-                  justify="flex-start"
+                  justifyContent="flex-start"
                 >
                   <Link to="/">
                     <img
@@ -111,7 +111,7 @@ const App = () => {
                   container
                   wrap="nowrap"
                   alignItems="flex-start"
-                  justify="flex-end"
+                  justifyContent="flex-end"
                 >
                   <IconButton
                     color="primary"

frontend-react/src/components/Page.js

@@ -1,12 +1,22 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  Grid,
+  Container,
+} from '@material-ui/core';
 
 const Page = ({
   children,
 }) => (
-  <>
-    {children}
-  </>
+  <Grid
+    container
+    direction="column"
+    justifyContent="flex-start"
+    alignItems="center"
+  >
+    <Container maxWidth="sm">
+      {children}
+    </Container>
+  </Grid>
 );
 
 Page.propTypes = {

frontend-react/src/components/Sidebar.js

@@ -66,7 +66,7 @@ const Sidebar = ({
         <Grid
           container
           wrap="nowrap"
-          justify="flex-end"
+          justifyContent="flex-end"
         >
           <IconButton
             color="primary"
@@ -98,7 +98,7 @@ const Sidebar = ({
         <Grid
           container
           wrap="nowrap"
-          justify="center"
+          justifyContent="center"
           className={classes.grid}
         >
           <a

frontend-react/src/store/index.js

@@ -1,10 +1,6 @@
-/* eslint-disable */
-import {
-  configureStore, getDefaultMiddleware,
-} from '@reduxjs/toolkit';
-
+/* eslint-disable import/no-import-module-exports */
+import { configureStore } from '@reduxjs/toolkit';
 import logger from 'redux-logger';
-
 import {
   persistStore,
   FLUSH,
@@ -29,7 +25,7 @@ const persistedReducer = persistReducer(persistConfig, rootReducer);
 
 export const store = configureStore({
   reducer: persistedReducer,
-  middleware: getDefaultMiddleware({
+  middleware: getDefaultMiddleware => getDefaultMiddleware({
     serializableCheck: {
       ignoredActions: [
         FLUSH,

frontend-react/src/store/rootReducer.js

@@ -1,4 +1,5 @@
 import { combineReducers } from '@reduxjs/toolkit';
+
 import { authReducer } from './slices/auth';
 import { uiReducer } from './slices/ui';
 

frontend-react/src/views/Drive/components/DriveForm/helpers.js

@@ -0,0 +1,38 @@
+export const FIELDS = [
+  {
+    labelName: 'date',
+    type: 'date',
+  },
+  {
+    labelName: 'startLocation',
+    type: 'text',
+  },
+  {
+    labelName: 'mileageStart',
+    type: 'number',
+  },
+  {
+    labelName: 'project',
+    type: 'select',
+  },
+  {
+    labelName: 'car',
+    type: 'select',
+  },
+  {
+    labelName: 'passenger',
+    type: 'select',
+  },
+  {
+    labelName: 'description',
+    type: 'text',
+  },
+  {
+    labelName: 'endLocation',
+    type: 'text',
+  },
+  {
+    labelName: 'mileageEnd',
+    type: 'number',
+  },
+];

frontend-react/src/views/Drive/components/DriveForm/index.jsx

@@ -0,0 +1,209 @@
+import { useMemo } from 'react';
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from '@material-ui/core';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+
+import useT from '../../../../utils/translation';
+import { selectItems } from './mockItems';
+import { FIELDS } from './helpers';
+
+const DriveForm = () => {
+  const traveled = useT('traveled');
+  const submit = useT('Submit');
+  const clear = useT('Clear');
+
+  const translatedFieldsLabels = {
+    date: useT('Date'),
+    startLocation: useT('Start location'),
+    mileageStart: useT('Starting mileage'),
+    project: useT('Project'),
+    car: useT('Car'),
+    passenger: useT('Passenger'),
+    description: useT('Description'),
+    endLocation: useT('End location'),
+    mileageEnd: useT('Ending mileage'),
+  };
+
+  const validationSchema = yup.object().shape({
+    date: yup.string()
+      .required(useT('Date is required')),
+    startLocation: yup.string()
+      .required(useT('Start location is required')),
+    mileageStart: yup.number()
+      .min(0, useT('Starting mileage should be greater or equal to 0'))
+      .required(useT('Starting mileage is required')),
+    project: yup.string()
+      .required(useT('Project is required')),
+    car: yup.string()
+      .required(useT('Car is required')),
+    passenger: yup.string()
+      .required(useT('Passenger is required')),
+    endLocation: yup.string()
+      .required(useT('End location is required')),
+    mileageEnd: yup.number()
+      .required(useT('Ending mileage is required'))
+      .min(0, useT('Ending mileage should be greater or equal to 0'))
+      .test(
+        {
+          message: useT('Ending mileage should be greater or equal to starting mileage'),
+          test: (value, path) => {
+            const { parent: { mileageStart } } = path;
+
+            return value - mileageStart >= 0;
+          },
+        }
+      ),
+  });
+
+  const fieldList = FIELDS.map((field) => {
+    const isSelect = field.type === 'select';
+
+    return {
+      ...field,
+      translatedLabel: translatedFieldsLabels[field.labelName],
+      isTextField: !isSelect,
+      ...(isSelect ? { items: selectItems[field.labelName] } : {}),
+    };
+  });
+
+  const formik = useFormik({
+    initialValues: {
+      date: new Date().toISOString()
+        .split('T')[0],
+      startLocation: '',
+      mileageStart: 0,
+      project: '',
+      car: '',
+      passenger: '',
+      description: '',
+      endLocation: '',
+      mileageEnd: 0,
+    },
+    validationSchema,
+    onSubmit: (values) => {
+      console.log('values', values);
+    },
+  });
+
+  console.log('formik', formik);
+
+  const traveledDistance = useMemo(
+    () => Math.max(formik.values.mileageEnd - formik.values.mileageStart, 0),
+    [
+      formik.values.mileageStart,
+      formik.values.mileageEnd,
+    ]
+  );
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <Box
+        display="flex"
+        flexDirection="column"
+        pt={3}
+      >
+        {fieldList.map((field) => {
+          const {
+            translatedLabel,
+            labelName,
+            type,
+            items,
+          } = field;
+
+          if (!field.isTextField) {
+            return (
+              <Box
+                mb={3}
+                key={labelName}
+              >
+                <FormControl
+                  fullWidth
+                  error={formik.touched[labelName] && Boolean(formik.errors[labelName])}
+                >
+                  <InputLabel htmlFor={labelName}>
+                    {translatedLabel}
+                  </InputLabel>
+                  <Select
+                    id={labelName}
+                    name={labelName}
+                    label={translatedLabel}
+                    value={formik.values[labelName]}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched[labelName] && Boolean(formik.errors[labelName])}
+                  >
+                    {items.map(item => (
+                      <MenuItem
+                        value={item.id}
+                        key={item.id}
+                      >
+                        {item.name}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                  {formik.touched[labelName] && Boolean(formik.errors[labelName]) && (
+                    <FormHelperText error>{formik.errors[labelName]}</FormHelperText>
+                  )}
+                </FormControl>
+              </Box>
+            );
+          }
+
+          return (
+            <Box
+              mb={3}
+              key={labelName}
+            >
+              <TextField
+                id={`drive-${labelName}-label`}
+                name={labelName}
+                fullWidth
+                label={translatedLabel}
+                type={type}
+                value={formik.values[labelName]}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={formik.touched[labelName] && Boolean(formik.errors[labelName])}
+                helperText={formik.touched[labelName] && formik.errors[labelName]}
+                {...(type === 'date' ? { InputLabelProps: { shrink: true } } : {})}
+              />
+            </Box>
+          );
+        })}
+      </Box>
+      <p>
+        {`${traveledDistance} km ${traveled}`}
+      </p>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+      >
+        <Button
+          type="submit"
+          variant="contained"
+          color="primary"
+          disabled={!formik.valid}
+        >
+          {submit}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={formik.resetForm}
+        >
+          {clear}
+        </Button>
+      </Box>
+    </form>
+  );
+};
+
+export default DriveForm;