add paginator

src/CAREUI/misc/PaginatedList.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 import { QueryRoute } from "../../Utils/request/types";
 import { PaginatedResponse } from "../../Utils/request/usePaginatedQuery";
 import useQuery, { QueryOptions } from "../../Utils/request/useQuery";
@@ -7,13 +7,16 @@ import ButtonV2, {
 } from "../../Components/Common/components/ButtonV2";
 import CareIcon from "../icons/CareIcon";
 import { classNames } from "../../Utils/utils";
+import Pagination from "../../Components/Common/Pagination";
 
 const DEFAULT_PER_PAGE_LIMIT = 14;
 
 interface PaginatedListContext<TItem>
   extends ReturnType<typeof useQuery<PaginatedResponse<TItem>>> {
   items: TItem[];
   perPage: number;
+  currentPage: number;
+  setPage: (page: number) => void;
 }
 
 const context = createContext<PaginatedListContext<object> | null>(null);
@@ -44,11 +47,14 @@ export default function PaginatedList<TItem extends object>({
     ...queryOptions,
     query: { ...queryOptions.query, limit: perPage },
   });
+  const [currentPage, setPage] = useState(1);
 
   const items = query.data?.results ?? [];
 
   return (
-    <context.Provider value={{ ...query, items, perPage }}>
+    <context.Provider
+      value={{ ...query, items, perPage, currentPage, setPage }}
+    >
       <context.Consumer>
         {(ctx) => children(ctx as PaginatedListContext<TItem>)}
       </context.Consumer>
@@ -135,3 +141,23 @@ const Items = <TItem extends object>(props: ItemsProps<TItem>) => {
 };
 
 PaginatedList.Items = Items;
+
+interface PaginatorProps {
+  className?: string;
+}
+
+const Paginator = ({ className }: PaginatorProps) => {
+  const { data, perPage, currentPage, setPage } = useContextualized<object>();
+
+  return (
+    <Pagination
+      className={className}
+      cPage={currentPage}
+      data={{ totalCount: data?.count ?? 0 }}
+      defaultPerPage={perPage}
+      onChange={setPage}
+    />
+  );
+};
+
+PaginatedList.Paginator = Paginator;

src/Components/Facility/LocationManagement.tsx

@@ -48,6 +48,10 @@ export default function LocationManagement({ facilityId }: Props) {
           <PaginatedList.Items<LocationModel> className="m-8 flex grow flex-col gap-3">
             {(item) => <Location {...item} />}
           </PaginatedList.Items>
+
+          <div className="flex w-full items-center justify-center">
+            <PaginatedList.Paginator />
+          </div>
         </Page>
       )}
     </PaginatedList>