Skip to content

Commit

Permalink
add participants count to column in batch overview (#118)
Browse files Browse the repository at this point in the history
  • Loading branch information
@phipsae
phipsae authored Nov 20, 2024
1 parent 7e0136f commit 73b2156
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 58 deletions.
21 changes: 20 additions & 1 deletion packages/backend/routes/batches.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
87 changes: 30 additions & 57 deletions packages/react-app/pages/admin/batches.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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);

Expand All @@ -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 }) => (
Expand All @@ -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);
}}
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -210,7 +178,7 @@ export default function Batches({ serverUrl, userRole, mainnetProvider }) {
return allColumns;
},
// eslint-disable-next-line
[userRole, graduatesCount],
[userRole],
);

const {
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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 ? (
Expand All @@ -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>
))}
Expand Down

0 comments on commit 73b2156

Please sign in to comment.