Skip to content

Commit

Permalink
Fix placeholder editor
Browse files Browse the repository at this point in the history
  • Loading branch information
P-man2976 committed Oct 23, 2023
1 parent 371651e commit 42526e4
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 56 deletions.
4 changes: 2 additions & 2 deletions packages/react/src/components/about/request/ChannelPicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" });
Expand Down Expand Up @@ -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>
Expand Down
120 changes: 68 additions & 52 deletions packages/react/src/routes/about/placeholder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});
};

Expand All @@ -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">
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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}
Expand All @@ -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
Expand Down
3 changes: 1 addition & 2 deletions packages/react/src/services/video.service.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useClient } from "@/hooks/useClient";
import {
UseInfiniteQueryOptions,
UseQueryOptions,
useInfiniteQuery,
useMutation,
Expand Down Expand Up @@ -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();

Expand Down

0 comments on commit 42526e4

Please sign in to comment.