remove timer from error notification

src/components/messages/MessageManager.tsx

@@ -11,8 +11,8 @@ import { INotification } from "./";
 import { useStyles } from "./styles";
 
 export interface IMessageManagerProps extends INotification {
-  onMouseEnter: () => void;
+  onMouseEnter?: () => void;
-  onMouseLeave: () => 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}
+      onMouseEnter={onMouseEnter && onMouseEnter}
-      onMouseLeave={onMouseLeave}
+      onMouseLeave={onMouseLeave && onMouseLeave}
     >
       <SnackbarContent
-        id={props.id}
+        id={props.id.toString()}
         key={props.id}
         aria-describedby="message-id"
         className={classNames(classes.snackbar, {

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()
+    const id = Date.now();
-      .toString(36)
-      .substr(2, 9);
-
     const notification = {
       close: () => remove(id),
       id,
       message,
       timeout
     };
+    if (timeout !== null) {
+      const timeoutId = window.setTimeout(() => {
+        timerCallback(notification);
+      }, timeout);
 
-    const timeoutId = window.setTimeout(() => {
+      timersArr.current.push({
-      timerCallback(notification);
+        id: notification.id,
-    }, timeout);
+        notification,
-
+        remaining: timeout,
-    timersArr.current.push({
+        start: new Date().getTime(),
-      id: notification.id,
+        timeoutId
-      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>
               ))}

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

src/components/messages/styles.ts

@@ -34,10 +34,9 @@ export const useStyles = makeStyles(
       color: theme.palette.text.primary
     },
     container: {
-      alignItems: "flex-end",
+      display: "grid",
-      display: "flex",
+      gridTemplateRows: "repeat(auto-fill, minmax(90px, 1fr))",
-      flexDirection: "column",
+      justifyContent: "end",
-      justifyContent: "center",
       left: 0,
       pointerEvents: "none",
       position: "fixed",
@@ -166,6 +165,7 @@ export const useStyles = makeStyles(
       },
       borderRadius: 4,
       paddingBottom: 15,
+      paddingLeft: 5,
       paddingRight: 45,
       position: "relative"
     },

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