From 8ff6a1c90327f1689800c4ad1a5cb6a0f9dbc79f Mon Sep 17 00:00:00 2001
From: Augustin <bouyer.augustin@gmail.com>
Date: Sun, 23 Mar 2025 00:18:34 +0100
Subject: [PATCH 1/5] Test lien backend/frontend user

---
 pill_mate/frontend/src/AppRoutes.tsx          | 20 +++++++--
 .../frontend/src/context/UserContext.tsx      | 15 +++++++
 .../frontend/src/context/UserProvider.tsx     | 43 +++++++++++++++++++
 pill_mate/frontend/src/context/useUser.tsx    | 10 +++++
 pill_mate/frontend/src/main.tsx               |  8 +++-
 pill_mate/frontend/src/pages/CreateUser.tsx   | 40 +++++++++++++++++
 .../frontend/src/services/userServices.tsx    | 26 +++++++++++
 7 files changed, 158 insertions(+), 4 deletions(-)
 create mode 100644 pill_mate/frontend/src/context/UserContext.tsx
 create mode 100644 pill_mate/frontend/src/context/UserProvider.tsx
 create mode 100644 pill_mate/frontend/src/context/useUser.tsx
 create mode 100644 pill_mate/frontend/src/pages/CreateUser.tsx
 create mode 100644 pill_mate/frontend/src/services/userServices.tsx

diff --git a/pill_mate/frontend/src/AppRoutes.tsx b/pill_mate/frontend/src/AppRoutes.tsx
index 0e76a4c..00120b4 100644
--- a/pill_mate/frontend/src/AppRoutes.tsx
+++ b/pill_mate/frontend/src/AppRoutes.tsx
@@ -1,14 +1,28 @@
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
+import { useUser } from './context/useUser.tsx';
 import Dashboard from './pages/Dashboard.tsx';
 import Calendar from './pages/Calendar.tsx';
+import CreateUser from './pages/CreateUser.tsx';
 
 const AppRoutes: React.FC = () => {
+
+    const { user } = useUser();
+
     return (
         <Routes>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/calendar" element={<Calendar />} />
-            <Route path="*" element={<Navigate to="/" />} />
+            {!user ? (
+                <>
+                    <Route path="/create-user" element={<CreateUser />} />
+                    <Route path="*" element={<Navigate to="/create-user" />} />
+                </>
+            ) : (
+                <>
+                    <Route path="/" element={<Dashboard />} />
+                    <Route path="/calendar" element={<Calendar />} />
+                    <Route path="*" element={<Navigate to="/" />} />
+                </>
+            )}
         </Routes>
     );
 };
diff --git a/pill_mate/frontend/src/context/UserContext.tsx b/pill_mate/frontend/src/context/UserContext.tsx
new file mode 100644
index 0000000..8d64efb
--- /dev/null
+++ b/pill_mate/frontend/src/context/UserContext.tsx
@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+interface User {
+  homeAssistantUserId: string;
+  userName: string;
+  userDisplayName: string;
+  role: string;
+}
+
+export interface UserContextType {
+  user: User | null;
+  createUser: (role: string) => Promise<void>;
+}
+
+export const UserContext = createContext<UserContextType | undefined>(undefined);
diff --git a/pill_mate/frontend/src/context/UserProvider.tsx b/pill_mate/frontend/src/context/UserProvider.tsx
new file mode 100644
index 0000000..26dfb22
--- /dev/null
+++ b/pill_mate/frontend/src/context/UserProvider.tsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect, ReactNode } from 'react';
+import { getUserInfo, createUser as apiCreateUser } from '../services/userServices.tsx';
+import { UserContext, UserContextType } from './UserContext.tsx';
+
+interface UserProviderProps {
+    children: ReactNode;
+}
+
+export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
+    const [user, setUser] = useState<UserContextType['user'] | undefined>(undefined);
+
+    useEffect(() => {
+        const loadUserInfo = async () => {
+            try {
+                const userInfo = await getUserInfo();
+                setUser(userInfo);
+            } catch (error) {
+                console.error(error);
+                setUser(null);
+            }
+        };
+        loadUserInfo();
+    }, []);
+
+    const createUser = async (role: string) => {
+        try {
+            const newUser = await apiCreateUser(role);
+            setUser(newUser);
+        } catch (error) {
+            console.error('Error creating user:', error);
+        }
+    };
+
+    if (user === undefined) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <UserContext.Provider value={{ user, createUser }}>
+            {children}
+        </UserContext.Provider>
+    );
+};
diff --git a/pill_mate/frontend/src/context/useUser.tsx b/pill_mate/frontend/src/context/useUser.tsx
new file mode 100644
index 0000000..448cf5c
--- /dev/null
+++ b/pill_mate/frontend/src/context/useUser.tsx
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { UserContext } from './UserContext.tsx';
+
+export const useUser = () => {
+    const context = useContext(UserContext);
+    if (!context) {
+        throw new Error('useUser must be used within a UserProvider');
+    }
+    return context;
+};
diff --git a/pill_mate/frontend/src/main.tsx b/pill_mate/frontend/src/main.tsx
index 2c78579..d7f014b 100644
--- a/pill_mate/frontend/src/main.tsx
+++ b/pill_mate/frontend/src/main.tsx
@@ -2,11 +2,17 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+import { UserProvider } from './context/UserProvider.tsx';
+import { ReminderProvider } from './context/ReminderContext.tsx';
 
 const rootElement = document.getElementById('root');
 
 createRoot(rootElement!).render(
     <StrictMode>
-        <App />
+        <UserProvider>
+            <ReminderProvider>
+                <App />
+            </ReminderProvider>
+        </UserProvider>
     </StrictMode>,
 );
