From d37eea3c92f489ec66deb2ed212b7c7d08809252 Mon Sep 17 00:00:00 2001
From: LASER-Yi <ly0007@yeah.net>
Date: Mon, 30 Aug 2021 09:18:00 +0800
Subject: [PATCH] Remove red dot in the notification center

---
 frontend/src/App/Notification.tsx  | 23 ++---------------------
 frontend/src/App/notification.scss | 13 -------------
 2 files changed, 2 insertions(+), 34 deletions(-)

diff --git a/frontend/src/App/Notification.tsx b/frontend/src/App/Notification.tsx
index c5d405acf..23558fed2 100644
--- a/frontend/src/App/Notification.tsx
+++ b/frontend/src/App/Notification.tsx
@@ -12,7 +12,6 @@ import {
 } from "@fortawesome/react-fontawesome";
 import React, {
   FunctionComponent,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -27,7 +26,7 @@ import {
 } from "react-bootstrap";
 import { useDidUpdate, useTimeoutWhen } from "rooks";
 import { useReduxStore } from "../@redux/hooks/base";
-import { BuildKey, useIsArrayExtended } from "../utilities";
+import { BuildKey } from "../utilities";
 import "./notification.scss";
 
 enum State {
@@ -66,15 +65,6 @@ 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);
 
@@ -143,10 +133,6 @@ 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);
@@ -158,12 +144,7 @@ const NotificationCenter: FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Dropdown
-        onClick={onToggleClick}
-        className={`notification-btn ${hasNew ? "new-item" : ""}`}
-        ref={dropdownRef}
-        alignRight
-      >
+      <Dropdown className="notification-btn" 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 b0fa85bac..a60e94723 100644
--- a/frontend/src/App/notification.scss
+++ b/frontend/src/App/notification.scss
@@ -6,19 +6,6 @@
 }
 
 .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;