refactor(onboarding): extract useAddStorage and useRemoveStorage hooks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/features/onboarding/hooks/use-add-storage.ts

@@ -0,0 +1,40 @@
+// src/features/onboarding/hooks/use-add-storage.ts
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { useOnboarding } from "@onboardjs/react";
+import { toast } from "sonner";
+import { addStorageChannelAction } from "@/features/channel/storages/channel.action";
+import type { OnboardingChannel } from "@/features/onboarding/types";
+
+type StorageInput = {
+  provider: string;
+  name: string;
+  config: Record<string, unknown>;
+  label: string;
+};
+
+export const useAddStorage = () => {
+  const { state, updateContext } = useOnboarding();
+
+  return useMutation({
+    mutationFn: async ({ provider, name, config, label }: StorageInput) => {
+      const orgId = (state?.context.flowData.org as any)?.id as string | undefined;
+      const result = await addStorageChannelAction({
+        organizationId: orgId,
+        data: { provider: provider as any, name, config: config as any, enabled: true },
+      });
+      const inner = result?.data;
+      if (!inner?.success || !inner.value) throw new Error("Failed to save storage");
+
+      const channel: OnboardingChannel = { id: inner.value.id, provider, label, name, config };
+      const storages = [
+        ...((state?.context.flowData.storages ?? []) as OnboardingChannel[]),
+        channel,
+      ];
+      await updateContext({ flowData: { ...state?.context.flowData, storages } });
+      return channel;
+    },
+    onError: (err: Error) => toast.error(err.message),
+  });
+};

src/features/onboarding/hooks/use-remove-storage.ts

@@ -0,0 +1,25 @@
+// src/features/onboarding/hooks/use-remove-storage.ts
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { useOnboarding } from "@onboardjs/react";
+import { toast } from "sonner";
+import { removeStorageChannelAction } from "@/features/channel/storages/channel.action";
+import type { OnboardingChannel } from "@/features/onboarding/types";
+
+export const useRemoveStorage = () => {
+  const { state, updateContext } = useOnboarding();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const orgId = (state?.context.flowData.org as any)?.id as string | undefined;
+      const result = await removeStorageChannelAction({ organizationId: orgId, id });
+      if (result?.data?.success === false) throw new Error("Failed to remove storage");
+      const storages = (
+        (state?.context.flowData.storages ?? []) as OnboardingChannel[]
+      ).filter((c) => c.id !== id);
+      await updateContext({ flowData: { ...state?.context.flowData, storages } });
+    },
+    onError: (err: Error) => toast.error(err.message),
+  });
+};

src/features/onboarding/steps/step-storage.tsx

@@ -4,7 +4,6 @@
 import { useState } from "react";
 import { useOnboarding } from "@onboardjs/react";
 import { ArrowLeft, Check, X } from "lucide-react";
-import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -19,41 +18,29 @@ import {
 import { storageProviders } from "@/features/channel/channels-storage-helper";
 import { renderChannelForm } from "@/features/channel/channels-helpers";
 import { StorageChannelFormSchema } from "@/features/channel/channel-form.schema";
-import { OnboardingChannel } from "@/features/onboarding/types";
+import { useAddStorage } from "@/features/onboarding/hooks/use-add-storage";
-import { addStorageChannelAction, removeStorageChannelAction } from "@/features/channel/storages/channel.action";
+import { useRemoveStorage } from "@/features/onboarding/hooks/use-remove-storage";
+import type { OnboardingChannel } from "@/features/onboarding/types";
 
 type Phase = { kind: "grid" } | { kind: "configuring"; provider: string };
 
 export const StepStorage = () => {
   const { next, updateContext, state } = useOnboarding();
-    const orgId = (state?.context.flowData.org as any)?.id as string | undefined;
+  const storages = (state?.context.flowData.storages ?? []) as OnboardingChannel[];
   const [phase, setPhase] = useState<Phase>({ kind: "grid" });
-    const existingStorages = (state?.context.flowData.storages ?? []) as OnboardingChannel[];
-    const [channels, setChannels] = useState<OnboardingChannel[]>(existingStorages);
-    const [submitting, setSubmitting] = useState(false);
-
   const form = useZodForm({ schema: StorageChannelFormSchema });
 
+  const addStorage = useAddStorage();
+  const removeStorage = useRemoveStorage();
+
   const startConfiguring = (provider: string) => {
-        if (channels.some((c) => c.provider === provider)) return;
+    if (storages.some((c) => c.provider === provider)) return;
     form.reset({ provider, enabled: true, name: "", config: {} } as any);
     setPhase({ kind: "configuring", provider });
   };
 
-    const removeChannel = async (id: string) => {
-        const updated = channels.filter((c) => c.id !== id);
-        setChannels(updated);
-        const result = await removeStorageChannelAction({ organizationId: orgId, id });
-        if (result?.data?.success === false) {
-            toast.error("Failed to remove storage");
-            setChannels(channels);
-        } else {
-            await updateContext({ flowData: { ...state?.context.flowData, storages: updated } });
-        }
-    };
-
   const onContinue = async () => {
-        await updateContext({ flowData: { ...state?.context.flowData, storages: channels } });
+    await updateContext({ flowData: { ...state?.context.flowData, storages } });
     await next();
   };
 
@@ -69,15 +56,8 @@ export const StepStorage = () => {
               <Icon className="size-5" />
             </div>
           )}
-                    <p className="flex-1 text-sm font-medium">
+          <p className="flex-1 text-sm font-medium">Configuring {providerDetails?.label}</p>
-                        Configuring {providerDetails?.label}
+          <Button type="button" variant="ghost" size="sm" onClick={() => setPhase({ kind: "grid" })}>
-                    </p>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setPhase({ kind: "grid" })}
-                    >
             <ArrowLeft className="size-4 mr-1" />
             Back
           </Button>
