User stuff

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';

pill_mate/frontend/src/AppRoutes.tsx

@@ -1,16 +1,30 @@
 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';
 import Stock from './pages/Stock.tsx' ;
 
 const AppRoutes: React.FC = () => {
+
+    const { user } = useUser();
+
     return (
         <Routes>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/calendar" element={<Calendar />} />
-            <Route path="/stock" element={<Stock />} />
-            <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="/stock" element={<Stock />} />
+                    <Route path="*" element={<Navigate to="/" />} />
+                </>
+            )}
         </Routes>
     );
 };

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;

pill_mate/frontend/src/context/UserContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { UserRole } from '../models/UserRole';
+import { User } from '../models/User';
+
+export interface UserContextType {
+  user: User | null;
+  createUser: (role: UserRole) => Promise<void>;
+}
+
+export const UserContext = createContext<UserContextType | undefined>(undefined);

pill_mate/frontend/src/context/UserProvider.tsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect, ReactNode } from 'react';
+import { getUserInfo, createUser as apiCreateUser } from '../services/userServices.tsx';
+import { UserRole } from '../models/UserRole.ts';
+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<User | null | undefined>(undefined);
+
+    useEffect(() => {
+        const loadUserInfo = async () => {
+            try {
+                const userInfo = await getUserInfo();
+                setUser(userInfo);
+            } catch {
+                setUser(null);
+            }
+        };
+        loadUserInfo();
+    }, []);
+
+    const createUser = async (role: UserRole) => {
+        const newUser = await apiCreateUser(role);
+        setUser(newUser);
+    };
+
+    if (user === undefined) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <UserContext.Provider value={{ user, createUser }}>
+            {children}
+        </UserContext.Provider>
+    );
+};

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;
+};

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>,
 );

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;
+}

pill_mate/frontend/src/models/UserRole.ts

@@ -0,0 +1,4 @@
+export enum UserRole {
+    HELPED = 0,
+    HELPER = 1
+}

pill_mate/frontend/src/pages/Calendar.css

@@ -21,7 +21,6 @@
     align-items: center;
     flex-grow: 1;
     gap: 10px;
-
 }
 
 .Link {

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;
+}

pill_mate/frontend/src/pages/CreateUser.tsx

@@ -0,0 +1,33 @@
+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] = useState(UserRole.HELPED);
+    const navigate = useNavigate();
+
+    const handleSubmit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        await createUser(role);
+        navigate('/dashboard');
+    };
+
+    return (
+        <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>
+    );
+};
+
+export default CreateUser;

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;
+}
+

pill_mate/frontend/src/services/userServices.tsx

@@ -0,0 +1,32 @@
+import { UserRole } from '../models/UserRole';
+import { User } from '../models/User';
+
+const API_URL = 'api';
+
+export const getUserInfo = async (): Promise<User | null> => {
+    const response = await fetch(`${API_URL}/user/me`);
+    if (response.ok){
+        return response.json();
+    }
+
+    if (response.status === 404) {
+        return null;
+    }
+    throw new Error('Erreur lors de la récupération des informations de l\'utilisateur');
+};
+
+export const createUser = async (role: UserRole): Promise<User> => {
+    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();
+};