Convert to TS
This commit is contained in:
T'JAMPENS QUENTIN p2406187
@@ -1,86 +0,0 @@
|
||||
import Modal from "../../../../components/ui/modal/modal.tsx";
|
||||
import Button from "../../../../components/ui/button/button.tsx";
|
||||
import styles from "./SettingsModal.module.css"
|
||||
import { useContext, useState } from "react";
|
||||
import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
|
||||
import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
|
||||
import TextInput from "../../../../components/ui/input/input.tsx";
|
||||
import updateUser from "../../../../utils/users/updateUser.js";
|
||||
import deleteUser from "../../../../utils/users/deleteUser.js";
|
||||
|
||||
|
||||
export default function SettingsModal() {
|
||||
|
||||
const { user, logout, update } = useContext(AuthContext);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isDelete, setIsDelete] = useState(false);
|
||||
|
||||
const [name, setName] = useState(user?.name);
|
||||
const [lastname, setLastName] = useState(user?.lastname);
|
||||
const [phone, setPhone] = useState(user?.phone);
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await updateUser(name, lastname, phone);
|
||||
update();
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
await deleteUser();
|
||||
update();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant={"transparent"} onClick={() => setOpen(!open)}>
|
||||
<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={e => setName(e.target.value)} type={"text"} />
|
||||
</div>
|
||||
|
||||
<div className={styles.section}>
|
||||
<h4>Changer de nom</h4>
|
||||
<TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
|
||||
</div>
|
||||
|
||||
<div className={styles.section}>
|
||||
<h4>Changer de numéro de téléphone</h4>
|
||||
<TextInput value={phone} onChange={e => setPhone(e.target.value)} 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user