Convert to TS

2026-02-24 16:59:34 +01:00
parent e30dd780ba
commit c012a2a063
2 changed files with 167 additions and 86 deletions
@@ -0,0 +1,167 @@
+import {useContext, useState, ChangeEvent} from "react";
+import Modal from "../../../../components/ui/modal/modal";
+import Button from "../../../../components/ui/button/button";
+import styles from "./SettingsModal.module.css";
+import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
+import {AuthContext} from "../../../../contexts/auth/AuthContext";
+import TextInput from "../../../../components/ui/input/input";
+import updateUser from "../../../../utils/users/updateUser.js";
+import deleteUser from "../../../../utils/users/deleteUser.js";
+
+interface TaskType {
+    id: number;
+    title?: string;
+    completed?: boolean;
+
+    [key: string]: unknown;
+}
+
+interface User {
+    id: number;
+    name: string;
+    lastname: string;
+    role: string;
+    email: string;
+    phone: string | null;
+    created_at: string;
+    isAdmin: boolean;
+    tasks: TaskType[];
+}
+
+interface AuthContextType {
+    user: User;
+    update: () => void;
+    logout: () => void;
+}
+
+export default function SettingsModal() {
+    const {user, logout, update} = useContext(AuthContext) as AuthContextType;
+
+    const [open, setOpen] = useState<boolean>(false);
+    const [isDelete, setIsDelete] = useState<boolean>(false);
+
+    const [name, setName] = useState<string>(user?.name ?? "");
+    const [lastname, setLastName] = useState<string>(user?.lastname ?? "");
+    const [phone, setPhone] = useState<string>(user?.phone ?? "");
+
+    const handleLogout = (): void => {
+        logout();
+    };
+
+    const handleSubmit = async (): Promise<void> => {
+        await updateUser(name, lastname, phone || null);
+        update();
+        setOpen(false);
+    };
+
+    const handleDelete = async (): Promise<void> => {
+        await deleteUser();
+        update();
+    };
+
+    const handleNameChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        setName(e.target.value);
+    };
+
+    const handleLastnameChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        setLastName(e.target.value);
+    };
+
+    const handlePhoneChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        setPhone(e.target.value);
+    };
+
+
+    return (
+        <>
+            <Button variant="transparent" onClick={() => setOpen((prev) => !prev)}>
+                <img
+                    src="/icons/settings-wheel.svg"
+                    alt="Modify btn"
+                    className={styles.modifyIcon}
+                />
+            </Button>
+
+            <Modal
+                title="Paramètres"
+                open={open}
+                onClose={() => setOpen(false)}
+            >
+                <div className={styles.content}>
+                    <div className={styles.section}>
+                        <h3>Compte</h3>
+
+                        <Button variant="danger" onClick={handleLogout}>
+                            Déconnexion
+                        </Button>
+
+                        <Button
+                            variant="danger"
+                            onClick={() => setIsDelete(true)}
+                        >
+                            Supprimer le compte
+                        </Button>
+
+                        <div className={styles.section}>
+                            <h4>Changer de Prénom</h4>
+                            <TextInput
+                                value={name}
+                                onChange={handleNameChange}
+                                type="text"
+                            />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de nom</h4>
+                            <TextInput
+                                value={lastname}
+                                onChange={handleLastnameChange}
+                                type="text"
+                            />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de numéro de téléphone</h4>
+                            <TextInput
+                                value={phone}
+                                onChange={handlePhoneChange}
+                                type="text"
+                            />
+                        </div>
+
+                        <Button
+                            className={styles.submitBtn}
+                            onClick={handleSubmit}
+                        >
+                            Confirmer
+                        </Button>
+                    </div>
+
+                    <div className={styles.section}>
+                        <h3>Apparence</h3>
+                        <ThemeSwitcher/>
+                    </div>
+                </div>
+            </Modal>
+
+            <Modal
+                title="Validation"
+                open={isDelete}
+                onClose={() => setIsDelete(false)}
+            >
+                <div className={styles.section}>
+                    <p className={styles.alignText}>
+                        Êtes vous vraiment sûr de vouloir supprimer votre compte ?
+                    </p>
+                    <Button
+                        variant="danger"
+                        className={styles.submitBtn}
+                        onClick={handleDelete}
+                    >
+                        Confirmer
+                    </Button>
+                </div>
+            </Modal>
+        </>
+    );
+}