diff --git a/pill_mate/frontend/src/pages/CreateUser.tsx b/pill_mate/frontend/src/pages/CreateUser.tsx
new file mode 100644
index 0000000..ed4a01b
--- /dev/null
+++ b/pill_mate/frontend/src/pages/CreateUser.tsx
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useUser } from '../context/useUser';
+
+const CreateUser = () => {
+    const { createUser } = useUser();
+    const [role, setRole] = useState('');
+    const navigate = useNavigate();
+
+    const handleSubmit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        if (!role) return;
+
+        try {
+            await createUser(role);
+            navigate('/dashboard'); // Rediriger vers le Dashboard après la création
+        } catch (error) {
+            console.error('Error creating user:', error);
+        }
+    };
+
+    return (
+        <div>
+            <h2>Create Your User</h2>
+            <form onSubmit={handleSubmit}>
+                <label>
+                Role:
+                    <input
+                        type="text"
+                        value={role}
+                        onChange={(e) => setRole(e.target.value)}
+                    />
+                </label>
+                <button type="submit">Create User</button>
+            </form>
+        </div>
+    );
+};
+
+export default CreateUser;
diff --git a/pill_mate/frontend/src/services/userServices.tsx b/pill_mate/frontend/src/services/userServices.tsx
new file mode 100644
index 0000000..017a869
--- /dev/null
+++ b/pill_mate/frontend/src/services/userServices.tsx
@@ -0,0 +1,26 @@
+// frontend/src/services/userService.ts
+const API_URL = 'http://localhost:3000/api/user'; // Remplace par l'URL de ton backend
+
+// Récupérer les informations de l'utilisateur connecté
+export const getUserInfo = async () => {
+    const response = await fetch(`${API_URL}/me`);
+    if (!response.ok) {
+        throw new Error('Erreur lors de la récupération des informations de l\'utilisateur');
+    }
+    return response.json();
+};
+
+// Créer un utilisateur
+export const createUser = async (role: string) => {
+    const response = await fetch(API_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ role }),
+    });
+    if (!response.ok) {
+        throw new Error('Erreur lors de la création de l\'utilisateur');
+    }
+    return response.json();
+};

From 15c73c72a9902060ba3584aedd474c0ecc7a9e3b Mon Sep 17 00:00:00 2001
From: Augustin <bouyer.augustin@gmail.com>
Date: Tue, 25 Mar 2025 17:28:29 +0100
Subject: [PATCH 2/5] User Connection work

---
 pill_mate/frontend/src/App.tsx                |  2 +-
 .../frontend/src/components/ReminderCard.css  |  1 +
 .../frontend/src/context/UserContext.tsx      |  5 +--
 .../frontend/src/context/UserProvider.tsx     | 16 ++++-----
 pill_mate/frontend/src/models/UserRole.ts     |  4 +++
 pill_mate/frontend/src/pages/Calendar.css     |  1 -
 pill_mate/frontend/src/pages/CreateUser.css   | 22 ++++++++++++
 pill_mate/frontend/src/pages/CreateUser.tsx   | 35 ++++++++-----------
 pill_mate/frontend/src/pages/Dashboard.css    | 10 ++++++
 .../frontend/src/services/userServices.tsx    | 25 +++++++------
 10 files changed, 76 insertions(+), 45 deletions(-)
 create mode 100644 pill_mate/frontend/src/models/UserRole.ts
 create mode 100644 pill_mate/frontend/src/pages/CreateUser.css

