Merge branch 'api/reservation-senior-search' into 'dev'

Replace context with api.

See merge request !57

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.58",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/api/getSeniorList.ts

+import axios from 'axios';
+
+export const getSeniorList = async (name: string): Promise<string[]> =>
+  axios.get(`/api/web/seniors/by_name/${name}`).then((res) => res.data);

src/api/setReservation.ts

+import axios from 'axios';
+
+export const setReservation = async (reservation: any): Promise<void> =>
+  axios.options('/api/web/reservations', {}).then((res) => console.log(res));

src/components/Auth/ChoseRole/ChoseRole.tsx

@@ -5,6 +5,7 @@ import { setRole } from 'api/setRole';
 import { useHistory } from 'react-router-dom';
 import { AuthRoutes } from 'api/routes';
 import { AuthContext } from 'components/Auth/AuthContext';
+import { getRole } from 'api/getRole';
 
 /**
  * Page that let's users decide role between available roles.
@@ -17,11 +18,10 @@ export const ChoseRole: FC = () => {
   const { setIsAuth } = useContext(AuthContext);
 
   const choseAndForward = (role: string): void => {
-    // Set role in the server.
-    setRole(role);
     setIsAuth(true);
-    // Push to homepage.
-    history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`);
+    setRole(role).then(() =>
+      history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`),
+    );
   };
 
   useEffect(() => {

src/components/Auth/SignUpForm/SeniorType.ts

+export type SeniorType = {
+  username: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNumber: number;
+  address: number;
+  name: string;
+  memberCardNumber: number;
+  notes: string;
+};

src/components/Authorization/Authorization.tsx

@@ -4,6 +4,8 @@ import { NonAuthRoutes } from 'api/routes';
 import { Redirect } from 'react-router-dom';
 import { Unauthorized } from 'components/Unauthorized/Unauthorized';
 import { AuthContext } from 'components/Auth/AuthContext';
+import { useRole } from 'hooks/useRole';
+import { useAuth } from 'hooks/useAuth';
 
 const HandleIsAuth: FC<{ isAuth: boolean }> = ({ isAuth }) =>
   isAuth ? (
@@ -35,11 +37,12 @@ export const withAuthorization = (allowedRoles: string[]) => <
   const ComponentWithAuthorization: FC<T> = (
     props: Omit<T, keyof WithAuthProps>,
   ) => {
-    const { role, isAuth } = useContext(AuthContext);
-    console.log(`ROLE ${role} AUTH ${isAuth}`);
+    const [role, setRole, isLoading] = useRole();
+    const [isAuth] = useAuth();
+    console.log(`ROLE ${role} AUTH ${isAuth} LOADED ${isLoading}`);
 
     /* eslint-disable no-nested-ternary */
