Merge branch '17-driver-shift-page-where-driver-inserts-shift' into 'dev'

Resolve "Driver shift page where driver inserts shift."

See merge request !77

src/api/createShift.ts

+import axios from 'axios';
+import { DriverShiftType } from 'types/DriverShiftType';
+
+/**
+ * @async
+ * Create a driver shift in the server.
+ * @param {DriverShiftType} values of the shift.
+ * @returns {Promise<void>} void.
+ */
+export const createShift = async (values: DriverShiftType): Promise<void> =>
+  axios.post('/api/web/shifts/', values);

src/api/getDriverShiftList.ts

+import axios from 'axios';
+import { DriverShiftType } from 'types/DriverShiftType';
+
+/**
+ * @async
+ * Perform GET to get a list of all the driverShifts.
+ * @returns a list of driverShifts.
+ */
+export const getDriverShiftList = async (): Promise<DriverShiftType[]> =>
+  axios(`/api/web/shifts/`).then((res) => res.data);

src/api/registerSenior.ts

@@ -9,5 +9,4 @@ import { RegisterSeniorType } from 'types/RegisterSeniorType';
  */
 export const registerSenior = async (
   values: RegisterSeniorType,
-): Promise<void> =>
-  axios.post('/api/web/seniors/', values).then((res) => console.log(res));
+): Promise<void> => axios.post('/api/web/seniors/', values);

src/components/Auth/SignUpForm/SignUpForm.tsx

