refactor: support checkboxes in BaseTable

add better support for checkboxes in the `BaseTable` as the
previous implementation inside of `TableAction` was a mess.

Author: kouloumos

src/components/tables/AdminReviewsTable.tsx

@@ -1,5 +1,4 @@
 import {
-  CheckboxGroup,
   Flex,
   Td,
   Text,
@@ -18,6 +17,7 @@ import { dateFormatGeneral } from "@/utils";
 import { getReviewStatus } from "@/utils/review";
 import { format } from "date-fns";
 import { useHasPermission } from "@/hooks/useHasPermissions";
+import { useRouter } from "next/router";
 
 const tableStructure = [
   {
@@ -114,23 +114,23 @@ type Props = {
   refetch: () => void;
 };
 
-type AdminResetSelectProps = {
-  children: (props: {
-    handleReset: () => Promise<void>;
-    hasAdminSelected: boolean;
-    isResetting: boolean;
-  }) => React.ReactNode;
-};
-const AdminResetSelect = ({ children }: AdminResetSelectProps) => {
+const AdminReviewsTable = ({
+  isLoading,
+  isError,
+  hasFilters,
+  reviews,
+}: Props) => {
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const toast = useToast();
+  const router = useRouter();
   const { data: userSession } = useSession();
 
   const queryClient = useQueryClient();
   const resetReview = useResetReview();
-  const handleCheckboxToggle = (values: (string | number)[]) => {
-    setSelectedIds(values.map(String));
-  };
+
+  const canResetReviews = useHasPermission("resetReviews");
+  const { status } = router.query;
+
   const handleReset = async () => {
     const ids = selectedIds.map(Number);
 
@@ -164,46 +164,29 @@ const AdminResetSelect = ({ children }: AdminResetSelectProps) => {
   };
 
   return (
-    <CheckboxGroup colorScheme="orange" onChange={handleCheckboxToggle}>
-      {children({
-        handleReset,
-        hasAdminSelected: selectedIds.length > 0,
-        isResetting: resetReview.isLoading,
-      })}
-    </CheckboxGroup>
-  );
-};
-
-const AdminReviewsTable = ({
-  isLoading,
-  isError,
-  hasFilters,
-  reviews,
-}: Props) => {
-  const canResetReviews = useHasPermission("resetReviews");
-  return (
-    <AdminResetSelect>
-      {({ handleReset, hasAdminSelected, isResetting }) => (
-        <BaseTable
-          data={reviews}
-          emptyView={<EmptyView hasFilters={hasFilters} />}
-          isLoading={isLoading}
-          isError={isError}
-          tableStructure={tableStructure}
-          showAdminControls={canResetReviews}
-          actionItems={
-            <>
-              {hasAdminSelected && (
-                <ResetButton
-                  isLoading={isResetting}
-                  handleRequest={handleReset}
-                />
-              )}
-            </>
-          }
-        />
-      )}
-    </AdminResetSelect>
+    <>
+      <BaseTable
+        data={reviews}
+        emptyView={<EmptyView hasFilters={hasFilters} />}
+        isLoading={isLoading}
+        isError={isError}
+        tableStructure={tableStructure}
+        enableCheckboxes={canResetReviews && status == "active"}
+        selectedRowIds={selectedIds}
+        onSelectedRowIdsChange={setSelectedIds}
+        getRowId={(row) => `${row.id}`}
+        actionItems={
+          <>
+            {selectedIds.length > 0 && (
+              <ResetButton
+                isLoading={resetReview.isLoading}
+                handleRequest={handleReset}
+              />
+            )}
+          </>
+        }
+      />
+    </>
   );
 };
 

src/components/tables/BaseTable.tsx

@@ -1,4 +1,15 @@
-import { Box, Flex, Heading, Table, Tbody, Thead, Tr } from "@chakra-ui/react";
+import {
+  Box,
+  Checkbox,
+  CheckboxGroup,
+  Flex,
+  Heading,
+  Table,
+  Tbody,
+  Thead,
+  Tr,
+  Td,
+} from "@chakra-ui/react";
 import {
   QueryObserverResult,
   RefetchOptions,
@@ -26,7 +37,10 @@ type Props<T> = {
   tableStructure: TableStructure<T>[];
   tableHeader?: string;
   tableHeaderComponent?: React.ReactNode;
-  showAdminControls?: boolean;
+  enableCheckboxes?: boolean;
+  selectedRowIds?: string[];
+  onSelectedRowIdsChange?: (selectedRowIds: string[]) => void;
+  getRowId?: (row: T) => string;
 };
 
 const BaseTable = <T extends object>({
@@ -38,7 +52,10 @@ const BaseTable = <T extends object>({
   tableStructure,
   tableHeader,
   tableHeaderComponent,
-  showAdminControls = false,
+  enableCheckboxes = false, // Default to no checkboxes
+  selectedRowIds = [],
+  onSelectedRowIdsChange: setSelectedIds,
+  getRowId,
 }: Props<T>) => {
   return (
     <Box fontSize="sm" py={4} isolation="isolate">
@@ -53,58 +70,70 @@ const BaseTable = <T extends object>({
         {actionItems}
         {refetch && <RefetchButton refetch={refetch} />}
       </Flex>
-      <Table
-        boxShadow="lg"
-        borderTop="4px solid"
-        borderTopColor="orange.400"
-        borderRadius="xl"
+      <CheckboxGroup
+        colorScheme="orange"
+        value={selectedRowIds}
+        onChange={setSelectedIds}
       >
-        <Thead>
-          <TableHeader tableStructure={tableStructure} />
-        </Thead>
-        <Tbody fontWeight="medium">
-          {isLoading ? (
-            <LoadingSkeleton rowsLength={tableStructure.length} />
-          ) : !data ? (
-            <DataEmpty />
-          ) : data?.length ? (
-            data.map((dataRow, idx) => (
-              <TableRow
-                showControls={showAdminControls}
-                key={`data-id-${
-                  "id" in dataRow ? dataRow.id : ""
-                }-data-row-${idx}`}
-                row={dataRow}
-                ts={tableStructure}
+        <Table
+          boxShadow="lg"
+          borderTop="4px solid"
+          borderTopColor="orange.400"
+          borderRadius="xl"
+        >
+          <Thead>
+            <TableHeader
+              tableStructure={tableStructure}
+              showCheckboxes={enableCheckboxes}
+            />
+          </Thead>
+          <Tbody fontWeight="medium">
+            {isLoading ? (
+              <LoadingSkeleton
+                rowsLength={tableStructure.length + (enableCheckboxes ? 1 : 0)}
               />
-            ))
-          ) : (
-            <DataEmpty message={emptyView} />
-          )}
-        </Tbody>
-      </Table>
+            ) : !data ? (
+              <DataEmpty />
+            ) : data?.length ? (
+              data.map((dataRow, idx) => (
+                <TableRow
+                  key={getRowId ? getRowId(dataRow) : idx}
+                  row={dataRow}
+                  ts={tableStructure}
+                  enableCheckboxes={enableCheckboxes}
+                  rowId={getRowId ? getRowId(dataRow) : `${idx}`}
+                />
+              ))
+            ) : (
+              <DataEmpty message={emptyView} />
+            )}
+          </Tbody>
+        </Table>
+      </CheckboxGroup>
     </Box>
   );
 };
 
 const TableRow = <T extends object>({
   row,
   ts,
-  showControls,
+  enableCheckboxes,
+  rowId,
 }: {
   row: T;
   ts: TableStructure<T>[];
-  showControls: boolean;
+  enableCheckboxes: boolean;
+  rowId: string;
 }) => {
   return (
     <Tr>
+      {enableCheckboxes && (
+        <Td>
+          <Checkbox value={rowId} key={rowId} width="1%" />
+        </Td>
+      )}
       {ts.map((tableItem) => (
-        <RowData
-          showControls={showControls}
-          key={tableItem.name}
-          tableItem={tableItem}
-          row={row}
-        />
+        <RowData key={tableItem.name} tableItem={tableItem} row={row} />
       ))}
     </Tr>
   );