chore: tweak tag store

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")

web/src/components/CreateTagDialog.tsx

@@ -26,10 +26,10 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
   const currentUser = useCurrentUser();
   const tagStore = useTagStore();
   const [tagName, setTagName] = useState<string>("");
-  const [suggestTagNameList, setSuggestTagNameList] = useState<string[]>([]);
+  const [suggestTags, setSuggestTags] = useState<string[]>([]);
   const [showTagSuggestions, setShowTagSuggestions] = useState<boolean>(false);
-  const tagNameList = tagStore.getState().tags;
+  const tags = Array.from(tagStore.getState().tags);
-  const shownSuggestTagNameList = suggestTagNameList.filter((tag) => !tagNameList.has(tag));
+  const shownSuggestTags = suggestTags.filter((tag) => !tags.includes(tag));
 
   useEffect(() => {
     tagServiceClient
@@ -37,9 +37,9 @@ const CreateTagDialog: React.FC<Props> = (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: Props) => {
   };
 
   const handleTagNameChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const tagName = event.target.value;
+    const tag = event.target.value;
-    setTagName(tagName.trim());
+    setTagName(tag.trim());
   };
 
-  const handleUpsertTag = async (tagName: string) => {
+  const handleUpsertTag = async (tag: string) => {
-    await tagStore.upsertTag(tagName);
+    await tagStore.upsertTag(tag);
   };
 
   const handleToggleShowSuggestionTags = () => {
@@ -80,7 +80,7 @@ const CreateTagDialog: React.FC<Props> = (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: Props) => {
           startDecorator={<Icon.Hash className="w-4 h-auto" />}
           endDecorator={<Icon.Check onClick={handleSaveBtnClick} className="w-4 h-auto cursor-pointer hover:opacity-80" />}
         />
-        {tagNameList.size > 0 && (
+        {tags.length > 0 && (
           <>
             <p className="w-full mt-2 mb-1 text-sm text-gray-400">{t("tag.all-tags")}</p>
             <div className="w-full flex flex-row justify-start items-start flex-wrap">
-              {Array.from(tagNameList)
+              {tags.sort().map((tag) => (
-                .sort()
+                <OverflowTip
-                .map((tag) => (
+                  key={tag}
-                  <OverflowTip
+                  className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60 hover:line-through"
-                    key={tag}
+                >
-                    className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60 hover:line-through"
+                  <span className="w-full" onClick={() => handleDeleteTag(tag)}>
-                  >
+                    #{tag}
-                    <span className="w-full" onClick={() => handleDeleteTag(tag)}>
+                  </span>
-                      #{tag}
+                </OverflowTip>
-                    </span>
+              ))}
-                  </OverflowTip>
-                ))}
             </div>
           </>
         )}
 
-        {shownSuggestTagNameList.length > 0 && (
+        {shownSuggestTags.length > 0 && (
           <>
             <div className="mt-4 mb-1 text-sm w-full flex flex-row justify-start items-center">
               <span className="text-gray-400 mr-2">{t("tag.tag-suggestions")}</span>
@@ -141,7 +139,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
             {showTagSuggestions && (
               <>
                 <div className="w-full flex flex-row justify-start items-start flex-wrap mb-2">
-                  {shownSuggestTagNameList.map((tag) => (
+                  {shownSuggestTags.map((tag) => (
                     <OverflowTip
                       key={tag}
                       className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60"

web/src/components/HomeSidebar/TagsSection.tsx

@@ -25,7 +25,7 @@ const TagsSection = () => {
   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<Tag[]>([]);
 
@@ -38,7 +38,7 @@ const TagsSection = () => {
   );
 
   useEffect(() => {
-    const sortedTags = Array.from(tagsText).sort();
+    const sortedTags = tagsText.sort();
     const root: KVObject<any> = {
       subTags: [],
     };

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<HTMLDivElement>(null);
-  const tags = tagStore.getState().tags;
+  const tags = Array.from(tagStore.getState().tags);
 
   useEffect(() => {
     (async () => {
@@ -60,9 +60,9 @@ const TagSelector = (props: Props) => {
       </MenuButton>
       <Menu className="relative text-sm" component="div" size="sm" placement="bottom-start">
         <div ref={containerRef}>
-          {tags.size > 0 ? (
+          {tags.length > 0 ? (
             <div className="flex-row justify-start items-start flex-wrap px-1 max-w-[12rem] h-auto max-h-48 overflow-y-auto font-mono">
-              {Array.from(tags).map((tag) => {
+              {tags.map((tag) => {
                 return (
                   <div
                     key={tag}

web/src/components/MemoEditor/MemoEditorDialog.tsx

@@ -16,7 +16,7 @@ const MemoEditorDialog: React.FC<Props> = ({ memoName: memo, cacheKey, relationL
   const tagStore = useTagStore();
 
   useEffect(() => {
-    tagStore.fetchTags();
+    tagStore.fetchTags({ skipCache: false });
   }, []);
 
   const handleCloseBtnClick = () => {

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 () => {
+    fetchTags: async (options?: { skipCache: boolean }) => {
-      const { tags } = await tagServiceClient.listTags({});
+      const { tags } = get();
-      set({ tags: new Set(tags.map((tag) => tag.name)) });
+      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) => {