feat: add preselected filters

src/components/learner-credit-management/MultipleBudgetsPicker.jsx

@@ -1,19 +1,94 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
   DataTable,
   CardView,
   TextFilter,
-  CheckboxFilter,
   Row,
   Col,
+  Form,
+  Stack,
+  Badge,
+  FormLabel
 } from '@openedx/paragon';
 import groupBy from 'lodash/groupBy';
 
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import BudgetCard from './BudgetCard';
 import { getBudgetStatus, getTranslatedBudgetStatus, orderBudgets } from './data/utils';
 
+let lastId = 0;
+
+const newId = (prefix = 'id') => {
+  lastId += 1;
+  return `${prefix}${lastId}`;
+};
+
+function useFirstRender() {
+  const ref = useRef(true);
+  const firstRender = ref.current;
+  ref.current = false;
+  return firstRender;
+}
+
+function BudgetCheckboxFilter({
+  column: {
+    filterValue, setFilter, Header, filterChoices, getHeaderProps,
+  },
+}) {
+
+  let checkedBoxes = filterValue || [];
+
+  const isFirstRender = useFirstRender();
+
+  useEffect(() => {
+    console.log(checkedBoxes);
+    if (isFirstRender) {
+      checkedBoxes = ["Active"];
+    } else {
+      checkedBoxes = filterValue;
+    }
+    setFilter(checkedBoxes);
+  }, [filterValue])
+
+  const ariaLabel = useRef(newId(`checkbox-filter-label-${getHeaderProps().key}-`));
+
+  const changeCheckbox = (value) => {
+    if (checkedBoxes.includes(value)) {
+      const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);
+      return setFilter(newCheckedBoxes);
+    }
+    checkedBoxes.push(value);
+    return setFilter(checkedBoxes);
+  };
+  const headerBasedId = useMemo(() => `checkbox-filter-check-${getHeaderProps().key}-`, [getHeaderProps]);
+
+  return (
+    <Form.Group role="group" aria-labelledby={ariaLabel.current}>
+      <FormLabel id={ariaLabel.current} className="pgn__checkbox-filter-label">{Header}</FormLabel>
+      <Form.CheckboxSet name={Header} value={checkedBoxes}
+      >
+        {filterChoices.map(({ name, number, value }) => {
+          console.log(name, checkedBoxes.includes(value), number)
+          return (
+            <Form.Checkbox
+              key={`${headerBasedId}${name}`}
+              value={name}
+              checked={checkedBoxes.includes(value)}
+              onChange={() => changeCheckbox(value)}
+              aria-label={name}
+            >
+              <Stack direction="horizontal" gap={2}>
+                {name} {number !== undefined && <Badge variant="light">{number}</Badge>}
+              </Stack>
+            </Form.Checkbox>
+          )
+        })}
+      </Form.CheckboxSet>
+    </Form.Group>
+  );
+}
+
 const MultipleBudgetsPicker = ({
   budgets,
   enterpriseUUID,
@@ -88,7 +163,7 @@ const MultipleBudgetsPicker = ({
             }),
             accessor: 'status',
             filter: 'includesValue',
-            Filter: CheckboxFilter,
+            Filter: BudgetCheckboxFilter,
             filterChoices: reducedChoices,
           },
         ]}