-    return typeof isAuth === null && role === null ? (
+    return isAuth === null || isLoading ? (
       <BlurCircular />
     ) : // props comes afterwards so the can override the default ones.
     allowedRoles.includes(role) && isAuth ? (

src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx

+/* eslint-disable react/jsx-props-no-spreading */
+import React, { FC, useState } from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { getSeniorList } from 'api/getSeniorList';
+
+export const SeniorSearch: FC = () => {
+  const [value, setValue] = useState<string | null>(null);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [options, setOptions] = useState<string[]>(['']);
+
+  const handleChange = (newValue: string): void => {
+    setInputValue(newValue);
+    const MIN_SEARCH_LENGTH = 3;
+    if (newValue.length >= MIN_SEARCH_LENGTH) {
+      getSeniorList(newValue).then((list) => console.log(list));
+    }
+  };
+
+  return (
+    <div>
+      <div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
+      <div>{`inputValue: '${inputValue}'`}</div>
+      <br />
+      <Autocomplete
+        value={value}
+        onChange={(event: any, newValue: string | null) => {
+          setValue(newValue);
+        }}
+        inputValue={inputValue}
+        onInputChange={(event, newInputValue) => {
+          handleChange(newInputValue);
+        }}
+        id="senior-searcher"
+        options={options}
+        style={{ width: 300 }}
+        renderInput={(params) => (
+          <TextField {...params} label="Search a senior" variant="outlined" />
+        )}
+      />
+    </div>
+  );
+};

src/components/Dashboard/ReservationPage/ReservationDialog.tsx

 import React, { FC } from 'react';
 import {
-  Grid,
-  Typography,
   Dialog,
   DialogActions,
   DialogContent,
@@ -9,15 +7,10 @@ import {
   DialogTitle,
   Button,
 } from '@material-ui/core';
-import AddIcon from '@material-ui/icons/Add';
-import Fab from '@material-ui/core/Fab';
-import { NavBar } from 'components/Dashboard/HomePage/NavBar';
-import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
 import { useReservations } from 'hooks/useReservations';
 import { ReservationProps } from 'components/Dashboard/ReservationPage/Reservation/ReservationProps';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { InputField } from 'components/Auth/InputField/InputField';
-import { useStyles } from './ReservationPage.style';
 
 type ReservationDialogProps = {
   handleClose: () => void;
@@ -27,7 +20,6 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
   handleClose,
   isOpen,
 }: ReservationDialogProps) => {
-  const classes = useStyles();
   const { control, handleSubmit } = useForm<ReservationProps>();
 
   const reservation = useReservations();
@@ -41,68 +33,53 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
 
   return (
     <div data-testid="ReservationDialog">
-      <Grid container direction="column" className={classes.paddingBottom}>
-        <div className={classes.root}>
-          <Grid item>
-            <NavBar />
-          </Grid>
+      <Dialog
+        open={isOpen}
+        onClose={handleClose}
+        aria-labelledby="form-dialog-title"
+      >
+        <form onSubmit={handleSubmit(onSubmit)} data-testid="Form">
+          <DialogTitle id="form-dialog-title">Book New Reservation</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Write here below the details of your next reservation
+            </DialogContentText>
 
-          <Dialog
-            open={isOpen}
-            onClose={handleClose}
-            aria-labelledby="form-dialog-title"
-          >
-            <form onSubmit={handleSubmit(onSubmit)} data-testid="Form">
-              <DialogTitle id="form-dialog-title">
-                Book New Reservation
-              </DialogTitle>
-              <DialogContent>
-                <DialogContentText>
-                  Write here below the details of your next reservation
-                </DialogContentText>
-
-                <InputField
-                  name="name"
-                  label="Name Reservation"
-                  type="text"
-                  control={control}
-                />
-                <InputField
-                  name="date"
-                  label="Reservation date"
-                  type="date"
-                  control={control}
-                />
-                <InputField
-                  name="time"
-                  label="Department Time"
-                  type="time"
-                  control={control}
-                />
-                <InputField
-                  name="destination"
-                  label="Destination"
-                  type="text"
-                  control={control}
-                />
-              </DialogContent>
-              <DialogActions>
-                <Button onClick={handleClose} color="primary">
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  fullWidth
-                  variant="contained"
-                  color="primary"
-                >
-                  Insert
-                </Button>
-              </DialogActions>
-            </form>
-          </Dialog>
-        </div>
-      </Grid>
+            <InputField
+              name="name"
+              label="Name Reservation"
+              type="text"
+              control={control}
+            />
+            <InputField
+              name="date"
+              label="Reservation date"
+              type="date"
+              control={control}
+            />
+            <InputField
+              name="time"
+              label="Department Time"
+              type="time"
+              control={control}
+            />
+            <InputField
+              name="destination"
+              label="Destination"
+              type="text"
+              control={control}
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose} color="primary">
+              Cancel
+            </Button>
+            <Button type="submit" fullWidth variant="contained" color="primary">
+              Insert
+            </Button>
+          </DialogActions>
+        </form>
+      </Dialog>
     </div>
   );
 };

src/hooks/useRole.ts

@@ -4,8 +4,10 @@ import { useEffect, useState } from 'react';
 export const useRole = (): [
   string,
   React.Dispatch<React.SetStateAction<string>>,
+  boolean,
 ] => {
   const [role, setRole] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     let isMounted = true;
@@ -14,11 +16,12 @@ export const useRole = (): [
     getRole().then((responseRole) => {
       if (isMounted) {
         setRole(responseRole);
+        if (role !== null) setIsLoading(false);
       }
     });
     return () => {
       isMounted = false;
     };
   }, []);
-  return [role, setRole];
+  return [role, setRole, isLoading];
 };

yarn.lock

@@ -1565,6 +1565,17 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
+"@material-ui/lab@^4.0.0-alpha.58":
+  version "4.0.0-alpha.58"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz#c7ebb66f49863c5acbb20817163737caa299fafc"
+  integrity sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@material-ui/styles@^4.11.3":
   version "4.11.3"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"