configure typescript + begin conversion

2026-01-28 16:29:41 +01:00
parent 3c71e0c7b2
commit ea6fd94962
14 changed files with 381 additions and 128 deletions
@@ -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;*/