Canvas: Fix project selection
Change-Id: I34d68d06cc125acd1336fbd180bfdb6bfdfb2553
diff --git a/apps/canvas/front/src/ProjectSelect.tsx b/apps/canvas/front/src/ProjectSelect.tsx
index 9b8bb45..278db67 100644
--- a/apps/canvas/front/src/ProjectSelect.tsx
+++ b/apps/canvas/front/src/ProjectSelect.tsx
@@ -1,5 +1,5 @@
import { ChangeEvent, useCallback, useEffect, useState } from "react";
-import { Project, useProjectId, useStateStore } from "./lib/state";
+import { Project, useProjectId, useSetProject } from "./lib/state";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./components/ui/select";
import { Input } from "./components/ui/input";
import { Button } from "./components/ui/button";
@@ -16,17 +16,9 @@
export function ProjectSelect({ className }: { className?: string }) {
const { toast } = useToast();
- const store = useStateStore();
- const [projects, setProjects] = useState<Project[]>([]);
+ const [projects, setProjects] = useState<Project[] | null>(null);
const projectId = useProjectId();
- // Track the selected project ID locally to ensure UI consistency
- const [selectedId, setSelectedId] = useState<string | undefined>(projectId);
-
- // Keep local state in sync with global state
- useEffect(() => {
- setSelectedId(projectId);
- }, [projectId]);
-
+ const setProject = useSetProject();
const refreshProjects = useCallback(
async (id?: string) => {
console.log("refreshProjects", id);
@@ -36,39 +28,40 @@
const sortedProjects = [...projectList].sort((a, b) =>
a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
);
+ console.log(projectId, id, sortedProjects);
setProjects(sortedProjects);
if (id && !sortedProjects.some((p) => p.id === id)) {
throw new Error("MUST NOT REACH!");
}
if (id == null) {
- id = sortedProjects[0].id;
+ if (projectId == null) {
+ id = sortedProjects[0].id;
+ } else {
+ id = projectId;
+ }
}
- if (id !== selectedId) {
- setSelectedId(id);
- store.setProject(id);
- }
+ setProject(id);
} catch (e) {
console.log(e);
}
},
- [selectedId, store, setProjects, setSelectedId],
+ [projectId, setProject, setProjects],
);
-
useEffect(() => {
- refreshProjects();
- }, [refreshProjects]);
-
+ if (projects == null) {
+ refreshProjects();
+ }
+ }, [refreshProjects, projects]);
const [createNewOpen, setCreateNewOpen] = useState(false);
const onSelect = useCallback(
- (projectId: string) => {
- if (projectId === "create-new") {
+ (id: string) => {
+ if (id === "create-new") {
setCreateNewOpen(true);
} else {
- setSelectedId(projectId);
- store.setProject(projectId);
+ setProject(id);
}
},
- [store, setSelectedId],
+ [setProject],
);
const [name, setName] = useState<string | undefined>(undefined);
@@ -124,23 +117,23 @@
});
});
}, [name, setCreateNewOpen, toast, refreshProjects]);
-
+ console.log("asd", projectId);
return (
<>
- <Select onValueChange={onSelect} value={selectedId}>
+ <Select onValueChange={onSelect} value={projectId}>
<SelectTrigger
className={cn("!border-none", "!shadow-none", "!focus:ring-0", "!focus:ring-offset-0", className)}
>
<SelectValue placeholder="Choose Project" />
</SelectTrigger>
<SelectContent>
- {projects.map((p) => (
+ {projects?.map((p) => (
<SelectItem key={p.id} value={p.id}>
{p.name}
</SelectItem>
))}
- <Separator />
- <SelectItem value={"create-new"}>
+ {(projects || []).length > 0 && <Separator />}
+ <SelectItem key="create-new" value={"create-new"}>
<div className="flex flex-row items-center gap-1">
<Plus />
<div>New project</div>
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index 83890b2..b0c2560 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -494,6 +494,10 @@
return useStateStore(projectIdSelector);
}
+export function useSetProject(): (projectId: string | undefined) => void {
+ return useStateStore((state) => state.setProject);
+}
+
export function useCategories(): Category[] {
return useStateStore(categoriesSelector);
}