feat: enhance article update flow and add canonical URL support in ArticleEditor

Author: kingRayhan

src/app/tags/[tag_id]/page.tsx

@@ -38,4 +38,4 @@ export async function generateMetadata({ params }: TagPageProps) {
       description: `Browse all articles with this tag on Tech Diary`,
     },
   };
-}
+}

src/backend/services/article.actions.ts

@@ -179,9 +179,12 @@ export async function updateMyArticle(
       });
     }
 
-    return article?.rows?.[0];
+    return {
+      success: true as const,
+      data: article?.rows?.[0],
+    };
   } catch (error) {
-    handleActionException(error);
+    return handleActionException(error);
   }
 }
 

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

@@ -76,12 +76,11 @@ export const ArticleRepositoryInput = {
             title: z.string().optional(),
             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/components/Editor/ArticleEditor.tsx

@@ -19,7 +19,7 @@ import { ArticleRepositoryInput } from "@/backend/services/inputs/article.input"
 import { useAutosizeTextArea } from "@/hooks/use-auto-resize-textarea";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { useToggle } from "@/hooks/use-toggle";
-import { formattedTime } from "@/lib/utils";
+import { actionPromisify, formattedTime } from "@/lib/utils";
 import { markdocParser } from "@/utils/markdoc-parser";
 import { useMutation } from "@tanstack/react-query";
 import clsx from "clsx";
@@ -62,7 +62,7 @@ const ArticleEditor: React.FC<ArticleEditorProps> = ({ article, uuid }) => {
   const updateMyArticleMutation = useMutation({
     mutationFn: (
       input: z.infer<typeof ArticleRepositoryInput.updateMyArticleInput>
-    ) => articleActions.updateMyArticle(input),
+    ) => actionPromisify(articleActions.updateMyArticle(input)),
     onSuccess: () => router.refresh(),
     onError: (err) => alert(err.message),
   });

src/components/Editor/ArticleEditorDrawer.tsx

@@ -29,6 +29,7 @@ import {
 import { Input } from "../ui/input";
 import { Sheet, SheetContent } from "../ui/sheet";
 import { Textarea } from "../ui/textarea";
+import { actionPromisify } from "@/lib/utils";
 
 interface Props {
   article: Article;
@@ -43,9 +44,10 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
   const updateMyArticleMutation = useMutation({
     mutationFn: (
       input: z.infer<typeof ArticleRepositoryInput.updateMyArticleInput>
-    ) => {
-      return articleActions.updateMyArticle(input);
-    },
+    ) =>
+      actionPromisify(articleActions.updateMyArticle(input), {
+        enableToast: true,
+      }),
     onSuccess: () => {
       router.refresh();
     },
@@ -79,6 +81,7 @@ 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 ?? "",
         },
       },
     },
@@ -98,6 +101,7 @@ 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 ?? "",
         },
       },
     });
@@ -112,10 +116,10 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
               onSubmit={form.handleSubmit(handleOnSubmit)}
               className="flex flex-col gap-2"
             >
-              {JSON.stringify({
+              {/* {JSON.stringify({
                 errors: form.formState.errors,
                 values: form.watch("tag_ids"),
-              })}
+              })} */}
               {/* <pre>{JSON.stringify(article, null, 2)}</pre> */}
               <div className="flex flex-col gap-6">
                 <FormField
@@ -247,11 +251,9 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                     <FormItem>
                       <FormLabel>{_t("SEO Title")}</FormLabel>
                       <FormDescription className="text-xs">
-                        The &quot;SEO title&quot; will be shown in place of your
-                        Title on search engine results pages, such as a Google
-                        search. SEO titles between 40 and 50 characters with
-                        commonly searched words have the best
-                        click-through-rates.
+                        {_t(
+                          "Override your article title for Google search results and social media cards. Keep it 40-50 characters for best performance."
+                        )}
                       </FormDescription>
                       <FormControl>
                         <Input {...field} placeholder={form.watch("title")} />
@@ -261,7 +263,7 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                   )}
                 />
 
-                <FormField
+                {/* <FormField
                   control={form.control}
                   name="metadata.seo.keywords"
                   render={({ field }) => (
@@ -291,7 +293,7 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                       <FormMessage />
                     </FormItem>
                   )}
-                />
+                /> */}
 
                 <FormField
                   control={form.control}
@@ -300,10 +302,9 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                     <FormItem>
                       <FormLabel>{_t("SEO Description")}</FormLabel>
                       <FormDescription className="text-xs">
-                        The &quot;SEO description&quot; will be used in place of
-                        your Subtitle on search engine results pages. Good SEO
-                        descriptions utilize keywords, summarize the article and
-                        are between 140-156 characters long.
+                        Override your article description for Google search
+                        results and social media cards. Keep it 140-156
+                        characters and include relevant keywords.
                       </FormDescription>
                       <FormControl>
                         <Textarea {...field} />
@@ -312,6 +313,29 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                     </FormItem>
                   )}
                 />
+
+                <FormField
+                  control={form.control}
+                  name="metadata.seo.canonical_url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{_t("Canonical URL")}</FormLabel>
+                      <FormDescription className="text-xs">
+                        {_t(
+                          "Specify the preferred URL for this content to prevent duplicate content issues. Leave empty to use the default URL."
+                        )}
+                      </FormDescription>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          placeholder="https://example.com/original-post"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
               </div>
 
               <Button