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,228 +4,194 @@
 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 {
-    useZodForm,
+  useZodForm,
-    Form,
+  Form,
-    FormField,
+  FormField,
-    FormItem,
+  FormItem,
-    FormLabel,
+  FormLabel,
-    FormControl,
+  FormControl,
-    FormMessage,
+  FormMessage,
 } from "@/components/ui/form";
 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 { 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 [phase, setPhase] = useState<Phase>({ kind: "grid" });
-    const existingStorages = (state?.context.flowData.storages ?? []) as OnboardingChannel[];
+  const form = useZodForm({ schema: StorageChannelFormSchema });
-    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) => {
+  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);
+    form.reset({ provider, enabled: true, name: "", config: {} } as any);
-        setPhase({ kind: "configuring", provider });
+    setPhase({ kind: "configuring", provider });
-    };
+  };
 
-    const removeChannel = async (id: string) => {
+  const onContinue = async () => {
-        const updated = channels.filter((c) => c.id !== id);
+    await updateContext({ flowData: { ...state?.context.flowData, storages } });
-        setChannels(updated);
+    await next();
-        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 () => {
+  if (phase.kind === "configuring") {
-        await updateContext({ flowData: { ...state?.context.flowData, storages: channels } });
+    const providerDetails = storageProviders.find((p) => p.value === phase.provider);
-        await next();
+    const Icon = providerDetails?.icon;
-    };
-
-    if (phase.kind === "configuring") {
-        const providerDetails = storageProviders.find((p) => p.value === phase.provider);
-        const Icon = providerDetails?.icon;
-
-        return (
-            <div className="flex flex-col gap-4">
-                <div className="flex items-center gap-3 p-3 bg-secondary/30 rounded-lg border border-border">
-                    {Icon && (
-                        <div className="size-9 rounded-md border bg-muted/50 shadow-sm flex items-center justify-center">
-                            <Icon className="size-5" />
-                        </div>
-                    )}
-                    <p className="flex-1 text-sm font-medium">
-                        Configuring {providerDetails?.label}
-                    </p>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setPhase({ kind: "grid" })}
-                    >
-                        <ArrowLeft className="size-4 mr-1" />
-                        Back
-                    </Button>
-                </div>
-                <Form
-                    form={form}
-                    className="flex flex-col gap-4"
-                    onSubmit={async (values: any) => {
-                        setSubmitting(true);
-                        try {
-                            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>,
-                                },
-                            ]);
-                            form.reset({ enabled: true } as any);
-                            setPhase({ kind: "grid" });
-                        } finally {
-                            setSubmitting(false);
-                        }
-                    }}
-                >
-                    <FormField
-                        control={form.control}
-                        name="name"
-                        render={({ field }) => (
-                            <FormItem>
-                                <FormLabel>Channel name *</FormLabel>
-                                <FormControl>
-                                    <Input
-                                        {...field}
-                                        value={field.value ?? ""}
-                                        placeholder={`e.g. ${providerDetails?.label ?? ""} backup`}
-                                    />
-                                </FormControl>
-                                <FormMessage />
-                            </FormItem>
-                        )}
-                    />
-                    <FormField
-                        control={form.control}
-                        name="provider"
-                        render={({ field }) => (
-                            <input type="hidden" {...field} value={field.value || ""} />
-                        )}
-                    />
-                    {renderChannelForm(phase.provider, form)}
-                    <Button type="submit" disabled={submitting}>
-                        {submitting ? "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 configuredProviderIds = channels.map((c) => c.provider);
 
     return (
-        <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
-            <div>
+        <div className="flex items-center gap-3 p-3 bg-secondary/30 rounded-lg border border-border">
-                <h1 className="text-2xl font-semibold">Connect a storage</h1>
+          {Icon && (
-                <p className="text-sm text-muted-foreground mt-1">
+            <div className="size-9 rounded-md border bg-muted/50 shadow-sm flex items-center justify-center">
-                    Optional — choose where backups and files are stored.
+              <Icon className="size-5" />
-                </p>
             </div>
-
+          )}
-            {channels.length > 0 && (
+          <p className="flex-1 text-sm font-medium">Configuring {providerDetails?.label}</p>
-                <div className="flex flex-col gap-1">
+          <Button type="button" variant="ghost" size="sm" onClick={() => setPhase({ kind: "grid" })}>
-                    {channels.map((ch) => {
+            <ArrowLeft className="size-4 mr-1" />
-                        const details = storageProviders.find((p) => p.value === ch.provider);
+            Back
-                        const Icon = details?.icon;
+          </Button>
-                        return (
-                            <div
-                                key={ch.id}
-                                className="flex items-center gap-2 rounded-lg border border-primary/20 bg-primary/10 p-2 text-sm text-primary"
-                            >
-                                {Icon && (
-                                    <div className="size-7 rounded-md border bg-muted/50 flex items-center justify-center shrink-0">
-                                        <Icon className="size-4" />
-                                    </div>
-                                )}
-                                <span className="flex-1 truncate">
-                                    {ch.name}{" "}
-                                    <span className="opacity-60">({ch.label})</span>
-                                </span>
-                                <button
-                                    type="button"
-                                    onClick={() => removeChannel(ch.id)}
-                                    className="opacity-50 hover:opacity-100 transition-opacity"
-                                >
-                                    <X className="size-4" />
-                                </button>
-                            </div>
-                        );
-                    })}
-                </div>
-            )}
-
-            <div className="grid grid-cols-2 gap-2">
-                {availableProviders.map((provider) => {
-                    const Icon = provider.icon;
-                    const isConfigured = configuredProviderIds.includes(provider.value);
-                    return (
-                        <button
-                            key={provider.value}
-                            type="button"
-                            onClick={() => startConfiguring(provider.value)}
-                            className={`flex items-center gap-2 rounded-lg border p-2 text-sm transition-colors ${
-                                isConfigured
-                                    ? "border-primary/20 bg-primary/10 text-primary"
-                                    : "border-border hover:bg-accent/50 hover:border-primary/20"
-                            }`}
-                        >
-                            <div className="size-9 rounded-md border bg-muted/50 shadow-sm flex items-center justify-center shrink-0">
-                                <Icon className="size-4" />
-                            </div>
-                            <span className="flex-1 text-left">{provider.label}</span>
-                            {isConfigured && (
-                                <div className="size-5 rounded-full bg-primary flex items-center justify-center ml-auto">
-                                    <Check className="size-3 text-primary-foreground" strokeWidth={3} />
-                                </div>
-                            )}
-                        </button>
-                    );
-                })}
-            </div>
-
-            <Button type="button" onClick={onContinue}>
-                Continue
-            </Button>
         </div>
+        <Form
+          form={form}
+          className="flex flex-col gap-4"
+          onSubmit={async (values: any) => {
+            const details = storageProviders.find((p) => p.value === values.provider);
+            addStorage.mutate(
+              {
+                provider: values.provider,
+                name: values.name,
+                config: values.config,
+                label: details?.label ?? values.provider,
+              },
+              {
+                onSuccess: () => {
+                  form.reset({ enabled: true } as any);
+                  setPhase({ kind: "grid" });
+                },
+              },
+            );
+          }}
+        >
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Channel name *</FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    value={field.value ?? ""}
+                    placeholder={`e.g. ${providerDetails?.label ?? ""} backup`}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="provider"
+            render={({ field }) => (
+              <input type="hidden" {...field} value={field.value || ""} />
+            )}
+          />
+          {renderChannelForm(phase.provider, form)}
+          <Button type="submit" disabled={addStorage.isPending}>
+            {addStorage.isPending ? "Saving…" : "Add storage"}
+          </Button>
+        </Form>
+      </div>
     );
+  }
+
+  const availableProviders = storageProviders.filter((p) => !p.preview && p.value !== "local");
+  const configuredProviderIds = storages.map((c) => c.provider);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <h1 className="text-2xl font-semibold">Connect a storage</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Optional — choose where backups and files are stored.
+        </p>
+      </div>
+
+      {storages.length > 0 && (
+        <div className="flex flex-col gap-1">
+          {storages.map((ch) => {
+            const details = storageProviders.find((p) => p.value === ch.provider);
+            const Icon = details?.icon;
+            return (
+              <div
+                key={ch.id}
+                className="flex items-center gap-2 rounded-lg border border-primary/20 bg-primary/10 p-2 text-sm text-primary"
+              >
+                {Icon && (
+                  <div className="size-7 rounded-md border bg-muted/50 flex items-center justify-center shrink-0">
+                    <Icon className="size-4" />
+                  </div>
+                )}
+                <span className="flex-1 truncate">
+                  {ch.name} <span className="opacity-60">({ch.label})</span>
+                </span>
+                <button
+                  type="button"
+                  onClick={() => removeStorage.mutate(ch.id)}
+                  disabled={removeStorage.isPending}
+                  className="opacity-50 hover:opacity-100 transition-opacity"
+                >
+                  <X className="size-4" />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-2">
+        {availableProviders.map((provider) => {
+          const Icon = provider.icon;
+          const isConfigured = configuredProviderIds.includes(provider.value);
+          return (
+            <button
+              key={provider.value}
+              type="button"
+              onClick={() => startConfiguring(provider.value)}
+              className={`flex items-center gap-2 rounded-lg border p-2 text-sm transition-colors ${
+                isConfigured
+                  ? "border-primary/20 bg-primary/10 text-primary"
+                  : "border-border hover:bg-accent/50 hover:border-primary/20"
+              }`}
+            >
+              <div className="size-9 rounded-md border bg-muted/50 shadow-sm flex items-center justify-center shrink-0">
+                <Icon className="size-4" />
+              </div>
+              <span className="flex-1 text-left">{provider.label}</span>
+              {isConfigured && (
+                <div className="size-5 rounded-full bg-primary flex items-center justify-center ml-auto">
+                  <Check className="size-3 text-primary-foreground" strokeWidth={3} />
+                </div>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      <Button type="button" onClick={onContinue}>
+        Continue
+      </Button>
+    </div>
+  );
 };