From 58adc6a045362879ac3acb7a53169ac427daac48 Mon Sep 17 00:00:00 2001
From: Jeff Daley <jeffdaley@users.noreply.github.com>
Date: Wed, 20 Mar 2024 11:52:29 -0400
Subject: [PATCH] Use backend for project-status filtering

---
 web/app/components/projects/add-to-or-create.ts | 13 +++++++------
 web/app/components/projects/index.hbs           |  4 ++--
 web/app/components/projects/index.ts            |  6 ------
 web/app/routes/authenticated/projects/index.ts  |  7 +++----
 web/mirage/config.ts                            | 13 +++++++++++--
 5 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/web/app/components/projects/add-to-or-create.ts b/web/app/components/projects/add-to-or-create.ts
index 8c3d80308..1d651826c 100644
--- a/web/app/components/projects/add-to-or-create.ts
+++ b/web/app/components/projects/add-to-or-create.ts
@@ -31,7 +31,7 @@ export default class ProjectsAddToOrCreate extends Component<ProjectsAddToOrCrea
   @tracked protected newProjectTitle = "";
   @tracked protected newProjectDescription = "";
   @tracked protected newProjectJiraObject = {};
-  @tracked private allProjects: HermesProject[] | null = null;
+  @tracked private activeProjects: HermesProject[] | null = null;
 
   /**
    * The projects that are shown in the search modal.
@@ -39,14 +39,13 @@ export default class ProjectsAddToOrCreate extends Component<ProjectsAddToOrCrea
    * that are already associated with the document.
    */
   protected get shownProjects() {
-    if (!this.allProjects) {
+    if (!this.activeProjects) {
       return [];
     }
 
-    return this.allProjects
+    return this.activeProjects
       .filter((project: HermesProject) => {
         return (
-          project.status === ProjectStatus.Active &&
           !this.args.document.projects?.includes(parseInt(project.id)) &&
           project.title.toLowerCase().includes(this.query.toLowerCase())
         );
@@ -89,8 +88,10 @@ export default class ProjectsAddToOrCreate extends Component<ProjectsAddToOrCrea
   protected loadProjects = task(async (dd: XDropdownListAnchorAPI) => {
     this.dd = dd;
 
-    this.allProjects = await this.fetchSvc
-      .fetch(`/api/${this.configSvc.config.api_version}/projects`)
+    this.activeProjects = await this.fetchSvc
+      .fetch(
+        `/api/${this.configSvc.config.api_version}/projects?status=${ProjectStatus.Active}`,
+      )
       .then((response) => response?.json());
 
     next(() => {
diff --git a/web/app/components/projects/index.hbs b/web/app/components/projects/index.hbs
index b553058b7..91d099f4b 100644
--- a/web/app/components/projects/index.hbs
+++ b/web/app/components/projects/index.hbs
@@ -17,9 +17,9 @@
   <WhatsAProject class="absolute top-1/2 right-0 -translate-y-1/2" />
 </div>
 
-{{#if this.shownProjects.length}}
+{{#if @projects.length}}
   <ol data-test-projects-list class="divided-list relative">
-    {{#each this.shownProjects as |project|}}
+    {{#each @projects as |project|}}
       <li data-test-project>
         <Project::Tile @project={{project}} />
       </li>
diff --git a/web/app/components/projects/index.ts b/web/app/components/projects/index.ts
index 6a1f63954..dcc23c32f 100644
--- a/web/app/components/projects/index.ts
+++ b/web/app/components/projects/index.ts
@@ -33,12 +33,6 @@ export default class ProjectsIndexComponent extends Component<ProjectsIndexCompo
       },
     ];
   }
-
-  protected get shownProjects() {
-    return this.args.projects.filter(
-      (project) => project.status === this.args.status,
-    );
-  }
 }
 
 declare module "@glint/environment-ember-loose/registry" {
diff --git a/web/app/routes/authenticated/projects/index.ts b/web/app/routes/authenticated/projects/index.ts
index bee868778..384e6a616 100644
--- a/web/app/routes/authenticated/projects/index.ts
+++ b/web/app/routes/authenticated/projects/index.ts
@@ -17,12 +17,11 @@ export default class AuthenticatedProjectsIndexRoute extends Route {
 
   async model(params: { status: string }) {
     const projects = await this.fetchSvc
-      .fetch(`/api/${this.configSvc.config.api_version}/projects`)
+      .fetch(
+        `/api/${this.configSvc.config.api_version}/projects?status=${params.status}`,
+      )
       .then((response) => response?.json());
 
-    // We'll eventually use the status param in the query;
-    // for now, we pass it to the component for local filtering
-
     return { projects, status: params.status as ProjectStatus };
   }
 }
diff --git a/web/mirage/config.ts b/web/mirage/config.ts
index 926998028..b900441e0 100644
--- a/web/mirage/config.ts
+++ b/web/mirage/config.ts
@@ -412,8 +412,17 @@ export default function (mirageConfig) {
       });
 
       // Fetch a list of projects.
-      this.get("/projects", () => {
-        const projects = this.schema.projects.all().models;
+      // If a status is provided, filter by it.
+      this.get("/projects", (schema, request) => {
+        const { status } = request.queryParams;
+
+        let projects;
+
+        if (status) {
+          projects = schema.projects.where({ status }).models;
+        } else {
+          projects = schema.projects.all().models;
+        }
         return new Response(
           200,
           {},