✨ Front integration of the notification component done

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;
 

src/front/assets/icons/info.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="6" fill="#FFB017"/>
+<path d="M6 3V5.66667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="6" cy="9" r="1" fill="white"/>
+</svg>

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;
+}

src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx

@@ -27,7 +27,9 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 
   public override render(): JSX.Element | null {
     if (!this.props.isOpen) return null;
-    return <div className={classes["root"]}>
+    return <>
+      <div className={classes["background"]} onClick={this.props.closeModal}/>
+      <div className={classes["root"]}>
         <div className={classes["notification-header"]}>
           <Typography typo={ITypo.P_16}>
             Notifications
@@ -48,6 +50,7 @@ export default class NotificationModal extends React.Component<IProps, IState> {
           </>
         </div>
       </div>
+    </>
   }
 
   public override componentDidMount() {

src/front/components/DesignSystem/Header/Notifications/classes.module.scss

@@ -3,6 +3,7 @@
 .root {
     .icon-container{
         position: relative;
+        cursor: pointer;
         
         .notification-icon{
             height: 24px;
@@ -12,10 +13,6 @@
             position: absolute;
             top: 0;
             right: 0;
-            height: 12px;
-            width: 12px;
-            border-radius: 50%;
-            background-color: $orange-flash;
         }
     }
 }

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<IProps, IState> {
+  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 <div className={classes["root"]}>
       <div className={classes["icon-container"]} onClick={this.openModal}>
         <Image alt="notifications" src={NotificationIcon} className={classes["notification-icon"]} />
-        {this.state.hasNotifications && <div className={classes["notification-dot"]}></div>}
+        {this.state.hasNotifications &&
+          <Image className={classes["notification-dot"]} src={InfoIcon} alt="Unread notification" />
+        }
       </div>
 
       {this.state.isModalOpen && <NotificationModal isOpen={this.state.isModalOpen} closeModal={this.closeModal} />}
     </div>;
   }
+
+  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 });
   };

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;

src/front/components/Layouts/Home/index.tsx

@@ -8,9 +8,7 @@ export default class Home extends BasePage {
     return (
       <DefaultTemplate title={"HomePage"}>
         <div className={classes["root"]}>
-          <div style={{ fontSize: "20px" }}>JDJADJIZDIAZN?DIAZ?</div>
-          <Typography typo={ITypo.H1}>COUCOU JE SUIS UNE TYPO</Typography>
-          <Typography typo={ITypo.H1Bis}>COUCOU JE SUIS UNE TYPO</Typography>
+          <Typography typo={ITypo.H1}>HomePage</Typography>
         </div>
       </DefaultTemplate>
     );