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