diff --git a/package.json b/package.json
index 33739b84709522b0282612e489d26578783ee60e..5a1a654078335f223c61882baf2da29ce78bc2fc 100644
--- a/package.json
+++ b/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",
diff --git a/src/api/getSeniorList.ts b/src/api/getSeniorList.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d300c33e90ef584b234b5521d052a7a5797260f6
--- /dev/null
+++ b/src/api/getSeniorList.ts
@@ -0,0 +1,4 @@
+import axios from 'axios';
+
+export const getSeniorList = async (name: string): Promise<string[]> =>
+ axios.get(`/api/web/seniors/by_name/${name}`).then((res) => res.data);
diff --git a/src/api/setReservation.ts b/src/api/setReservation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d10fafc65d92eb6788c249c5c531dd2212c3db8
--- /dev/null
+++ b/src/api/setReservation.ts
@@ -0,0 +1,4 @@
+import axios from 'axios';
+
+export const setReservation = async (reservation: any): Promise<void> =>
+ axios.options('/api/web/reservations', {}).then((res) => console.log(res));
diff --git a/src/components/Auth/ChoseRole/ChoseRole.tsx b/src/components/Auth/ChoseRole/ChoseRole.tsx
index 334e2bbdf6582d738c62608511cfc49ff848b5f6..558f33a91552709b544484aeb6e34176d91d6830 100644
--- a/src/components/Auth/ChoseRole/ChoseRole.tsx
+++ b/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(() => {
diff --git a/src/components/Auth/SignUpForm/SeniorType.ts b/src/components/Auth/SignUpForm/SeniorType.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ffda2b4b8caf4dba210b0132cca0a4bfa1b3dcb6
--- /dev/null
+++ b/src/components/Auth/SignUpForm/SeniorType.ts
@@ -0,0 +1,12 @@
+export type SeniorType = {
+ username: string;
+ password: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ phoneNumber: number;
+ address: number;
+ name: string;
+ memberCardNumber: number;
+ notes: string;
+};
diff --git a/src/components/Authorization/Authorization.tsx b/src/components/Authorization/Authorization.tsx
index 08db3cea5572ddc10184b44cece73f59e49e5ce7..f63265ece6abbabb13fb33a7ae5083496d3269a9 100644
--- a/src/components/Authorization/Authorization.tsx
+++ b/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 ? (
diff --git a/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx b/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fea0da2630d2e768f2c99a80ab895fcbaacee240
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx
@@ -0,0 +1,43 @@
+/* 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>
+ );
+};
diff --git a/src/components/Dashboard/ReservationPage/ReservationDialog.tsx b/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
index 499f130e01f6e5ecb2c9cd2bdc2da37d665113d3..ecc04aeeb3d419f9ace1d720f9e4fc219c51ab89 100644
--- a/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
@@ -1,7 +1,5 @@
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>
);
};
diff --git a/src/hooks/useRole.ts b/src/hooks/useRole.ts
index 785a9793d68e38bc9aad578169aa195a0d84f9fc..217383ef569e9460e032229a00d7a9b43897e74b 100644
--- a/src/hooks/useRole.ts
+++ b/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];
};
diff --git a/yarn.lock b/yarn.lock
index da12648f2fedb3c73a162c22f141baa02fa82a19..725104bc99c5f46a2bffe4b1cf607cf34e1fc602 100644
--- a/yarn.lock
+++ b/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"