mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
feat(onboarding): step-project-create uses real action + real DBs from flowData
This commit is contained in:
Théo LAGACHE
@@ -2,77 +2,141 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useOnboarding } from "@onboardjs/react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import { Check, Database } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { mockDatabases } from "@/features/onboarding/onboarding.mock";
|
||||
import { createProjectAction, updateProjectAction } from "@/features/projects/projects.action";
|
||||
import type { OnboardingDatabase, OnboardingProjectData } from "@/features/onboarding/onboarding.types";
|
||||
|
||||
export const StepProjectCreate = () => {
|
||||
const { next, updateContext, state } = useOnboarding();
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [databaseIds, setDatabaseIds] = useState<string[]>([]);
|
||||
const existingProject = state?.context.flowData.project as OnboardingProjectData | undefined;
|
||||
const databases = (state?.context.flowData.databases ?? []) as OnboardingDatabase[];
|
||||
const orgId = (state?.context.flowData.org as any)?.id as string | undefined;
|
||||
const isUpdateMode = !!existingProject;
|
||||
|
||||
const [name, setName] = useState(existingProject?.name ?? "");
|
||||
const [description, setDescription] = useState(existingProject?.description ?? "");
|
||||
const [databaseIds, setDatabaseIds] = useState<string[]>(existingProject?.databaseIds ?? []);
|
||||
|
||||
const toggleDb = (id: string) => {
|
||||
setDatabaseIds((prev) => (prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]));
|
||||
};
|
||||
|
||||
const onContinue = async () => {
|
||||
await updateContext({ flowData: { ...state?.context.flowData, project: { name, description, databaseIds } } });
|
||||
await next();
|
||||
};
|
||||
const mutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (!orgId) throw new Error("No organisation ID found");
|
||||
if (isUpdateMode && existingProject?.id) {
|
||||
const result = await updateProjectAction({
|
||||
data: { name: name.trim(), databases: databaseIds },
|
||||
organizationId: orgId,
|
||||
projectId: existingProject.id,
|
||||
});
|
||||
const updateData = result?.data;
|
||||
if (!updateData?.success) {
|
||||
throw new Error(updateData?.actionError?.message ?? "Failed to update project");
|
||||
}
|
||||
await updateContext({
|
||||
flowData: {
|
||||
...state?.context.flowData,
|
||||
project: { id: existingProject.id, name: name.trim(), description, databaseIds },
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const result = await createProjectAction({
|
||||
data: { name: name.trim(), databases: databaseIds },
|
||||
organizationId: orgId,
|
||||
});
|
||||
const createData = result?.data;
|
||||
if (!createData?.success) {
|
||||
throw new Error(createData?.actionError?.message ?? "Failed to create project");
|
||||
}
|
||||
const project = createData.value;
|
||||
if (!project) throw new Error("Failed to create project");
|
||||
await updateContext({
|
||||
flowData: {
|
||||
...state?.context.flowData,
|
||||
project: { id: project.id, name: project.name, description, databaseIds },
|
||||
},
|
||||
});
|
||||
}
|
||||
await next();
|
||||
},
|
||||
onError: (err: Error) => {
|
||||
toast.error(err.message);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Create a project</h1>
|
||||
<h1 className="text-2xl font-semibold">
|
||||
{isUpdateMode ? "Update project" : "Create a project"}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">Optional — group databases under a project.</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="project-name">Project name</Label>
|
||||
<Input id="project-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="My project" />
|
||||
<Input
|
||||
id="project-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="My project"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="project-description">Description</Label>
|
||||
<Textarea id="project-description" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
<Textarea
|
||||
id="project-description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Databases</Label>
|
||||
{databases.length > 0 && (
|
||||
<div className="flex flex-col gap-2">
|
||||
{mockDatabases.map((db) => {
|
||||
const isSelected = databaseIds.includes(db.id);
|
||||
return (
|
||||
<button
|
||||
key={db.id}
|
||||
type="button"
|
||||
onClick={() => toggleDb(db.id)}
|
||||
className={`flex items-center gap-3 rounded-lg border p-3 text-sm transition-colors text-left ${
|
||||
isSelected
|
||||
? "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">
|
||||
<Database className="size-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 flex-1">
|
||||
<span className="font-medium">{db.name}</span>
|
||||
<span className="text-xs text-muted-foreground">{db.engine}</span>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="size-5 rounded-full bg-primary flex items-center justify-center ml-auto">
|
||||
<Check className="size-3 text-primary-foreground" strokeWidth={3} />
|
||||
<Label>Databases</Label>
|
||||
<div className="flex flex-col gap-2">
|
||||
{databases.map((db) => {
|
||||
const isSelected = databaseIds.includes(db.id);
|
||||
return (
|
||||
<button
|
||||
key={db.id}
|
||||
type="button"
|
||||
onClick={() => toggleDb(db.id)}
|
||||
className={`flex items-center gap-3 rounded-lg border p-3 text-sm transition-colors text-left ${
|
||||
isSelected
|
||||
? "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">
|
||||
<Database className="size-4 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="flex flex-col gap-0.5 flex-1">
|
||||
<span className="font-medium">{db.name}</span>
|
||||
<span className="text-xs text-muted-foreground">{db.engine}</span>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="button" onClick={onContinue} disabled={!name.trim()}>
|
||||
Continue
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => mutation.mutate()}
|
||||
disabled={!name.trim() || mutation.isPending}
|
||||
>
|
||||
{mutation.isPending ? "Saving…" : "Continue"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user