From 42526e4caa10e9e4f88a23e750bfd1c095ed4052 Mon Sep 17 00:00:00 2001
From: P-man2976 <ikmy1119924@gmail.com>
Date: Mon, 23 Oct 2023 11:51:57 +0900
Subject: [PATCH] Fix placeholder editor

---
 .../about/request/ChannelPicker.tsx           |   4 +-
 .../react/src/routes/about/placeholder.tsx    | 120 ++++++++++--------
 packages/react/src/services/video.service.ts  |   3 +-
 3 files changed, 71 insertions(+), 56 deletions(-)

diff --git a/packages/react/src/components/about/request/ChannelPicker.tsx b/packages/react/src/components/about/request/ChannelPicker.tsx
index 065046a99..7642abc44 100644
--- a/packages/react/src/components/about/request/ChannelPicker.tsx
+++ b/packages/react/src/components/about/request/ChannelPicker.tsx
@@ -43,7 +43,7 @@ export function ChannelPicker<
   const { t } = useTranslation();
   const currentValue = useAtomValue(currentValueAtom);
   const [debouncedValue, setDebouncedValue] = useAtom(debouncedValueAtom);
-  const { data, mutate, isLoading } = useSearchAutoCompleteMutation();
+  const { data, mutate, isPending } = useSearchAutoCompleteMutation();
 
   useEffect(() => {
     if (debouncedValue) mutate({ q: debouncedValue, n: 10, t: "vtuber" });
@@ -86,7 +86,7 @@ export function ChannelPicker<
                 {channel.name}
               </CommandItem>
             ))}
