From 3f903b852558d1cea939fa7902130884fcbc2e42 Mon Sep 17 00:00:00 2001
From: AlicjaSzu <alicja.szukuc@gmail.com>
Date: Thu, 2 Jul 2020 14:44:03 +0200
Subject: [PATCH] remove timer from error notification

---
 src/components/messages/MessageManager.tsx    | 10 ++---
 .../messages/MessageManagerProvider.tsx       | 45 +++++++++----------
 src/components/messages/index.ts              |  6 +--
 src/components/messages/styles.ts             |  8 ++--
 src/hooks/useNotifier.ts                      |  3 +-
 5 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/components/messages/MessageManager.tsx b/src/components/messages/MessageManager.tsx
index 20b1d8db3..ba7b3f3a9 100644
--- a/src/components/messages/MessageManager.tsx
+++ b/src/components/messages/MessageManager.tsx
@@ -11,8 +11,8 @@ import { INotification } from "./";
 import { useStyles } from "./styles";
 
 export interface IMessageManagerProps extends INotification {
-  onMouseEnter: () => void;
-  onMouseLeave: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
 }
 
 export const MessageManagerTemplate: React.FC<IMessageManagerProps> = props => {
@@ -32,11 +32,11 @@ export const MessageManagerTemplate: React.FC<IMessageManagerProps> = props => {
     <div
       key={props.id}
       className={classes.snackbarContainer}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
+      onMouseEnter={onMouseEnter && onMouseEnter}
+      onMouseLeave={onMouseLeave && onMouseLeave}
     >
       <SnackbarContent
-        id={props.id}
+        id={props.id.toString()}
         key={props.id}
         aria-describedby="message-id"
         className={classNames(classes.snackbar, {
diff --git a/src/components/messages/MessageManagerProvider.tsx b/src/components/messages/MessageManagerProvider.tsx
index e1bdb38b1..4f20b8af3 100644
--- a/src/components/messages/MessageManagerProvider.tsx
+++ b/src/components/messages/MessageManagerProvider.tsx
@@ -11,13 +11,6 @@ import {
 import Container from "./Container";
 import Transition from "./Transition";
 
-const containerStyle = {
-  display: "grid",
-  gridTemplateRows: "repeat(auto-fill, minmax(90px, 1fr)",
-  justifyContent: "end",
-  zIndex: 1200
-};
-
 const MessageManagerProvider = ({ children }) => {
   const root = useRef(null);
   const timersArr = useRef<ITimer[]>([]);
@@ -51,28 +44,26 @@ const MessageManagerProvider = ({ children }) => {
   }, []);
 
   const show = useCallback((message = {}, timeout = 3000) => {
-    const id = Math.random()
-      .toString(36)
-      .substr(2, 9);
-
+    const id = Date.now();
     const notification = {
       close: () => remove(id),
       id,
       message,
       timeout
     };
+    if (timeout !== null) {
+      const timeoutId = window.setTimeout(() => {
+        timerCallback(notification);
+      }, timeout);
 
-    const timeoutId = window.setTimeout(() => {
-      timerCallback(notification);
-    }, timeout);
-
-    timersArr.current.push({
-      id: notification.id,
-      notification,
-      remaining: timeout,
-      start: new Date().getTime(),
-      timeoutId
-    });
+      timersArr.current.push({
+        id: notification.id,
+        notification,
+        remaining: timeout,
+        start: new Date().getTime(),
+        timeoutId
+      });
+    }
 
     setNotifications(state => [notification, ...state]);
 
@@ -112,16 +103,20 @@ const MessageManagerProvider = ({ children }) => {
         createPortal(
           <TransitionGroup
             appear
-            options={{ containerStyle, position: "top right" }}
+            options={{ position: "top right" }}
             component={Container}
           >
             {!!notifications.length &&
               notifications.map(notification => (
                 <Transition key={notification.id}>
                   <MessageManagerTemplate
-                    onMouseEnter={() => pauseTimer(notification)}
-                    onMouseLeave={() => resumeTimer(notification)}
                     {...notification}
+                    {...(!!notification.timeout
+                      ? {
+                          onMouseEnter: () => pauseTimer(notification),
+                          onMouseLeave: () => resumeTimer(notification)
+                        }
+                      : {})}
                   />
                 </Transition>
               ))}
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index f041f2103..264a4fa35 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -15,14 +15,14 @@ export interface IMessage {
 }
 
 export interface INotification {
-  id: string;
+  id: number;
   message: IMessage;
   timeout: number;
   close: () => void;
 }
 
 export interface ITimer {
-  id: string;
+  id: number;
   notification: INotification;
   remaining: number;
   start: number;
@@ -36,7 +36,7 @@ export const types = {
   WARNING: "warning"
 };
 export interface INotificationContext {
-  show: (message: IMessage, timeout?: number) => void;
+  show: (message: IMessage, timeout?: number | null) => void;
   remove: (notification: INotification) => void;
 }
 
diff --git a/src/components/messages/styles.ts b/src/components/messages/styles.ts
index e6022b2fa..d462a93b7 100644
--- a/src/components/messages/styles.ts
+++ b/src/components/messages/styles.ts
@@ -34,10 +34,9 @@ export const useStyles = makeStyles(
       color: theme.palette.text.primary
     },
     container: {
-      alignItems: "flex-end",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
+      display: "grid",
+      gridTemplateRows: "repeat(auto-fill, minmax(90px, 1fr))",
+      justifyContent: "end",
       left: 0,
       pointerEvents: "none",
       position: "fixed",
@@ -166,6 +165,7 @@ export const useStyles = makeStyles(
       },
       borderRadius: 4,
       paddingBottom: 15,
+      paddingLeft: 5,
       paddingRight: 45,
       position: "relative"
     },
diff --git a/src/hooks/useNotifier.ts b/src/hooks/useNotifier.ts
index ebafc5512..b18186511 100644
--- a/src/hooks/useNotifier.ts
+++ b/src/hooks/useNotifier.ts
@@ -8,7 +8,8 @@ function useNotifier(): UseNotifierResult {
   const notificationContext = useContext(MessageContext);
 
   const notify = (options: IMessage) => {
-    notificationContext.show(options, options.autohide);
+    const timeout = options.status === "error" ? null : options.autohide;
+    notificationContext.show(options, timeout);
   };
   return notify;
 }