polish settings panel

steeeee0223 · Dec 31, 2024 · f70eb46 · f70eb46
1 parent 33d457b
commit f70eb46
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 75 deletions.
diff --git a/packages/notion/src/common/base-modal.tsx b/packages/notion/src/common/base-modal.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useLayoutEffect, useRef, useTransition } from "react";
+import { useLayoutEffect, useRef } from "react";
 
+import { useTransition } from "@swy/ui/hooks";
 import {
   Button,
   Dialog,
@@ -16,7 +17,7 @@ interface BaseModalProps {
   title: string;
   primary: string;
   secondary: string;
-  onTrigger?: () => void;
+  onTrigger?: () => void | Promise<void>;
 }
 
 export const BaseModal = ({
@@ -26,13 +27,12 @@ export const BaseModal = ({
   onTrigger,
 }: BaseModalProps) => {
   const { isOpen, setClose } = useModal();
-  const [loading, startTransition] = useTransition();
+  const [trigger, loading] = useTransition(() => onTrigger?.());
 
-  const reset = () =>
-    startTransition(() => {
-      onTrigger?.();
-      setClose();
-    });
+  const reset = async () => {
+    await trigger();
+    setClose();
+  };
 
   const buttonRef = useRef<HTMLButtonElement>(null);
   useLayoutEffect(() => {

diff --git a/packages/notion/src/settings-panel/body/account.tsx b/packages/notion/src/settings-panel/body/account.tsx
@@ -5,6 +5,7 @@ import { ChevronRight, X } from "lucide-react";
 import { useHover } from "usehooks-ts";
 
 import { useTranslation } from "@swy/i18n";
+import { useTransition } from "@swy/ui/hooks";
 import { cn } from "@swy/ui/lib";
 import {
   Avatar,
@@ -41,17 +42,21 @@ export const Account = () => {
     deleteAccount,
   } = useSettings();
   const onUpdateAvatar = () => avatarInputRef.current?.click();
-  const onRemoveAvatar = () => void update({ account: { avatarUrl: "" } });
-  const onSelectImage = async (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const replaceTargetUrl = account.avatarUrl;
-      const url = URL.createObjectURL(file);
-      update({ account: { avatarUrl: url } });
-      const res = await uploadFile?.(file, { replaceTargetUrl });
-      if (res?.url) update({ account: { avatarUrl: res.url } });
-    }
-  };
+  const [removeAvatar, isRemoving] = useTransition(() =>
+    update({ account: { avatarUrl: "" } }),
+  );
+  const [selectImage, isUploading] = useTransition(
+    async (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        const replaceTargetUrl = account.avatarUrl;
+        const url = URL.createObjectURL(file);
+        await update({ account: { avatarUrl: url } });
+        const res = await uploadFile?.(file, { replaceTargetUrl });
+        if (res?.url) await update({ account: { avatarUrl: res.url } });
+      }
+    },
+  );
   const onUpdateName = (e: ChangeEvent<HTMLInputElement>) =>
     update({ account: { preferredName: e.target.value } });
   /** Modals */
@@ -94,18 +99,19 @@ export const Account = () => {
                 >
                   <AvatarImage src={account.avatarUrl} />
                   <AvatarFallback className="bg-primary/5">
-                    image
+                    {account.name[0]}
                   </AvatarFallback>
                 </Avatar>
                 <div
                   ref={avatarCancelRef}
                   role="button"
-                  onClick={onRemoveAvatar}
+                  onClick={removeAvatar}
                   className={cn(
                     buttonVariants({ variant: "subitem" }),
                     "absolute -right-0.5 -top-0.5 z-10 hidden size-auto rounded-full border border-border-button bg-main p-1",
                     (avatarIsHover || avatarCancelIsHover) && "block",
                   )}
+                  aria-disabled={isRemoving || isUploading}
                 >
                   <X size={8} strokeWidth={2} />
                 </div>
@@ -115,7 +121,8 @@ export const Account = () => {
                 ref={avatarInputRef}
                 className="hidden"
                 accept="image/*"
-                onChange={onSelectImage}
+                onChange={selectImage}
+                disabled={isRemoving || isUploading}
               />
             </div>
             <div className="ml-5 w-[250px]">

diff --git a/packages/notion/src/settings-panel/body/region.tsx b/packages/notion/src/settings-panel/body/region.tsx
@@ -26,9 +26,9 @@ export const Region = () => {
         title={t("language-region.modals.language.title", {
           language: langLabel,
         })}
-        onTrigger={() => {
-          updateSettings({ account: { language } });
-          void i18n.changeLanguage(language);
+        onTrigger={async () => {
+          await updateSettings({ account: { language } });
+          await i18n.changeLanguage(language);
         }}
       />,
     );

diff --git a/packages/notion/src/settings-panel/body/settings2.tsx b/packages/notion/src/settings-panel/body/settings2.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 
 import { useTranslation } from "@swy/i18n";
+import { useTransition } from "@swy/ui/hooks";
 import { Button, Input, Separator, Switch } from "@swy/ui/shadcn";
 import { IconBlock, IconMenu, useModal, type IconInfo } from "@swy/ui/shared";
 
@@ -29,18 +30,21 @@ export const Settings2 = () => {
   /** Handlers */
   const onUpdateName = (e: React.ChangeEvent<HTMLInputElement>) =>
     update({ workspace: { name: e.target.value } });
-  const onUpdateIcon = (icon: IconInfo) => update({ workspace: { icon } });
-  const onRemoveIcon = () =>
-    update({ workspace: { icon: { type: "text", text: workspace.name } } });
-  const onUploadIcon = async (file: File) => {
+  const [updateIcon, isUpdatingIcon] = useTransition((icon: IconInfo) =>
+    update({ workspace: { icon } }),
+  );
+  const [removeIcon, isRemoving] = useTransition(() =>
+    update({ workspace: { icon: { type: "text", text: workspace.name } } }),
+  );
+  const [uploadIcon, isUploading] = useTransition(async (file: File) => {
     const replaceTargetUrl =
       workspace.icon.type === "file" ? workspace.icon.url : undefined;
     const url = URL.createObjectURL(file);
-    update({ workspace: { icon: { type: "file", url } } });
+    await update({ workspace: { icon: { type: "file", url } } });
     const res = await uploadFile?.(file, { replaceTargetUrl });
     if (res?.url)
-      update({ workspace: { icon: { type: "file", url: res.url } } });
-  };
+      await update({ workspace: { icon: { type: "file", url: res.url } } });
+  });
   const onUpdateDomain = (e: React.ChangeEvent<HTMLInputElement>) =>
     update({ workspace: { domain: e.target.value } });
   const onDeleteWorkspace = () =>
@@ -61,9 +65,10 @@ export const Settings2 = () => {
         <Content {...workspaceSettings.icon}>
           <div className="rounded-md border border-border p-0.5">
             <IconMenu
-              onSelect={onUpdateIcon}
-              onRemove={onRemoveIcon}
-              onUpload={onUploadIcon}
+              disabled={isUpdatingIcon || isRemoving || isUploading}
+              onSelect={updateIcon}
+              onRemove={removeIcon}
+              onUpload={uploadIcon}
             >
               <IconBlock icon={workspace.icon} size="lg" />
             </IconMenu>

diff --git a/packages/notion/src/settings-panel/modals/delete-account.tsx b/packages/notion/src/settings-panel/modals/delete-account.tsx
@@ -24,13 +24,10 @@ const userSchema = z.object({
 
 interface DeleteAccountProps {
   email: string;
-  onSubmit?: (email: string) => void;
+  onSubmit?: (email: string) => void | Promise<void>;
 }
 
-export const DeleteAccount = ({
-  email,
-  onSubmit: $onSubmit,
-}: DeleteAccountProps) => {
+export const DeleteAccount = ({ email, onSubmit }: DeleteAccountProps) => {
   const { isOpen, setClose } = useModal();
   const form = useForm<z.infer<typeof userSchema>>({
     resolver: zodResolver(userSchema),
@@ -41,10 +38,10 @@ export const DeleteAccount = ({
     form.reset();
     form.clearErrors();
   };
-  const onSubmit = (value: z.infer<typeof userSchema>) => {
+  const submit = async (value: z.infer<typeof userSchema>) => {
     if (value.email === email) {
       onClose();
-      $onSubmit?.(email);
+      await onSubmit?.(email);
     } else {
       form.reset();
     }
@@ -74,7 +71,7 @@ export const DeleteAccount = ({
         </div>
         <Form {...form}>
           <form
-            onSubmit={form.handleSubmit(onSubmit)}
+            onSubmit={form.handleSubmit(submit)}
             className="flex w-full flex-col"
             style={{ marginTop: 0 }}
           >
@@ -105,6 +102,7 @@ export const DeleteAccount = ({
               variant="red:fill"
               size="sm"
               className="mt-6 w-full"
+              disabled={form.formState.isSubmitting}
             >
               Permanently delete account
             </Button>
@@ -114,6 +112,7 @@ export const DeleteAccount = ({
                 variant="hint"
                 size="sm"
                 className="mt-3 h-7 w-fit"
+                disabled={form.formState.isSubmitting}
               >
                 Cancel
               </Button>

diff --git a/packages/notion/src/settings-panel/modals/delete-workspace.tsx b/packages/notion/src/settings-panel/modals/delete-workspace.tsx
@@ -23,13 +23,10 @@ const workspaceSchema = z.object({
 
 interface DeleteWorkspaceProps {
   name: string;
-  onSubmit?: (name: string) => void;
+  onSubmit?: (name: string) => void | Promise<void>;
 }
 
-export const DeleteWorkspace = ({
-  name,
-  onSubmit: $onSubmit,
-}: DeleteWorkspaceProps) => {
+export const DeleteWorkspace = ({ name, onSubmit }: DeleteWorkspaceProps) => {
   const { isOpen, setClose } = useModal();
   const form = useForm<z.infer<typeof workspaceSchema>>({
     resolver: zodResolver(workspaceSchema),
@@ -40,10 +37,10 @@ export const DeleteWorkspace = ({
     form.reset();
     form.clearErrors();
   };
-  const onSubmit = (value: z.infer<typeof workspaceSchema>) => {
+  const submit = async (value: z.infer<typeof workspaceSchema>) => {
     if (value.name === name) {
       onClose();
-      $onSubmit?.(name);
+      await onSubmit?.(name);
     } else {
       form.reset();
     }
@@ -73,7 +70,7 @@ export const DeleteWorkspace = ({
         </div>
         <Form {...form}>
           <form
-            onSubmit={form.handleSubmit(onSubmit)}
+            onSubmit={form.handleSubmit(submit)}
             className="flex w-full flex-col"
             style={{ marginTop: 0 }}
           >
@@ -98,6 +95,7 @@ export const DeleteWorkspace = ({
               variant="red:fill"
               size="sm"
               className="mt-6 w-full"
+              disabled={form.formState.isSubmitting}
             >
               Permanently delete workspace
             </Button>
@@ -107,6 +105,7 @@ export const DeleteWorkspace = ({
                 variant="hint"
                 size="sm"
                 className="mt-3 h-7 w-fit"
+                disabled={form.formState.isSubmitting}
               >
                 Cancel
               </Button>

diff --git a/packages/notion/src/settings-panel/modals/password-form.tsx b/packages/notion/src/settings-panel/modals/password-form.tsx
@@ -39,13 +39,10 @@ const passwordSchema = z
 
 interface PasswordFormProps {
   hasPassword?: boolean;
-  onSubmit?: (pass: string, original?: string | null) => void;
+  onSubmit?: (pass: string, original?: string | null) => void | Promise<void>;
 }
 
-export const PasswordForm = ({
-  hasPassword,
-  onSubmit: __onSubmit,
-}: PasswordFormProps) => {
+export const PasswordForm = ({ hasPassword, onSubmit }: PasswordFormProps) => {
   const { isOpen, setClose, setOpen } = useModal();
   const form = useForm<z.infer<typeof passwordSchema>>({
     resolver: zodResolver(passwordSchema),
@@ -57,11 +54,11 @@ export const PasswordForm = ({
     setClose();
     form.reset();
   };
-  const onSubmit = ({
+  const submit = async ({
     password,
     currentPassword,
   }: z.infer<typeof passwordSchema>) => {
-    __onSubmit?.(password, currentPassword);
+    await onSubmit?.(password, currentPassword);
     onClose();
     setOpen(<PasswordSuccess />);
   };
@@ -80,7 +77,7 @@ export const PasswordForm = ({
         noTitle
       >
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="relative">
+          <form onSubmit={form.handleSubmit(submit)} className="relative">
             <div className="my-4 flex justify-center">
               <Icon.Password className="size-[27px] flex-shrink-0 fill-primary/85" />
             </div>
@@ -151,6 +148,7 @@ export const PasswordForm = ({
               variant="blue"
               size="sm"
               className="mt-4 w-full"
+              disabled={form.formState.isSubmitting}
             >
               {hasPassword ? "Change password" : "Set a password"}
             </Button>

diff --git a/packages/notion/src/sidebar/modals/settings-modal.tsx b/packages/notion/src/sidebar/modals/settings-modal.tsx
@@ -11,11 +11,11 @@ export const SettingsModal = (props: SettingsPanelProps) => {
     ...props,
     onDeleteAccount: (data) => {
       setClose();
-      props.onDeleteAccount?.(data);
+      void props.onDeleteAccount?.(data);
     },
     onDeleteWorkspace: (data) => {
       setClose();
-      props.onDeleteWorkspace?.(data);
+      void props.onDeleteWorkspace?.(data);
     },
   };
 

diff --git a/packages/ui/src/hooks/use-transition.ts b/packages/ui/src/hooks/use-transition.ts
@@ -2,24 +2,31 @@
 
 import { useCallback, useState } from "react";
 
-type Action<T> = (() => T) | (() => Promise<T>);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Action<T, Args extends any[]> =
+  | ((...args: Args) => T)
+  | ((...args: Args) => Promise<T>);
 
-export const useTransition = <T>(fn: Action<T>) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useTransition = <T, Args extends any[]>(fn: Action<T, Args>) => {
   const [isPending, setIsPending] = useState(false);
   const [error, setError] = useState<Error>();
 
-  const action = useCallback(async () => {
-    try {
-      setIsPending(true);
-      const response = fn();
-      if (response instanceof Promise) return await response;
-      return response;
-    } catch (error) {
-      setError(error as Error);
-    } finally {
-      setIsPending(false);
-    }
-  }, [fn]);
+  const action = useCallback<Action<T | undefined, Args>>(
+    async (...args) => {
+      try {
+        setIsPending(true);
+        const response = fn(...args);
+        if (response instanceof Promise) return await response;
+        return response;
+      } catch (error) {
+        setError(error as Error);
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [fn],
+  );
 
   return [action, isPending, error] as const;
 };