Merge branch 'dev' into fixcss/event

merge dev into fixcss

src/pages/Profile/components/SettingsModal/SettingsModal.tsx

@@ -1,4 +1,4 @@
-import {useContext, useState, ChangeEvent} from "react";
+import {useContext, useState, ChangeEvent, useEffect} from "react";
 import Modal from "../../../../components/ui/Modal/Modal";
 import Button from "../../../../components/ui/Button/Button";
 import styles from "./SettingsModal.module.css";
@@ -7,6 +7,11 @@ 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";
+import ExportCalendarBtn from "../../../../components/ExportCalendarBtn/ExportBtn";
+import { useNavigate } from "react-router-dom";
+import toggleEmailNotifications from "../../../../utils/users/toggleEmailNotifications";
+import toggleWebNotifications from "../../../../utils/users/toggleWebNotifications";
+
 
 interface TaskType {
     id: number;
@@ -25,7 +30,9 @@ interface User {
     phone: string | null;
     created_at: string;
     isAdmin: boolean;
-    tasks: TaskType[];
+    tasks: TaskType[],
+    email_notifications: number,
+    web_notifications: number;
 }
 
 interface AuthContextType {
@@ -35,6 +42,7 @@ interface AuthContextType {
 }
 
 export default function SettingsModal() {
+    const navigate = useNavigate();
     const {user, logout, update} = useContext(AuthContext) as unknown as AuthContextType;
 
     const [open, setOpen] = useState<boolean>(false);
@@ -44,6 +52,9 @@ export default function SettingsModal() {
     const [lastname, setLastName] = useState<string>(user?.lastname ?? "");
     const [phone, setPhone] = useState<string>(user?.phone ?? "");
 
+    const [emailNotifications, setEmailNotifications] = useState<number>(user?.email_notifications ?? 0);
+    const [webNotifications, setWebNotifications] = useState<number>(user?.web_notifications ?? 0);
+
     const handleLogout = (): void => {
         logout();
     };
@@ -56,6 +67,8 @@ export default function SettingsModal() {
 
     const handleDelete = async (): Promise<void> => {
         await deleteUser();
+        logout();
+        navigate('/');
         update();
     };
 
@@ -71,6 +84,26 @@ export default function SettingsModal() {
         setPhone(e.target.value);
     };
 
+    const handleEmailToggle = async () => {
+        try {
+            await toggleEmailNotifications(user.id);
+            setEmailNotifications(prev => prev === 0 ? 1 : 0);
+            update();
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    const handleWebToggle = async () => {
+        try {
+            await toggleWebNotifications(user.id);
+            setWebNotifications(prev => prev === 0 ? 1 : 0);
+            update();
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
 
     return (
         <>
@@ -130,6 +163,34 @@ export default function SettingsModal() {
                         <ThemeSwitcher/>
                     </div>
 
+                    <div className={`glassBorder ${styles.section}`}>
+                        <h3>Notifications</h3>
+
+                        <div className={styles.test}>
+                            <h4>Notifications par email</h4>
+                            <input
+                                type="checkbox"
+                                checked={emailNotifications === 1}
+                                onChange={handleEmailToggle}
+                            />
+                        </div>
+
+                        <div className={styles.test}>
+                            <h4>Notifications sur le site</h4>
+                            <input
+                                type="checkbox"
+                                checked={webNotifications === 1}
+                                onChange={handleWebToggle}
+                            />
+                        </div>
+                    </div>
+
+
+                    <div className={`glassBorder ${styles.section}`}>
+                        <h3>Divers</h3>
+                        <ExportCalendarBtn />
+                    </div>
+
                     <div className={`glassBorder ${styles.section}`}>
                         <h3>Sécurité du compte</h3>