feat(per-page): set and load from preferences

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

@@ -1,49 +1,93 @@
-import React from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
+import qs from 'qs';
 
-import './index.scss';
 import { Link } from 'react-router-dom';
+import { useConfig } from '@payloadcms/config-provider';
+import { usePreferences } from '../../utilities/Preferences';
+import { useSearchParams } from '../../utilities/SearchParams';
 import Popup from '../Popup';
 import Chevron from '../../icons/Chevron';
 
+import './index.scss';
+
 const baseClass = 'per-page';
 type Props = {
-  valueOptions: number[];
+  collectionSlug: string;
 }
 
-const PerPage: React.FC<Props> = ({ valueOptions }) => (
-  <div className={baseClass}>
-    <Popup
-      horizontalAlign="center"
-      button={(
-        <div>
-          Per Page:
-          <Chevron />
-        </div>
-      )}
-      backgroundColor="#333333"
-      render={({ close }) => (
-        <div>
-          <ul>
-            {valueOptions.map((option, i) => (
-              <li
-                className={`${baseClass}-item`}
-                key={i}
-              >
-                <Link
-                  to="/asdf"
-                  onClick={close}
-                >
-                  {option}
-                </Link>
-
-              </li>
-            ))}
-
-          </ul>
-        </div>
-      )}
-    />
-  </div>
-);
+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();
+  };
+
+  return (
+    <div className={baseClass}>
+      <Popup
+        horizontalAlign="center"
+        button={(
+          <div>
+            Per Page:
+            <Chevron />
+          </div>
+        )}
+        backgroundColor="#333333"
+        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}
+                  >
+                    <Link
+                      to={linkPath}
+                      onClick={() => closeAndSet({ close, option })}
+                    >
+                      {option}
+                    </Link>
+
+                  </li>
+                );
+              })}
+              ;
+
+            </ul>
+          </div>
+        )}
+      />
+    </div>
+  );
+};
 
 export default PerPage;

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

@@ -127,7 +127,7 @@ const DefaultList: React.FC<Props> = (props) => {
             numberOfNeighbors={1}
           />
           <PerPage
-            valueOptions={[10, 20, 50, 100]}
+            collectionSlug={slug}
           />
           {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 } } = useConfig();
+  const { serverURL, routes: { api, admin }, admin: { pagination: { default: defaultPagination } } } = useConfig();
   const { permissions } = useAuth();
   const location = useLocation();
   const { setStepNav } = useStepNav();
@@ -41,6 +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 collectionPermissions = permissions?.collections?.[slug];
   const hasCreatePermission = collectionPermissions?.create?.permission;
@@ -54,19 +55,28 @@ const ListView: React.FC<ListIndexProps> = (props) => {
   const { columns: listControlsColumns } = listControls;
 
   useEffect(() => {
-    const params = {
-      depth: 1,
-      page: undefined,
-      sort: undefined,
-      where: undefined,
-    };
-
-    if (page) params.page = page;
-    if (sort) params.sort = sort;
-    if (listControls?.where) params.where = listControls.where;
-
-    setParams(params);
-  }, [setParams, page, sort, listControls]);
+    const perPagePrefKey = `${collection.slug}-per-page`;
+
+    (async () => {
+      const currentLimit = await getPreference<number>(perPagePrefKey) || defaultPagination;
+      setLimit(currentLimit);
+
+      const params = {
+        depth: 1,
+        page: undefined,
+        sort: undefined,
+        where: undefined,
+        limit,
+      };
+
+      if (page) params.page = page;
+      if (sort) params.sort = sort;
+      if (limit && limit !== defaultPagination) params.limit = limit;
+      if (listControls?.where) params.where = listControls.where;
+
+      setParams(params);
+    })();
+  }, [setParams, page, sort, listControls, collection, defaultPagination, getPreference, limit]);
 
   useEffect(() => {
     setStepNav([