From 5ebbed9115ec43baa6304997012c0399613ff98c Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 15 Jan 2024 08:15:34 +0800
Subject: [PATCH] chore: handle tag click

---
 web/src/components/MemoContent/Tag.tsx   | 24 +++++++++++++++++++++++-
 web/src/components/MemoContent/index.tsx |  8 ++++----
 web/src/components/MemoView.tsx          | 14 ++------------
 web/src/pages/MemoDetail.tsx             |  8 ++++----
 4 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/web/src/components/MemoContent/Tag.tsx b/web/src/components/MemoContent/Tag.tsx
index ca87d0e4..258103a0 100644
--- a/web/src/components/MemoContent/Tag.tsx
+++ b/web/src/components/MemoContent/Tag.tsx
@@ -1,10 +1,32 @@
+import { useContext } from "react";
+import { useFilterStore } from "@/store/module";
+import { RendererContext } from "./types";
+
 interface Props {
   content: string;
 }
 
 const Tag: React.FC<Props> = ({ content }: Props) => {
+  const context = useContext(RendererContext);
+  const filterStore = useFilterStore();
+
+  const handleTagClick = () => {
+    if (context.readonly) {
+      return;
+    }
+
+    const currTagQuery = filterStore.getState().tag;
+    if (currTagQuery === content) {
+      filterStore.setTagFilter(undefined);
+    } else {
+      filterStore.setTagFilter(content);
+    }
+  };
+
   return (
-    <span className="tag-container cursor-pointer inline-block w-auto text-blue-600 dark:text-blue-400 hover:opacity-80">#{content}</span>
+    <span className="cursor-pointer inline-block w-auto text-blue-600 dark:text-blue-400 hover:opacity-80" onClick={handleTagClick}>
+      #{content}
+    </span>
   );
 };
 
diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
index a1e85d29..93c043ee 100644
--- a/web/src/components/MemoContent/index.tsx
+++ b/web/src/components/MemoContent/index.tsx
@@ -10,19 +10,19 @@ interface Props {
   memoId?: number;
   readonly?: boolean;
   className?: string;
-  onMemoContentClick?: (e: React.MouseEvent) => void;
+  onClick?: (e: React.MouseEvent) => void;
 }
 
 const MemoContent: React.FC<Props> = (props: Props) => {
-  const { className, memoId, nodes, onMemoContentClick } = props;
+  const { className, memoId, nodes, onClick } = props;
   const currentUser = useCurrentUser();
   const memoStore = useMemoStore();
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
   const allowEdit = !props.readonly && memoId && currentUser?.id === memoStore.getMemoById(memoId)?.creatorId;
 
   const handleMemoContentClick = async (e: React.MouseEvent) => {
-    if (onMemoContentClick) {
-      onMemoContentClick(e);
+    if (onClick) {
+      onClick(e);
     }
   };
 
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index d4842901..ec5255b1 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -8,7 +8,6 @@ import { UNKNOWN_ID } from "@/helpers/consts";
 import { getRelativeTimeString, getTimeStampByDate } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useFilterStore } from "@/store/module";
 import { useUserStore, extractUsernameFromName, useMemoStore } from "@/store/v1";
 import { RowStatus } from "@/types/proto/api/v2/common";
 import { MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
@@ -41,7 +40,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const { i18n } = useTranslation();
-  const filterStore = useFilterStore();
   const memoStore = useMemoStore();
   const userStore = useUserStore();
   const user = useCurrentUser();
@@ -157,15 +155,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     const targetEl = e.target as HTMLElement;
 
-    if (targetEl.classList.contains("tag-container")) {
-      const tagName = targetEl.innerText.slice(1);
-      const currTagQuery = filterStore.getState().tag;
-      if (currTagQuery === tagName) {
-        filterStore.setTagFilter(undefined);
-      } else {
-        filterStore.setTagFilter(tagName);
-      }
-    } else if (targetEl.tagName === "IMG") {
+    if (targetEl.tagName === "IMG") {
       const imgUrl = targetEl.getAttribute("src");
       if (imgUrl) {
         showPreviewImageDialog([imgUrl], 0);
@@ -263,7 +253,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
           )}
         </div>
       </div>
-      <MemoContent memoId={memo.id} nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
+      <MemoContent memoId={memo.id} nodes={memo.nodes} readonly={readonly} onClick={handleMemoContentClick} />
       <MemoResourceListView resourceList={memo.resources} />
       <MemoRelationListView memo={memo} relationList={referenceRelations} />
     </div>
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 3d26efd5..b38ee6e7 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -35,12 +35,12 @@ const MemoDetail = () => {
   const [creator, setCreator] = useState<User>();
   const memoId = Number(params.memoId);
   const memo = memoStore.getMemoById(memoId);
-  const allowEdit = memo?.creatorId === currentUser?.id;
   const [parentMemo, setParentMemo] = useState<Memo | undefined>(undefined);
   const referenceRelations = memo?.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE) || [];
   const commentRelations =
     memo?.relations.filter((relation) => relation.relatedMemoId === memo?.id && relation.type === MemoRelation_Type.COMMENT) || [];
   const comments = commentRelations.map((relation) => memoStore.getMemoById(relation.memoId)).filter((memo) => memo) as any as Memo[];
+  const readonly = memo?.creatorId !== currentUser?.id;
 
   // Prepare memo.
   useEffect(() => {
@@ -136,12 +136,12 @@ const MemoDetail = () => {
               </Link>
             </div>
           )}
-          <MemoContent memoId={memo.id} nodes={memo.nodes} readonly={true} />
+          <MemoContent memoId={memo.id} nodes={memo.nodes} readonly={readonly} />
           <MemoResourceListView resourceList={memo.resources} />
           <MemoRelationListView memo={memo} relationList={referenceRelations} />
           <div className="w-full mt-3 flex flex-row justify-between items-center gap-2">
             <div className="flex flex-row justify-start items-center">
-              {allowEdit && (
+              {!readonly && (
                 <Select
                   className="w-auto text-sm"
                   variant="plain"
@@ -162,7 +162,7 @@ const MemoDetail = () => {
               )}
             </div>
             <div className="flex flex-row sm:justify-end items-center">
-              {allowEdit && (
+              {!readonly && (
                 <Tooltip title={"Edit"} placement="top">
                   <IconButton size="sm" onClick={handleEditMemoClick}>
                     <Icon.Edit3 className="w-4 h-auto text-gray-600 dark:text-gray-400" />