From f9dd29ae07626ddcdd1db1bb0d52a793c7434213 Mon Sep 17 00:00:00 2001 From: Steven Date: Sun, 14 Apr 2024 22:20:09 +0800 Subject: [PATCH] chore: tweak tag store --- server/route/api/v2/tag_service.go | 2 +- web/src/components/CreateTagDialog.tsx | 48 +++++++++---------- .../components/HomeSidebar/TagsSection.tsx | 4 +- .../MemoEditor/ActionButton/TagSelector.tsx | 6 +-- .../MemoEditor/MemoEditorDialog.tsx | 2 +- web/src/store/v1/tag.ts | 10 ++-- 6 files changed, 37 insertions(+), 35 deletions(-) diff --git a/server/route/api/v2/tag_service.go b/server/route/api/v2/tag_service.go index 7a8128dd..759ce079 100644 --- a/server/route/api/v2/tag_service.go +++ b/server/route/api/v2/tag_service.go @@ -50,7 +50,7 @@ func (s *APIV2Service) BatchUpsertTag(ctx context.Context, request *apiv2pb.Batc return &apiv2pb.BatchUpsertTagResponse{}, nil } -func (s *APIV2Service) ListTags(ctx context.Context, request *apiv2pb.ListTagsRequest) (*apiv2pb.ListTagsResponse, error) { +func (s *APIV2Service) ListTags(ctx context.Context, _ *apiv2pb.ListTagsRequest) (*apiv2pb.ListTagsResponse, error) { user, err := getCurrentUser(ctx, s.Store) if err != nil { return nil, status.Errorf(codes.Internal, "failed to get user") diff --git a/web/src/components/CreateTagDialog.tsx b/web/src/components/CreateTagDialog.tsx index 7f407144..7b04e8e0 100644 --- a/web/src/components/CreateTagDialog.tsx +++ b/web/src/components/CreateTagDialog.tsx @@ -26,10 +26,10 @@ const CreateTagDialog: React.FC = (props: Props) => { const currentUser = useCurrentUser(); const tagStore = useTagStore(); const [tagName, setTagName] = useState(""); - const [suggestTagNameList, setSuggestTagNameList] = useState([]); + const [suggestTags, setSuggestTags] = useState([]); const [showTagSuggestions, setShowTagSuggestions] = useState(false); - const tagNameList = tagStore.getState().tags; - const shownSuggestTagNameList = suggestTagNameList.filter((tag) => !tagNameList.has(tag)); + const tags = Array.from(tagStore.getState().tags); + const shownSuggestTags = suggestTags.filter((tag) => !tags.includes(tag)); useEffect(() => { tagServiceClient @@ -37,9 +37,9 @@ const CreateTagDialog: React.FC = (props: Props) => { user: currentUser.name, }) .then(({ tags }) => { - setSuggestTagNameList(tags.filter((tag) => validateTagName(tag))); + setSuggestTags(tags.filter((tag) => validateTagName(tag))); }); - }, [tagNameList]); + }, [tags]); const handleTagNameInputKeyDown = (event: React.KeyboardEvent) => { if (event.key === "Enter") { @@ -48,12 +48,12 @@ const CreateTagDialog: React.FC = (props: Props) => { }; const handleTagNameChanged = (event: React.ChangeEvent) => { - const tagName = event.target.value; - setTagName(tagName.trim()); + const tag = event.target.value; + setTagName(tag.trim()); }; - const handleUpsertTag = async (tagName: string) => { - await tagStore.upsertTag(tagName); + const handleUpsertTag = async (tag: string) => { + await tagStore.upsertTag(tag); }; const handleToggleShowSuggestionTags = () => { @@ -80,7 +80,7 @@ const CreateTagDialog: React.FC = (props: Props) => { }; const handleSaveSuggestTagList = async () => { - for (const tagName of suggestTagNameList) { + for (const tagName of suggestTags) { if (validateTagName(tagName)) { await tagStore.upsertTag(tagName); } @@ -107,27 +107,25 @@ const CreateTagDialog: React.FC = (props: Props) => { startDecorator={} endDecorator={} /> - {tagNameList.size > 0 && ( + {tags.length > 0 && ( <>

{t("tag.all-tags")}

- {Array.from(tagNameList) - .sort() - .map((tag) => ( - - handleDeleteTag(tag)}> - #{tag} - - - ))} + {tags.sort().map((tag) => ( + + handleDeleteTag(tag)}> + #{tag} + + + ))}
)} - {shownSuggestTagNameList.length > 0 && ( + {shownSuggestTags.length > 0 && ( <>
{t("tag.tag-suggestions")} @@ -141,7 +139,7 @@ const CreateTagDialog: React.FC = (props: Props) => { {showTagSuggestions && ( <>
- {shownSuggestTagNameList.map((tag) => ( + {shownSuggestTags.map((tag) => ( { const filterStore = useFilterStore(); const tagStore = useTagStore(); const memoList = useMemoList(); - const tagsText = tagStore.getState().tags; + const tagsText = Array.from(tagStore.getState().tags); const filter = filterStore.state; const [tags, setTags] = useState([]); @@ -38,7 +38,7 @@ const TagsSection = () => { ); useEffect(() => { - const sortedTags = Array.from(tagsText).sort(); + const sortedTags = tagsText.sort(); const root: KVObject = { subTags: [], }; diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx index f2093fdc..72a88c53 100644 --- a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx +++ b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx @@ -17,7 +17,7 @@ const TagSelector = (props: Props) => { const tagStore = useTagStore(); const [open, setOpen] = useState(false); const containerRef = useRef(null); - const tags = tagStore.getState().tags; + const tags = Array.from(tagStore.getState().tags); useEffect(() => { (async () => { @@ -60,9 +60,9 @@ const TagSelector = (props: Props) => {
- {tags.size > 0 ? ( + {tags.length > 0 ? (
- {Array.from(tags).map((tag) => { + {tags.map((tag) => { return (
= ({ memoName: memo, cacheKey, relationL const tagStore = useTagStore(); useEffect(() => { - tagStore.fetchTags(); + tagStore.fetchTags({ skipCache: false }); }, []); const handleCloseBtnClick = () => { diff --git a/web/src/store/v1/tag.ts b/web/src/store/v1/tag.ts index ecffa7ff..2ecdc8f5 100644 --- a/web/src/store/v1/tag.ts +++ b/web/src/store/v1/tag.ts @@ -14,9 +14,13 @@ export const useTagStore = create( combine(getDefaultState(), (set, get) => ({ setState: (state: State) => set(state), getState: () => get(), - fetchTags: async () => { - const { tags } = await tagServiceClient.listTags({}); - set({ tags: new Set(tags.map((tag) => tag.name)) }); + fetchTags: async (options?: { skipCache: boolean }) => { + const { tags } = get(); + if (tags.size && !options?.skipCache) { + return tags; + } + const res = await tagServiceClient.listTags({}); + set({ tags: new Set(res.tags.map((tag) => tag.name)) }); return tags; }, upsertTag: async (tagName: string) => {