fix merge features/ts into dev

global.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module "*.module.css" {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-// permet à TS de reconnaître les fichiers modules.css 

src/components/ui/modal/modal.tsx

@@ -1,7 +1,39 @@
-import { ReactNode, MouseEvent } from "react";
+/*import { createPortal } from "react-dom";
+import styles from "./modal.module.css";
+import Button from "../button/button.jsx";
+
+const Modal = ({ open, onClose, children, title }) => {
+
+    if (!open) return null;
+
+    const handleOverlayClick = () => {
+        onClose();
+    };
+
+    const handleModalClick = (e) => {
+        e.stopPropagation();
+    };
+
+    return createPortal(
+        <div className={styles.overlay} onClick={handleOverlayClick}>
+            <div className={styles.modal} onClick={handleModalClick}>
+                {title && <h2>{title}</h2>}
+                {children}
+                <div className={styles.modalFooter}>
+                    <Button onClick={onClose}>Fermer</Button>
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+};
+
+export default Modal;*/
+
 import { createPortal } from "react-dom";
 import styles from "./modal.module.css";
 import Button from "../button/button";
+import { ReactNode, MouseEvent } from "react";
 
 interface ModalProps {
   open: boolean;
@@ -36,3 +68,4 @@ const Modal = ({ open, onClose, children, title }: ModalProps) => {
 };
 
 export default Modal;
+

src/components/ui/themeSwitcher/ThemeSwitcher.tsx

@@ -0,0 +1,73 @@
+/*import Button from "../button/button.jsx";
+import { useState, useEffect } from "react";
+import styles from "./ThemeSwitcher.module.css";
+
+
+export default function ThemeSwitcher() {
+
+    const [theme, setTheme] = useState("");
+
+    useEffect(() => {
+        const t = localStorage.getItem("theme");
+        if(t) setTheme(t);
+        else setTheme("light");
+    }, []);
+
+    const switchTheme = () => {
+
+        let newTheme = theme === "light" ? "dark" : "light";
+
+        if(theme === null || theme === "") newTheme = "dark";
+
+        localStorage.setItem("theme", newTheme);
+        setTheme(newTheme);
+
+        window.dispatchEvent(new Event("theme-changed"));
+    };
+
+    return <Button variant={"default"} onClick={switchTheme} className={styles.themeBtn}>
+            <img src={`/icons/theme/${theme}.svg`} alt={`${theme} icon`} className={styles.themeIcon} />
+            <p>Changer de thème </p>
+    </Button>
+}*/
+
+import Button from "../button/button";
+import { useState, useEffect } from "react";
+import styles from "./ThemeSwitcher.module.css";
+
+type Theme = "light" | "dark";
+
+export default function ThemeSwitcher() {
+    const [theme, setTheme] = useState<Theme | "">("");
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem("theme") as Theme | null;
+        if (savedTheme) {
+            setTheme(savedTheme);
+        } else {
+            setTheme("light");
+        }
+    }, []);
+
+    const switchTheme = () => {
+        const newTheme: Theme = theme === "light" ? "dark" : "light";
+        localStorage.setItem("theme", newTheme);
+        setTheme(newTheme);
+        window.dispatchEvent(new Event("theme-changed"));
+    };
+
+    return (
+        <Button
+            variant="default"
+            onClick={switchTheme}
+            className={styles.themeBtn}
+        >
+            <img
+                src={`/icons/theme/${theme}.svg`}
+                alt={`${theme} icon`}
+                className={styles.themeIcon}
+            />
+            <p>Changer de thème</p>
+        </Button>
+    );
+}

src/contexts/auth/AuthContext.ts

@@ -15,6 +15,7 @@ export interface User {
   email: string;
   phone: string | null;
   created_at: string;
+  profile_photo_path?: string | null;
   tasks: Task[];
 }
 

src/pages/Home/components/Calendar/calendar.jsx

