From 893dd2c85e56115a4b93157943ce4b4d96d92810 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 18 Jan 2024 14:52:57 +0800
Subject: [PATCH] chore: add disable filter to renderer context

---
 web/src/components/MemoContent/Tag.tsx          | 11 +++++++++--
 web/src/components/MemoContent/index.tsx        |  2 ++
 web/src/components/MemoContent/types/context.ts |  1 +
 web/src/components/MemoView.tsx                 | 16 +++++++++-------
 web/src/components/ShareMemoDialog.tsx          |  2 +-
 web/src/pages/Home.tsx                          |  2 +-
 web/src/pages/UserProfile.tsx                   |  2 +-
 7 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/web/src/components/MemoContent/Tag.tsx b/web/src/components/MemoContent/Tag.tsx
index 258103a0..99ccc305 100644
--- a/web/src/components/MemoContent/Tag.tsx
+++ b/web/src/components/MemoContent/Tag.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { useContext } from "react";
 import { useFilterStore } from "@/store/module";
 import { RendererContext } from "./types";
@@ -11,7 +12,7 @@ const Tag: React.FC<Props> = ({ content }: Props) => {
   const filterStore = useFilterStore();
 
   const handleTagClick = () => {
-    if (context.readonly) {
+    if (context.disableFilter) {
       return;
     }
 
@@ -24,7 +25,13 @@ const Tag: React.FC<Props> = ({ content }: Props) => {
   };
 
   return (
-    <span className="cursor-pointer inline-block w-auto text-blue-600 dark:text-blue-400 hover:opacity-80" onClick={handleTagClick}>
+    <span
+      className={classNames(
+        "inline-block w-auto text-blue-600 dark:text-blue-400",
+        context.disableFilter ? "" : "cursor-pointer hover:opacity-80"
+      )}
+      onClick={handleTagClick}
+    >
       #{content}
     </span>
   );
diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
index 93c043ee..7f3126ff 100644
--- a/web/src/components/MemoContent/index.tsx
+++ b/web/src/components/MemoContent/index.tsx
@@ -9,6 +9,7 @@ interface Props {
   nodes: Node[];
   memoId?: number;
   readonly?: boolean;
+  disableFilter?: boolean;
   className?: string;
   onClick?: (e: React.MouseEvent) => void;
 }
@@ -35,6 +36,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
         nodes,
         memoId,
         readonly: !allowEdit,
+        disableFilter: props.disableFilter,
       }}
     >
       <div className={`w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300 ${className || ""}`}>
diff --git a/web/src/components/MemoContent/types/context.ts b/web/src/components/MemoContent/types/context.ts
index 59851e5d..719b5991 100644
--- a/web/src/components/MemoContent/types/context.ts
+++ b/web/src/components/MemoContent/types/context.ts
@@ -5,6 +5,7 @@ interface Context {
   nodes: Node[];
   memoId?: number;
   readonly?: boolean;
+  disableFilter?: boolean;
 }
 
 export const RendererContext = createContext<Context>({
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 9439a47e..c0500fd0 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -32,7 +32,7 @@ interface Props {
   memo: Memo;
   showCreator?: boolean;
   showVisibility?: boolean;
-  showPinnedStyle?: boolean;
+  showPinned?: boolean;
   className?: string;
 }
 
@@ -166,7 +166,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
 
   return (
     <div
-      className={classNames("group memo-wrapper", "memos-" + memo.id, memo.pinned && props.showPinnedStyle ? "pinned" : "", className)}
+      className={classNames("group memo-wrapper", "memos-" + memo.id, memo.pinned && props.showPinned ? "pinned" : "", className)}
       ref={memoContainerRef}
     >
       <div className="memo-top-wrapper mb-1">
@@ -189,7 +189,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
           <span className="text-sm text-gray-400 select-none" onClick={handleGotoMemoDetailPage}>
             {displayTime}
           </span>
-          {props.showPinnedStyle && memo.pinned && (
+          {props.showPinned && memo.pinned && (
             <>
               <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
               <Tooltip title={"Pinned"} placement="top">
@@ -217,10 +217,12 @@ const MemoView: React.FC<Props> = (props: Props) => {
               </span>
               <div className="more-action-btns-wrapper">
                 <div className="more-action-btns-container min-w-[6em]">
-                  <span className="btn" onClick={handleTogglePinMemoBtnClick}>
-                    {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
-                    {memo.pinned ? t("common.unpin") : t("common.pin")}
-                  </span>
+                  {props.showPinned && (
+                    <span className="btn" onClick={handleTogglePinMemoBtnClick}>
+                      {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
+                      {memo.pinned ? t("common.unpin") : t("common.pin")}
+                    </span>
+                  )}
                   <span className="btn" onClick={handleEditMemoClick}>
                     <Icon.Edit3 className="w-4 h-auto mr-2" />
                     {t("common.edit")}
diff --git a/web/src/components/ShareMemoDialog.tsx b/web/src/components/ShareMemoDialog.tsx
index 305a0269..55c249ae 100644
--- a/web/src/components/ShareMemoDialog.tsx
+++ b/web/src/components/ShareMemoDialog.tsx
@@ -112,7 +112,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
           >
             <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getDateTimeString(memo.displayTime)}</span>
             <div className="w-full px-6 text-base pb-4">
-              <MemoContent memoId={memo.id} nodes={memo.nodes} readonly={true} />
+              <MemoContent memoId={memo.id} nodes={memo.nodes} readonly={true} disableFilter />
               <MemoResourceListView resourceList={memo.resources} />
             </div>
             <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-900 py-4 px-6">
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 0c82e356..031c6385 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -73,7 +73,7 @@ const Home = () => {
           <div className="flex flex-col justify-start items-start w-full max-w-full pb-28">
             <MemoFilter className="px-2 pb-2" />
             {sortedMemos.map((memo) => (
-              <MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} showVisibility showPinnedStyle />
+              <MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} showVisibility showPinned />
             ))}
             {isRequesting ? (
               <div className="flex flex-col justify-start items-center w-full my-4">
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index f72c9534..e3c695d2 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -107,7 +107,7 @@ const UserProfile = () => {
               </div>
               <MemoFilter className="px-2 pb-3" />
               {sortedMemos.map((memo) => (
-                <MemoView key={memo.id} memo={memo} showVisibility showPinnedStyle />
+                <MemoView key={memo.id} memo={memo} showVisibility showPinned />
               ))}
               {isRequesting ? (
                 <div className="flex flex-col justify-start items-center w-full my-4">