@@ -113,27 +113,27 @@ export const SignUpForm: FC = () => {
             />
           </Grid>
 
-          <Hidden smDown>
-            <Grid item xs={2} />
-          </Hidden>
-
-          <Grid item xs={12} md={5}>
-            <InputField
-              name="memberCardNumber"
-              type="number"
-              control={control}
-              rules={{
-                maxLength: 20,
-                required: {
-                  value: true,
-                  message: 'Insert valid card number',
-                },
-              }}
-              label="Card number"
-              error={!!errors.memberCardNumber}
-              errorMessage="Insert valid card number"
-            />
-          </Grid>
+          <InputField
+            name="memberCardNumber"
+            type="number"
+            control={control}
+            rules={{
+              maxLength: 20,
+              required: {
+                value: true,
+                message: 'Insert valid card number',
+              },
+            }}
+            label="Card number"
+            error={!!errors.memberCardNumber}
+            errorMessage="Insert valid card number"
+          />
+          <InputField
+            name="memberCardIssuer.name"
+            type="text"
+            control={control}
+            label="Member card issuer"
+          />
 
           <Grid item xs={12} className={classes.paddingBottomSmall}>
             <InputField
@@ -202,6 +202,13 @@ export const SignUpForm: FC = () => {
             errorMessage="Insert valid password"
           />
 
+          <InputField
+            name="user.language"
+            type="text"
+            control={control}
+            label="Language"
+          />
+
           <Button
             data-testid="Submit"
             type="submit"

src/components/Dashboard/DriverShift/DriverShiftDialog.tsx

-/* eslint-disable react/jsx-props-no-spreading */
-import React, { FC, useState } from 'react';
+import React, { FC } from 'react';
 import {
   Dialog,
   DialogActions,
@@ -13,8 +12,7 @@ import { DriverShiftType } from 'types/DriverShiftType';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { getRoleObject } from 'api/getRoleObject';
 import { ControlledDateTimePicker } from 'components/Utils/ControlledDateTimePicker';
-import { VehicleType } from 'types/VehicleType';
-import { VehiclePicker } from './VehiclePicker';
+import { createShift } from 'api/createShift';
 import { driverShiftStyle } from './DriverShiftPage.style';
 
 type DriverShiftDialogProps = {
@@ -26,21 +24,15 @@ export const DriverShiftDialog: FC<DriverShiftDialogProps> = ({
   handleClose,
   isOpen,
 }: DriverShiftDialogProps) => {
-  const classes = driverShiftStyle();
   const { control, handleSubmit } = useForm<DriverShiftType>({
     mode: 'onSubmit',
   });
 
-  const [chosenVehicle, setChosenVehicle] = useState<VehicleType>();
-
   const onSubmit: SubmitHandler<DriverShiftType> = (
     driverShift: DriverShiftType,
   ) => {
-    const filledShift = driverShift;
     getRoleObject().then((role) => {
-      filledShift.driver = role.id;
-      filledShift.vehicle = chosenVehicle?.owner;
-      console.log(filledShift);
+      createShift({ ...driverShift, driver: role.id });
     });
     handleClose();
   };
@@ -59,39 +51,20 @@ export const DriverShiftDialog: FC<DriverShiftDialogProps> = ({
             </Typography>
           </DialogTitle>
           <DialogContent>
-            <DialogContentText>
-              Write here below the details of your next DriverShift
-            </DialogContentText>
-            <Typography
-              variant="h5"
-              component="h2"
-              className={`${classes.paddingBottomKlein} ${classes.paddingTopKlein}`}
-            >
-              Search
-            </Typography>
-
+            <DialogContentText>Time of the shift</DialogContentText>
             <ControlledDateTimePicker
               control={control}
-              name="startTime"
+              name="timeStart"
               id="start-time"
               label="Start time"
             />
 
             <ControlledDateTimePicker
               control={control}
-              name="endTime"
+              name="timeEnd"
               id="end-time"
               label="End time"
             />
-
-            <Typography
-              variant="h5"
-              component="h2"
-              className={`${classes.paddingBottomKlein} ${classes.paddingTopKlein}`}
-            >
-              Chose vehicle
-            </Typography>
-            <VehiclePicker setChosenVehicle={setChosenVehicle} />
           </DialogContent>
           <DialogActions>
             <Button onClick={handleClose} color="primary">

src/components/Dashboard/DriverShift/DriverShiftList.tsx

+import React, { FC } from 'react';
+import { Grid } from '@material-ui/core';
+import { useDriverShifts } from 'hooks/useDriverShiftList';
+
+/**
+ * Displays a list of all driverShifts from api.
+ * @returns rendered list of driverShifts.
+ */
+export const DriverShiftList: FC = () => {
+  const shifts = useDriverShifts();
+
+  return (
+    <div data-testid="DriverShiftListViewer">
+      <Grid item container>
+        {shifts.length !== 0 ? (
+          shifts.map((shift, key) => (
+            <div>
+              Start: {shift.timeStart} End: {shift.timeEnd}
+            </div>
+          ))
+        ) : (
+          <h1>You do not have DriverShifts.</h1>
+        )}
+      </Grid>
+    </div>
+  );
+};

src/components/Dashboard/DriverShift/DriverShiftPage.tsx

@@ -4,6 +4,7 @@ import AddIcon from '@material-ui/icons/Add';
 import Fab from '@material-ui/core/Fab';
 import { Header } from 'components/Utils/Header';
 import { DriverShiftDialog } from './DriverShiftDialog';
+import { DriverShiftList } from './DriverShiftList';
 import { driverShiftStyle } from './DriverShiftPage.style';
 
 export const DriverShiftPage: FC = () => {
@@ -44,7 +45,7 @@ export const DriverShiftPage: FC = () => {
 
           <Grid item xs={1} lg={2} />
           <Grid item xs={10} lg={8}>
-            <h1>Nothing</h1>
+            <DriverShiftList />
           </Grid>
           <Grid item xs={1} lg={2} />
         </Grid>

src/hooks/useDriverShiftList.ts

+import { useMemo, useState } from 'react';
+import { getDriverShiftList } from 'api/getDriverShiftList';
+import { DriverShiftType } from 'types/DriverShiftType';
+
+export const useDriverShifts = (): DriverShiftType[] => {
+  const [driverShiftList, setDriverShiftList] = useState<DriverShiftType[]>([]);
+  useMemo(() => {
+    let isMounted = true;
+
+    getDriverShiftList().then((list) => {
+      if (isMounted) setDriverShiftList(list);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  return driverShiftList;
+};

src/types/RegisterSeniorType.ts

@@ -4,10 +4,11 @@ import { UserType } from './UserType';
 
 export type RegisterSeniorType = {
   user: UserType;
-  phoneNumber: number;
   homeAddress: LocationType;
   name: string;
   memberCardIssuer: MemberCardType;
   memberCardNumber: number;
+  phoneNumber: number;
+  language: string;
   notes: string;
 };