refactored app state to query hooks and selection provider

packages/frontend/src/components/issues-table.tsx

@@ -1,22 +1,25 @@
-import type { IssueResponse } from "@sprint/shared";
+import { useMemo } from "react";
 import Avatar from "@/components/avatar";
+import { useSelection } from "@/components/selection-provider";
 import StatusTag from "@/components/status-tag";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { useIssues, useSelectedOrganisation } from "@/lib/query/hooks";
 import { cn } from "@/lib/utils";
 
 export function IssuesTable({
-    issuesData,
     columns = {},
-    issueSelectAction,
-    statuses,
     className,
 }: {
-    issuesData: IssueResponse[];
     columns?: { id?: boolean; title?: boolean; description?: boolean; status?: boolean; assignee?: boolean };
-    issueSelectAction?: (issue: IssueResponse) => void;
-    statuses: Record<string, string>;
     className: string;
 }) {
+    const { selectedProjectId, selectedIssueId, selectIssue } = useSelection();
+    const { data: issuesData = [] } = useIssues(selectedProjectId);
+    const selectedOrganisation = useSelectedOrganisation();
+    const statuses = selectedOrganisation?.Organisation.statuses ?? {};
+
+    const issues = useMemo(() => [...issuesData].reverse(), [issuesData]);
+
     return (
         <Table className={cn("table-fixed", className)}>
             <TableHeader>
@@ -35,12 +38,16 @@ export function IssuesTable({
                 </TableRow>
             </TableHeader>
             <TableBody>
-                {issuesData.map((issueData) => (
+                {issues.map((issueData) => (
                     <TableRow
                         key={issueData.Issue.id}
                         className="cursor-pointer max-w-full"
                         onClick={() => {
-                            issueSelectAction?.(issueData);
+                            if (issueData.Issue.id === selectedIssueId) {
+                                selectIssue(null);
+                                return;
+                            }
+                            selectIssue(issueData);
                         }}
                     >
                         {(columns.id == null || columns.id === true) && (

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

@@ -1,7 +1,7 @@
-import type { OrganisationRecord, OrganisationResponse } from "@sprint/shared";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { OrganisationModal } from "@/components/organisation-modal";
+import { useSelection } from "@/components/selection-provider";
 import { Button } from "@/components/ui/button";
 import {
     Select,
@@ -13,22 +13,15 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select";
+import { useOrganisations } from "@/lib/query/hooks";
 
 export function OrganisationSelect({
-    organisations,
-    selectedOrganisation,
-    onSelectedOrganisationChange,
-    onCreateOrganisation,
     placeholder = "Select Organisation",
     contentClass,
     showLabel = false,
     label = "Organisation",
     labelPosition = "top",
 }: {
-    organisations: OrganisationResponse[];
-    selectedOrganisation: OrganisationResponse | null;
-    onSelectedOrganisationChange: (organisation: OrganisationResponse | null) => void;
-    onCreateOrganisation?: (org: OrganisationRecord) => void | Promise<void>;
     placeholder?: string;
     contentClass?: string;
     showLabel?: boolean;
@@ -36,6 +29,28 @@ export function OrganisationSelect({
     labelPosition?: "top" | "bottom";
 }) {
     const [open, setOpen] = useState(false);
+    const [pendingOrganisationId, setPendingOrganisationId] = useState<number | null>(null);
+    const { data: organisationsData = [] } = useOrganisations();
+    const { selectedOrganisationId, selectOrganisation } = useSelection();
+
+    const organisations = useMemo(
+        () => [...organisationsData].sort((a, b) => a.Organisation.name.localeCompare(b.Organisation.name)),
+        [organisationsData],
+    );
+
+    const selectedOrganisation = useMemo(
+        () => organisations.find((org) => org.Organisation.id === selectedOrganisationId) ?? null,
+        [organisations, selectedOrganisationId],
+    );
+
+    useEffect(() => {
+        if (!pendingOrganisationId) return;
+        const organisation = organisations.find((org) => org.Organisation.id === pendingOrganisationId);
+        if (organisation) {
+            selectOrganisation(organisation);
+            setPendingOrganisationId(null);
+        }
+    }, [organisations, pendingOrganisationId, selectOrganisation]);
 
     return (
         <Select
@@ -46,7 +61,7 @@ export function OrganisationSelect({
                     console.error(`NO ORGANISATION FOUND FOR ID: ${value}`);
                     return;
                 }
-                onSelectedOrganisationChange(organisation);
+                selectOrganisation(organisation);
             }}
             onOpenChange={setOpen}
         >
@@ -82,7 +97,7 @@ export function OrganisationSelect({
                     }
                     completeAction={async (org) => {
                         try {
-                            await onCreateOrganisation?.(org);
+                            setPendingOrganisationId(org.id);
                         } catch (err) {
                             console.error(err);
                         }

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);
                         }