[F] Add query params to spam mitigation lists

ManifoldScholar · Dec 12, 2024 · 03b57c9 · 03b57c9
1 parent e6bb5fd
commit 03b57c9
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 111 deletions.
diff --git a/...ist/EntitiesList/List/bulkActions/hook.js → ...st/EntitiesList/List/bulkActions/hooks.js b/...ist/EntitiesList/List/bulkActions/hook.js → ...st/EntitiesList/List/bulkActions/hooks.js
@@ -66,3 +66,27 @@ export default function useBulkActions(records, filters) {
     removeItem
   };
 }
+
+export const useClearBulkSelectionWithFilters = (
+  baseOnReset,
+  baseSetFilter,
+  resetBulkSelection,
+  bulkSelectionEmpty
+) => {
+  const setParam = useCallback(
+    (param, value) => {
+      baseSetFilter(param, value);
+
+      if (!bulkSelectionEmpty) resetBulkSelection();
+    },
+    [bulkSelectionEmpty, resetBulkSelection, baseSetFilter]
+  );
+
+  const onReset = useCallback(() => {
+    baseOnReset();
+
+    if (!bulkSelectionEmpty) resetBulkSelection();
+  }, [bulkSelectionEmpty, resetBulkSelection, baseOnReset]);
+
+  return { setParam, onReset };
+};
diff --git a/client/src/backend/components/list/EntitiesList/List/bulkActions/index.js b/client/src/backend/components/list/EntitiesList/List/bulkActions/index.js
@@ -1,6 +1,12 @@
 import Checkbox from "./Checkbox";
 import SelectAll from "./SelectAll";
-import useBulkActions from "./hook";
+import useBulkActions, { useClearBulkSelectionWithFilters } from "./hooks";
 import BulkActionButtons from "./Buttons";
 
-export { Checkbox, SelectAll, BulkActionButtons, useBulkActions };
+export {
+  Checkbox,
+  SelectAll,
+  BulkActionButtons,
+  useBulkActions,
+  useClearBulkSelectionWithFilters
+};
diff --git a/client/src/backend/containers/annotations/List.js b/client/src/backend/containers/annotations/List.js
@@ -6,19 +6,15 @@ import EntitiesList, {
   Search,
   AnnotationRow
 } from "backend/components/list/EntitiesList";
-import {
-  useFetch,
-  usePaginationState,
-  useFilterState,
-  useApiCallback
-} from "hooks";
+import { useFetch, useApiCallback, useListQueryParams } from "hooks";
 import withFilteredLists, { annotationFilters } from "hoc/withFilteredLists";
 import withConfirmation from "hoc/withConfirmation";
 import PageHeader from "backend/components/layout/PageHeader";
 import lh from "helpers/linkHandler";
 import { childRoutes } from "helpers/router";
 import {
   useBulkActions,
+  useClearBulkSelectionWithFilters,
   SelectAll,
   BulkActionButtons
 } from "backend/components/list/EntitiesList/List/bulkActions";
