configure typescript + begin conversion

src/contexts/auth/AuthContext.js

@@ -1,3 +0,0 @@
-import { createContext } from "react";
-
-export const AuthContext = createContext(null);

src/contexts/auth/AuthContext.ts

@@ -0,0 +1,27 @@
+import { createContext } from "react";
+
+
+export interface Task {
+  id: number;
+  title?: string;
+  completed?: boolean;
+  [key: string]: unknown;
+}
+
+export interface User {
+  name: string;
+  lastname: string;
+  role: string;
+  email: string;
+  phone: string | null;
+  created_at: string;
+  tasks: Task[];
+}
+
+export interface AuthContextType {
+  user: User | null;
+  update: () => void;
+}
+
+export const AuthContext = createContext<AuthContextType | null>(null);
+

src/pages/Profile/ProfilePage.jsx

@@ -1,61 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import styles from "./ProfilePage.module.css";
-import { AuthContext } from "../../contexts/auth/AuthContext.js";
-import formatDate from "../../utils/date/formatDate.js";
-import Task from "../../components/Task/Task";
-import SettingsModal from "./components/SettingsModal/SettingsModal.jsx";
-
-function ProfilePage() {
-
-    const { user, update } = useContext(AuthContext);
-
-    useEffect(() => {
-      update();
-    }, [])
-
-  return (
-    <div className={styles.container}>
-      <div className={`${styles.profileboard} glassCard`}>
-        <div className={styles.contentWrapper}>
-          <div className={styles.profilePictureContainer}>
-            <img
-              src="/react.svg"
-              alt="Photo de profil"
-              className={styles.profilePicture}
-            />
-          </div>
-          <div className={styles.description}>
-            <div className={styles.headerProfile}>
-                <h2> {user?.name} {user?.lastname} </h2>
-            </div>
-            <div className={styles.topDescription}>
-              <div className={`${styles.infoBlock} glassBorder`}>
-                <p><strong>Role :</strong> {user?.role}</p>
-                <p><strong>Membre depuis :</strong> {user && formatDate(user.created_at)}</p>
-              </div>
-              <div className={`${styles.infoBlock} glassBorder`}>
-                <p><strong>Mail :</strong> {user?.email} </p>
-                <p><strong>Téléphone :</strong> {user?.phone === null ? "Pas de numéro enregistré" : user?.phone}</p>
-              </div>
-              <div className={styles.settingImage}>
-                <SettingsModal />
-              </div>
-            </div>
-
-            <h2>Tâches :</h2>
-              {user && user.tasks.length > 0 ? (
-                  user.tasks.map((task, index) => (
-                      <Task key={index} task={task} />
-                  ))
-              ) : (
-                  <p>Aucune tâche pour le moment.</p>
-              )}
-
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ProfilePage;

src/pages/Profile/ProfilePage.tsx

@@ -0,0 +1,165 @@
+import { useContext, useEffect } from "react";
+import styles from "./ProfilePage.module.css";
+
+import { AuthContext } from "../../contexts/auth/AuthContext";
+import formatDate from "../../utils/date/formatDate";
+
+//import Task from "../../components/Task/Task";
+//import SettingsModal from "./components/SettingsModal/SettingsModal";
+
+interface TaskType {
+  id: number;
+  title?: string;
+  completed?: boolean;
+  [key: string]: unknown;
+}
+
+interface User {
+  name: string;
+  lastname: string;
+  role: string;
+  email: string;
+  phone: string | null;
+  created_at: string;
+  tasks: TaskType[];
+}
+
+interface AuthContextType {
+  user: User | null;
+  update: () => void;
+}
+
+
+
+function ProfilePage(){
+  const { user, update } = useContext(AuthContext) as AuthContextType;
+
+  useEffect(() => {
+    update();
+  }, [update]);
+
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.profileboard} glassCard`}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.profilePictureContainer}>
+            <img
+              src="/react.svg"
+              alt="Photo de profil"
+              className={styles.profilePicture}
+            />
+          </div>
+
+          <div className={styles.description}>
+            <div className={styles.headerProfile}>
+              <h2>
+                {user?.name} {user?.lastname}
+              </h2>
+            </div>
+
+            <div className={styles.topDescription}>
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p>
+                  <strong>Role :</strong> {user?.role}
+                </p>
+                <p>
+                  <strong>Membre depuis :</strong>{" "}
+                  {user && formatDate(user.created_at)}
+                </p>
+              </div>
+
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p>
+                  <strong>Mail :</strong> {user?.email}
+                </p>
+                <p>
+                  <strong>Téléphone :</strong>{" "}
+                  {user?.phone ?? "Pas de numéro enregistré"}
+                </p>
+              </div>
+
+              <div className={styles.settingImage}>
+               {/* <SettingsModal />*/}
+              </div>
+            </div>
+
+            <h2>Tâches :</h2>
+
+           {/* {user && user.tasks.length > 0 ? (
+              user.tasks.map((task) => (
+                <Task key={task.id} task={task} />
+              ))
+            ) : (
+              <p>Aucune tâche pour le moment.</p>
+            )}*/}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProfilePage;
+
+
+/*import React, { useContext, useEffect } from "react";
+import styles from "./ProfilePage.module.css";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import formatDate from "../../utils/date/formatDate.js";
+import Task from "../../components/Task/Task";
+import SettingsModal from "./components/SettingsModal/SettingsModal.jsx";
+
+function ProfilePage() {
+
+    const { user, update } = useContext(AuthContext);
+
+    useEffect(() => {
+      update();
+    }, [])
+
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.profileboard} glassCard`}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.profilePictureContainer}>
+            <img
+              src="/react.svg"
+              alt="Photo de profil"
+              className={styles.profilePicture}
+            />
+          </div>
+          <div className={styles.description}>
+            <div className={styles.headerProfile}>
+                <h2> {user?.name} {user?.lastname} </h2>
+            </div>
+            <div className={styles.topDescription}>
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p><strong>Role :</strong> {user?.role}</p>
+                <p><strong>Membre depuis :</strong> {user && formatDate(user.created_at)}</p>
+              </div>
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p><strong>Mail :</strong> {user?.email} </p>
+                <p><strong>Téléphone :</strong> {user?.phone === null ? "Pas de numéro enregistré" : user?.phone}</p>
+              </div>
+              <div className={styles.settingImage}>
+                <SettingsModal />
+              </div>
+            </div>
+
+            <h2>Tâches :</h2>
+              {user && user.tasks.length > 0 ? (
+                  user.tasks.map((task, index) => (
+                      <Task key={index} task={task} />
+                  ))
+              ) : (
+                  <p>Aucune tâche pour le moment.</p>
+              )}
+
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProfilePage;*/