diff --git a/pill_mate/frontend/src/App.tsx b/pill_mate/frontend/src/App.tsx
index 7ab738c..adac02b 100644
--- a/pill_mate/frontend/src/App.tsx
+++ b/pill_mate/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { HashRouter as Router } from 'react-router-dom';
 import './App.css';
 import AppRoutes from './AppRoutes.tsx';
 import { ReminderProvider } from './context/ReminderContext.tsx';
diff --git a/pill_mate/frontend/src/components/ReminderCard.css b/pill_mate/frontend/src/components/ReminderCard.css
index a0078b5..d111b57 100644
--- a/pill_mate/frontend/src/components/ReminderCard.css
+++ b/pill_mate/frontend/src/components/ReminderCard.css
@@ -13,6 +13,7 @@
 
 .button {
     background-color: var(--blue);
+    font-size: 1rem;
     color: white;
     padding: 8px 16px;
     border-radius: 5px;
diff --git a/pill_mate/frontend/src/context/UserContext.tsx b/pill_mate/frontend/src/context/UserContext.tsx
index 8d64efb..32375e1 100644
--- a/pill_mate/frontend/src/context/UserContext.tsx
+++ b/pill_mate/frontend/src/context/UserContext.tsx
@@ -1,15 +1,16 @@
 import { createContext } from 'react';
+import { UserRole } from '../models/UserRole';
 
 interface User {
   homeAssistantUserId: string;
   userName: string;
   userDisplayName: string;
-  role: string;
+  role: UserRole;
 }
 
 export interface UserContextType {
   user: User | null;
-  createUser: (role: string) => Promise<void>;
+  createUser: (role: UserRole) => Promise<void>;
 }
 
 export const UserContext = createContext<UserContextType | undefined>(undefined);
diff --git a/pill_mate/frontend/src/context/UserProvider.tsx b/pill_mate/frontend/src/context/UserProvider.tsx
index 26dfb22..fca9e12 100644
--- a/pill_mate/frontend/src/context/UserProvider.tsx
+++ b/pill_mate/frontend/src/context/UserProvider.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, ReactNode } from 'react';
 import { getUserInfo, createUser as apiCreateUser } from '../services/userServices.tsx';
