Replaced pagination component (#2642)

* feat(backoffice-v2): replaced pagination component and added last page button * revert(backoffice-v2): removed unused isEmptyArray util * fix(backoffice-v2): removed sleep added by mistake
ballerine-io · Aug 14, 2024 · c4ea42e · c4ea42e
1 parent 3824fa4
commit c4ea42e
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 122 deletions.
diff --git a/apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.Last.tsx b/apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.Last.tsx
@@ -12,7 +12,10 @@ export const PaginationLast: FunctionComponent<
   <PaginationLink
     aria-label="Go to last page"
     size="default"
-    className={ctw('gap-1 pr-2.5', className)}
+    className={ctw(
+      'gap-1 pr-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+      className,
+    )}
     {...props}
   >
     <span

diff --git a/apps/backoffice-v2/src/common/components/molecules/UrlPagination/UrlPagination.tsx b/apps/backoffice-v2/src/common/components/molecules/UrlPagination/UrlPagination.tsx
@@ -5,6 +5,7 @@ import { PaginationItem } from '@/common/components/molecules/Pagination/Paginat
 import { PaginationFirst } from '@/common/components/molecules/Pagination/Pagination.First';
 import { PaginationPrevious } from '@/common/components/molecules/Pagination/Pagination.Previous';
 import { PaginationNext } from '@/common/components/molecules/Pagination/Pagination.Next';
+import { PaginationLast } from '@/common/components/molecules/Pagination/Pagination.Last';
 
 export const UrlPagination: FunctionComponent<{
   page: number;
@@ -13,9 +14,19 @@ export const UrlPagination: FunctionComponent<{
    */
   onPrevPage: () => string;
   onNextPage: () => string;
+  onLastPage: () => string;
   onPaginate: (page: number) => string;
+  isLastPageEnabled?: boolean;
   isLastPage: boolean;
-}> = ({ page, onPrevPage, onNextPage, onPaginate, isLastPage }) => {
+}> = ({
+  page,
+  onPrevPage,
+  onNextPage,
+  onLastPage,
+  onPaginate,
+  isLastPage,
+  isLastPageEnabled = true,
+}) => {
   return (
     <Pagination className={`justify-start`}>
       <PaginationContent>
@@ -46,6 +57,17 @@ export const UrlPagination: FunctionComponent<{
             aria-disabled={isLastPage}
           />
         </PaginationItem>
+        {isLastPageEnabled && (
+          <PaginationItem>
+            <PaginationLast
+              to={{
+                search: onLastPage(),
+              }}
+              iconOnly
+              aria-disabled={isLastPage}
+            />
+          </PaginationItem>
+        )}
       </PaginationContent>
     </Pagination>
   );

diff --git a/apps/backoffice-v2/src/common/components/organisms/Pagination/Pagination.tsx b/apps/backoffice-v2/src/common/components/organisms/Pagination/Pagination.tsx
diff --git a/apps/backoffice-v2/src/common/components/organisms/Pagination/interfaces.ts b/apps/backoffice-v2/src/common/components/organisms/Pagination/interfaces.ts
diff --git a/apps/backoffice-v2/src/common/hooks/usePagination/usePagination.tsx b/apps/backoffice-v2/src/common/hooks/usePagination/usePagination.tsx
@@ -2,9 +2,11 @@ import { useCallback } from 'react';
 import { useSerializedSearchParams } from '@/common/hooks/useSerializedSearchParams/useSerializedSearchParams';
 import { defaultSerializer } from '@/common/hooks/useZodSearchParams/utils/default-serializer';
 
-export const usePagination = () => {
+export const usePagination = ({ totalPages }: { totalPages: number }) => {
   const [searchParams] = useSerializedSearchParams();
 
+  const isLastPage = Number(searchParams.page) === totalPages || totalPages === 0;
+
   const onPaginate = useCallback(
     (page: number) => {
       return defaultSerializer({
@@ -15,6 +17,13 @@ export const usePagination = () => {
     [searchParams],
   );
 
+  const onLastPage = useCallback(() => {
+    return defaultSerializer({
+      ...searchParams,
+      page: totalPages.toString(),
+    });
+  }, [searchParams, totalPages]);
+
   const onNextPage = useCallback(() => {
     const pageNumber = Number(searchParams.page);
     const nextPage = pageNumber + 1;
@@ -38,7 +47,9 @@ export const usePagination = () => {
   return {
     page: searchParams.page,
     pageSize: searchParams.pageSize,
+    isLastPage,
     onPaginate,
+    onLastPage,
     onNextPage,
     onPrevPage,
   };

diff --git a/apps/backoffice-v2/src/domains/business-reports/fetchers.ts b/apps/backoffice-v2/src/domains/business-reports/fetchers.ts
@@ -4,10 +4,9 @@ import { Method } from '@/common/enums';
 import { handleZodError } from '@/common/utils/handle-zod-error/handle-zod-error';
 import { TBusinessReportType } from '@/domains/business-reports/types';
 import qs from 'qs';
-import { Severities } from '@ballerine/common';
+import { ObjectValues, Severities } from '@ballerine/common';
 import { toast } from 'sonner';
 import { t } from 'i18next';
-import { ObjectValues } from '@ballerine/common';
 
 export const BusinessReportStatus = {
   NEW: 'new',
@@ -83,13 +82,13 @@ export const fetchLatestBusinessReport = async ({
   businessId: string;
   reportType: TBusinessReportType;
 }) => {
-  const [filter, error] = await apiClient({
+  const [data, error] = await apiClient({
     endpoint: `business-reports/latest?businessId=${businessId}&type=${reportType}`,
     method: Method.GET,
     schema: BusinessReportSchema,
   });
 
-  return handleZodError(error, filter);
+  return handleZodError(error, data);
 };
 
 export const fetchBusinessReports = async ({

diff --git a/apps/backoffice-v2/src/pages/Entities/Entities.page.tsx b/apps/backoffice-v2/src/pages/Entities/Entities.page.tsx
@@ -1,18 +1,21 @@
 import { CaseCreation } from '@/pages/Entities/components/CaseCreation';
-import { ctw } from '@ballerine/ui';
-import { FunctionComponent } from 'react';
+import { ctw, Skeleton } from '@ballerine/ui';
+import React, { FunctionComponent } from 'react';
 import { Outlet } from 'react-router-dom';
 import { TAssignee } from '../../common/components/atoms/AssignDropdown/AssignDropdown';
 import { MotionScrollArea } from '../../common/components/molecules/MotionScrollArea/MotionScrollArea';
-import { Pagination } from '../../common/components/organisms/Pagination/Pagination';
-import { Case } from '../Entity/components/Case/Case';
 import { Cases } from './components/Cases/Cases';
 import { useEntities } from './hooks/useEntities/useEntities';
 import { NoCases } from '@/pages/Entities/components/NoCases/NoCases';
+import { UrlPagination } from '@/common/components/molecules/UrlPagination/UrlPagination';
 
 export const Entities: FunctionComponent = () => {
   const {
     onPaginate,
+    onPrevPage,
+    onNextPage,
+    onLastPage,
+    isLastPage,
     onSearch,
     onFilter,
     onSortBy,
@@ -25,6 +28,7 @@ export const Entities: FunctionComponent = () => {
     caseCount,
     skeletonEntities,
     isManualCaseCreationEnabled,
+    isNoCases,
   } = useEntities();
 
   return (
@@ -71,26 +75,25 @@ export const Entities: FunctionComponent = () => {
         </MotionScrollArea>
         <div className={`divider my-0 px-4`}></div>
         <div className="flex flex-col gap-5 px-4">
-          <Pagination onPaginate={onPaginate} page={page} totalPages={totalPages} />
+          <div className={`flex items-center gap-x-2`}>
+            <div className={`d-full flex items-center text-sm`}>
+              {!isLoading && `Page ${page} of ${totalPages || 1}`}
+              {isLoading && <Skeleton className={`h-5 w-full`} />}
+            </div>
+            <UrlPagination
+              page={page}
+              onPrevPage={onPrevPage}
+              onNextPage={onNextPage}
+              onLastPage={onLastPage}
+              onPaginate={onPaginate}
+              isLastPage={isLastPage}
+            />
+          </div>
           {isManualCaseCreationEnabled && <CaseCreation />}
         </div>
       </Cases>
-      {/* Display skeleton individual when loading the entities list */}
-      {isLoading && (
-        <Case>
-          {/* Reject and approve header */}
-          <Case.Actions id={''} fullName={''} avatarUrl={''} />
-
-          <Case.Content>
-            <div>
-              <Case.FaceMatch faceAUrl={''} faceBUrl={''} isLoading />
-              <Case.Info info={{}} isLoading whitelist={[]} />
-            </div>
-            <Case.Documents documents={[]} isLoading />
-          </Case.Content>
-        </Case>
-      )}
-      {Array.isArray(cases) && !cases.length && !isLoading ? <NoCases /> : <Outlet />}
+      {isNoCases && <NoCases />}
+      {!isNoCases && <Outlet />}
     </>
   );
 };
diff --git a/apps/backoffice-v2/src/pages/Entities/hooks/useEntities/useEntities.tsx b/apps/backoffice-v2/src/pages/Entities/hooks/useEntities/useEntities.tsx
@@ -6,6 +6,7 @@ import { useSearchParamsByEntity } from '../../../../common/hooks/useSearchParam
 import { createArrayOfNumbers } from '../../../../common/utils/create-array-of-numbers/create-array-of-numbers';
 import { useSelectEntityOnMount } from '../../../../domains/entities/hooks/useSelectEntityOnMount/useSelectEntityOnMount';
 import { useWorkflowsQuery } from '../../../../domains/workflows/hooks/queries/useWorkflowsQuery/useWorkflowsQuery';
+import { usePagination } from '@/common/hooks/usePagination/usePagination';
 
 export const useEntities = () => {
   const [{ filterId, filter, sortBy, sortDir, page, pageSize, search }, setSearchParams] =
@@ -20,11 +21,8 @@ export const useEntities = () => {
     pageSize,
     search,
   });
-
-  const {
-    meta: { totalPages },
-    data: workflows,
-  } = data || { meta: { totalPages: 0 }, data: [] };
+  const cases = data?.data;
+  const totalPages = data?.meta?.totalPages ?? 0;
   const entity = useEntityType();
   const { onSearch, search: searchValue } = useSearch();
 
@@ -58,15 +56,9 @@ export const useEntities = () => {
     [filter, setSearchParams],
   );
 
-  const onPaginate = useCallback(
-    (page: number) => () => {
-      setSearchParams({
-        page,
-        pageSize,
-      });
-    },
-    [pageSize, setSearchParams],
-  );
+  const { onPaginate, onPrevPage, onNextPage, onLastPage, isLastPage } = usePagination({
+    totalPages: data?.meta?.totalPages ?? 0,
+  });
 
   const onSearchChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     event => {
@@ -86,20 +78,27 @@ export const useEntities = () => {
 
   const { workflowDefinition } = useCaseCreationWorkflowDefinition();
 
+  const isNoCases = !isLoading && Array.isArray(cases) && !cases.length;
+
   return {
     onPaginate,
+    onPrevPage,
+    onNextPage,
+    onLastPage,
+    isLastPage,
     onSearch: onSearchChange,
     onFilter: onFilterChange,
     onSortBy: onSortByChange,
     onSortDirToggle,
     search: searchValue,
-    cases: data?.data,
+    cases,
     caseCount: data?.meta?.totalItems || 0,
     isLoading,
     page,
     totalPages,
     skeletonEntities,
     entity,
     isManualCaseCreationEnabled: workflowDefinition?.config?.enableManualCreation,
+    isNoCases,
   };
 };
diff --git a/apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx b/apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx
@@ -8,6 +8,7 @@ import { buttonVariants } from '@/common/components/atoms/Button/Button';
 import { Plus } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { Search } from '@/common/components/molecules/Search';
+import { Skeleton } from '@ballerine/ui';
 
 export const MerchantMonitoring: FunctionComponent = () => {
   const {
@@ -19,6 +20,7 @@ export const MerchantMonitoring: FunctionComponent = () => {
     page,
     onPrevPage,
     onNextPage,
+    onLastPage,
     onPaginate,
     isLastPage,
     locale,
@@ -50,18 +52,20 @@ export const MerchantMonitoring: FunctionComponent = () => {
         {Array.isArray(businessReports) && !businessReports.length && !isLoadingBusinessReports && (
           <NoBusinessReports />
         )}
-        {!!totalPages && (
-          <div className={`mt-auto flex items-center gap-x-2`}>
-            <div className={`flex w-[12ch] text-sm`}>{`Page ${page} of ${totalPages}`}</div>
-            <UrlPagination
-              page={page}
-              onPrevPage={onPrevPage}
-              onNextPage={onNextPage}
-              onPaginate={onPaginate}
-              isLastPage={isLastPage}
-            />
+        <div className={`mt-auto flex items-center gap-x-2`}>
+          <div className={`flex h-full w-[12ch] items-center text-sm`}>
+            {!isLoadingBusinessReports && `Page ${page} of ${totalPages || 1}`}
+            {isLoadingBusinessReports && <Skeleton className={`h-5 w-full`} />}
           </div>
-        )}
+          <UrlPagination
+            page={page}
+            onPrevPage={onPrevPage}
+            onNextPage={onNextPage}
+            onLastPage={onLastPage}
+            onPaginate={onPaginate}
+            isLastPage={isLastPage}
+          />
+        </div>
       </div>
     </div>
   );