-            {isLoading && (
+            {isPending && (
               <CommandItem className="flex justify-center py-2" disabled>
                 <div className="i-lucide:loader-2 animate-spin" />
               </CommandItem>
diff --git a/packages/react/src/routes/about/placeholder.tsx b/packages/react/src/routes/about/placeholder.tsx
index 6f6bdd9e4..c2a1d78c9 100644
--- a/packages/react/src/routes/about/placeholder.tsx
+++ b/packages/react/src/routes/about/placeholder.tsx
@@ -81,20 +81,34 @@ export default function AboutPlaceholder() {
 
   const { mutate } = usePlaceholderMutation();
 
-  const onSubmit: SubmitHandler<PlaceholderRequestBody> = (body) => {
-    mutate(body, {
-      onSuccess: () => {
-        toast({
-          title: t("component.addPlaceholder.success"),
-        });
-      },
-      onError: (error) => {
-        console.error(error);
-        toast({
-          title: t("component.addPlaceholder.error"),
-          description: error.message,
-        });
+  const onSubmit: SubmitHandler<PlaceholderRequestBody> = ({
+    duration,
+    ...body
+  }) => {
+    mutate(
+      { duration: duration * 60, ...body },
+      {
+        onSuccess: () => {
+          toast({
+            title: t("component.addPlaceholder.success"),
+          });
+        },
+        onError: (error) => {
+          console.error(error);
+          toast({
+            title: t("component.addPlaceholder.error"),
+            description: error.message,
+            variant: "error",
+          });
+        },
       },
+    );
+  };
+
+  const onInvalid = () => {
+    toast({
+      title: t("component.addPlaceholder.error"),
+      variant: "error",
     });
   };
 
@@ -107,19 +121,19 @@ export default function AboutPlaceholder() {
     );
 
   useEffect(() => {
-    if (type === 'existing' && id && data) {
-      form.setValue("channel_id", data.channel_id);
+    if (type === "existing" && id && data) {
+      form.setValue("channel_id", data.channel.id ?? "");
       form.setValue("liveTime", data.start_scheduled ?? "");
-      form.setValue("duration", data.duration);
-      form.setValue("title.link", data.link);
-      form.setValue("title.name", data.name);
-      form.setValue("title.jp_name", data.jp_name);
-      form.setValue("title.thumbnail", data.thumbnail);
-      form.setValue("title.placeholderType", data.placeholderType);
-      form.setValue("title.certainty", data.certainty);
+      form.setValue("duration", data.duration / 60 ?? 60);
+      form.setValue("title.link", data.link ?? "");
+      form.setValue("title.name", data.title ?? "");
+      form.setValue("title.jp_name", data.jp_name ?? "");
+      form.setValue("title.thumbnail", data.thumbnail ?? "");
+      form.setValue("title.placeholderType", data.placeholderType ?? "");
+      form.setValue("title.certainty", data.certainty ?? "");
     }
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data]); 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
 
   return (
     <div className="flex flex-col gap-4">
@@ -142,7 +156,7 @@ export default function AboutPlaceholder() {
       </div>
       <Form {...form}>
         <form
-          onSubmit={form.handleSubmit(onSubmit)}
+          onSubmit={form.handleSubmit(onSubmit, onInvalid)}
           className="flex flex-col gap-4"
         >
           <FormField
@@ -192,7 +206,7 @@ export default function AboutPlaceholder() {
                           value: 11,
                           message: t("component.addPlaceholder.idHint"),
                         },
-												onChange: (e) => setId(e.target.value)
+                        onChange: (e) => setId(e.target.value),
                       })}
                     />
                   </FormControl>
@@ -319,20 +333,21 @@ export default function AboutPlaceholder() {
               control={form.control}
               name="title.placeholderType"
               render={({ field }) => (
-                <FormItem>
+                <FormItem
+                  {...form.register("title.placeholderType", {
+                    required: {
+                      value: true,
+                      message: t("channelRequest.required"),
+                    },
+                  })}
+                >
                   <FormLabel>
                     {t("component.addPlaceholder.eventType.label")}
                   </FormLabel>
                   <FormControl>
                     <RadioGroup
+                      value={field.value}
                       onValueChange={field.onChange}
-                      defaultValue={field.value}
-                      {...form.register("title.placeholderType", {
-                        required: {
-                          value: true,
-                          message: t("channelRequest.required"),
-                        },
-                      })}
                     >
                       <PlaceholderRadioItem
                         value="scheduled-yt-stream"
@@ -360,20 +375,21 @@ export default function AboutPlaceholder() {
               control={form.control}
               name="title.certainty"
               render={({ field }) => (
-                <FormItem>
+                <FormItem
+                  {...form.register("title.certainty", {
+                    required: {
+                      value: true,
+                      message: t("channelRequest.required"),
+                    },
+                  })}
+                >
                   <FormLabel>
                     {t("component.addPlaceholder.certainty.label")}
                   </FormLabel>
                   <FormControl>
                     <RadioGroup
+                      value={field.value}
                       onValueChange={field.onChange}
-                      defaultValue={field.value}
-                      {...form.register("title.certainty", {
-                        required: {
-                          value: true,
-                          message: t("channelRequest.required"),
-                        },
-                      })}
                     >
                       <PlaceholderRadioItem
                         value="certain"
@@ -397,15 +413,7 @@ export default function AboutPlaceholder() {
               <FormItem className="flex flex-col">
                 <FormLabel>{t("component.addPlaceholder.dateLabel")}</FormLabel>
                 <FormControl>
-                  <FormItem
-                    className="flex items-center gap-2 space-y-0"
-                    {...form.register("liveTime", {
-                      required: {
-                        value: true,
-                        message: t("channelRequest.required"),
-                      },
-                    })}
-                  >
+                  <FormItem className="flex items-center gap-2 space-y-0">
                     <FormItem>
                       <Select
                         defaultValue={timezone}
@@ -425,7 +433,15 @@ export default function AboutPlaceholder() {
                         </SelectContent>
                       </Select>
                     </FormItem>
-                    <FormItem className="w-full">
+                    <FormItem
+                      className="w-full"
+                      {...form.register("liveTime", {
+                        required: {
+                          value: true,
+                          message: t("channelRequest.required"),
+                        },
+                      })}
+                    >
                       <DatePicker
                         selected={
                           field.value
diff --git a/packages/react/src/services/video.service.ts b/packages/react/src/services/video.service.ts
index d051f1eb5..0a4661bab 100644
--- a/packages/react/src/services/video.service.ts
+++ b/packages/react/src/services/video.service.ts
@@ -1,6 +1,5 @@
 import { useClient } from "@/hooks/useClient";
 import {
-  UseInfiniteQueryOptions,
   UseQueryOptions,
   useInfiniteQuery,
   useMutation,
@@ -50,7 +49,7 @@ export function useVideos(
 
 export function useVideo<T = Video>(
   videoId: string,
-  config?: UseQueryOptions<T>,
+  config?: Omit<UseQueryOptions<T>, "queryKey" | "queryFn">,
 ) {
   const client = useClient();