Enhance ArticleEditor and ArticleRepositoryInput for improved article updates. Add detailed comments for clarity on optional fields and update canonical URL handling to support null values. Refactor debounced handle generation to trigger updates on article save, ensuring better state management.

Author: kingRayhan

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

@@ -46,27 +46,40 @@ export const ArticleRepositoryInput = {
     is_published: z.boolean().optional(),
   }),
   updateMyArticleInput: z.object({
-    article_id: z.string(),
+    article_id: z.string(), // Required, unique identifier for the article
+
+    // Optional fields for updating
     title: z.string().optional(),
     handle: z.string().optional(),
     excerpt: z.string().optional(),
     body: z.string().optional(),
+
+    // Optional nested object for cover image
     cover_image: z
       .object({
         key: z.string(),
         provider: z.enum(["cloudinary", "direct"]),
         alt: z.string().optional(),
       })
       .optional(),
+
+    // Optional boolean flag for publish status
     is_published: z.boolean().optional(),
+
+    // Optional metadata object
     metadata: z
       .object({
         seo: z
           .object({
             title: z.string().optional(),
             description: z.string().optional(),
             keywords: z.array(z.string()).optional(),
-            canonical_url: z.string().url().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)),
           })
           .nullable()
           .optional(),

src/components/Editor/ArticleEditorDrawer.tsx

@@ -39,10 +39,6 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
   const session = useSession();
   const { _t } = useTranslation();
   const router = useRouter();
-  const setDebounceHandler = useDebouncedCallback(async (slug: string) => {
-    const handle = await articleActions.getUniqueArticleHandle(slug);
-    form.setValue("handle", handle);
-  }, 2000);
   const updateMyArticleMutation = useMutation({
     mutationFn: (
       input: z.infer<typeof ArticleRepositoryInput.updateMyArticleInput>
@@ -57,13 +53,21 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
     },
   });
 
-  const [tags, setTags] = React.useState<string[]>([]);
+  const setDebounceHandler = useDebouncedCallback(async (slug: string) => {
+    const handle = await articleActions.getUniqueArticleHandle(slug);
+    form.setValue("handle", handle);
+    updateMyArticleMutation.mutate({
+      article_id: article?.id ?? "",
+      handle: handle,
+    });
+  }, 2000);
 
   const form = useForm<
     z.infer<typeof ArticleRepositoryInput.updateMyArticleInput>
   >({
     defaultValues: {
       article_id: article.id,
+      title: article?.title ?? "",
       handle: article?.handle ?? "",
       excerpt: article?.excerpt ?? "",
       metadata: {
@@ -95,7 +99,7 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
       },
     });
   };
-  //className="m-3 h-[100vh-20px] w-[100vw-20px]"
+
   return (
     <Sheet open={open} onOpenChange={onClose}>
       <SheetContent>
@@ -127,7 +131,7 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                       />
                     </FormControl>
                     <FormDescription className="-mt-1">
-                      https://www.techdiary.dev/{session?.user?.username}/
+                      https://www.techdiary.dev/@{session?.user?.username}/
                       {form.watch("handle")}
                     </FormDescription>
                     <FormMessage />
@@ -170,13 +174,28 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                         click-through-rates.
                       </FormDescription>
                       <FormControl>
-                        <Input {...field} placeholder={form.watch("handle")} />
+                        <Input {...field} placeholder={form.watch("title")} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
 
+                {/* <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"
@@ -253,7 +272,7 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
                 /> */}
               </div>
 
-              <Button>{_t("Save")}</Button>
+              <Button type="submit">{_t("Save")}</Button>
             </form>
           </Form>
         </div>