@@ -5,7 +5,7 @@ import {EventContext} from "../../../../contexts/events/EventContext.js";
 
 function Calendar() {
 
-    const { events } = useContext(EventContext);
+    const { events=[] } = useContext(EventContext);
 
     const monthNames = [
         "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",

src/pages/Home/components/EventList/eventList.jsx

@@ -4,18 +4,18 @@ import EventItem from "./eventItem.jsx";
 import { EventContext } from "../../../../contexts/events/EventContext.js";
 import { useContext } from "react";
 
-
 function EventList() {
-
+    // Utilise une valeur par défaut pour `events` si elle est `undefined`
-    const { events } = useContext(EventContext);
+    const { events = [] } = useContext(EventContext);
 
     const sortedEvents = useMemo(() => {
+        // Vérifie explicitement que `events` est un tableau avant de trier
+        if (!Array.isArray(events)) return [];
         return [...events].sort(
             (a, b) => new Date(a.start) - new Date(b.start)
         );
     }, [events]);
 
-
     return (
         <div className={`${styles.glassCard} glassCard`}>
             <h2>Liste des événements à venir</h2>
@@ -29,7 +29,6 @@ function EventList() {
                 <p>Aucun événement planifié pour l'instant.</p>
             )}
         </div>
-
     );
 }
 

src/pages/Profile/ProfilePage.module.css

@@ -1,7 +1,9 @@
+/* Conteneur principal */
 .container {
   width: 100%;
   padding: 12px;
   box-sizing: border-box;
+  margin: 0 auto;
 }
 
 .profileboard {
@@ -22,12 +24,16 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+  gap: 20px;
 }
 
 .profilePictureContainer {
   width: 120px;
   height: 120px;
-    margin-bottom: 16px;
+  margin-bottom: 0;
+  position: relative;
+  display: flex;
+  justify-content: center;
 }
 
 .profilePicture {
@@ -37,11 +43,40 @@
   object-fit: cover;
 }
 
+.editPictureButton {
+  margin-top: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  background: rgba(255, 255, 255, 0.95);
+  border: none;
+  border-radius: 24px;
+  cursor: pointer;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #e74c3c;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  backdrop-filter: blur(5px);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: auto;
+  min-width: 140px;
+}
+
+.editPictureButton:hover {
+  background: rgba(255, 255, 255, 1);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
+  color: #c0392b;
+}
+
 .description {
   width: 100%;
   text-align: left;
 }
-
 .headerProfile {
   display: flex;
   justify-content: space-between;
@@ -78,43 +113,42 @@
     margin: 0;
 }
 
+/* Conteneur des informations principales */
 .topDescription {
   display: flex;
   flex-direction: column;
-    gap: 12px;
+  gap: 16px;
+  width: 100%;
   margin-bottom: 20px;
 }
 
+/* Bloc d'informations */
 .infoBlock {
   width: 100%;
   padding: 12px;
+  box-sizing: border-box;
 }
 
-.eventTasks {
+/* Conteneur pour les paramètres */
-    max-height: 0;
+.settingImage {
-    overflow: hidden;
+  width: 100%;
-    transition: max-height 0.3s ease, opacity 0.2s ease;
+  display: flex;
-    opacity: 0;
+  justify-content: center;
-    padding-left: 16px;
+  margin-top: 16px;
-}
-
-.eventTasks.expanded {
-    max-height: 500px;
-    opacity: 1;
-    margin-top: 10px;
 }
 
+/* Adaptation pour tablette et PC */
 @media (min-width: 768px) {
   .contentWrapper {
     flex-direction: row;
     align-items: flex-start;
+    gap: 24px;
   }
 
   .profilePictureContainer {
     width: 150px;
     height: 150px;
-        margin-right: 24px;
+    margin-right: 0;
-        margin-bottom: 0;
   }
 
   .description {
@@ -124,21 +158,29 @@
   .topDescription {
     flex-direction: row;
     justify-content: space-between;
+    flex-wrap: wrap;
   }
 
   .infoBlock {
-        width: 48%;
+    flex: 1;
+    min-width: calc(50% - 8px);
+    max-width: calc(50% - 8px);
   }
 
-    .description h2 {
+  .editPictureButton {
+    margin: 16px auto 0 auto;
+    display: block;
+  }
+
+  .headerProfile h2 {
     font-size: 1.8rem;
   }
 }
 
+/* Adaptation pour grand écran */
 @media (min-width: 1024px) {
   .container {
     max-width: 1200px;
-        margin: 0 auto;
     padding: 24px;
   }
 
@@ -155,7 +197,7 @@
     width: calc(100% - 220px);
   }
 
-    .description h2 {
+  .headerProfile h2 {
     font-size: 2rem;
   }
 }

src/pages/Profile/ProfilePage.tsx

@@ -1,3 +1,5 @@
+import getXSRFToken from "../../utils/getXSRF.js";
+// import fetchWrapper from "../../utils/fetchWrapper";
 import {useContext, useEffect, useState} from "react";
 import styles from "./ProfilePage.module.css";
 import {AuthContext} from "../../contexts/auth/AuthContext";
@@ -6,18 +8,32 @@ import Task from "../../components/Task/Task";
 import SettingsModal from "./components/SettingsModal/SettingsModal";
 import {useParams} from "react-router";
 import {useNavigate} from "react-router";
+import {useRef} from "react";
 import getUserById from "../../utils/users/getUserById.js";
 import ManageMember from "./components/manageMember/ManageMember.jsx";
 
+import uploadProfilePhoto from "../../utils/users/uploadProfilePhoto";
+import deleteProfilePhoto from "../../utils/users/deleteProfilePhoto.js";
+
 
 interface TaskType {
   id: number;
-    title?: string;
+  name: string;
-    completed?: boolean;
+  description: string;
-
+  location: string;
-    [key: string]: unknown;
+  start: string;
+  end: string;
+  max_participants: number;
+  events_id: number;
+  created_at: string;
+  updated_at: string;
+  pivot: {
+    user_id: number;
+    task_id: number;
+  };
 }
 
+
 interface User {
     id: number;
     name: string;
@@ -28,105 +44,164 @@ interface User {
     created_at: string;
     isAdmin: boolean;
     tasks: TaskType[];
+    profile_photo_path?: string | null;
 }
 
 interface AuthContextType {
-    user: User;
+    user: User | null;
     update: () => void;
 }
 
 function ProfilePage() {
-
   const navigate = useNavigate();
-    const {id} = useParams();
+  const { id } = useParams();
-    const {user, update} = useContext(AuthContext) as AuthContextType;
+  const { user, update } = useContext(AuthContext) as AuthContextType;
   const [profileUser, setProfileUser] = useState<User | null>(null);
+  const [profilePicture, setProfilePicture] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-    const isOwnProfile = !id || user.id.toString() === id;
+  const isOwnProfile = !id || user?.id.toString() === id;
 
   useEffect(() => {
-
     (async () => {
-
+      if (!isOwnProfile && id) {
-            if (!isOwnProfile) {
-                console.log(id);
         const res = await getUserById(id);
-
         if (res.status === 404) {
           navigate("/404");
           return;
         }
-
         if (res.status !== 200) {
           console.error("Erreur lors du chargement du profil", res);
           return;
         }
-
         setProfileUser(res.data);
       } else {
-                setProfileUser(user)
+        update();
+        setProfileUser(user);
+        if (user?.profile_photo_path) {
+          setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
         }
-        })()
+      }
+    })();
   }, [user, id]);
 
+  const handleEditPictureClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  // Remplacé : handleFileChange extrait vers utils/users/uploadProfilePhoto
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const res = await uploadProfilePhoto(file);
+      if (res.ok) {
+        setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
+        setSuccess("Photo mise à jour !");
+        setError(null);
+        await update();
+      } else {
+        setError(res.data?.message || res.error || "Erreur lors de l'upload.");
+        setSuccess(null);
+      }
+    } catch (err) {
+      setError("Erreur réseau.");
+      setSuccess(null);
+    }
+  };
+
+  // Remplacé : handleDeletePicture extrait vers utils/users/deleteProfilePhoto
+  const handleDeletePicture = async () => {
+    try {
+      const res = await deleteProfilePhoto();
+      if (res.status >= 200 && res.status < 300) {
+        setProfilePicture(null);
+        setSuccess("Photo supprimée !");
+        setError(null);
+        await update();
+      } else {
+        setError(res.data?.message || "Erreur lors de la suppression.");
+        setSuccess(null);
+      }
+    } catch (err) {
+      setError("Erreur réseau.");
+      setSuccess(null);
+    }
+  };
+
   return (
     <div className={styles.container}>
       <div className={`${styles.profileboard} glassCard`}>
         <div className={styles.contentWrapper}>
           <div className={styles.profilePictureContainer}>
             <img
-                            src="/react.svg"
+              src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
               alt="Photo de profil"
               className={styles.profilePicture}
             />
           </div>
 
+          {isOwnProfile && (
+            <div className={styles.pictureButtons}>
+              <button onClick={handleEditPictureClick} className={styles.editPictureButton}>
+                Modifier la photo
+              </button>
+              {user?.profile_photo_path && (
+                <button onClick={handleDeletePicture} className={styles.deletePictureButton}>
+                  Supprimer
+                </button>
+              )}
+            </div>
+          )}
+
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept="image/*"
+            style={{ display: "none" }}
+          />
+          {error && <p className={styles.errorMessage}>{error}</p>}
+          {success && <p className={styles.successMessage}>{success}</p>}
+
           <div className={styles.description}>
             <div className={styles.headerProfile}>
               <h2>
                 {profileUser?.name} {profileUser?.lastname}
               </h2>
-                            {(user?.isAdmin && profileUser && !isOwnProfile) && (
+              {user?.isAdmin && profileUser && !isOwnProfile && (
-                                <ManageMember userToManage={profileUser}/>
+                <ManageMember userToManage={profileUser} />
               )}
             </div>
 
             <div className={styles.topDescription}>
               <div className={`${styles.infoBlock} glassBorder`}>
-                                <p>
+                <p><strong>Role :</strong> {profileUser?.role}</p>
-                                    <strong>Role :</strong> {profileUser?.role}
+                <p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}</p>
-                                </p>
-                                <p>
-                                    <strong>Membre depuis :</strong>{" "}
-                                    {profileUser && formatDate(profileUser.created_at)}
-                                </p>
               </div>
 
               <div className={`${styles.infoBlock} glassBorder`}>
-                                <p>
+                <p><strong>Mail :</strong> {profileUser?.email}</p>
-                                    <strong>Mail :</strong> {profileUser?.email}
+                <p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
-                                </p>
-                                <p>
-                                    <strong>Téléphone :</strong>{" "}
-                                    {profileUser?.phone ?? "Pas de numéro enregistré"}
-                                </p>
               </div>
 
               {isOwnProfile && (
                 <div className={styles.settingImage}>
-                                    <SettingsModal/>
+                  <SettingsModal />
                 </div>
               )}
             </div>
 
             <h2>Tâches :</h2>
-
+            {profileUser?.tasks.length ? (
-                        {profileUser && profileUser.tasks.length > 0 ? (
+              profileUser.tasks.map((task) => <Task key={task.id} task={task} />)
-                            profileUser.tasks.map((task) => (
-                                <Task key={task.id} task={task}/>
-                            ))
             ) : (
-                            <p>Aucune tâche pour le moment.</p>
+              <p>Aucune tâche.</p>
             )}
           </div>
         </div>

src/utils/fetchWrapper.js

@@ -1,45 +0,0 @@
-export default async function fetchWrapper(
-    path,
-    data = null,
-    method = "GET",
-    headers = {}
-) {
-    try {
-        const res = await fetch(
-            `${import.meta.env.VITE_API_URL}${path}`,
-            {
-                method,
-                credentials: "include",
-                headers: {
-                    "Accept": "application/json",
-                    "Content-Type": "application/json",
-                    ...headers,
-                },
-                body: data ? JSON.stringify(data) : null,
-            }
-        );
-
-        let responseData = null;
-
-        try {
-            responseData = await res.json();
-        } catch (_) {
-            responseData = null;
-        }
-
-        return {
-            status: res.status,
-            data: responseData,
-        };
-
-    } catch (err) {
-        console.error("❌ Erreur réseau :", err);
-
-        return {
-            status: 0,
-            data: {
-                message: "Network error",
-            },
-        };
-    }
-}

src/utils/fetchWrapper.ts

@@ -0,0 +1,92 @@
+/*export default async function fetchWrapper(path,data = null,method = "GET",headers = {}) {
+    try {
+        const res = await fetch(
+            `${import.meta.env.VITE_API_URL}${path}`,
+            {
+                method,
+                credentials: "include",
+                headers: {
+                    "Accept": "application/json",
+                    "Content-Type": "application/json",
+                    ...headers,
+                },
+                body: data ? JSON.stringify(data) : null,
+            }
+        );
+
+        let responseData = null;
+
+        try {
+            responseData = await res.json();
+        } catch (_) {
+            responseData = null;
+        }
+
+        return {
+            status: res.status,
+            data: responseData,
+        };
+
+    } catch (err) {
+        console.error("❌ Erreur réseau :", err);
+
+        return {
+            status: 0,
+            data: {
+                message: "Network error",
+            },
+        };
+    }
+}*/
+
+interface FetchResponse<T = any> {
+    status: number;
+    data: T | null;
+}
+
+export default async function fetchWrapper(
+    path: string,
+    data: any = null,
+    method: string = "GET",
+    headers: Record<string, string> = {}
+): Promise<FetchResponse> {
+    try {
+        const res = await fetch(
+            `${import.meta.env.VITE_API_URL}${path}`,
+            {
+                method,
+                credentials: "include",
+                headers: {
+                    "Accept": "application/json",
+                    "Content-Type": "application/json",
+                    ...headers,
+                },
+                body: data ? JSON.stringify(data) : null,
+            }
+        );
+
+        let responseData = null;
+
+        try {
+            responseData = await res.json();
+        } catch (_) {
+            responseData = null;
+        }
+
+        return {
+            status: res.status,
+            data: responseData,
+        };
+
+    } catch (err) {
+        console.error("❌ Erreur réseau :", err);
+
+        return {
+            status: 0,
+            data: {
+                message: "Network error",
+            },
+        };
+    }
+}
+

src/utils/getXSRF.js

@@ -1,19 +0,0 @@
-export default async function getXSRFToken() {
-    const response = await fetch(`${import.meta.env.VITE_API_URL}/sanctum/csrf-cookie`, {
-        method: 'GET',
-        credentials: 'include'
-    });
-
-    if (!response.ok && response.status !== 204) {
-        throw new Error(`Error : ${response.status}`);
-    }
-
-    const name = 'XSRF-TOKEN';
-    const value = `; ${document.cookie}`;
-    const parts = value.split(`; ${name}=`);
-    if (parts.length === 2) {
-        return decodeURIComponent(parts.pop().split(';').shift());
-    }
-
-    throw new Error('Error: Invalid XSRF-TOKEN');
-}

src/utils/getXSRF.ts

@@ -0,0 +1,40 @@
+/*export default async function getXSRFToken() {
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/sanctum/csrf-cookie`, {
+        method: 'GET',
+        credentials: 'include'
+    });
+
+    if (!response.ok && response.status !== 204) {
+        throw new Error(`Error : ${response.status}`);
+    }
+
+    const name  = 'XSRF-TOKEN';
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) {
+        return decodeURIComponent(parts.pop().split(';').shift());
+    }
+
+    throw new Error('Error: Invalid XSRF-TOKEN');
+}*/
+
+export default async function getXSRFToken(): Promise<string> {
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/sanctum/csrf-cookie`, {
+        method: 'GET',
+        credentials: 'include'
+    });
+
+    if (!response.ok && response.status !== 204) {
+        throw new Error(`Error : ${response.status}`);
+    }
+
+    const name = 'XSRF-TOKEN';
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) {
+        return decodeURIComponent(parts.pop()!.split(';').shift()!);
+    }
+
+    throw new Error('Error: Invalid XSRF-TOKEN');
+}
+

src/utils/users/deleteProfilePhoto.ts

@@ -0,0 +1,10 @@
+import fetchWrapper from "../fetchWrapper";
+
+export default async function deleteProfilePhoto(): Promise<{ status: number; ok: boolean; data?: any; error?: string }> {
+  try {
+    const response = await fetchWrapper("/api/profile-photo", null, "DELETE");
+    return { status: response.status || 0, ok: response.status >= 200 && response.status < 300, data: response.data };
+  } catch (err: any) {
+    return { status: 0, ok: false, error: err?.message || "Network error" };
+  }
+}

src/utils/users/deleteUser.js

@@ -1,13 +0,0 @@
-import fetchWrapper from "../fetchWrapper.js";
-import getXSRFToken from "../getXSRF.js";
-
-export default async function deleteUser() {
-    const csrfToken = await getXSRFToken();
-
-    return fetchWrapper(
-        "/api/users",
-        null,
-        "DELETE",
-        { "X-XSRF-TOKEN": csrfToken }
-    );
-}

src/utils/users/deleteUser.ts

@@ -0,0 +1,13 @@
+import fetchWrapper from "../fetchWrapper";
+import getXSRFToken from "../getXSRF";
+
+export default async function deleteUser(): Promise<{status: number;data: any;}> {
+    const csrfToken: string = await getXSRFToken();
+
+    return fetchWrapper(
+        "/api/users",
+        null,
+        "DELETE",
+        { "X-XSRF-TOKEN": csrfToken }
+    );
+}

src/utils/users/replaceProfilePhoto.ts

@@ -0,0 +1,5 @@
+import uploadProfilePhoto from "./uploadProfilePhoto";
+
+export default async function replaceProfilePhoto(file: File) {
+  return uploadProfilePhoto(file);
+}

src/utils/users/updateUser.js

@@ -1,13 +0,0 @@
-import fetchWrapper from "../fetchWrapper.js";
-import getXSRFToken from "../getXSRF.js";
-
-export default async function updateUser(name, lastname, phone) {
-    const csrfToken = await getXSRFToken();
-
-    return fetchWrapper(
-        "/api/users/update",
-        { name, lastname, phone },
-        "POST",
-        { "X-XSRF-TOKEN": csrfToken }
-    );
-}

src/utils/users/updateUser.ts

@@ -0,0 +1,33 @@
+/*import fetchWrapper from "../fetchWrapper.js";
+import getXSRFToken from "../getXSRF.js";
+
+export default async function updateUser(name, lastname, phone) {
+    const csrfToken = await getXSRFToken();
+
+    return fetchWrapper(
+        "/api/users/update",
+        { name, lastname, phone },
+        "POST",
+        { "X-XSRF-TOKEN": csrfToken }
+    );
+}*/
+
+import fetchWrapper from "../fetchWrapper";
+import getXSRFToken from "../getXSRF";
+
+interface UserUpdateData {
+  name: string;
+  lastname: string;
+  phone: string | null;
+}
+
+interface RequestHeaders {
+  "X-XSRF-TOKEN": string;
+}
+export default async function updateUser(name: string,lastname: string,phone: string | null): Promise<Response> {
+    const csrfToken: string = await getXSRFToken();
+    const userData: UserUpdateData = {name,lastname,phone,};
+    const headers: RequestHeaders = {"X-XSRF-TOKEN": csrfToken,};
+    return fetchWrapper("/api/users/update",userData,"POST",headers);
+}
+

src/utils/users/uploadProfilePhoto.ts

@@ -0,0 +1,28 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function uploadProfilePhoto(file: File): Promise<{ status: number; ok: boolean; data?: any; error?: string }> {
+  const formData = new FormData();
+  formData.append("photo", file);
+
+  try {
+    const csrfToken = await getXSRFToken();
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
+      method: "POST",
+      headers: { "X-XSRF-TOKEN": decodeURIComponent(csrfToken) },
+      credentials: "include",
+      body: formData,
+    });
+
+    const status = response.status;
+    let data = null;
+    try {
+      data = await response.json();
+    } catch (e) {
+      // no json
+    }
+
+    return { status, ok: response.ok, data };
+  } catch (err: any) {
+    return { status: 0, ok: false, error: err?.message || "Network error" };
+  }
+}

src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

tsconfig.json

@@ -1,49 +1,4 @@
 {
-  // Visit https://aka.ms/tsconfig to read more about this file
-  /*"compilerOptions": {*/
-    // File Layout
-    // "rootDir": "./src",
-    // "outDir": "./dist",
-
-    // Environment Settings
-    // See also https://aka.ms/tsconfig/module
-    /*"module": "nodenext",
-    "target": "esnext",
-    "types": [],*/
-    // For nodejs:
-    // "lib": ["esnext"],
-    // "types": ["node"],
-    // and npm install -D @types/node
-
-    // Other Outputs
-    /*"sourceMap": true,
-    "declaration": true,
-    "declarationMap": true,*/
-
-    // Stricter Typechecking Options
-    /*"noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,*/
-
-    // Style Options
-    // "noImplicitReturns": true,
-    // "noImplicitOverride": true,
-    // "noUnusedLocals": true,
-    // "noUnusedParameters": true,
-    // "noFallthroughCasesInSwitch": true,
-    // "noPropertyAccessFromIndexSignature": true,
-
-    // Recommended Options
-   /* "strict": true,
-    "jsx": "react-jsx",
-    "verbatimModuleSyntax": true,
-    "isolatedModules": true,
-    "noUncheckedSideEffectImports": true,
-    "moduleDetection": "force",
-    "skipLibCheck": true,
-  }
-}
-
-{*/
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
@@ -52,11 +7,13 @@
     "jsx": "react-jsx",
     "strict": true,
     "isolatedModules": true,
-
+    "noUncheckedIndexedAccess": false,
-    "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
-
     "resolveJsonModule": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
-  }
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+  //  "exclude": ["**/*.js"]
 }