add functional checkbox to toggle web notifications and email notifications

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";
@@ -9,6 +9,9 @@ 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;
@@ -27,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 {
@@ -47,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();
     };
@@ -76,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 (
         <>
@@ -135,6 +163,28 @@ 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>