chore: update fetch tags args (#3515)

* Centralised the logic for filters to apply to tagging and updated components to pass in those params needed

* Fixed linting issue

* Split out params from options

* Fixed linting errors

---------

Co-authored-by: Martin MacDonald <martinmacdonald@Martins-MacBook-Pro.local>

web/src/components/HomeSidebar/TagsSection.tsx

@@ -4,7 +4,6 @@ import { useLocation } from "react-router-dom";
 import useDebounce from "react-use/lib/useDebounce";
 import { memoServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { Routes } from "@/router";
 import { useFilterStore } from "@/store/module";
 import { useMemoList, useTagStore } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
@@ -29,16 +28,7 @@ const TagsSection = (props: Props) => {
   useDebounce(() => fetchTags(), 300, [memoList.size(), location.pathname]);
 
   const fetchTags = async () => {
-    const filters = [`row_status == "NORMAL"`];
+    await tagStore.fetchTags({ user, location });
-    if (user) {
-      if (location.pathname === Routes.EXPLORE) {
-        filters.push(`visibilities == ["PUBLIC", "PROTECTED"]`);
-      }
-      filters.push(`creator == "${user.name}"`);
-    } else {
-      filters.push(`visibilities == ["PUBLIC"]`);
-    }
-    await tagStore.fetchTags(filters.join(" && "));
   };
 
   return (
@@ -75,6 +65,8 @@ const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) =>
   const filterStore = useFilterStore();
   const tagStore = useTagStore();
   const { tag, amount } = props;
+  const user = useCurrentUser();
+  const location = useLocation();
 
   const handleTagClick = () => {
     if (filterStore.getState().tag === tag) {
@@ -95,7 +87,7 @@ const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) =>
           parent: "memos/-",
           tag: tag,
         });
-        await tagStore.fetchTags(undefined, { skipCache: true });
+        await tagStore.fetchTags({ location, user }, { skipCache: true });
         toast.success(t("message.deleted-successfully"));
       },
     });

web/src/components/MemoEditor/ActionButton/TagSelector.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import useClickAway from "react-use/lib/useClickAway";
 import Icon from "@/components/Icon";
 import OverflowTip from "@/components/kit/OverflowTip";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { useTagStore } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 import { EditorRefActions } from "../Editor";
@@ -18,11 +19,12 @@ const TagSelector = (props: Props) => {
   const [open, setOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const tags = tagStore.sortedTags();
+  const user = useCurrentUser();
 
   useEffect(() => {
     (async () => {
       try {
-        await tagStore.fetchTags();
+        await tagStore.fetchTags({ user });
       } catch (error) {
         // do nothing.
       }

web/src/components/MemoEditor/MemoEditorDialog.tsx

@@ -1,6 +1,7 @@
 import { IconButton } from "@mui/joy";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { useMemoStore, useTagStore } from "@/store/v1";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import MemoEditor, { Props as MemoEditorProps } from ".";
@@ -24,9 +25,10 @@ const MemoEditorDialog: React.FC<Props> = ({
   const memoPatchRef = useRef<Partial<Memo>>({
     displayTime: memoStore.getMemoByName(memoName || "")?.displayTime,
   });
+  const user = useCurrentUser();
 
   useEffect(() => {
-    tagStore.fetchTags(undefined, { skipCache: false });
+    tagStore.fetchTags({ user }, { skipCache: false });
   }, []);
 
   const updateDisplayTime = (displayTime: string) => {

web/src/components/RenameTagDialog.tsx

@@ -2,6 +2,7 @@ import { Button, IconButton, Input, List, ListItem } from "@mui/joy";
 import React, { useState } from "react";
 import { toast } from "react-hot-toast";
 import { memoServiceClient } from "@/grpcweb";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { useFilterStore } from "@/store/module";
 import { useTagStore } from "@/store/v1";
@@ -20,6 +21,7 @@ const RenameTagDialog: React.FC<Props> = (props: Props) => {
   const filterStore = useFilterStore();
   const [newName, setNewName] = useState(tag);
   const requestState = useLoading(false);
+  const user = useCurrentUser();
 
   const handleTagNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setNewName(e.target.value.trim());
@@ -43,7 +45,7 @@ const RenameTagDialog: React.FC<Props> = (props: Props) => {
       });
       toast.success("Rename tag successfully");
       filterStore.setTagFilter(newName);
-      tagStore.fetchTags(undefined, { skipCache: true });
+      tagStore.fetchTags({ user }, { skipCache: true });
     } catch (error: any) {
       console.error(error);
       toast.error(error.details);

web/src/store/v1/tag.ts

@@ -1,6 +1,9 @@
+import { Location } from "react-router-dom";
 import { create } from "zustand";
 import { combine } from "zustand/middleware";
 import { memoServiceClient } from "@/grpcweb";
+import { Routes } from "@/router";
+import { User } from "@/types/proto/api/v1/user_service";
 
 interface State {
   tagAmounts: Record<string, number>;
@@ -20,12 +23,21 @@ export const useTagStore = create(
         .sort((a, b) => b[1] - a[1])
         .map(([tag]) => tag);
     },
-    fetchTags: async (filter?: string, options?: { skipCache: boolean }) => {
+    fetchTags: async (params: { user?: User; location?: Location<any> }, options?: { skipCache?: boolean }) => {
       const { tagAmounts: cache } = get();
       if (cache.length > 0 && !options?.skipCache) {
         return cache;
       }
-      const { tagAmounts } = await memoServiceClient.listMemoTags({ parent: "memos/-", filter });
+      const filters = [`row_status == "NORMAL"`];
+      if (params.user) {
+        if (params.location?.pathname === Routes.EXPLORE) {
+          filters.push(`visibilities == ["PUBLIC", "PROTECTED"]`);
+        }
+        filters.push(`creator == "${params.user.name}"`);
+      } else {
+        filters.push(`visibilities == ["PUBLIC"]`);
+      }
+      const { tagAmounts } = await memoServiceClient.listMemoTags({ parent: "memos/-", filter: filters.join(" && ") });
       set({ tagAmounts });
     },
   })),