wip(per-page): thread the needle, not working

src/admin/components/elements/PerPage/index.tsx

@@ -12,35 +12,12 @@ import './index.scss';
 
 const baseClass = 'per-page';
 type Props = {
-  collectionSlug: string;
+  setLimit: (limit: number) => void;
+  limit: number;
 }
 
-const PerPage: React.FC<Props> = ({ collectionSlug }) => {
-  const preferencesKey = `${collectionSlug}-per-page`;
-  const { admin: { pagination: { default: defaultPagination, options } } } = useConfig();
-  const { getPreference, setPreference } = usePreferences();
-  const [, setPerPage] = useState(defaultPagination);
-  const searchParams = useSearchParams();
-
-  const updatePerPage = useCallback((perPage) => {
-    setPerPage(perPage);
-    setPreference(preferencesKey, perPage);
-  }, [setPerPage, setPreference, preferencesKey]);
-
-  useEffect(() => {
-    const asyncGetPreference = async () => {
-      const perPageFromPreferences = await getPreference<number>(preferencesKey) || defaultPagination;
-      setPerPage(perPageFromPreferences);
-    };
-
-    asyncGetPreference();
-  }, [defaultPagination, preferencesKey, getPreference]);
-
-  const closeAndSet = ({ close, option }) => {
-    console.log(`Setting option: ${option}`);
-    updatePerPage(option);
-    close();
-  };
+const PerPage: React.FC<Props> = ({ setLimit }) => {
+  const { admin: { pagination: { options } } } = useConfig();
 
   return (
     <div className={baseClass}>
@@ -56,32 +33,23 @@ const PerPage: React.FC<Props> = ({ collectionSlug }) => {
         render={({ close }) => (
           <div>
             <ul>
-              {options.map((option, i) => {
-                const newParams = {
-                  ...searchParams,
-                  limit: option,
-                };
-
-                const search = qs.stringify(newParams);
-                const linkPath = `${collectionSlug}?${search}`;
-
-                return (
-                  <li
-                    className={`${baseClass}-item`}
-                    key={i}
+              {options.map((limitNumber, i) => (
+                <li
+                  className={`${baseClass}-item`}
+                  key={i}
+                >
+                  <button
+                    type="button"
+                    onClick={() => {
+                      close();
+                      setLimit(limitNumber);
+                    }}
                   >
-                    <Link
-                      to={linkPath}
-                      onClick={() => closeAndSet({ close, option })}
-                    >
-                      {option}
-                    </Link>
-
-                  </li>
-                );
-              })}
+                    {limitNumber}
+                  </button>
+                </li>
+              ))}
               ;
-
             </ul>
           </div>
         )}

src/admin/components/views/collections/List/Default.tsx

@@ -35,6 +35,8 @@ const DefaultList: React.FC<Props> = (props) => {
     newDocumentURL,
     setListControls,
     setSort,
+    limit,
+    setLimit,
     columns,
     hasCreatePermission,
   } = props;
@@ -127,7 +129,8 @@ const DefaultList: React.FC<Props> = (props) => {
             numberOfNeighbors={1}
           />
           <PerPage
-            collectionSlug={slug}
+            limit={limit}
+            setLimit={setLimit}
           />
           {data?.totalDocs > 0 && (
             <div className={`${baseClass}__page-info`}>

src/admin/components/views/collections/List/index.tsx

@@ -31,7 +31,7 @@ const ListView: React.FC<ListIndexProps> = (props) => {
     },
   } = props;
 
-  const { serverURL, routes: { api, admin }, admin: { pagination: { default: defaultPagination } } } = useConfig();
+  const { serverURL, routes: { api, admin }, admin: { pagination: { defaultLimit } } } = useConfig();
   const { permissions } = useAuth();
   const location = useLocation();
   const { setStepNav } = useStepNav();
@@ -41,7 +41,7 @@ const ListView: React.FC<ListIndexProps> = (props) => {
   const [listControls, setListControls] = useState<ListControls>({});
   const [columns, setColumns] = useState([]);
   const [sort, setSort] = useState(null);
-  const [limit, setLimit] = useState(defaultPagination);
+  const [limit, setLimit] = useState(defaultLimit);
 
   const collectionPermissions = permissions?.collections?.[slug];
   const hasCreatePermission = collectionPermissions?.create?.permission;
@@ -58,7 +58,7 @@ const ListView: React.FC<ListIndexProps> = (props) => {
     const perPagePrefKey = `${collection.slug}-per-page`;
 
     (async () => {
-      const currentLimit = await getPreference<number>(perPagePrefKey) || defaultPagination;
+      const currentLimit = await getPreference<number>(perPagePrefKey) || defaultLimit;
       setLimit(currentLimit);
 
       const params = {
@@ -71,12 +71,13 @@ const ListView: React.FC<ListIndexProps> = (props) => {
 
       if (page) params.page = page;
       if (sort) params.sort = sort;
-      if (limit && limit !== defaultPagination) params.limit = limit;
+      if (limit && limit !== defaultLimit) params.limit = limit;
       if (listControls?.where) params.where = listControls.where;
 
+      console.log(params);
       setParams(params);
     })();
-  }, [setParams, page, sort, listControls, collection, defaultPagination, getPreference, limit]);
+  }, [setParams, page, sort, listControls, collection, defaultLimit, getPreference, limit]);
 
   useEffect(() => {
     setStepNav([
@@ -106,6 +107,8 @@ const ListView: React.FC<ListIndexProps> = (props) => {
         listControls,
         data,
         columns,
+        setLimit,
+        limit,
       }}
     />
   );

src/admin/components/views/collections/List/types.ts

@@ -9,6 +9,8 @@ export type Props = {
   setSort: (sort: string) => void
   columns: Column[]
   hasCreatePermission: boolean
+  setLimit: (limit: number) => void
+  limit: number
 }
 
 export type ListIndexProps = {