GringoElPepito/hsp-gdh-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updating frontend

Browse Source
This commit is contained in:
GringoElPepito
2024-04-06 19:20:01 +02:00
parent daf0d31efd
commit 22ce9b2704
51 changed files with 1001 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -18,7 +18,7 @@
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"start": "set PORT=8080 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

7
services.sql Normal file
View File

@@ -0,0 +1,7 @@
INSERT INTO services (name,description,price) VALUES
('Chirurgie','Service de visio',100),
('Médecine', 'Service de laboratoire',50),
('Cancérologie', 'Service de cancérologie',75),
('Maternité', 'Service de maternité',150),
('Imagerie médical', "Service d'imagerie",75),
('Urgences', "Service d'urgences", 25);

43
src/components/auth/login/index.jsx
View File

@@ -1,20 +1,55 @@
import { useForm } from 'react-hook-form';
import { useState, useEffect } from 'react';
import { post } from '../../../modules/fetchManager.js';
import { getUserSession, setUserSession } from '../../../modules/userManager.js';
function Login() {
const [error, setError] = useState(null);
const [user, setUser] = useState(getUserSession());
useEffect(() => {
if(user.token && user.data){
setUserSession(user);
window.location.href = '/dashboard';
}
}, [user]);
const { register, handleSubmit} = useForm();
const onSubmit = (e) => {
post('users/login', e)
.then(data => {
if(data.JSON.token){
setUser({
token: data.JSON.token,
data: data.JSON.user
});
}
else{
setError("Email ou mot de passe incorrect");
}
});
}
return (
<div className="bg-hero w-screen h-screen object-fit bg-cover flex justify-center items-center">
<div className="w-screen h-screen flex justify-center items-center bg-shdw">
<form action="" method="post" className="flex flex-col bg-white px-5 py-4 w-2/3 2xl:w-3/12 gap-8 rounded-lg">
<form action="" method="post" onSubmit={handleSubmit(onSubmit)} className="flex flex-col bg-white px-5 py-4 w-2/3 2xl:w-3/12 gap-8 rounded-lg">
<div className="text-2xl text-center">
<h2>Connexion</h2>
</div>
<div className='flex justify-center items-center'>
{error ? <p className="text-red-600 my-4">{error}</p> : null}
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col w-1/3 gap-4">
<label htmlFor="email">Email</label>
<label htmlFor="usernameOrEmail">Email</label>
<br />
<label htmlFor="password">Mot de passe</label>
</div>
<div className="flex flex-col w-2/3 gap-4">
<input type="email" name="email" id="email" className="border-b-2 border-cyan-800"/>
<input type="password" name="password" id="password" className="border-b-2 border-cyan-800 focus:outline-none"/>
<input type="usernameOrEmail" {...register("usernameOrEmail", {required: true})} className="border-b-2 border-cyan-800"/>
<input type="password" {...register("password", {required: true})} className="border-b-2 border-cyan-800 focus:outline-none"/>
</div>
</div>
<div className="flex flex-col gap-2 justify-center items-center">

6
src/components/auth/register/index.jsx
View File

@@ -13,10 +13,10 @@ function Register() {
}
post('users/register', e)
.then(data => {
if(data.error){
setError(data.error);
if(data.status === 200){
window.location.href = '/login';
}
console.log(data);
setError(data.error);
});
}

63
src/components/auth/verifyEmail/index.jsx Normal file
View File

@@ -0,0 +1,63 @@
import { useState, useEffect } from 'react';
import { get } from '../../../modules/fetchManager.js';
import { getUserSession, setUserSession } from '../../../modules/userManager.js';
function VerifyEmail() {
const queryParameters = new URLSearchParams(window.location.search);
const code = queryParameters.get('code');
const user = getUserSession();
const [verified,setVerified] =useState(null);
const [error, setError] = useState(null);
if(!user || !user.token || !user.data){
console.log(user);
window.location.href = '/login';
}
get('users/email/verify?code='+code, user.token)
.then(data => {
if(data.status !== 200){
if(data.status === 400){
setError("Le code de vérification est invalide");
}
if(data.status === 500){
setError("Erreur serveur, veuillez réessayer plus tard");
}
return;
}
setVerified("Votre email a bien été vérifié");
setUserSession({
token: user.token,
data: user.data,
});
})
const handleClick = (e) => {
e.preventDefault();
get('users/email/request', user.token)
.then(data => {
if(data.status !== 200){
setError("Erreur serveur, veuillez réessayer plus tard");
return;
}
setVerified("Email envoyé");
})
}
return (
<div className="h-screen w-screen bg-cyan-800 flex justify-center items-center">
<div className="h-auto w-auto border-2 border-cyan-600 rounded-2xl p-5 bg-white text-xl" >
{code ? <p>Vérification de l'email en cours...</p> : <p>Veuillez vérifiez votre boîte mail, un mail de vérification vous a été envoyé</p>}
{verified ? <p>{verified}</p> : null}
{error ? <div>
<p>{error}</p>
<button className="w-52 p-6 border-2 border-cyan-600 rounded-2xl hover:bg-cyan-600 hover:text-white transition-all ease-in-out duration-300" onClick={handleClick}>
Renvoyer un mail
</button>
</div> : null}
</div>
</div>
);
}
export default VerifyEmail;

11
src/components/dashboard/admin/appointment/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
import HeadTitle from "../../head-title";
function Appointment({user}) {
return(
<div>
<HeadTitle title={"Rendez-vous"}/>
</div>
)
}
export default Appointment;

53
src/components/dashboard/admin/hospital/create/index.jsx Normal file
View File

@@ -0,0 +1,53 @@
import ModalContainer from '../../../modal-container';
import { useForm } from 'react-hook-form';
import { post } from '../../../../../modules/fetchManager';
function CreateHospital({setCreateMenu,user}) {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
data.company_id = 1;
data.country = "France";
post('hospitals', data, user.token)
.then(data => {
console.log(data);
})
}
return(
<ModalContainer title="Créer un hôpital" setModal={setCreateMenu}>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
<div className="text-center text-2xl">
<h2>Création d'un Hôpital</h2>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="name">Nom</label>
<input type="name" {...register("name", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="code">Code</label>
<input type="code" {...register("code", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="region">Région</label>
<input type="region" {...register("region", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="city">Ville</label>
<input type="city" {...register("city", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="address">Addresse</label>
<input type="address" {...register("address", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-8 justify-center">
<BackButton setMenu={setMenu}/>
<SubmitButton/>
</div>
</form>
</ModalContainer>
)
}
export default CreateHospital;

11
src/components/dashboard/admin/hospital/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
import HeadTitle from "../../head-title";
function Hospital({user}) {
return(
<div>
<HeadTitle title={"Hôpitaux"}/>
</div>
)
}
export default Hospital;

26
src/components/dashboard/admin/index.jsx Normal file
View File

@@ -0,0 +1,26 @@
import { useState } from 'react';
import PageContainer from '../page-container';
import config from '../../../config';
import MenuHandler from './menu-handler';
function Admin({user,setUser}) {
const [page, setPage] = useState("home");
const links = [
{page:"home",name:"Accueil"},
{page:"appointment",name:"Rendez-vous"},
config.prescriptionOn ? {page:"prescription",name:"Préscriptions"} : null,
{page:"medical-file",name:"Dossier Médical"},
{page:"user",name:"Utilisateurs"},
{page:"hospital",name:"Hôpitaux"},
{page:"profil",name:"Profil"}
]
return(
<PageContainer links={links} setUser={setUser} user={user} setPage={setPage}>
<MenuHandler page={page} user={user}/>
</PageContainer>
)
}
export default Admin;

11
src/components/dashboard/admin/medical-file/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
import HeadTitle from "../../head-title";
function MedicalFile({user}) {
return(
<div>
<HeadTitle title={"Dossier médical"}/>
</div>
)
}
export default MedicalFile;

28
src/components/dashboard/admin/menu-handler/index.jsx Normal file
View File

@@ -0,0 +1,28 @@
import Prescription from "../prescription";
import MedicalFile from "../medical-file";
import Appointment from "../appointment";
import User from "../user";
import Hospital from "../hospital";
import Profil from "../profil";
import Home from "../../home";
function MenuHandler({page,user}) {
switch (page) {
case "prescription":
return <Prescription user={user} />;
case "medical-file":
return <MedicalFile user={user} />;
case "appointment":
return <Appointment user={user} />;
case "user":
return <User user={user} />;
case "hospital":
return <Hospital user={user} />;
case "profil":
return <Profil user={user} />;
default:
return <Home user={user} />;
}
}
export default MenuHandler;

11
src/components/dashboard/admin/prescription/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
import HeadTitle from "../../head-title";
function Prescription({user}) {
return (
<div>
<HeadTitle title={"Préscriptions"}/>
</div>
);
}
export default Prescription;

11
src/components/dashboard/admin/profil/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
import HeadTitle from "../../head-title";
function Profil({user}) {
return(
<div>
<HeadTitle title={"Profil"}/>
</div>
)
}
export default Profil;

11
src/components/dashboard/admin/user/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
import HeadTitle from "../../head-title";
function User({user}) {
return(
<div>
<HeadTitle title={"Utilisateurs"}/>
</div>
)
}
export default User;

11
src/components/dashboard/appointment/index.jsx
View File

@@ -1,11 +0,0 @@
import HeadTitle from "../head-title";
function Appointment() {
return (
<div>
<HeadTitle title="Rendez-vous"/>
</div>
);
}
export default Appointment;

12
src/components/dashboard/back-button/index.jsx Normal file
View File

@@ -0,0 +1,12 @@
function BackButton({setMenu,value}) {
const val = value ? value : null;
return(
<button className="w-36 p-6 border-2 border-red-600 rounded-2xl hover:bg-red-600 hover:text-white transition-all ease-in-out duration-300" onClick={() => setMenu(val)}>
Retour
</button>
);
}
export default BackButton;

9
src/components/dashboard/container/index.jsx Normal file
View File

@@ -0,0 +1,9 @@
function Container({children}) {
return(
<div className="flex justify-center items-center h-screen">
{children}
</div>
)
}
export default Container;

9
src/components/dashboard/createButton/index.jsx Normal file
View File

@@ -0,0 +1,9 @@
function CreateButton({setCreateMenu, nameMenu}) {
return(
<button onClick={() => setCreateMenu(true)} className="bg-green-600 text-2xl text-white px-4 py-2 rounded-lg">
{nameMenu}
</button>
)
}
export default CreateButton;

23
src/components/dashboard/doctor/index.jsx Normal file
View File

@@ -0,0 +1,23 @@
import { useState } from 'react';
import PageContainer from '../page-container';
import config from '../../../config';
import MenuHandler from './menu-handler';
function Doctor({user, setUser}) {
const [page, setPage] = useState("home");
const links = [
{page:"home",name:"Accueil"},
{page:"appointment",name:"Rendez-vous"},
config.prescriptionOn ? {page:"prescription",name:"Préscriptions"} : null,
{page:"medical-file",name:"Dossier Médical"},
{page:"profil",name:"Profil"}
];
return (
<PageContainer links={links} setUser={setUser} user={user} setPage={setPage}>
<MenuHandler page={page} setPage={setPage} user={user}/>
</PageContainer>
)
}
export default Doctor;

10
src/components/dashboard/doctor/menu-handler/index.jsx Normal file
View File

@@ -0,0 +1,10 @@
function MenuHandler({page, setPage, user}) {
return (
<div>
<h1>MenuHandler</h1>
<p>Current page: {page}</p>
</div>
)
}
export default MenuHandler;

2
src/components/dashboard/home/index.jsx
View File

@@ -2,7 +2,7 @@ import HeadTitle from "../head-title"
function Home() {
return(
<div className="">
<div className="flex flex-col">
<HeadTitle title="Accueil"/>
</div>
)

101
src/components/dashboard/index.jsx
View File

@@ -1,17 +1,102 @@
import Navbarre from "./navbarre";
import Layout from "./layout";
import PageHandler from "./page-handler";
import { useState } from "react";
import { useState, useEffect } from "react";
import { getUserSession, setUserSession } from "../../modules/userManager";
import { get } from "../../modules/fetchManager";
import TypeUser from "./type-user";
import Loader from "./loader";
import SecondMenuBg from "./second-menu-bg";
import NotVerified from "./notVerified";
function Dashboard() {
const [page, setPage] = useState("home");
const [user, setUser] = useState(getUserSession());
const [type, setType] = useState((user.roles) ? true : false);
const [loading, setLoading] = useState(0);
// useEffect(() => {
// setUserSession(user);
// }, [user]);
if(!user.token || !user.data){
window.location.href = '/login';
}
if(!type && loading === 0){
get('users/@me/roles', user.token).then((data) => {
setLoading(loading + 1);
if(data.status === 403) {
window.location.href = '/login';
return;
}
if(data.status === 404) {
setType(false);
get('doctors/@me', user.token).then((data) => {
setLoading(loading + 1);
if(data.status >= 400) {
return;
}
const newUser = {
token: user.token,
data: user.data,
roles: user.roles,
doctor: data.JSON,
};
setUser(newUser);
setUserSession(newUser);
setType(true);
});
return;
}
const newUser = {
token: user.token,
data: user.data,
roles: data.JSON,
};
setUser(newUser);
setUserSession(newUser);
setType(true);
});
// console.log(type);
}
return(
<div>
<Navbarre setPage={setPage}/>
<Layout>
<PageHandler page={page}/>
</Layout>
{
type && (!user.doctor || user.doctor.is_verified) ?
<PageHandler user={user} setUser={setUser}/>
:
null
}
{
type && user.doctor && !user.doctor.is_verified ?
<NotVerified setUser={setUser}/>
:
null
}
{
!type && loading < 2 ?
<div>
<TypeUser />
</div>
:
null
}
{
!type && loading === 2 ?
<SecondMenuBg>
<Loader />
</SecondMenuBg>
:
null
}
</div>
);
}

18
src/components/dashboard/list-display/index.jsx Normal file
View File

@@ -0,0 +1,18 @@
function ListDisplay({data,itemComponent,setCreateMenu,nameMenu}) {
return(
<div>
<button onClick={() => setCreateMenu(true)}>{nameMenu}</button>
<ul>
{
data.map((item) => {
<li>
{itemComponent(item)}
</li>
})
}
</ul>
</div>
)
}
export default ListDisplay;

15
src/components/dashboard/loader/index.jsx Normal file
View File

@@ -0,0 +1,15 @@
import './loader.css';
import SecondMenuBg from '../second-menu-bg';
function Loader({color}) {
let cssColor = 'loader'
if(color) {
cssColor += ' cyan';
}
return(
<span className={cssColor}></span>
);
}
export default Loader;

24
src/components/dashboard/loader/loader.css Normal file
View File

@@ -0,0 +1,24 @@
.loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.cyan {
border: 5px solid rgb(22,78,99);
border-bottom-color: transparent;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

11
src/components/dashboard/modal-container/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
function ModalContainer({ children }) {
return (
<div className="fixed top-0 left-0 h-screen w-screen flex justify-center items-center bg-black/25 backdrop-blur-sm">
<div className="bg-white p-5 rounded-xl flex flex-col justify-start items-center">
{children}
</div>
</div>
);
}
export default ModalContainer;

12
src/components/dashboard/navbarre/hero/index.jsx Normal file
View File

@@ -0,0 +1,12 @@
function Hero({user}) {
return(
<div className="py-10 text-center text-3xl flex flex-col items-center gap-5 text-white">
<div className="h-36 w-36 bg-gray-400 rounded-full"></div>
<div>
<h3 className="min-h-10">{user.data.first_name + " " + user.data.last_name}</h3>
</div>
</div>
)
}
export default Hero;

53
src/components/dashboard/navbarre/index.jsx
View File

@@ -1,45 +1,22 @@
function Navbarre({setPage}) {
import Hero from "./hero";
import LinkMenu from "./link-menu";
import { removeUserSession } from "../../../modules/userManager";
function Navbarre({setPage, user, setUser, links}) {
const handleClick = (e) => {
// e.preventDefault();
setPage(e.target.getAttribute("id"));
};
e.preventDefault();
setUser(null);
removeUserSession();
window.location.href = '/';
}
return (
<aside className="fixed left-0 top-0 h-screen w-1/6 bg-cyan-800 flex flex-col justify-between items-center">
<div className="py-10 text-center text-3xl flex flex-col gap-5 text-white">
<div className="h-36 w-36 bg-gray-400 rounded-full">
</div>
<div>
<h3 className="min-h-10">John Doe</h3>
</div>
</div>
<div className="text-2xl text-white">
<ul id="dash-nav">
<li className="relative my-4 hover:text-green-500 hover:cursor-pointer z-10" id="home" onClick={handleClick}>
<p className="transition-all duration-500" id="home">Accueil</p>
<div className="w-full h-1 bg-white mt-1" id="home"></div>
<div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id="home"></div>
</li>
<li className="relative my-4 hover:text-green-500 hover:cursor-pointer" id="appointment" onClick={handleClick}>
<p className="transition duration-500" id="appointment">Rendez-vous</p>
<div className="w-full h-1 bg-white mt-1" id="appointment"></div>
<div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id="appointment"></div>
</li>
<li className="relative my-4 hover:text-green-500 hover:cursor-pointer" id="prescription" onClick={handleClick}>
<p className="transition duration-500" id="prescription">Préscriptions</p>
<div className="w-full h-1 bg-white mt-1" id="prescription"></div>
<div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id="prescription"></div>
</li>
<li className="relative my-4 hover:text-green-500 hover:cursor-pointer" id="medical-file" onClick={handleClick}>
<p className="transition duration-500" id="medical-file">Dossier Médical</p>
<div className="w-full h-1 bg-white mt-1" id="medical-file"></div>
<div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id="medical-file"></div>
</li>
</ul>
</div>
<div className="py-24">
<button className="bg-red-500 text-white p-5 rounded-lg text-3xl">Déconnexion</button>
<Hero user={user}/>
<LinkMenu setPage={setPage} links={links}/>
<div className="py-12">
<button className="bg-red-500 text-white p-5 rounded-lg text-3xl" onClick={handleClick}>Déconnexion</button>
</div>
</aside>
)

18
src/components/dashboard/navbarre/link-menu/index.jsx Normal file
View File

@@ -0,0 +1,18 @@
import LinkNav from "../link-nav";
function LinkMenu({setPage, links}) {
const items = links.map((link,index) =>
link ? <LinkNav key={index} setPage={setPage} link={link} /> : null
);
return (
<div className="text-2xl text-white h-fit">
<ul id="dash-nav" className="h-full">
{items}
</ul>
</div>
)
}
export default LinkMenu;

17
src/components/dashboard/navbarre/link-nav/index.jsx Normal file
View File

@@ -0,0 +1,17 @@
function LinkNav({setPage,link}) {
const handleClick = (e) => {
// e.preventDefault();
setPage(e.target.getAttribute("id"));
};
return(
<li className="relative my-4 hover:text-green-500 hover:cursor-pointer z-10" id={link.page} onClick={handleClick}>
<p className="transition-all duration-500" id={link.page}>{link.name}</p>
<div className="w-full h-1 bg-white mt-1" id={link.page}></div>
<div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id={link.page}></div>
</li>
)
}
export default LinkNav;

24
src/components/dashboard/notVerified/index.jsx Normal file
View File

@@ -0,0 +1,24 @@
import { removeUserSession } from "../../../modules/userManager";
import SecondMenuBg from "../second-menu-bg";
function NotVerified({setUser}) {
const handleClick = (e) => {
e.preventDefault();
removeUserSession();
setUser(null);
window.location.href = '/';
}
return(
<div>
<SecondMenuBg>
<div className="h-auto w-auto border-2 border-cyan-600 rounded-2xl p-5 bg-white text-xl flex flex-col items-center gap-5 text-center" >
<h2>Votre compte est en cours de vérification,<br/> Un mail vous sera envoyé une fois votre compte validé</h2>
<button className="bg-red-500 text-white p-2 rounded-lg text-ml w-fit" onClick={handleClick}>Déconnexion</button>
</div>
</SecondMenuBg>
</div>
)
}
export default NotVerified;

15
src/components/dashboard/page-container/index.jsx Normal file
View File

@@ -0,0 +1,15 @@
import Navbarre from "../navbarre"
import Layout from "../layout"
function PageContainer({children,links,setPage,setUser, user}) {
return(
<div>
<Navbarre links={links} setPage={setPage} setUser={setUser} user={user} />
<Layout>
{children}
</Layout>
</div>
)
}
export default PageContainer;

31
src/components/dashboard/page-handler/index.jsx
View File

@@ -1,22 +1,21 @@
import Home from "../home";
import Prescription from "../prescription";
import MedicalFile from "../medical-file";
import Appointment from "../appointment";
import { removeUserSession } from "../../../modules/userManager";
import Patient from "../patient";
import Admin from "../admin";
function PageHandler({page}) {
switch (page) {
case "home":
return <Home />;
case "prescription":
return <Prescription />;
case "medical-file":
return <MedicalFile />;
case "appointment":
return <Appointment />;
function PageHandler({user,setUser}) {
switch (user.roles[0].name) {
case "Patient" :
return <Patient user={user} setUser={setUser} />;
case "Doctor" :
return null;
case "Admin" :
return <Admin user={user} setUser={setUser} />;
default:
return <Home />;
setUser(null);
removeUserSession();
window.location.href = "/login";
return null;
}
}
export default PageHandler;

24
src/components/dashboard/patient/appointment/create/index.jsx Normal file
View File

@@ -0,0 +1,24 @@
import ModalContainer from "../../../modal-container";
import SubmitButton from "../../../submit-button";
import BackButton from "../../../back-button";
function Create({setCreateMenu, user}) {
return (
<ModalContainer>
<div>
<h2 className="text-2xl">Prendre Rendez-Vous</h2>
</div>
<form action="" className="flex flex-col items-center gap-4">
<div>
</div>
<div className="flex flex-row gap-5">
<SubmitButton />
<BackButton setMenu={setCreateMenu}/>
</div>
</form>
</ModalContainer>
)
}
export default Create;

51
src/components/dashboard/patient/appointment/index.jsx Normal file
View File

@@ -0,0 +1,51 @@
import HeadTitle from "../../head-title";
import { get } from "../../../../modules/fetchManager";
import { useState } from "react";
import Loader from "../../loader";
import Container from "../../container";
import ListDisplay from "../../list-display";
import ItemList from "./item-list";
import Create from "./create";
import CreateButton from "../../createButton";
function Appointment({user}) {
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [appointments, setAppointments] = useState([]);
const [createMenu, setCreateMenu] = useState(false);
if(loading && !error && appointments.length === 0){
get('patients/@me/appointments', user.token)
.then((data) => {
setLoading(false);
if(data.status === 404) {
setError("Aucun rendez-vous trouvé");
return;
}
if(data.status === 500) {
setError("Erreur serveur, veuillez réessayer plus tard");
return;
}
setAppointments(data.JSON);
});
}
return (
<div>
<HeadTitle title="Rendez-vous"/>
<div className="flex justify-center items-center mt-10">
<CreateButton setCreateMenu={setCreateMenu} nameMenu="Prendre Rendez-Vous"/>
</div>
<Container>
{ loading ? <Loader color={true}/> : null }
{ error ? <p className="text-2xl">{error}</p> : null }
{ !error && !loading ? <ListDisplay data={appointments} itemComponent={ItemList}/> : null }
{ createMenu ? <Create setCreateMenu={setCreateMenu} user={user}/> : null }
</Container>
</div>
);
}
export default Appointment;

11
src/components/dashboard/patient/appointment/item-list/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
function ItemList({item}) {
return (
<div>
<h2>{item.date}</h2>
<p>{item.doctor}</p>
<p>{item.reason}</p>
</div>
);
}
export default ItemList;

23
src/components/dashboard/patient/index.jsx Normal file
View File

@@ -0,0 +1,23 @@
import { useState } from 'react';
import PageContainer from '../page-container';
import config from '../../../config';
import MenuHandler from './menu-handler';
function Patient({user,setUser}) {
const [page, setPage] = useState("home");
const links = [
{page:"home",name:"Accueil"},
{page:"appointment",name:"Rendez-vous"},
config.prescriptionOn ? {page:"prescription",name:"Préscriptions"} : null,
{page:"medical-file",name:"Dossier Médical"},
{page:"profil",name:"Profil"}
]
return (
<PageContainer links={links} setUser={setUser} user={user} setPage={setPage}>
<MenuHandler page={page} setPage={setPage} user={user} />
</PageContainer>
)
}
export default Patient;

2
src/components/dashboard/medical-file/index.jsx → src/components/dashboard/patient/medical-file/index.jsx
View File

@@ -1,4 +1,4 @@
import HeadTitle from "../head-title";
import HeadTitle from "../../head-title";
function MedicalFile() {
return (

23
src/components/dashboard/patient/menu-handler/index.jsx Normal file
View File

@@ -0,0 +1,23 @@
import Home from "../../home";
import Prescription from "../prescription";
import MedicalFile from "../medical-file";
import Appointment from "../appointment";
import Profil from "../profil";
function MenuHandler({setPage,page,user}) {
switch (page) {
case "prescription":
return <Prescription user={user} />;
case "medical-file":
return <MedicalFile user={user} />;
case "appointment":
return <Appointment user={user} />;
case "profil":
return <Profil user={user} />;
default:
return <Home user={user} />;
}
}
export default MenuHandler;

2
src/components/dashboard/prescription/index.jsx → src/components/dashboard/patient/prescription/index.jsx
View File

@@ -1,4 +1,4 @@
import HeadTitle from "../head-title";
import HeadTitle from "../../head-title";
function Prescription() {
return (

11
src/components/dashboard/patient/profil/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
import HeadTitle from "../../head-title";
function Profil() {
return (
<div>
<HeadTitle title="Votre Profil"/>
</div>
);
}
export default Profil;

9
src/components/dashboard/second-menu-bg/index.jsx Normal file
View File

@@ -0,0 +1,9 @@
function SecondMenuBg({children}) {
return(
<div className="flex justify-center items-center h-screen bg-cyan-800">
{children}
</div>
)
}
export default SecondMenuBg;

9
src/components/dashboard/submit-button/index.jsx Normal file
View File

@@ -0,0 +1,9 @@
function SubmitButton() {
return (
<button type="submit" className="w-36 p-6 border-2 border-green-600 rounded-2xl hover:bg-green-600 hover:text-white transition-all ease-in-out duration-300">
Envoyer
</button>
);
}
export default SubmitButton;

9
src/components/dashboard/type-user/container/index.jsx Normal file
View File

@@ -0,0 +1,9 @@
function Container({children}) {
return (
<div className="flex flex-col gap-7 p-4">
{children}
</div>
);
}
export default Container;

58
src/components/dashboard/type-user/doctor-type-user/index.jsx Normal file
View File

@@ -0,0 +1,58 @@
import Container from "../container";
import BackButton from "../../back-button";
import SubmitButton from "../../submit-button";
import { useForm } from 'react-hook-form';
import { getUserSession, setUserSession } from "../../../../modules/userManager";
import { post, get } from "../../../../modules/fetchManager";
function DoctorTypeUser({setMenu}) {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
const user = getUserSession();
post('doctors/register', data, user.token)
.then(data => {
if(data.status !== 200) {
alert("Erreur lors de la création du compte médecin");
}
window.location.href = '/dashboard';
});
}
return (
<Container>
<form action="" method="post" className="flex flex-col gap-10" onSubmit={handleSubmit(onSubmit)}>
<div className="text-center text-2xl">
<h2>Création d'un compte Patient</h2>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="email">Email Professionnel</label>
<input type="email" {...register("email", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="phone">Téléphone Professionnel</label>
<input type="tel" {...register("phone", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="speciality">Spécialité</label>
<input type="text" {...register("speciality", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="status">Status</label>
<select {...register("status", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none">
<option value="Available">Disponble</option>
<option value="Absent">Absent</option>
<option value="Unavailable">Indisponible</option>
</select>
</div>
<div className="flex flex-row gap-8 justify-center">
<BackButton setMenu={setMenu}/>
<SubmitButton/>
</div>
</form>
</Container>
);
}
export default DoctorTypeUser;

21
src/components/dashboard/type-user/index.jsx Normal file
View File

@@ -0,0 +1,21 @@
import { useState } from "react";
import SelectTypeUser from "./select-type-user";
import DoctorTypeUser from "./doctor-type-user";
import PatientTypeUser from "./patient-type-user";
import SecondMenuBg from "../second-menu-bg";
function TypeUser() {
const [menu, setMenu] = useState(null);
return (
<SecondMenuBg>
<div className="h-auto w-auto border-2 border-cyan-600 rounded-2xl p-5 bg-white text-xl" >
{menu === "patient" ? <PatientTypeUser setMenu={setMenu} /> : null}
{menu === "doctor" ? <DoctorTypeUser setMenu={setMenu} /> : null}
{(menu !== "patient" && menu !== "doctor") ? <SelectTypeUser setMenu={setMenu} /> : null}
</div>
</SecondMenuBg>
);
}
export default TypeUser;

63
src/components/dashboard/type-user/patient-type-user/index.jsx Normal file
View File

@@ -0,0 +1,63 @@
import Container from "../container";
import BackButton from "../../back-button";
import SubmitButton from "../../submit-button";
import { useForm } from 'react-hook-form';
import { getUserSession, setUserSession } from "../../../../modules/userManager";
import { post, get } from "../../../../modules/fetchManager";
function PatientTypeUser({setMenu}) {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
const user = getUserSession();
post('patients/register', data, user.token)
.then(data => {
console.log(data);
if(data.status !== 200) {
alert("Erreur lors de la création du compte patient");
}
window.location.href = '/dashboard';
});
}
return(
<Container>
<form action="" method="post" className="flex flex-col gap-10" onSubmit={handleSubmit(onSubmit)}>
<div className="text-center text-2xl">
<h2>Création d'un compte Patient</h2>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="date_of_birth">Date de naissance</label>
<input type="date" {...register("date_of_birth", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="gender">Genre</label>
<select {...register("gender", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none">
<option value="M">Homme</option>
<option value="F">Femme</option>
<option value="O">Autre</option>
</select>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="address">Adresse</label>
<input type="text" {...register("address", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="social_security_number">Numéro de sécurité social</label>
<input type="text" {...register("social_security_number", {required: true})} pattern="[12][0-9]{2}(0[1-9]|1[0-2])(2[AB]|[0-9]{2})[0-9]{3}[0-9]{3}([0-9]{2})" className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-4 justify-between">
<label htmlFor="insurance_number">Numéro d'assurance</label>
<input type="text" {...register("insurance_number", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
</div>
<div className="flex flex-row gap-8 justify-center">
<BackButton setMenu={setMenu}/>
<SubmitButton/>
</div>
</form>
</Container>
);
}
export default PatientTypeUser;

33
src/components/dashboard/type-user/select-type-user/index.jsx Normal file
View File

@@ -0,0 +1,33 @@
import Container from "../container";
function SelectTypeUser({setMenu}) {
const handleClick = (e) => {
e.preventDefault();
const type = e.target.id;
if (type !== "patient" && type !== "doctor") {
setMenu(null);
return;
}
setMenu(type);
}
return(
<Container>
<div className="text-center">
<h2 className="text-2xl mb-4">Type d'utilisateur</h2>
<p>Choisissez le type de compte que vous souhaitez créer</p>
</div>
<div className="flex flex-col items-center gap-5">
<button id="patient" className="w-52 p-6 border-2 border-cyan-600 rounded-2xl hover:bg-cyan-600 hover:text-white transition-all ease-in-out duration-300" onClick={handleClick}>
Patient
</button>
<button id="doctor" className="w-52 p-6 border-2 border-cyan-600 rounded-2xl hover:bg-cyan-600 hover:text-white transition-all ease-in-out duration-300" onClick={handleClick}>
Docteur
</button>
</div>
</Container>
);
}
export default SelectTypeUser;

5
src/index.js
View File

@@ -9,6 +9,7 @@ import Home from './components/vitrine/home';
import Login from './components/auth/login';
import Register from './components/auth/register';
import Dashboard from './components/dashboard';
import VerifyEmail from './components/auth/verifyEmail';
const router = createBrowserRouter([
{
@@ -26,6 +27,10 @@ const router = createBrowserRouter([
{
path: "dashboard",
element: <Dashboard />,
},
{
path: "email/verify",
element: <VerifyEmail />,
}
]);

3
src/modules/fetchManager.js
View File

@@ -8,6 +8,7 @@ function selectUrl(url) {
async function get(url, token = 'none') {
const options = {
method: 'GET',
mode: 'cors',
headers: { 'Content-Type': 'application/json', authorization: `${token}` },
};
@@ -27,8 +28,6 @@ async function post(url, body, token = 'none') {
body: JSON.stringify(body),
};
console.log(body);
return await fetch(selectUrl(url), options)
.then(res => res.json())
.then(json => {

21
src/modules/userManager.js Normal file
View File

@@ -0,0 +1,21 @@
function getUserSession() {
const user = JSON.parse(window.sessionStorage.getItem('user'));
if (!user) {
return false;
}
return user;
}
function setUserSession(user) {
if(!user || !user.token || !user.data) return false;
window.sessionStorage.setItem('user', JSON.stringify(user));
return true;
}
function removeUserSession() {
window.sessionStorage.removeItem('user');
return true;
}
export { getUserSession, setUserSession, removeUserSession };