feat: better notification management

iyzana · Feb 11, 2023 · 2122b48 · 2122b48
1 parent c22dcef
commit 2122b48
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 25 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -34,17 +34,27 @@ function App() {
   }>({});
 
   const addNotification = useCallback((notification: Notification) => {
-    setNotifications((notifications) => [...notifications, notification]);
+    setNotifications((notifications) => [
+      ...notifications.filter((notification) => !notification.permanent),
+      notification,
+      ...notifications.filter((notification) => notification.permanent),
+    ]);
   }, []);
 
   useEffect(() => {
     ws.onclose = () => {
       console.log('disconnected');
-      addNotification({
-        message: 'Connection lost',
-        level: 'error',
-        permanent: true,
-      });
+      // wait 200ms before showing connection lost because on site-reload
+      // firefox first closes the websocket resulting in the error briefly
+      // showing up when it is not necessary
+      const timeout = setTimeout(() => {
+        addNotification({
+          message: 'Connection lost',
+          level: 'error',
+          permanent: true,
+        });
+      }, 200);
+      return () => clearTimeout(timeout);
     };
   }, [addNotification]);
 
@@ -77,17 +87,19 @@ function App() {
   }, [addNotification, messageCallbacks]);
 
   useEffect(() => {
-    if (notifications.length === 0) {
+    if (!notifications.find((notification) => !notification.permanent)) {
+      // no non-permanent notifications
       return;
     }
     const timeout = setTimeout(() => {
       setNotifications((notifications) => {
         const dismissIndex = notifications.findIndex(
           (notification) => !notification.permanent,
         );
-        return notifications.splice(dismissIndex, 1);
+        console.log(`dismissing ${dismissIndex}`);
+        return dismissIndex === -1 ? notifications : notifications.slice(1);
       });
-    }, 3000);
+    }, 2000);
     return () => clearTimeout(timeout);
   }, [notifications]);
 

diff --git a/frontend/src/component/Infobox.css b/frontend/src/component/Infobox.css
@@ -9,14 +9,37 @@
   justify-content: space-between;
 }
 
-.infobox.info {
+.infobox.success {
   background-color: #147447;
 }
 
+.infobox.info {
+  background-color: #005187;
+}
+
 .infobox.error {
   background-color: #880011;
 }
 
+.remaining {
+  background-color: var(--card);
+  padding: var(--s0);
+  margin: calc(-1 * var(--s0)) 0;
+  border-radius: var(--radius);
+}
+
+.infobox.success .remaining {
+  background-color: #0d492c;
+}
+
+.infobox.info .remaining {
+  background-color: #003254;
+}
+
+.infobox.error .remaining {
+  background-color: #55000b;
+}
+
 .copylink {
   margin: calc(-1 * var(--s0)) 0;
 }
diff --git a/frontend/src/component/Infobox.tsx b/frontend/src/component/Infobox.tsx
@@ -32,8 +32,8 @@ function Infobox({ notifications, addNotification }: InfoboxProps) {
     }
     navigator.clipboard.writeText(window.location.href);
     addNotification({
-      message: 'Link copied',
-      level: 'info',
+      message: 'Room link copied to clipboard',
+      level: 'success',
       permanent: false,
     });
   };
@@ -45,15 +45,22 @@ function Infobox({ notifications, addNotification }: InfoboxProps) {
       className={`infobox ${notification != null ? notification.level : ''}`}
     >
       {notification != null ? (
-        <span className="">{notifications[0].message}</span>
+        <>
+          <span>{notifications[0].message}</span>
+          {notifications.length > 1 ? (
+            <span className="remaining">
+              {notifications.length - 1} remaining
+            </span>
+          ) : null}
+        </>
       ) : (
         <>
           <span className="connections">
-            {numUsers === 1 ? 'no one else connected' : `${numUsers} connected`}
+            {numUsers === 1 ? 'No one else connected' : `${numUsers} connected`}
           </span>
           <div>
             <button className="copylink" onClick={copyLink}>
-              COPY LINK
+              Copy room link
             </button>
           </div>
         </>

diff --git a/frontend/src/component/Input.css b/frontend/src/component/Input.css
@@ -18,12 +18,6 @@
   border-radius: 0 0 var(--radius) var(--radius);
 }
 
-.error {
-  width: 100%;
-  background-color: #880011;
-  padding: var(--s0);
-}
-
 .input-send {
   background-color: unset;
 }
diff --git a/frontend/src/component/Queue.tsx b/frontend/src/component/Queue.tsx
@@ -54,14 +54,14 @@ function Queue({ addNotification, setWorking }: QueueProps) {
         } else if (msg === 'queue err not-found') {
           addNotification({
             message: 'No video found',
-            level: 'error',
+            level: 'info',
             permanent: false,
           });
           setWorking(false);
         } else if (msg === 'queue err duplicate') {
           addNotification({
             message: 'Already in queue',
-            level: 'error',
+            level: 'info',
             permanent: false,
           });
           setWorking(false);
@@ -101,7 +101,7 @@ function Queue({ addNotification, setWorking }: QueueProps) {
           <div className="status">
             {queue.length === 0 ? null : (
               <button className="skip" onClick={skip}>
-                SKIP <FontAwesomeIcon icon={faAngleDoubleRight} />
+                Skip <FontAwesomeIcon icon={faAngleDoubleRight} />
               </button>
             )}
           </div>

diff --git a/frontend/src/model/Notification.ts b/frontend/src/model/Notification.ts
@@ -1,5 +1,5 @@
 export default interface Notification {
   message: string;
-  level: 'info' | 'error';
+  level: 'success' | 'info' | 'error';
   permanent: boolean;
 }