Compute filters count for my-projects page

Vizzuality · Dec 13, 2024 · d80ec9b · d80ec9b
1 parent 1189d30
commit d80ec9b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/client/src/app/my-projects/page.tsx b/client/src/app/my-projects/page.tsx
@@ -11,12 +11,6 @@ import { auth } from "@/app/auth/api/[...nextauth]/config";
 
 import MyProjectsView from "@/containers/my-projects";
 
-const filters = [
-  { label: "All", count: 15 },
-  { label: "Conservation", count: 5 },
-  { label: "Restoration", count: 10 },
-];
-
 export default async function MyProjects() {
   const queryClient = new QueryClient();
   const session = await auth();
@@ -36,7 +30,7 @@ export default async function MyProjects() {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <MyProjectsView filters={filters} />
+      <MyProjectsView />
     </HydrationBoundary>
   );
 }
diff --git a/client/src/containers/my-projects/index.tsx b/client/src/containers/my-projects/index.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+import { ACTIVITY } from "@shared/entities/activity.enum";
 import {
   flexRender,
   getCoreRowModel,
@@ -40,11 +41,7 @@ const LAYOUT_TRANSITIONS = {
   ease: "easeInOut",
 };
 
-export default function MyProjectsView({
-  filters,
-}: {
-  filters: { label: string; count: number }[];
-}) {
+export default function MyProjectsView() {
   const { data: session } = useSession();
   const queryKey = queryKeys.customProjects.all.queryKey;
   const { data } = client.customProjects.getCustomProjects.useQuery(
@@ -91,6 +88,24 @@ export default function MyProjectsView({
     enableRowSelection: true,
     enableMultiRowSelection: true,
   });
+  const filters = useMemo(
+    () => [
+      { label: "All", count: data?.data?.length || 0 },
+      {
+        label: "Conservation",
+        count:
+          data?.data?.filter((p) => p.activity === ACTIVITY.CONSERVATION)
+            .length || 0,
+      },
+      {
+        label: "Restoration",
+        count:
+          data?.data?.filter((p) => p.activity === ACTIVITY.RESTORATION)
+            .length || 0,
+      },
+    ],
+    [data?.data],
+  );
 
   return (
     <motion.div