no log: Revert "Remove red dot in the notification center"

This reverts commit d37eea3c92f489ec66deb2ed212b7c7d08809252.

2 files changed, 34 insertions, 2 deletions

diff --git a/frontend/src/App/Notification.tsx b/frontend/src/App/Notification.tsx
index 23558fed2..c5d405acf 100644
--- a/frontend/src/App/Notification.tsx
+++ b/frontend/src/App/Notification.tsx
@@ -12,6 +12,7 @@ import {
 } from "@fortawesome/react-fontawesome";
 import React, {
   FunctionComponent,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -26,7 +27,7 @@ import {
 } from "react-bootstrap";
 import { useDidUpdate, useTimeoutWhen } from "rooks";
 import { useReduxStore } from "../@redux/hooks/base";
-import { BuildKey } from "../utilities";
+import { BuildKey, useIsArrayExtended } from "../utilities";
 import "./notification.scss";
 
 enum State {
@@ -65,6 +66,15 @@ const NotificationCenter: FunctionComponent = () => {
   const { progress, notifications, notifier } = useReduxStore((s) => s.site);
 
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [hasNew, setHasNew] = useState(false);
+
+  const hasNewProgress = useIsArrayExtended(progress);
+  const hasNewNotifications = useIsArrayExtended(notifications);
+  useDidUpdate(() => {
+    if (hasNewNotifications || hasNewProgress) {
+      setHasNew(true);
+    }
+  }, [hasNewProgress, hasNewNotifications]);
 
   const [btnState, setBtnState] = useState(State.Idle);
 
@@ -133,6 +143,10 @@ const NotificationCenter: FunctionComponent = () => {
     return nodes;
   }, [progress, notifications]);
 
+  const onToggleClick = useCallback(() => {
+    setHasNew(false);
+  }, []);
+
   // Tooltip Controller
   const [showTooltip, setTooltip] = useState(false);
   useTimeoutWhen(() => setTooltip(false), 3 * 1000, showTooltip);
@@ -144,7 +158,12 @@ const NotificationCenter: FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Dropdown className="notification-btn" ref={dropdownRef} alignRight>
+      <Dropdown
+        onClick={onToggleClick}
+        className={`notification-btn ${hasNew ? "new-item" : ""}`}
+        ref={dropdownRef}
+        alignRight
+      >
         <Dropdown.Toggle as={Button} className="dropdown-hidden">
           <FontAwesomeIcon {...iconProps}></FontAwesomeIcon>
         </Dropdown.Toggle>
diff --git a/frontend/src/App/notification.scss b/frontend/src/App/notification.scss
index a60e94723..b0fa85bac 100644
--- a/frontend/src/App/notification.scss
+++ b/frontend/src/App/notification.scss
@@ -6,6 +6,19 @@
 }
 
 .notification-btn {
+  &.new-item {
+    &::after {
+      position: absolute;
+      background-color: red;
+      content: "";
+      border-radius: 50%;
+      height: 6px;
+      width: 6px;
+      right: 10%;
+      top: 10%;
+    }
+  }
+
   .dropdown-menu {
     max-height: 85vh;
     overflow-y: auto;