custom component w/ overridden filter params

sample.tsx

import React, { useEffect, useState } from "react";
import { AxiosResponse } from "axios";

import { useHistory, useLocation } from "react-router";
import {
  ActionProps,
  RecordsTable,
  RecordJSON,
  useNotice,
  useTranslation,
  ApiClient,
} from "admin-bro";
import {
  Box,
  Pagination,
  Text,
  useRecords,
  useSelectedRecords,
  ListActionResponse,
} from "admin-bro";
import {
  REFRESH_KEY,
  hasForceRefresh,
  removeForceRefresh,
} from "admin-bro/lib/frontend/components/actions/utils/append-force-refresh";

const PER_PAGE = 10;

type State = {
  records: RecordJSON[];
  page: number;
  perPage: number;
  total: number;
  loading: boolean;
  direction: "asc" | "desc";
  sortBy?: string;
  selectedRecords: RecordJSON[];
};

const customList: React.FC<ActionProps> = ({ resource, setTag }) => {
  const api = new ApiClient();

  const [records, setRecords] = useState<RecordJSON[]>([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [direction, setDirection] = useState<"asc" | "desc">("asc");
  const [sortBy, setSortBy] = useState<string | undefined>();
  const addNotice = useNotice();
  const { translateMessage } = useTranslation();
  const onNotice = useNotice();
  const location = useLocation();
  const history = useHistory();

  const resourceId: string = resource.id;

  const fetchData = () => {
    setLoading(true);
    const query = new URLSearchParams(location.search);
    query.set("filters.flaggedProfane", "true");

    const promise = api.resourceAction({
      actionName: "list",
      resourceId,
      params: query,
    }) as Promise<AxiosResponse<ListActionResponse>>;

    promise
      .then((response) => {
        const listActionResponse = response.data as ListActionResponse;
        if (listActionResponse.notice) {
          onNotice(listActionResponse.notice);
        }
        if (listActionResponse.redirectUrl) {
          history.push(listActionResponse.redirectUrl);

          return;
        }

        setRecords(listActionResponse.records);
        setPage(listActionResponse.meta.page);
        setTotal(listActionResponse.meta.total);
        setDirection(listActionResponse.meta.direction);
        setSortBy(listActionResponse.meta.sortBy);
        setLoading(false);
      })
      .catch(() => {
        addNotice({
          message: translateMessage("errorFetchingRecords", resourceId),
          type: "error",
        });
      });

    return promise;
  };

  useEffect(() => {
    if (hasForceRefresh(location.search)) {
      history.replace(
        [
          location.pathname,
          removeForceRefresh(location.search).toString(),
        ].join("?")
      );
    } else {
      fetchData();
    }
  }, [resourceId, location.search]);

  const {
    selectedRecords,
    handleSelect,
    handleSelectAll,
    setSelectedRecords,
  } = useSelectedRecords(records);

  useEffect(() => {
    if (setTag) {
      setTag(total.toString());
    }
  }, [total]);

  useEffect(() => {
    setSelectedRecords([]);
  }, [resource.id]);

  useEffect(() => {
    const search = new URLSearchParams(location.search);

    if (search.get(REFRESH_KEY)) {
      setSelectedRecords([]);
    }
  }, [location.search]);

  const handleActionPerformed = (): any => {
    fetchData();
  };

  const handlePaginationChange = (pageNumber: number): void => {
    const search = new URLSearchParams(location.search);
    search.set("page", pageNumber.toString());
    history.push({ search: search.toString() });
  };

  return (
    <Box variant="white">
      <RecordsTable
        resource={resource}
        records={records}
        actionPerformed={handleActionPerformed}
        onSelect={handleSelect}
        onSelectAll={handleSelectAll}
        selectedRecords={selectedRecords}
        direction={direction}
        sortBy={sortBy}
        isLoading={loading}
      />
      <Text mt="xl" textAlign="center">
        <Pagination
          page={page}
          perPage={PER_PAGE}
          total={total}
          onChange={handlePaginationChange}
        />
      </Text>
    </Box>
  );
};

export default customList;