From cb59b9eef85582a825c6cdf6f43817abc39b676a Mon Sep 17 00:00:00 2001 From: Hugo Lextrait Date: Wed, 22 Feb 2023 12:00:01 +0100 Subject: [PATCH] :sparkles: Front integration of the notification component done --- src/front/Stores/Toasts.tsx | 2 +- src/front/assets/icons/info.svg | 5 ++ .../NotificationModal/classes.module.scss | 9 +++ .../Notifications/NotificationModal/index.tsx | 59 ++++++++++--------- .../Header/Notifications/classes.module.scss | 7 +-- .../Header/Notifications/index.tsx | 36 +++++++++-- .../ToastElement/classes.module.scss | 9 --- src/front/components/Layouts/Home/index.tsx | 4 +- 8 files changed, 79 insertions(+), 52 deletions(-) create mode 100644 src/front/assets/icons/info.svg diff --git a/src/front/Stores/Toasts.tsx b/src/front/Stores/Toasts.tsx index 8f5c142d..f7e091dd 100644 --- a/src/front/Stores/Toasts.tsx +++ b/src/front/Stores/Toasts.tsx @@ -23,7 +23,7 @@ export default class Toasts { private toastList: IToast[] = []; private uid: number = 0; - private defaultTime: IToast["time"] = 40000; + private defaultTime: IToast["time"] = 5000; private defaultClosable: IToast["closable"] = true; private defaultPriority: IToast["priority"] = EToastPriority.LOW; diff --git a/src/front/assets/icons/info.svg b/src/front/assets/icons/info.svg new file mode 100644 index 00000000..19176133 --- /dev/null +++ b/src/front/assets/icons/info.svg @@ -0,0 +1,5 @@ + + + + + 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 5f992ebb..3e6a2797 100644 --- a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss +++ b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss @@ -26,3 +26,12 @@ overflow-y: auto; } } + +.background{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; +} \ No newline at end of file diff --git a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx index 6730a081..648fba49 100644 --- a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx +++ b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx @@ -27,40 +27,43 @@ export default class NotificationModal extends React.Component { public override render(): JSX.Element | null { if (!this.props.isOpen) return null; - return
-
- - Notifications - -
- Close notification modal -
-
; + return <> +
+
+
+ + Notifications + +
+ Close notification modal +
+
; -
- <> - {Toasts.getInstance().toasts.length === 0 - ? -
- No notification yet -
- : } - +
+ <> + {Toasts.getInstance().toasts.length === 0 + ? +
+ No notification yet +
+ : } + +
-
+ } public override componentDidMount() { - this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange); - } + this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange); + } - public override componentWillUnmount() { - this.removeOnToastChange(); - } + public override componentWillUnmount() { + this.removeOnToastChange(); + } private handleToastChange(toastList: IToast[] | null) { - this.setState({ - toastList, - }); - } + this.setState({ + toastList, + }); + } } diff --git a/src/front/components/DesignSystem/Header/Notifications/classes.module.scss b/src/front/components/DesignSystem/Header/Notifications/classes.module.scss index b043ec9b..48a60e0a 100644 --- a/src/front/components/DesignSystem/Header/Notifications/classes.module.scss +++ b/src/front/components/DesignSystem/Header/Notifications/classes.module.scss @@ -3,7 +3,8 @@ .root { .icon-container{ position: relative; - + cursor: pointer; + .notification-icon{ height: 24px; width: 24px; @@ -12,10 +13,6 @@ position: absolute; top: 0; right: 0; - height: 12px; - width: 12px; - border-radius: 50%; - background-color: $orange-flash; } } } diff --git a/src/front/components/DesignSystem/Header/Notifications/index.tsx b/src/front/components/DesignSystem/Header/Notifications/index.tsx index 3ad4b9b4..55e95151 100644 --- a/src/front/components/DesignSystem/Header/Notifications/index.tsx +++ b/src/front/components/DesignSystem/Header/Notifications/index.tsx @@ -2,37 +2,61 @@ import React from "react"; import classes from "./classes.module.scss"; import Image from "next/image"; import NotificationIcon from "@Assets/icons/notification.svg"; -import Toasts from "@Front/Stores/Toasts"; +import Toasts, { IToast } from "@Front/Stores/Toasts"; import NotificationModal from "./NotificationModal"; +import InfoIcon from "@Assets/icons/info.svg"; type IProps = {}; type IState = { hasNotifications: boolean; isModalOpen: boolean; + toastList: IToast[] | null; }; export default class Notifications extends React.Component { + private removeOnToastChange: () => void = () => { }; + constructor(props: IProps) { super(props); this.state = { - hasNotifications: true, - isModalOpen: true, + isModalOpen: false, + toastList: Toasts.getInstance().toasts, //TODO : Get from bbd + hasNotifications: Toasts.getInstance().toasts.length > 0, // TODO: Change this when we have notification stored in bbd, unread notifications }; this.openModal = this.openModal.bind(this); this.closeModal = this.closeModal.bind(this); + this.handleToastChange = this.handleToastChange.bind(this); + } + public override render(): JSX.Element { - const hasNotifications = Toasts.getInstance().toasts.length; - console.log(hasNotifications) return
notifications - {this.state.hasNotifications &&
} + {this.state.hasNotifications && + Unread notification + }
{this.state.isModalOpen && }
; } + + public override componentDidMount() { + this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange); + } + + public override componentWillUnmount() { + this.removeOnToastChange(); + } + + private handleToastChange(toastList: IToast[] | null) { + this.setState({ + toastList, + hasNotifications: toastList ? toastList.length > 0 : false + }); + } + private openModal() { this.setState({ isModalOpen: true }); }; diff --git a/src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss b/src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss index ba90f6b4..45b567a8 100644 --- a/src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss +++ b/src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss @@ -1,14 +1,5 @@ @import "@Themes/constants.scss"; -// @keyframes loadbar-animation { -// from { -// transform: scaleX(1); -// } -// to { -// transform: scaleX(0); -// } -// } - @keyframes slide-left { from { opacity: 0; diff --git a/src/front/components/Layouts/Home/index.tsx b/src/front/components/Layouts/Home/index.tsx index be9baf46..58ef5ea1 100644 --- a/src/front/components/Layouts/Home/index.tsx +++ b/src/front/components/Layouts/Home/index.tsx @@ -8,9 +8,7 @@ export default class Home extends BasePage { return (
-
JDJADJIZDIAZN?DIAZ?
- COUCOU JE SUIS UNE TYPO - COUCOU JE SUIS UNE TYPO + HomePage
);