@@ -86,32 +66,21 @@ export const StepStorage = () => {
           form={form}
           className="flex flex-col gap-4"
           onSubmit={async (values: any) => {
-                        setSubmitting(true);
+            const details = storageProviders.find((p) => p.value === values.provider);
-                        try {
+            addStorage.mutate(
-                            const result = await addStorageChannelAction({
-                                organizationId: orgId,
-                                data: { provider: values.provider as any, name: values.name, config: values.config as any, enabled: true },
-                            });
-                            const inner = result?.data;
-                            if (!inner?.success || !inner.value) {
-                                toast.error("Failed to save storage");
-                                return;
-                            }
-                            setChannels((prev) => [
-                                ...prev,
               {
-                                    id: inner.value!.id,
                 provider: values.provider,
-                                    label: providerDetails?.label ?? values.provider,
                 name: values.name,
-                                    config: values.config as Record<string, unknown>,
+                config: values.config,
+                label: details?.label ?? values.provider,
               },
-                            ]);
+              {
+                onSuccess: () => {
                   form.reset({ enabled: true } as any);
                   setPhase({ kind: "grid" });
-                        } finally {
+                },
-                            setSubmitting(false);
+              },
-                        }
+            );
           }}
         >
           <FormField
@@ -139,19 +108,16 @@ export const StepStorage = () => {
             )}
           />
           {renderChannelForm(phase.provider, form)}
-                    <Button type="submit" disabled={submitting}>
+          <Button type="submit" disabled={addStorage.isPending}>
-                        {submitting ? "Saving…" : "Add storage"}
+            {addStorage.isPending ? "Saving…" : "Add storage"}
           </Button>
         </Form>
       </div>
     );
   }
 
-    // Phase: grid — filter "local" (no useful config) and preview providers
+  const availableProviders = storageProviders.filter((p) => !p.preview && p.value !== "local");
-    const availableProviders = storageProviders.filter(
+  const configuredProviderIds = storages.map((c) => c.provider);
-        (p) => !p.preview && p.value !== "local"
-    );
-    const configuredProviderIds = channels.map((c) => c.provider);
 
   return (
     <div className="flex flex-col gap-4">
@@ -162,9 +128,9 @@ export const StepStorage = () => {
         </p>
       </div>
 
-            {channels.length > 0 && (
+      {storages.length > 0 && (
         <div className="flex flex-col gap-1">
-                    {channels.map((ch) => {
+          {storages.map((ch) => {
             const details = storageProviders.find((p) => p.value === ch.provider);
             const Icon = details?.icon;
             return (
@@ -178,12 +144,12 @@ export const StepStorage = () => {
                   </div>
                 )}
                 <span className="flex-1 truncate">
-                                    {ch.name}{" "}
+                  {ch.name} <span className="opacity-60">({ch.label})</span>
-                                    <span className="opacity-60">({ch.label})</span>
                 </span>
                 <button
                   type="button"
-                                    onClick={() => removeChannel(ch.id)}
+                  onClick={() => removeStorage.mutate(ch.id)}
+                  disabled={removeStorage.isPending}
                   className="opacity-50 hover:opacity-100 transition-opacity"
                 >
                   <X className="size-4" />