From f0817f27625b5369292fe6fbc4881a77b48e93fd Mon Sep 17 00:00:00 2001 From: Martin MacDonald <79853687+mmacdo54@users.noreply.github.com> Date: Wed, 5 Jun 2024 01:06:01 +0100 Subject: [PATCH] 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 --- web/src/components/HomeSidebar/TagsSection.tsx | 16 ++++------------ .../MemoEditor/ActionButton/TagSelector.tsx | 4 +++- .../components/MemoEditor/MemoEditorDialog.tsx | 4 +++- web/src/components/RenameTagDialog.tsx | 4 +++- web/src/store/v1/tag.ts | 16 ++++++++++++++-- 5 files changed, 27 insertions(+), 17 deletions(-) diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx index aa150208..9dca43d3 100644 --- a/web/src/components/HomeSidebar/TagsSection.tsx +++ b/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"`]; - 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(" && ")); + await tagStore.fetchTags({ user, location }); }; return ( @@ -75,6 +65,8 @@ const TagContainer: React.FC = (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 = (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")); }, }); diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx index d21f2cd5..615c5933 100644 --- a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx +++ b/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(null); const tags = tagStore.sortedTags(); + const user = useCurrentUser(); useEffect(() => { (async () => { try { - await tagStore.fetchTags(); + await tagStore.fetchTags({ user }); } catch (error) { // do nothing. } diff --git a/web/src/components/MemoEditor/MemoEditorDialog.tsx b/web/src/components/MemoEditor/MemoEditorDialog.tsx index ff47d2f2..dc26fb0d 100644 --- a/web/src/components/MemoEditor/MemoEditorDialog.tsx +++ b/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 = ({ const memoPatchRef = useRef>({ displayTime: memoStore.getMemoByName(memoName || "")?.displayTime, }); + const user = useCurrentUser(); useEffect(() => { - tagStore.fetchTags(undefined, { skipCache: false }); + tagStore.fetchTags({ user }, { skipCache: false }); }, []); const updateDisplayTime = (displayTime: string) => { diff --git a/web/src/components/RenameTagDialog.tsx b/web/src/components/RenameTagDialog.tsx index 9ef213c1..6ec8cd4f 100644 --- a/web/src/components/RenameTagDialog.tsx +++ b/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) => { const filterStore = useFilterStore(); const [newName, setNewName] = useState(tag); const requestState = useLoading(false); + const user = useCurrentUser(); const handleTagNameInputChange = (e: React.ChangeEvent) => { setNewName(e.target.value.trim()); @@ -43,7 +45,7 @@ const RenameTagDialog: React.FC = (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); diff --git a/web/src/store/v1/tag.ts b/web/src/store/v1/tag.ts index fd49364b..36850e42 100644 --- a/web/src/store/v1/tag.ts +++ b/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; @@ -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 }, 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 }); }, })),