Refactor code structure for improved readability and maintainability

Author: kingRayhan

bun.lock

@@ -53,6 +53,7 @@
     "sqlkit": "^1.0.13",
     "tailwind-merge": "^3.0.2",
     "tw-animate-css": "^1.2.4",
+    "use-immer": "^0.11.0",
     "zod": "^3.24.2"
   },
   "devDependencies": {

package.json

@@ -19,44 +19,44 @@ const repositoryConfig = {
 export const userRepository = new Repository<User>(
   DatabaseTableName.users,
   pgClient,
-  repositoryConfig,
+  repositoryConfig
 );
 export const articleRepository = new Repository<Article>(
   DatabaseTableName.articles,
   pgClient,
-  repositoryConfig,
+  repositoryConfig
 );
 export const tagRepository = new Repository<Tag>(
   DatabaseTableName.tags,
   pgClient,
-  repositoryConfig,
+  repositoryConfig
 );
 export const articleTagRepository = new Repository<ArticleTag>(
   DatabaseTableName.article_tag,
   pgClient,
-  repositoryConfig,
+  repositoryConfig
 );
 export const userSocialRepository = new Repository<UserSocial>(
   DatabaseTableName.user_socials,
   pgClient,
-  repositoryConfig,
+  repositoryConfig
 );
 export const userSessionRepository = new Repository<UserSession>(
   DatabaseTableName.user_sessions,
   pgClient,
-  repositoryConfig,
+  repositoryConfig
 );
 
 const seriesRepository = new Repository<Series>(
   DatabaseTableName.series,
   pgClient,
-  repositoryConfig,
+  repositoryConfig
 );
 
 const seriesItemsRepository = new Repository<SeriesItem>(
   DatabaseTableName.series_items,
   pgClient,
-  repositoryConfig,
+  repositoryConfig
 );
 
 export const persistenceRepository = {

src/backend/persistence/persistence-repositories.ts

@@ -1,24 +1,45 @@
 "use server";
 
-import {and, eq, inArray, like} from "sqlkit";
-import {z} from "zod";
-import {persistenceRepository} from "../persistence/persistence-repositories";
-import {TagRepositoryInput} from "./inputs/tag.input";
-import {handleRepositoryException} from "./RepositoryException";
+import { and, eq, inArray, like } from "sqlkit";
+import { z } from "zod";
+import { persistenceRepository } from "../persistence/persistence-repositories";
+import { TagRepositoryInput } from "./inputs/tag.input";
+import { handleRepositoryException } from "./RepositoryException";
 
 export const getTags = async (
   _input: z.infer<typeof TagRepositoryInput.findAllInput>
 ) => {
   try {
     const input = await TagRepositoryInput.findAllInput.parseAsync(_input);
-    return await persistenceRepository.tags.find({
-      where: input.search ? like("name", `%${input.search}%`) : undefined,
+    return persistenceRepository.tags.find({
+      where: input.search
+        ? like("name", `%${input.search.toLowerCase()}%`)
+        : undefined,
     });
   } catch (error) {
     handleRepositoryException(error);
   }
 };
 
+export const createTag = async (
+  _input: z.infer<typeof TagRepositoryInput.createInput>
+) => {
+  try {
+    const input = await TagRepositoryInput.createInput.parseAsync(_input);
+    const response = await persistenceRepository.tags.insert([
+      {
+        name: input.name,
+        description: input.description,
+        color: input.color,
+      },
+    ]);
+
+    return response.rows[0];
+  } catch (error) {
+    handleRepositoryException(error);
+  }
+};
+
 export const syncTagsWithArticles = async (
   _input: z.infer<typeof TagRepositoryInput.syncTagsWithArticlesInput>
 ) => {

src/backend/services/tag.action.ts

@@ -200,7 +200,7 @@ const ArticleEditor: React.FC<ArticleEditorProps> = ({ article, uuid }) => {
   );
 
   return (
-    <>
+    <div className="relative">
       <div className="flex bg-background gap-2 items-center justify-between mt-2 mb-10 sticky z-30 p-5">
         <div className="flex items-center gap-2 text-sm text-forground-muted">
           <div className="flex gap-4 items-center">
@@ -272,7 +272,9 @@ const ArticleEditor: React.FC<ArticleEditorProps> = ({ article, uuid }) => {
           autoFocus
           rows={1}
           value={watchedTitle}
-          disabled={articleCreateMutation.isPending}
+          disabled={
+            articleCreateMutation.isPending || updateMyArticleMutation.isPending
+          }
           className="w-full text-2xl focus:outline-none bg-background resize-none"
           ref={titleRef}
           onBlur={(e) => handleSaveArticleOnBlurTitle(e.target.value)}
@@ -286,6 +288,10 @@ const ArticleEditor: React.FC<ArticleEditorProps> = ({ article, uuid }) => {
         <div className="w-full">
           {editorMode === "write" ? (
             <textarea
+              disabled={
+                articleCreateMutation.isPending ||
+                updateMyArticleMutation.isPending
+              }
               tabIndex={2}
               className="focus:outline-none h-[calc(100vh-120px)] bg-background w-full resize-none"
               placeholder={_t("Write something stunning...")}
@@ -311,7 +317,7 @@ const ArticleEditor: React.FC<ArticleEditorProps> = ({ article, uuid }) => {
           }}
         />
       )}
-    </>
+    </div>
   );
 };
 

src/components/Editor/ArticleEditor.tsx

@@ -5,6 +5,7 @@ import * as articleActions from "@/backend/services/article.actions";
 import * as tagActions from "@/backend/services/tag.action";
 import { ArticleRepositoryInput } from "@/backend/services/inputs/article.input";
 import MultipleSelector from "@/components/ui/multi-select";
+import { useImmer } from "use-immer";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { useTranslation } from "@/i18n/use-translation";
 import { useSession } from "@/store/session.atom";
@@ -53,7 +54,7 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
     },
   });
 
-  const [selectedTags, setSelectedTags] = useState<Tag[]>(article.tags ?? []);
+  const [selectedTags, setSelectedTags] = useImmer<Tag[]>(article.tags ?? []);
 
   const setDebounceHandler = useDebouncedCallback(async (slug: string) => {
     const handle = await articleActions.getUniqueArticleHandle(slug);
@@ -176,20 +177,41 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                               page: 1,
                               search: searchTerm,
                             });
-
-                            const searchResult = res ?? [];
-                            return searchResult?.map((tag) => ({
-                              label: tag.name,
-                              value: tag.id,
-                            }));
+                            return (
+                              res?.map((tag) => ({
+                                label: tag.name,
+                                value: tag.id,
+                              })) ?? []
+                            );
                           }}
                           value={
                             selectedTags?.map((option) => ({
                               label: option.name,
                               value: option.id,
                             })) ?? []
                           }
+                          creatable
+                          onCreate={async (data) => {
+                            const createdResponse = await tagActions.createTag({
+                              name: data,
+                            });
+                            const old_tags = form.watch("tag_ids") ?? [];
+
+                            setSelectedTags(function (draft) {
+                              draft.push({
+                                id: createdResponse?.id!,
+                                name: data,
+                                created_at: new Date(),
+                                updated_at: new Date(),
+                              });
+                            });
+                            form.setValue("tag_ids", [
+                              ...old_tags,
+                              createdResponse?.id! as string,
+                            ]);
+                          }}
                           onChange={(e) => {
+                            console.log(e);
                             setSelectedTags(
                               e.map((option) => ({
                                 id: option.value,

src/components/Editor/ArticleEditorDrawer.tsx

@@ -55,6 +55,8 @@ interface MultipleSelectorProps {
    **/
   onSearchSync?: (value: string) => Option[];
   onChange?: (options: Option[]) => void;
+  onCreate?: (value: string) => void;
+
   /** Limit the maximum number of selected options. */
   maxSelected?: number;
   /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
@@ -185,6 +187,7 @@ const MultipleSelector = React.forwardRef<
     {
       value,
       onChange,
+      onCreate,
       placeholder,
       defaultOptions: arrayDefaultOptions = [],
       options: arrayOptions,
@@ -381,9 +384,11 @@ const MultipleSelector = React.forwardRef<
               return;
             }
             setInputValue("");
-            const newOptions = [...selected, { value, label: value }];
-            setSelected(newOptions);
-            onChange?.(newOptions);
+            onCreate?.(value);
+
+            // const newOptions = [...selected, { value, label: value }];
+            // setSelected(newOptions);
+            // onChange?.(newOptions);
           }}
         >
           {`Create "${inputValue}"`}