+import { UserRole } from '../models/UserRole.ts';
 import { UserContext, UserContextType } from './UserContext.tsx';
 
 interface UserProviderProps {
@@ -7,28 +8,23 @@ interface UserProviderProps {
 }
 
 export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
-    const [user, setUser] = useState<UserContextType['user'] | undefined>(undefined);
+    const [user, setUser] = useState<UserContextType['user']>(null);
 
     useEffect(() => {
         const loadUserInfo = async () => {
             try {
                 const userInfo = await getUserInfo();
                 setUser(userInfo);
-            } catch (error) {
-                console.error(error);
+            } catch {
                 setUser(null);
             }
         };
         loadUserInfo();
     }, []);
 
-    const createUser = async (role: string) => {
-        try {
-            const newUser = await apiCreateUser(role);
-            setUser(newUser);
-        } catch (error) {
-            console.error('Error creating user:', error);
-        }
+    const createUser = async (role: UserRole) => {
+        const newUser = await apiCreateUser(role);
+        setUser(newUser);
     };
 
     if (user === undefined) {
diff --git a/pill_mate/frontend/src/models/UserRole.ts b/pill_mate/frontend/src/models/UserRole.ts
new file mode 100644
index 0000000..4031207
--- /dev/null
+++ b/pill_mate/frontend/src/models/UserRole.ts
@@ -0,0 +1,4 @@
+export enum UserRole {
+    HELPED = 0,
+    HELPER = 1
+}
diff --git a/pill_mate/frontend/src/pages/Calendar.css b/pill_mate/frontend/src/pages/Calendar.css
index b649e0c..a97c51a 100644
--- a/pill_mate/frontend/src/pages/Calendar.css
+++ b/pill_mate/frontend/src/pages/Calendar.css
@@ -22,7 +22,6 @@
     align-items: center;
     flex-grow: 1;
     gap: 10px;
-
 }
 
 .Link {
diff --git a/pill_mate/frontend/src/pages/CreateUser.css b/pill_mate/frontend/src/pages/CreateUser.css
new file mode 100644
index 0000000..00ab72c
--- /dev/null
+++ b/pill_mate/frontend/src/pages/CreateUser.css
@@ -0,0 +1,22 @@
+.CreateUser {
+    display: flex;
+    padding: 24%;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+    position: relative;
+    background: linear-gradient(135deg, rgb(33, 150, 243), rgb(156, 39, 176));
+}
+
+.title {
+    font-size: 3rem;
+    text-align: center;
+}
+
+.questionnaire {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+}
diff --git a/pill_mate/frontend/src/pages/CreateUser.tsx b/pill_mate/frontend/src/pages/CreateUser.tsx
index ed4a01b..c6f17b7 100644
--- a/pill_mate/frontend/src/pages/CreateUser.tsx
+++ b/pill_mate/frontend/src/pages/CreateUser.tsx
@@ -1,37 +1,30 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useUser } from '../context/useUser';
+import { UserRole } from '../models/UserRole';
+import './CreateUser.css';
 
 const CreateUser = () => {
     const { createUser } = useUser();
-    const [role, setRole] = useState('');
+    const [role] = useState(UserRole.HELPED);
     const navigate = useNavigate();
 
     const handleSubmit = async (event: React.FormEvent) => {
         event.preventDefault();
-        if (!role) return;
-
-        try {
-            await createUser(role);
-            navigate('/dashboard'); // Rediriger vers le Dashboard après la création
-        } catch (error) {
-            console.error('Error creating user:', error);
-        }
+        await createUser(role);
+        navigate('/dashboard');
     };
 
     return (
-        <div>
-            <h2>Create Your User</h2>
-            <form onSubmit={handleSubmit}>
-                <label>
-                Role:
-                    <input
-                        type="text"
-                        value={role}
-                        onChange={(e) => setRole(e.target.value)}
-                    />
-                </label>
-                <button type="submit">Create User</button>
+        <div className="CreateUser">
+            <div className="title">Bienvenue sur PillMate</div>
+            <form className="questionnaire" onSubmit={handleSubmit}>
+                <h2>Quel est votre rôle ?</h2>
+                <select name="role">
+                    <option value={UserRole.HELPED}>Personne aidée</option>
+                    <option value={UserRole.HELPER}>Personne aidante</option>
+                </select>
+                <button type="submit">Valider</button>
             </form>
         </div>
     );
diff --git a/pill_mate/frontend/src/pages/Dashboard.css b/pill_mate/frontend/src/pages/Dashboard.css
index d6e5a73..adea373 100644
--- a/pill_mate/frontend/src/pages/Dashboard.css
+++ b/pill_mate/frontend/src/pages/Dashboard.css
@@ -25,3 +25,13 @@
   background: transparent;
   cursor: pointer;
 }
+
+.button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 5vw;
+  font-weight: bold;
+}
+
diff --git a/pill_mate/frontend/src/services/userServices.tsx b/pill_mate/frontend/src/services/userServices.tsx
index 017a869..dcb8917 100644
--- a/pill_mate/frontend/src/services/userServices.tsx
+++ b/pill_mate/frontend/src/services/userServices.tsx
@@ -1,26 +1,31 @@
-// frontend/src/services/userService.ts
-const API_URL = 'http://localhost:3000/api/user'; // Remplace par l'URL de ton backend
+import { UserRole } from '../models/UserRole';
+
+const API_URL = 'api';
 
-// Récupérer les informations de l'utilisateur connecté
 export const getUserInfo = async () => {
-    const response = await fetch(`${API_URL}/me`);
-    if (!response.ok) {
-        throw new Error('Erreur lors de la récupération des informations de l\'utilisateur');
+    const response = await fetch(`${API_URL}/user/me`);
+    if (response.ok){
+        return response.json();
     }
-    return response.json();
+
+    if (response.status === 404) {
+        return null;
+    }
+    throw new Error('Erreur lors de la récupération des informations de l\'utilisateur');
 };
 
-// Créer un utilisateur
-export const createUser = async (role: string) => {
-    const response = await fetch(API_URL, {
+export const createUser = async (role: UserRole) => {
+    const response = await fetch(`${API_URL}/user`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({ role }),
     });
+
     if (!response.ok) {
         throw new Error('Erreur lors de la création de l\'utilisateur');
     }
+
     return response.json();
 };

From 63f14857e46e8416b2dbf5e51abafa4a35798a6f Mon Sep 17 00:00:00 2001
From: Augustin <bouyer.augustin@gmail.com>
Date: Fri, 28 Mar 2025 09:32:27 +0100
Subject: [PATCH 3/5] Correction pull request

---
 pill_mate/frontend/src/context/UserContext.tsx   | 8 +-------
 pill_mate/frontend/src/models/User.ts            | 8 ++++++++
 pill_mate/frontend/src/services/userServices.tsx | 5 +++--
 3 files changed, 12 insertions(+), 9 deletions(-)
 create mode 100644 pill_mate/frontend/src/models/User.ts

diff --git a/pill_mate/frontend/src/context/UserContext.tsx b/pill_mate/frontend/src/context/UserContext.tsx
index 32375e1..6a2ba8f 100644
--- a/pill_mate/frontend/src/context/UserContext.tsx
+++ b/pill_mate/frontend/src/context/UserContext.tsx
@@ -1,12 +1,6 @@
 import { createContext } from 'react';
 import { UserRole } from '../models/UserRole';
-
-interface User {
-  homeAssistantUserId: string;
-  userName: string;
-  userDisplayName: string;
-  role: UserRole;
-}
+import { User } from '../models/User';
 
 export interface UserContextType {
   user: User | null;
diff --git a/pill_mate/frontend/src/models/User.ts b/pill_mate/frontend/src/models/User.ts
new file mode 100644
index 0000000..dd298ab
--- /dev/null
+++ b/pill_mate/frontend/src/models/User.ts
@@ -0,0 +1,8 @@
+import { UserRole } from './UserRole.ts';
+
+export interface User {
+  homeAssistantUserId: string;
+  userName: string;
+  userDisplayName: string;
+  role: UserRole;
+}
diff --git a/pill_mate/frontend/src/services/userServices.tsx b/pill_mate/frontend/src/services/userServices.tsx
index dcb8917..5482a6e 100644
--- a/pill_mate/frontend/src/services/userServices.tsx
+++ b/pill_mate/frontend/src/services/userServices.tsx
@@ -1,8 +1,9 @@
 import { UserRole } from '../models/UserRole';
+import { User } from '../models/User';
 
 const API_URL = 'api';
 
-export const getUserInfo = async () => {
+export const getUserInfo = async (): Promise<User | null> => {
     const response = await fetch(`${API_URL}/user/me`);
     if (response.ok){
         return response.json();
@@ -14,7 +15,7 @@ export const getUserInfo = async () => {
     throw new Error('Erreur lors de la récupération des informations de l\'utilisateur');
 };
 
-export const createUser = async (role: UserRole) => {
+export const createUser = async (role: UserRole): Promise<User> => {
     const response = await fetch(`${API_URL}/user`, {
         method: 'POST',
         headers: {

From f92f1a46f64250418f880aac731b00c5c43e6059 Mon Sep 17 00:00:00 2001
From: Floris Bartra <floris.bartra@gmail.com>
Date: Mon, 7 Apr 2025 13:47:23 +0200
Subject: [PATCH 4/5] Fix user is loading

---
 pill_mate/frontend/src/context/UserProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pill_mate/frontend/src/context/UserProvider.tsx b/pill_mate/frontend/src/context/UserProvider.tsx
index fca9e12..77e012a 100644
--- a/pill_mate/frontend/src/context/UserProvider.tsx
+++ b/pill_mate/frontend/src/context/UserProvider.tsx
@@ -27,7 +27,7 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
         setUser(newUser);
     };
 
-    if (user === undefined) {
+    if (user === null) {
         return <div>Loading...</div>;
     }
 

From ef780473bebce7842f7c7e6112ca34a8ed5d85ef Mon Sep 17 00:00:00 2001
From: Augustin <bouyer.augustin@gmail.com>
Date: Mon, 5 May 2025 10:20:36 +0200
Subject: [PATCH 5/5] Fix Loading never end for User connection

---
 pill_mate/frontend/src/context/UserProvider.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/pill_mate/frontend/src/context/UserProvider.tsx b/pill_mate/frontend/src/context/UserProvider.tsx
index 77e012a..34ba511 100644
--- a/pill_mate/frontend/src/context/UserProvider.tsx
+++ b/pill_mate/frontend/src/context/UserProvider.tsx
@@ -1,14 +1,15 @@
 import React, { useState, useEffect, ReactNode } from 'react';
 import { getUserInfo, createUser as apiCreateUser } from '../services/userServices.tsx';
 import { UserRole } from '../models/UserRole.ts';
-import { UserContext, UserContextType } from './UserContext.tsx';
+import { User } from '../models/User.ts';
+import { UserContext } from './UserContext.tsx';
 
 interface UserProviderProps {
     children: ReactNode;
 }
 
 export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
-    const [user, setUser] = useState<UserContextType['user']>(null);
+    const [user, setUser] = useState<User | null | undefined>(undefined);
 
     useEffect(() => {
         const loadUserInfo = async () => {
@@ -27,7 +28,7 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
         setUser(newUser);
     };
 
-    if (user === null) {
+    if (user === undefined) {
         return <div>Loading...</div>;
     }