chore: update seed data for tag (#817)

* chore: update seed data

* chore: add `_journal_mode` for SQLite

* chore: update create tag dialog

store/db/db.go

@@ -43,7 +43,7 @@ func (db *DB) Open(ctx context.Context) (err error) {
 	}
 
 	// Connect to the database without foreign_key.
-	sqliteDB, err := sql.Open("sqlite3", db.profile.DSN+"?cache=shared&_foreign_keys=0&_busy_timeout=9999999")
+	sqliteDB, err := sql.Open("sqlite3", db.profile.DSN+"?cache=shared&_foreign_keys=0&_journal_mode=WAL")
 	if err != nil {
 		return fmt.Errorf("failed to open db with dsn: %s, err: %w", db.profile.DSN, err)
 	}

store/db/seed/10006__tag.sql

+INSERT INTO 
+  tag (
+    `name`, 
+    `creator_id`
+  )
+VALUES
+  (
+    'Hello', 
+    101
+  );
+
+INSERT INTO 
+  tag (
+    `name`, 
+    `creator_id`
+  )
+VALUES
+  (
+    'TODO', 
+    101
+  );
+
+INSERT INTO 
+  tag (
+    `name`, 
+    `creator_id`
+  )
+VALUES
+  (
+    'TODO', 
+    102
+  );

web/src/components/CreateTagDialog.tsx

@@ -23,20 +23,21 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
   const [tagName, setTagName] = useState<string>("");
   const [suggestTagNameList, setSuggestTagNameList] = useState<string[]>([]);
   const tagNameList = tagStore.state.tags;
+  const shownSuggestTagNameList = suggestTagNameList.filter((tag) => !tagNameList.includes(tag));
 
   useEffect(() => {
     getTagSuggestionList().then(({ data }) => {
-      setSuggestTagNameList(data.data.filter((tag) => !tagNameList.includes(tag) && validateTagName(tag)));
+      setSuggestTagNameList(data.data.filter((tag) => validateTagName(tag)));
     });
-  }, [tagNameList]);
+  }, []);
 
   const handleTagNameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     const tagName = e.target.value as string;
     setTagName(tagName.trim());
   };
 
-  const handleRemoveSuggestTag = (tag: string) => {
-    setSuggestTagNameList(suggestTagNameList.filter((item) => item !== tag));
+  const handleUpsertSuggestTag = async (tagName: string) => {
+    await tagStore.upsertTag(tagName);
   };
 
   const handleSaveBtnClick = async () => {
@@ -100,15 +101,15 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
           </>
         )}
 
-        {suggestTagNameList.length > 0 && (
+        {shownSuggestTagNameList.length > 0 && (
           <>
             <p className="w-full mt-2 mb-1 text-sm text-gray-400">Tag suggestions</p>
             <div className="w-full flex flex-row justify-start items-start flex-wrap">
-              {suggestTagNameList.map((tag) => (
+              {shownSuggestTagNameList.map((tag) => (
                 <span
-                  className="text-sm mr-2 mt-1 font-mono cursor-pointer truncate hover:opacity-60 hover:line-through"
+                  className="text-sm mr-2 mt-1 font-mono cursor-pointer truncate hover:opacity-60"
                   key={tag}
-                  onClick={() => handleRemoveSuggestTag(tag)}
+                  onClick={() => handleUpsertSuggestTag(tag)}
                 >
                   #{tag}
                 </span>

web/src/components/MemoEditor.tsx

@@ -327,7 +327,7 @@ const MemoEditor = () => {
       toastHelper.error(error.response.data.message);
     }
 
-    // Upsert tag based with content.
+    // Upsert tag with the content.
     const matchedNodes = getMatchedNodes(content);
     const tagNameList = uniq(matchedNodes.filter((node) => node.parserName === "tag").map((node) => node.matchedContent.slice(1)));
     for (const tagName of tagNameList) {