src/utils/date/formatDate.js

@@ -1,9 +0,0 @@
-export default function formatDate(d) {
-    const date = new Date(d);
-
-    const jj = String(date.getUTCDate()).padStart(2, '0');
-    const mm = String(date.getUTCMonth() + 1).padStart(2, '0');
-    const aaaa = date.getUTCFullYear();
-
-    return `${jj}/${mm}/${aaaa}`;
-}

src/utils/date/formatDate.ts

@@ -0,0 +1,9 @@
+export default function formatDate(d: string | Date): string {
+  const date = d instanceof Date ? d : new Date(d);
+
+  const jj = String(date.getUTCDate()).padStart(2, "0");
+  const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const aaaa = date.getUTCFullYear();
+
+  return `${jj}/${mm}/${aaaa}`;
+}

src/utils/date/formatDateLetter.js

@@ -1,32 +0,0 @@
-
-
-export function formatDateLetter(d) {
-    if (!d) return "Date inconnue";
-
-    const dateObj = new Date(d);
-    if (isNaN(dateObj.getTime())) return "Date invalide";
-
-    const monthNames = [
-        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
-        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
-    ];
-
-    const day = dateObj.getDate().toString().padStart(2, "0");
-    const month = monthNames[dateObj.getMonth()];
-    const year = dateObj.getFullYear();
-    const hours = dateObj.getHours().toString().padStart(2, "0");
-    const minutes = dateObj.getMinutes().toString().padStart(2, "0");
-
-    return `${day} ${month} ${year} à ${hours}:${minutes}`;
-}
-
-
-export function formatDateLetterJS(d) {
-    const monthNames = [
-        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
-        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
-    ];
-    const [year, month, day] = d.split('-');
-    return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
-}
-

src/utils/date/formatDateLetter.ts

@@ -0,0 +1,65 @@
+
+
+/*export function formatDateLetter(d) {
+    if (!d) return "Date inconnue";
+
+    const dateObj = new Date(d);
+    if (isNaN(dateObj.getTime())) return "Date invalide";
+
+    const monthNames = [
+        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+    ];
+
+    const day = dateObj.getDate().toString().padStart(2, "0");
+    const month = monthNames[dateObj.getMonth()];
+    const year = dateObj.getFullYear();
+    const hours = dateObj.getHours().toString().padStart(2, "0");
+    const minutes = dateObj.getMinutes().toString().padStart(2, "0");
+
+    return `${day} ${month} ${year} à ${hours}:${minutes}`;
+}
+
+
+export function formatDateLetterJS(d) {
+    const monthNames = [
+        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+    ];
+    const [year, month, day] = d.split('-');
+    return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
+}*/
+
+export function formatDateLetter(d: string | Date | null | undefined): string {
+  if (!d) return "Date inconnue";
+
+  const dateObj = d instanceof Date ? d : new Date(d);
+  if (isNaN(dateObj.getTime())) return "Date invalide";
+
+  const monthNames = [
+    "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+    "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+  ];
+
+  const day = dateObj.getDate().toString().padStart(2, "0");
+  const month = monthNames[dateObj.getMonth()];
+  const year = dateObj.getFullYear();
+  const hours = dateObj.getHours().toString().padStart(2, "0");
+  const minutes = dateObj.getMinutes().toString().padStart(2, "0");
+
+  return `${day} ${month} ${year} à ${hours}:${minutes}`;
+}
+
+
+export function formatDateLetterJS(d: string): string {
+  const monthNames = [
+    "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+    "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+  ];
+
+  const [year, month, day] = d.split("-");
+  if (!year || !month || !day) return "Date invalide";
+
+  return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year}`;
+}
+

src/utils/date/formatTime.js

@@ -1,8 +0,0 @@
-export default function formatTime(d) {
-    const date = new Date(d);
-
-    const hh = String(date.getUTCHours()).padStart(2, '0');
-    const min = String(date.getUTCMinutes()).padStart(2, '0');
-
-    return `${hh}:${min}`;
-}

src/utils/date/formatTime.ts

@@ -0,0 +1,12 @@
+
+export default function formatTime(d: string | Date | null | undefined): string {
+  if (!d) return "Heure inconnue";
+
+  const date = d instanceof Date ? d : new Date(d);
+  if (isNaN(date.getTime())) return "Heure invalide";
+
+  const hh = String(date.getUTCHours()).padStart(2, "0");
+  const min = String(date.getUTCMinutes()).padStart(2, "0");
+
+  return `${hh}:${min}`;
+}