From 2cbc2c3e20aa2df02618be6649ea8ba928072f39 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 9 Oct 2023 10:59:19 +0200
Subject: [PATCH] :sparkles: Read all notifications functionnality

---
 .../NotificationModal/classes.module.scss              |  9 +++++++++
 .../Header/Notifications/NotificationModal/index.tsx   | 10 ++++++++--
 .../Toasts/ToastsContainer/ToastElement/index.tsx      |  1 -
 src/front/Stores/Toasts.tsx                            |  9 +++++++++
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
index b8af1a78..ad7cd54d 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
@@ -30,6 +30,15 @@
 			cursor: pointer;
 		}
 	}
+
+	.notification-subheader {
+		width: 100%;
+		display: inline-flex;
+		justify-content: space-between;
+		text-decoration: underline;
+		cursor: pointer;
+	}
+
 	.notification-body {
 		margin-top: 24px;
 		overflow: hidden;
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
index e0a9c9d1..0d8d8ba6 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
@@ -37,10 +37,12 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 							<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
 						</div>
 					</div>
-					;
+					<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
+						<Typography typo={ITypo.CAPTION_14}>Tout marquer comme lu</Typography>
+					</div>
 					<div className={classes["notification-body"]}>
 						<>
-							{Toasts.getInstance().toasts.length === 0 ? (
+							{!this.state.toastList || this.state.toastList.length === 0 ? (
 								<div className={classes["missing-notification"]}>
 									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
 										Vous n'avez pas de notifications.
@@ -64,6 +66,10 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 		this.removeOnToastChange();
 	}
 
+	private readAllNotifications() {
+		Toasts.getInstance().closeAll();
+	}
+
 	private handleToastChange(toastList: IToast[] | null) {
 		this.setState({
 			toastList,
diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
index 8474ef5e..834009ad 100644
--- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
+++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
@@ -109,7 +109,6 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
 	}
 
 	private async handleClick(e: React.MouseEvent) {
-		console.log('redirectUrl', this.props.toast.redirectUrl);
 		if (this.props.toast.redirectUrl) {
 			this.onClose(e);
 			await this.props.router.push(this.props.toast.redirectUrl);
diff --git a/src/front/Stores/Toasts.tsx b/src/front/Stores/Toasts.tsx
index 439e8537..126461a3 100644
--- a/src/front/Stores/Toasts.tsx
+++ b/src/front/Stores/Toasts.tsx
@@ -97,6 +97,15 @@ export default class Toasts {
 		this.event.emit("change", this.toastList);
 	}
 
+	public async closeAll() {
+		for (let i = 0; i < this.toastList.length; i++) {
+			await Notifications.getInstance().put(this.toastList[i]?.uid as string, {
+				read: true,
+			});
+		}
+		this.event.emit("change", []);
+	}
+
 	/**
 	 * An utility static method you can use to quickly display an error toast
 	 * with a custom error message.