Refactor package.json scripts for database management and update ArticleEditor to handle optional SEO metadata. Remove unused canonical URL handling and improve loading state for save button. Enhance type definitions for better clarity on optional fields.

Author: kingRayhan

package.json

@@ -7,8 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "migrate:generate": "npx drizzle-kit generate",
-    "migrate:push-db": "npx drizzle-kit push"
+    "db:generate": "npx drizzle-kit generate",
+    "db:push": "npx drizzle-kit push",
+    "db:studio": "npx drizzle-kit studio"
   },
   "dependencies": {
     "@cloudinary/react": "^1.14.1",
@@ -32,7 +33,6 @@
     "@tailwindcss/postcss": "^4.1.1",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "^5.69.0",
-    "badge": "^1.0.3",
     "class-variance-authority": "^0.7.1",
     "cloudinary": "^2.6.0",
     "clsx": "^2.1.1",
@@ -48,10 +48,7 @@
     "react": "^19",
     "react-dom": "^19",
     "react-hook-form": "^7.55.0",
-    "react-icons": "^5.5.0",
-    "react-mde": "^12.0.8",
     "recharts": "^2.15.1",
-    "sass": "^1.86.0",
     "schema-dts": "^1.1.5",
     "tailwind-merge": "^3.0.2",
     "tw-animate-css": "^1.2.4",

src/backend/models/domain-models.ts

@@ -43,12 +43,12 @@ export interface IServerFile {
 }
 
 export interface ArticleMetadata {
-  seo: {
+  seo?: {
     title?: string;
     description?: string;
     keywords?: string[];
     canonical_url?: string;
-  };
+  } | null;
 }
 
 export interface Article {

src/backend/services/article.actions.ts

@@ -223,6 +223,7 @@ export async function updateMyArticle(
         cover_image: input.cover_image,
         is_published: input.is_published,
         published_at: input.is_published ? new Date() : null,
+        metadata: input.metadata,
       },
     });
     return article;

src/backend/services/inputs/article.input.ts

@@ -75,11 +75,11 @@ export const ArticleRepositoryInput = {
             description: z.string().optional(),
             keywords: z.array(z.string()).optional(),
             // canonical_url: z.string().url().nullable().optional(),
-            canonical_url: z
-              .union([z.string().url(), z.literal(""), z.null()])
-              .optional()
-              .nullable()
-              .transform((val) => (val === "" ? null : val)),
+            // canonical_url: z
+            //   .union([z.string().url(), z.literal(""), z.null()])
+            //   .optional()
+            //   .nullable()
+            //   .transform((val) => (val === "" ? null : val)),
           })
           .nullable()
           .optional(),

src/backend/services/inputs/tag.input.ts

@@ -0,0 +1,25 @@
+import { color } from "@cloudinary/url-gen/qualifiers/background";
+import { z } from "zod";
+
+export const TagRepositoryInput = {
+  findAllInput: z.object({
+    page: z.number().default(1),
+    limit: z.number().default(10),
+  }),
+  createInput: z.object({
+    name: z.string(),
+    icon: z.string().optional().nullable(),
+    color: z.string().optional().nullable(),
+    description: z.string().optional().nullable(),
+  }),
+  updateInput: z.object({
+    tag_id: z.string(),
+    name: z.string().optional(),
+    icon: z.string().optional().nullable(),
+    color: z.string().optional().nullable(),
+    description: z.string().optional().nullable(),
+  }),
+  deleteInput: z.object({
+    tag_id: z.string(),
+  }),
+};

src/backend/services/tag.action.ts

@@ -0,0 +1 @@
+

src/components/Editor/ArticleEditorDrawer.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from "@/i18n/use-translation";
 import { useSession } from "@/store/session.atom";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
-import { LinkIcon } from "lucide-react";
+import { LinkIcon, Loader } from "lucide-react";
 import { useRouter } from "next/navigation";
 import React from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
@@ -75,7 +75,6 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
           title: article?.metadata?.seo?.title ?? "",
           description: article?.metadata?.seo?.description ?? "",
           keywords: article?.metadata?.seo?.keywords ?? [],
-          canonical_url: article?.metadata?.seo?.canonical_url ?? "",
         },
       },
     },
@@ -85,6 +84,8 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
   const handleOnSubmit: SubmitHandler<
     z.infer<typeof ArticleRepositoryInput.updateMyArticleInput>
   > = (payload) => {
+    console.log(payload);
+
     updateMyArticleMutation.mutate({
       article_id: article?.id ?? "",
       excerpt: payload.excerpt,
@@ -94,7 +95,6 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
           title: payload.metadata?.seo?.title ?? "",
           description: payload.metadata?.seo?.description ?? "",
           keywords: payload.metadata?.seo?.keywords ?? [],
-          canonical_url: payload.metadata?.seo?.canonical_url ?? "",
         },
       },
     });
@@ -109,7 +109,7 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
               onSubmit={form.handleSubmit(handleOnSubmit)}
               className="flex flex-col gap-2"
             >
-              {JSON.stringify(form.formState.errors)}
+              {/* {JSON.stringify(form.formState.errors)} */}
 
               <FormField
                 control={form.control}
@@ -181,21 +181,6 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                   )}
                 />
 
-                {/* <FormField
-                  control={form.control}
-                  name="metadata.seo.canonical_url"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{_t("Are you republishing")}?</FormLabel>
-                      <FormDescription className="text-xs"></FormDescription>
-                      <FormControl>
-                        <Input {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                /> */}
-
                 <FormField
                   control={form.control}
                   name="metadata.seo.keywords"
@@ -247,32 +232,17 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                     </FormItem>
                   )}
                 />
-                {/* 
-                <FormField
-                  control={form.control}
-                  name="metadata.seo.keywords"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{_t("SEO Keywords")}</FormLabel>
-                      <FormDescription className="text-xs">
-                        Put some relevent keywords for better search engine
-                        visibility
-                      </FormDescription>
-                      <FormControl>
-                        <InputTags
-                          value={[]}
-                          onChange={(e) => {
-                            console.log(e);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                /> */}
               </div>
 
-              <Button type="submit">{_t("Save")}</Button>
+              <Button
+                type="submit"
+                disabled={updateMyArticleMutation.isPending}
+              >
+                {updateMyArticleMutation.isPending && (
+                  <Loader className="mr-2 h-4 w-4 animate-spin" />
+                )}
+                {_t("Save")}
+              </Button>
             </form>
           </Form>
         </div>