a bunch of settings, store and about changes

HolodexNet · Oct 26, 2024 · 10c3c2f · 10c3c2f
1 parent eeb306b
commit 10c3c2f
Show file tree

Hide file tree

Showing 21 changed files with 369 additions and 271 deletions.
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -92,7 +92,7 @@
     "type-fest": "^4.18.3",
     "use-seconds": "^1.7.0",
     "usehooks-ts": "^3.1.0",
-    "vaul": "^0.9.1",
+    "vaul": "^1.1.0",
     "virtua": "^0.33.7",
     "zod": "^3.23.8"
   },

diff --git a/packages/react/src/components/about/request/AddSubber.tsx b/packages/react/src/components/about/request/AddSubber.tsx
@@ -131,8 +131,10 @@ export function AddSubberForm() {
         onSubmit={form.handleSubmit(onSubmit, onInvalid)}
         className="flex flex-col gap-4"
       >
-        <Alert variant="primary">
-          <div className="i-icon-park-outline:guide-board text-2xl" />
+        <Alert variant="default">
+          <div className="float-left mr-4 text-primary-10">
+            <div className="i-icon-park-outline:guide-board text-4xl" />
+          </div>{" "}
           <AlertDescription
             dangerouslySetInnerHTML={{
               __html: t("channelRequest.ClipperRequirementText"),

diff --git a/packages/react/src/components/about/request/AddVtuber.tsx b/packages/react/src/components/about/request/AddVtuber.tsx
@@ -139,10 +139,12 @@ export function AddVtuberForm() {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit, onInvalid)}
-        className="flex flex-col gap-4"
+        className="flex flex-col gap-6"
       >
-        <Alert variant="primary">
-          <div className="i-icon-park-outline:guide-board text-2xl" />
+        <Alert variant="default">
+          <div className="float-left mr-4 text-primary-10">
+            <div className="i-icon-park-outline:guide-board text-4xl" />
+          </div>
           <AlertDescription
             dangerouslySetInnerHTML={{
               __html: t("channelRequest.VtuberRequirementText"),

diff --git a/packages/react/src/components/about/request/DeleteChannel.tsx b/packages/react/src/components/about/request/DeleteChannel.tsx
@@ -105,8 +105,10 @@ export function DeleteChannelForm() {
         onSubmit={form.handleSubmit(onSubmit, onInvalid)}
         className="flex flex-col gap-4"
       >
-        <Alert variant="primary">
-          <div className="i-icon-park-outline:guide-board text-2xl" />
+        <Alert variant="default">
+          <div className="float-left mr-4 text-primary-10">
+            <div className="i-icon-park-outline:guide-board text-4xl" />
+          </div>{" "}
           <AlertDescription
             dangerouslySetInnerHTML={{
               __html: t("channelRequest.DeletionRequirementText"),

diff --git a/packages/react/src/components/about/request/ModifyInfo.tsx b/packages/react/src/components/about/request/ModifyInfo.tsx
@@ -19,8 +19,10 @@ import { LanguagePicker } from "./LanguagePicker";
 
 const formValues = {
   channel: {
+    id: "",
     name: "",
     link: "",
+    type: "",
   },
   language: "",
   org: "",
@@ -119,6 +121,7 @@ export function ModifyInfoForm() {
     });
   };
 
+  const channelType = form.watch("channel.type");
   return (
     <Form {...form}>
       <form
@@ -127,7 +130,7 @@ export function ModifyInfoForm() {
       >
         <FormField
           control={form.control}
-          name="channel.name"
+          name="channel.id"
           render={({ field }) => (
             <FormItem className="flex flex-col">
               <FormLabel>Channel</FormLabel>
@@ -136,48 +139,57 @@ export function ModifyInfoForm() {
                   form={form}
                   value={field.value}
                   name="channel.name"
-                  onSelect={({ name, id }) => {
+                  type="any_channel"
+                  onSelect={({ name, id, type }) => {
+                    form.setValue("channel.id", id);
                     form.setValue("channel.name", name);
                     form.setValue(
                       "channel.link",
                       `https://www.youtube.com/channel/${id}`,
                     );
+                    form.setValue("channel.type", type); // need to modify server to emit this.
                   }}
                 />
               </FormControl>
               <FormMessage />
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="language"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t("channelRequest.ChannelLanguageLabel")}</FormLabel>
-              <FormControl>
-                <LanguagePicker name="language" form={form} field={field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="org"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t("channelRequest.VtuberGroupLabel")}</FormLabel>
-              <FormControl>
-                <Input placeholder="Hololive, Nijisanji, ..." {...field} />
-              </FormControl>
-              <FormDescription>
-                {t("channelRequest.VtuberGroupHint")}
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        {channelType === "subber" && (
+          <FormField
+            control={form.control}
+            name="language"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  {t("channelRequest.ChannelLanguageLabel")}
+                </FormLabel>
+                <FormControl>
+                  <LanguagePicker name="language" form={form} field={field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+        {channelType === "vtuber" && (
+          <FormField
+            control={form.control}
+            name="org"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("channelRequest.VtuberGroupLabel")}</FormLabel>
+                <FormControl>
+                  <Input placeholder="Hololive, Nijisanji, ..." {...field} />
+                </FormControl>
+                <FormDescription>
+                  {t("channelRequest.VtuberGroupHint")}
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
         <FormField
           control={form.control}
           name="twitter"

diff --git a/packages/react/src/components/channel/ChannelPicker.tsx b/packages/react/src/components/channel/ChannelPicker.tsx
@@ -36,19 +36,27 @@ interface VtuberPickerProps<
   form?: UseFormReturn<T>;
   value: FieldPathValue<T, FieldName>;
   onSelect: (value: SearchAutoCompleteChannel) => void;
+  type?: "vtuber" | "any_channel" | "clipper";
 }
 
 export function ChannelPicker<
   T extends FieldValues,
   FieldName extends FieldPath<T>,
->({ name, form, value, onSelect }: VtuberPickerProps<T, FieldName>) {
+>({
+  name,
+  form,
+  value,
+  onSelect,
+  type = "vtuber",
+}: VtuberPickerProps<T, FieldName>) {
   const { t } = useTranslation();
   const currentValue = useAtomValue(currentValueAtom);
   const [debouncedValue, setDebouncedValue] = useAtom(debouncedValueAtom);
   const { data, mutate, isPending } = useSearchAutoCompleteMutation();
 
   useEffect(() => {
-    if (debouncedValue) mutate({ q: debouncedValue, n: 10, t: "vtuber" });
+    if (debouncedValue && debouncedValue.length > 1)
+      mutate({ q: debouncedValue, n: 10, t: type });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
 
@@ -85,9 +93,16 @@ export function ChannelPicker<
             })}
           />
           <CommandList>
-            <CommandEmpty>{t("component.channelPicker.notFound")}</CommandEmpty>
+            {isPending && (
+              <div className="flex w-full">
+                <div className="i-lucide:loader-2 mx-auto animate-spin" />
+              </div>
+            )}
+            <CommandEmpty>
+              {!isPending && t("component.channelPicker.notFound")}
+            </CommandEmpty>
             <CommandGroup>
-              {data?.vtuber?.map((channel) => (
+              {data?.[type]?.map((channel) => (
                 <CommandItem
                   key={channel.id}
                   value={channel.name}
@@ -96,11 +111,6 @@ export function ChannelPicker<
                   {channel.name}
                 </CommandItem>
               ))}
-              {isPending && (
-                <CommandItem className="flex justify-center py-2" disabled>
-                  <div className="i-lucide:loader-2 animate-spin" />
-                </CommandItem>
-              )}
             </CommandGroup>
           </CommandList>
         </Command>

diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -12,11 +12,11 @@ import {
 } from "@/hooks/useFrame";
 import { darkAtom } from "@/hooks/useTheme";
 import { Toaster } from "@/shadcn/ui/toaster";
-import { orgAtom } from "@/store/org";
+import { orgAtom, orgRankingAtom } from "@/store/org";
 import { miniPlayerAtom } from "@/store/player";
 import clsx from "clsx";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { Suspense, useEffect } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { ErrorFallback } from "../common/ErrorFallback";
@@ -27,6 +27,8 @@ import SelectionFooter from "./SelectionFooter";
 import { selectionModeAtom } from "@/hooks/useVideoSelection";
 import { videoReportAtom } from "@/store/video";
 import React from "react";
+import { useOrgs } from "@/services/orgs.service";
+import { useTimeout } from "usehooks-ts";
 
 export function LocationAwareReactivity() {
   const location = useLocation();
@@ -53,6 +55,26 @@ export function LocationAwareReactivity() {
   return <></>;
 }
 
+export function GlobalReactivity() {
+  const [wait, setWait] = useState(false);
+  useTimeout(() => setWait(true), 1000);
+  const { data, isError } = useOrgs({ enabled: wait });
+  const updateOrgRanking = useSetAtom(orgRankingAtom);
+  useEffect(() => {
+    if (data && data.length > 0) {
+      console.log("updating org ranking");
+      updateOrgRanking((orgs: Org[]) => {
+        return orgs
+          .map((org) => data.find((x) => x.name === org.name))
+          .filter((x): x is Org => !!x);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  return <></>;
+}
+
 const LazyVideoReportDialog = React.lazy(() => import("../video/VideoReport"));
 
 export function Frame() {
@@ -109,6 +131,7 @@ export function Frame() {
       {isMobile && <Footer />}
       {miniPlayer && <MiniPlayer />}
       <Toaster />
+      <GlobalReactivity />
     </div>
   );
 }