add participants count to column in batch overview

packages/backend/routes/batches.js

@@ -8,8 +8,27 @@ const router = express.Router();
 
 router.get("/", async (req, res) => {
   console.log("/batches");
+
+  const builders = await db.findAllBatchedUsers();
   const batches = await db.findAllBatches();
-  res.status(200).send(batches);
+
+  const stats = batches.map(batch => {
+    const batchBuilders = builders.filter(builder => builder.batch?.number === batch.name);
+    const batchGraduates = batchBuilders.filter(builder => builder.batch?.status === "graduate");
+
+    return {
+      id: batch.id,
+      name: batch.name,
+      status: batch.status,
+      startDate: batch.startDate,
+      telegramLink: batch.telegramLink,
+      contractAddress: batch.contractAddress,
+      totalParticipants: batchBuilders.length,
+      graduates: batchGraduates.length,
+    };
+  });
+
+  res.status(200).json(stats);
 });
 
 router.get("/latest-open", async (req, res) => {

packages/react-app/pages/admin/batches.jsx

@@ -35,7 +35,6 @@ import { BatchCrudFormModal } from "../../components/batches/BatchCrudForm";
 import BatchesListSkeleton from "../../components/skeletons/BatchesListSkeleton";
 
 const serverPathBatches = "/batches";
-const serverPathBatchGraduateBuilders = "/builders/batch-graduates";
 
 const BatchColumnFilter = ({ column: { filterValue, setFilter } }) => {
   const { baseColor } = useCustomColorModes();
@@ -61,8 +60,6 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
   const isAdmin = userRole === USER_ROLES.admin;
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [selectedBatch, setSelectedBatch] = useState(null);
-  const [amountBatches, setAmountBatches] = useState();
-  const [graduatesCount, setGraduatesCount] = useState({});
 
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
 
@@ -79,63 +76,34 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
     setIsLoadingBatches(true);
     try {
       const fetchedBatches = await axios.get(serverUrl + serverPathBatches);
-      const processedBatches = fetchedBatches.data.map(batch => ({
-        batch: batch,
-        batchName: batch.name,
-        status: batch.status,
-        startDate: batch.startDate,
-      }));
-      setBatches(processedBatches);
-      setAmountBatches(processedBatches.length);
+      setBatches(fetchedBatches.data);
     } catch (error) {
       console.error("Error fetching batches:", error);
     } finally {
       setIsLoadingBatches(false);
     }
   }, [serverUrl]);
 
-  const fetchGraduatesCount = useCallback(async () => {
-    const fetchedBatchGraduateBuilders = await axios.get(serverUrl + serverPathBatchGraduateBuilders);
-    const graduatesCounts = {};
-
-    batches.forEach(
-      batch => {
-        const batchName = batch.batchName;
-        graduatesCounts[batchName] = 0;
-
-        fetchedBatchGraduateBuilders.data.forEach(builder => {
-          if (builder.batch && builder.batch.number === String(batchName)) {
-            graduatesCounts[batchName]++;
-          }
-        });
-      },
-      [batches],
-    );
-
-    setGraduatesCount(graduatesCounts);
-  }, [batches, serverUrl]);
-
   useEffect(() => {
     fetchBatches();
   }, [fetchBatches]);
 
-  useEffect(() => {
-    if (batches.length > 0) {
-      fetchGraduatesCount();
-    }
-  }, [batches, fetchGraduatesCount]);
-
-  const BatchNameCellComponent = ({ row }) => (
-    <BatchNameCell batch={row.original.batchName} status={row.original.status} />
-  );
+  const BatchNameCellComponent = ({ row }) => <BatchNameCell batch={row.original.name} status={row.original.status} />;
   const BatchCreatedCellComponent = ({ value }) => {
     return <ExactDateWithTooltip timestamp={value} />;
   };
-  const BatchLinksCellComponent = ({ value }) => <BatchLinksCell batch={value} />;
+  const BatchLinksCellComponent = ({ row }) => {
+    return <BatchLinksCell batch={row.original} />;
+  };
   const BatchStatusCellComponent = ({ value }) => <BatchStatusCell status={value} />;
-  const BatchGraduatesCellComponent = ({ row }) => {
-    const count = graduatesCount[row.original.batchName] || 0;
-    return <Text>{count}</Text>;
+  const BatchBuildersCountCellComponent = ({ row }) => {
+    const gradCount = row.original.graduates;
+    const partCount = row.original.totalParticipants;
+    return (
+      <Text textAlign="center">
+        {gradCount} / {partCount}
+      </Text>
+    );
   };
 
   const BatchEditComponent = ({ row }) => (
@@ -148,8 +116,8 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
         isDisabled={!isAdmin}
         onClick={() => {
           setSelectedBatch({
-            ...row.original.batch,
-            id: row.original.batch.id,
+            ...row.original,
+            id: row.original.id,
           });
           setIsEditModalOpen(true);
         }}
@@ -162,9 +130,8 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
       const allColumns = [
         {
           Header: "Batch",
-          accessor: "batchName",
+          accessor: "name",
           canFilter: true,
-          disableSortBy: true,
           Filter: BatchColumnFilter,
           filter: batchFiltering,
           Cell: BatchNameCellComponent,
@@ -183,14 +150,15 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
           Cell: BatchCreatedCellComponent,
         },
         {
-          Header: "Graduates",
-          accessor: row => graduatesCount[row.batchName] || 0,
+          Header: "Graduates / Participants",
+          accessor: row => row.graduates,
           disableFilters: true,
-          Cell: BatchGraduatesCellComponent,
+          Cell: BatchBuildersCountCellComponent,
+          headerAlign: "center",
         },
         {
           Header: "Links",
-          accessor: "batch",
+          accessor: row => row.original,
           disableSortBy: true,
           disableFilters: true,
           Cell: BatchLinksCellComponent,
@@ -210,7 +178,7 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
       return allColumns;
     },
     // eslint-disable-next-line
-    [userRole, graduatesCount],
+    [userRole],
   );
 
   const {
@@ -251,7 +219,7 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
             <Center mb={5} flexDir="column">
               <Box mb={2}>
                 <chakra.strong mr={2}>Total batches:</chakra.strong>
-                {amountBatches}
+                {batches.length}
               </Box>
               <Flex direction={{ base: "column", md: "row" }} alignItems="center" mb={4}>
                 <InputGroup mr={{ md: 4 }} mb={{ base: 4, md: 0 }} width={{ base: "100%", md: "auto" }} height="40px">
@@ -280,7 +248,12 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
                 {headerGroups.map((headerGroup, index) => (
                   <Tr {...headerGroup.getHeaderGroupProps()} key={index}>
                     {headerGroup.headers.map(column => (
-                      <Th {...column.getHeaderProps(column.getSortByToggleProps())} key={column.id} whiteSpace="nowrap">
+                      <Th
+                        {...column.getHeaderProps(column.getSortByToggleProps())}
+                        key={column.id}
+                        whiteSpace="nowrap"
+                        textAlign={column.headerAlign || "left"}
+                      >
                         {column.render("Header")}
                         <chakra.span key={`span-${index}`} pl="4">
                           {column.isSorted ? (
@@ -302,7 +275,7 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
                   return (
                     <Tr {...row.getRowProps()} key={row.id}>
                       {row.cells.map(cell => (
-                        <Td {...cell.getCellProps()} key={cell.column.id}>
+                        <Td {...cell.getCellProps()} key={cell.column.id} textAlign={cell.column.align || "left"}>
                           {cell.render("Cell")}
                         </Td>
                       ))}