@@ -31,11 +27,13 @@ function AnnotationsList({
 }) {
   const { t } = useTranslation();
 
-  const [pagination, setPageNumber] = usePaginationState(1, 10);
-  const baseFilters = entitiesListSearchParams.initialannotations;
-  const [filters, setFilters] = useFilterState({
-    ...baseFilters,
-    formats: ["annotation"]
+  const { pagination, filters, searchProps } = useListQueryParams({
+    initSize: 10,
+    initFilters: {
+      ...entitiesListSearchParams.initialannotations,
+      formats: ["annotation"]
+    },
+    initSearchProps: entitiesListSearchProps("annotations")
   });
 
   const { data: annotations, meta, refresh } = useFetch({
@@ -54,26 +52,12 @@ function AnnotationsList({
     removeItem
   } = useBulkActions(annotations, filters);
 
-  const { setParam, onReset, ...searchProps } = entitiesListSearchProps(
-    "annotations"
+  const { onReset, setParam } = useClearBulkSelectionWithFilters(
+    searchProps.onReset,
+    searchProps.setParam,
+    resetBulkSelection,
+    bulkSelectionEmpty
   );
-  const updatedSetParam = (param, value) => {
-    setParam(param, value);
-    setFilters({ newState: { ...filters, [param.as || param.name]: value } });
-
-    if (!bulkSelectionEmpty) resetBulkSelection();
-  };
-  const updatedOnReset = () => {
-    onReset();
-    setFilters({
-      newState: {
-        ...baseFilters,
-        formats: ["annotation"]
-      }
-    });
-
-    if (!bulkSelectionEmpty) resetBulkSelection();
-  };
 
   const bulkDelete = useApiCallback(annotationsAPI.bulkDelete);
 
@@ -125,11 +109,7 @@ function AnnotationsList({
           }}
           entities={annotations}
           search={
-            <Search
-              {...searchProps}
-              setParam={updatedSetParam}
-              onReset={updatedOnReset}
-            />
+            <Search {...searchProps} setParam={setParam} onReset={onReset} />
           }
           pagination={meta.pagination}
           showCount={
@@ -146,9 +126,6 @@ function AnnotationsList({
             )
           }
           unit={unit}
-          callbacks={{
-            onPageClick: page => () => setPageNumber(page)
-          }}
           buttons={[
             <BulkActionButtons
               active={bulkActionsActive}

diff --git a/client/src/backend/containers/reading-group/Annotations.js b/client/src/backend/containers/reading-group/Annotations.js
@@ -6,12 +6,7 @@ import lh from "helpers/linkHandler";
 import { childRoutes } from "helpers/router";
 import { readingGroupsAPI, annotationsAPI } from "api";
 import { withRouter } from "react-router-dom";
-import {
-  useFetch,
-  usePaginationState,
-  useApiCallback,
-  useFilterState
-} from "hooks";
+import { useFetch, useApiCallback, useListQueryParams } from "hooks";
 import EntitiesList, {
   Search,
   AnnotationRow
@@ -20,6 +15,7 @@ import withConfirmation from "hoc/withConfirmation";
 import withFilteredLists, { annotationFilters } from "hoc/withFilteredLists";
 import {
   useBulkActions,
+  useClearBulkSelectionWithFilters,
   SelectAll,
   BulkActionButtons
 } from "backend/components/list/EntitiesList/List/bulkActions";
@@ -34,11 +30,13 @@ function ReadingGroupAnnotationsContainer({
 }) {
   const { t } = useTranslation();
 
-  const [pagination, setPageNumber] = usePaginationState();
-  const baseFilters = entitiesListSearchParams.initialannotations;
-  const [filters, setFilters] = useFilterState({
-    ...baseFilters,
-    formats: ["annotation"]
+  const { pagination, filters, searchProps } = useListQueryParams({
+    initSize: 20,
+    initFilters: {
+      ...entitiesListSearchParams.initialannotations,
+      formats: ["annotation"]
+    },
+    initSearchProps: entitiesListSearchProps("annotations")
   });
 
   const { data, refresh: refreshAnnotations, meta } = useFetch({
@@ -61,26 +59,12 @@ function ReadingGroupAnnotationsContainer({
     removeItem
   } = useBulkActions(data, filters);
 
-  const { setParam, onReset, ...searchProps } = entitiesListSearchProps(
-    "annotations"
+  const { onReset, setParam } = useClearBulkSelectionWithFilters(
+    searchProps.onReset,
+    searchProps.setParam,
+    resetBulkSelection,
+    bulkSelectionEmpty
   );
-  const updatedSetParam = (param, value) => {
-    setParam(param, value);
-    setFilters({ newState: { ...filters, [param.as || param.name]: value } });
-
-    if (!bulkSelectionEmpty) resetBulkSelection();
-  };
-  const updatedOnReset = () => {
-    onReset();
-    setFilters({
-      newState: {
-        ...baseFilters,
-        formats: ["annotation"]
-      }
-    });
-
-    if (!bulkSelectionEmpty) resetBulkSelection();
-  };
 
   const bulkDelete = useApiCallback(annotationsAPI.bulkDelete);
 
@@ -129,11 +113,7 @@ function ReadingGroupAnnotationsContainer({
           unit={unit}
           pagination={meta.pagination}
           search={
-            <Search
-              {...searchProps}
-              setParam={updatedSetParam}
-              onReset={updatedOnReset}
-            />
+            <Search {...searchProps} setParam={setParam} onReset={onReset} />
           }
           showCount={
             bulkActionsActive ? (
@@ -148,9 +128,6 @@ function ReadingGroupAnnotationsContainer({
               true
             )
           }
-          callbacks={{
-            onPageClick: page => () => setPageNumber(page)
-          }}
           buttons={[
             <BulkActionButtons
               active={bulkActionsActive}

diff --git a/client/src/backend/containers/reading-groups/List.js b/client/src/backend/containers/reading-groups/List.js
@@ -6,16 +6,12 @@ import EntitiesList, {
   Search,
   ReadingGroupRow
 } from "backend/components/list/EntitiesList";
-import {
-  useFetch,
-  usePaginationState,
-  useFilterState,
-  useApiCallback
-} from "hooks";
+import { useFetch, useApiCallback, useListQueryParams } from "hooks";
 import withFilteredLists, { readingGroupFilters } from "hoc/withFilteredLists";
 import withConfirmation from "hoc/withConfirmation";
 import {
   useBulkActions,
+  useClearBulkSelectionWithFilters,
   SelectAll,
   BulkActionButtons
 } from "backend/components/list/EntitiesList/List/bulkActions";
@@ -27,11 +23,13 @@ function ReadingGroupsList({
 }) {
   const { t } = useTranslation();
 
-  const [pagination, setPageNumber] = usePaginationState(1, 10);
-  const baseFilters = entitiesListSearchParams.initialreadingGroups;
-  const [filters, setFilters] = useFilterState({
-    ...baseFilters,
-    order: "created_at_desc"
+  const { pagination, filters, searchProps } = useListQueryParams({
+    initSize: 10,
+    initFilters: {
+      ...entitiesListSearchParams.initialreadingGroups,
+      order: "created_at_desc"
+    },
+    initSearchProps: entitiesListSearchProps("readingGroups")
   });
 
   const { data: readingGroups, meta, refresh } = useFetch({
@@ -50,21 +48,12 @@ function ReadingGroupsList({
     removeItem
   } = useBulkActions(readingGroups, filters);
 
-  const { setParam, onReset, ...searchProps } = entitiesListSearchProps(
-    "readingGroups"
+  const { onReset, setParam } = useClearBulkSelectionWithFilters(
+    searchProps.onReset,
+    searchProps.setParam,
+    resetBulkSelection,
+    bulkSelectionEmpty
   );
-  const updatedSetParam = (param, value) => {
-    setParam(param, value);
-    setFilters({ newState: { ...filters, [param.as || param.name]: value } });
-
-    if (!bulkSelectionEmpty) resetBulkSelection();
-  };
-  const updatedOnReset = () => {
-    onReset();
-    setFilters({ newState: baseFilters });
-
-    if (!bulkSelectionEmpty) resetBulkSelection();
-  };
 
   const destroyRG = useApiCallback(readingGroupsAPI.destroy);
 
@@ -119,11 +108,7 @@ function ReadingGroupsList({
           titleIcon="ReadingGroup24"
           titleStyle="bar"
           search={
-            <Search
-              {...searchProps}
-              setParam={updatedSetParam}
-              onReset={updatedOnReset}
-            />
+            <Search {...searchProps} setParam={setParam} onReset={onReset} />
           }
           pagination={meta.pagination}
           showCount={
@@ -141,9 +126,6 @@ function ReadingGroupsList({
           }
           showCountInTitle
           unit={unit}
-          callbacks={{
-            onPageClick: page => () => setPageNumber(page)
-          }}
           buttons={[
             <BulkActionButtons
               active={bulkActionsActive}