From 2b7d7c95a5316714412d3aa42a4a73fe4be9eab8 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 28 Oct 2023 09:02:02 +0800
Subject: [PATCH] chore: update inbox detect

---
 api/v1/memo.go                                |  2 +-
 web/src/components/Header.tsx                 | 31 +++++++++++++++++--
 .../components/Inbox/MemoCommentMessage.tsx   | 14 +++++++--
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/api/v1/memo.go b/api/v1/memo.go
index df5ba6c7..db3ecc2f 100644
--- a/api/v1/memo.go
+++ b/api/v1/memo.go
@@ -338,7 +338,7 @@ func (s *APIV1Service) CreateMemo(c echo.Context) error {
 		}); err != nil {
 			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to upsert memo relation").SetInternal(err)
 		}
-		if memoRelationUpsert.Type == MemoRelationComment {
+		if memo.Visibility != store.Private && memoRelationUpsert.Type == MemoRelationComment {
 			relatedMemo, err := s.Store.GetMemo(ctx, &store.FindMemo{
 				ID: &memoRelationUpsert.RelatedMemoID,
 			})
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index f1273bb7..8032d87e 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -3,6 +3,8 @@ import { useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useLayoutStore } from "@/store/module";
+import useInboxStore from "@/store/v1/inbox";
+import { Inbox_Status } from "@/types/proto/api/v2/inbox_service";
 import { useTranslate } from "@/utils/i18n";
 import { resolution } from "@/utils/layout";
 import Icon from "./Icon";
@@ -19,8 +21,26 @@ const Header = () => {
   const t = useTranslate();
   const location = useLocation();
   const layoutStore = useLayoutStore();
-  const showHeader = layoutStore.state.showHeader;
   const user = useCurrentUser();
+  const inboxStore = useInboxStore();
+  const showHeader = layoutStore.state.showHeader;
+  const hasUnreadInbox = inboxStore.inboxes.some((inbox) => inbox.status === Inbox_Status.UNREAD);
+
+  useEffect(() => {
+    if (!user) {
+      return;
+    }
+
+    inboxStore.fetchInboxes();
+    // Fetch inboxes every 5 minutes.
+    const timer = setInterval(async () => {
+      await inboxStore.fetchInboxes();
+    }, 1000 * 60 * 5);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
 
   useEffect(() => {
     const handleWindowResize = () => {
@@ -56,7 +76,14 @@ const Header = () => {
     id: "header-inbox",
     path: "/inbox",
     title: t("common.inbox"),
-    icon: <Icon.Bell className="mr-3 w-6 h-auto opacity-70" />,
+    icon: (
+      <>
+        <div className="relative">
+          <Icon.Bell className="mr-3 w-6 h-auto opacity-70" />
+          {hasUnreadInbox && <div className="absolute top-0 left-5 w-2 h-2 rounded-full bg-blue-500"></div>}
+        </div>
+      </>
+    ),
   };
   const exploreNavLink: NavLinkItem = {
     id: "header-explore",
diff --git a/web/src/components/Inbox/MemoCommentMessage.tsx b/web/src/components/Inbox/MemoCommentMessage.tsx
index cce224ee..88f8ec36 100644
--- a/web/src/components/Inbox/MemoCommentMessage.tsx
+++ b/web/src/components/Inbox/MemoCommentMessage.tsx
@@ -37,9 +37,12 @@ const MemoCommentMessage = ({ inbox }: Props) => {
       return;
     }
     navigateTo(`/m/${activity?.payload?.memoComment?.relatedMemoId}`);
+    if (inbox.status === Inbox_Status.UNREAD) {
+      handleArchiveMessage(true);
+    }
   };
 
-  const handleArchiveMessage = async () => {
+  const handleArchiveMessage = async (silence = false) => {
     await inboxStore.updateInbox(
       {
         name: inbox.name,
@@ -47,7 +50,9 @@ const MemoCommentMessage = ({ inbox }: Props) => {
       },
       ["status"]
     );
-    toast.success("Archived");
+    if (!silence) {
+      toast.success("Archived");
+    }
   };
 
   return (
@@ -73,7 +78,10 @@ const MemoCommentMessage = ({ inbox }: Props) => {
           <div>
             {inbox.status === Inbox_Status.UNREAD && (
               <Tooltip title="Archive" placement="top">
-                <Icon.Inbox className="w-4 h-auto cursor-pointer text-gray-400 hover:text-blue-600" onClick={handleArchiveMessage} />
+                <Icon.Inbox
+                  className="w-4 h-auto cursor-pointer text-gray-400 hover:text-blue-600"
+                  onClick={() => handleArchiveMessage()}
+                />
               </Tooltip>
             )}
           </div>