refactored app state to query hooks and selection provider

packages/frontend/src/components/project-select.tsx

@@ -1,6 +1,6 @@
-import type { ProjectRecord, ProjectResponse } from "@sprint/shared";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ProjectModal } from "@/components/project-modal";
+import { useSelection } from "@/components/selection-provider";
 import { Button } from "@/components/ui/button";
 import {
     Select,
@@ -12,29 +12,42 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select";
+import { useProjects } from "@/lib/query/hooks";
 
 export function ProjectSelect({
-    projects,
-    selectedProject,
-    organisationId,
-    onSelectedProjectChange,
-    onCreateProject,
     placeholder = "Select Project",
     showLabel = false,
     label = "Project",
     labelPosition = "top",
 }: {
-    projects: ProjectResponse[];
-    selectedProject: ProjectResponse | null;
-    organisationId: number | undefined;
-    onSelectedProjectChange: (project: ProjectResponse | null) => void;
-    onCreateProject?: (project: ProjectRecord) => void | Promise<void>;
     placeholder?: string;
     showLabel?: boolean;
     label?: string;
     labelPosition?: "top" | "bottom";
 }) {
     const [open, setOpen] = useState(false);
+    const [pendingProjectId, setPendingProjectId] = useState<number | null>(null);
+    const { selectedOrganisationId, selectedProjectId, selectProject } = useSelection();
+    const { data: projectsData = [] } = useProjects(selectedOrganisationId);
+
+    const projects = useMemo(
+        () => [...projectsData].sort((a, b) => a.Project.name.localeCompare(b.Project.name)),
+        [projectsData],
+    );
+
+    const selectedProject = useMemo(
+        () => projects.find((proj) => proj.Project.id === selectedProjectId) ?? null,
+        [projects, selectedProjectId],
+    );
+
+    useEffect(() => {
+        if (!pendingProjectId) return;
+        const project = projects.find((proj) => proj.Project.id === pendingProjectId);
+        if (project) {
+            selectProject(project);
+            setPendingProjectId(null);
+        }
+    }, [pendingProjectId, projects, selectProject]);
 
     return (
         <Select
@@ -45,7 +58,7 @@ export function ProjectSelect({
                     console.error(`NO PROJECT FOUND FOR ID: ${value}`);
                     return;
                 }
-                onSelectedProjectChange(project);
+                selectProject(project);
             }}
             onOpenChange={setOpen}
         >
@@ -69,15 +82,20 @@ export function ProjectSelect({
                     {projects.length > 0 && <SelectSeparator />}
                 </SelectGroup>
                 <ProjectModal
-                    organisationId={organisationId}
+                    organisationId={selectedOrganisationId ?? undefined}
                     trigger={
-                        <Button size={"sm"} variant="ghost" className={"w-full"} disabled={!organisationId}>
+                        <Button
+                            size={"sm"}
+                            variant="ghost"
+                            className={"w-full"}
+                            disabled={!selectedOrganisationId}
+                        >
                             Create Project
                         </Button>
                     }
                     completeAction={async (project) => {
                         try {
-                            await onCreateProject?.(project);
+                            setPendingProjectId(project.id);
                         } catch (err) {
                             console.error(err);
                         }