Update pagination logic (#854)

* feat: consider pagination in empty state component

* fix: reset page param if set, when filters are updated

Author: annavik

ui/src/components/empty-state/empty-state.tsx

@@ -1,26 +1,44 @@
 import { Button } from 'nova-ui-kit'
+import { ReactNode } from 'react'
 import { STRING, translate } from 'utils/language'
 import { useFilters } from 'utils/useFilters'
+import { usePagination } from 'utils/usePagination'
 
 export const EmptyState = () => {
   const { filters, activeFilters, clearFilter } = useFilters()
+  const { pagination, resetPage } = usePagination()
 
-  return (
-    <div className="flex flex-col gap-6 items-center py-24">
-      <span className="body-base text-muted-foreground">
-        {translate(
-          activeFilters.length
-            ? STRING.MESSAGE_NO_RESULTS_FOR_FILTERING
-            : STRING.MESSAGE_NO_RESULTS
-        )}
-      </span>
-      {activeFilters.length ? (
+  if (pagination.page) {
+    return (
+      <Container>
+        <p>{translate(STRING.MESSAGE_NO_RESULTS_FOR_PAGE)}</p>
+        <Button onClick={() => resetPage()}>
+          {translate(STRING.RESET_PAGE)}
+        </Button>
+      </Container>
+    )
+  }
+
+  if (activeFilters.length) {
+    return (
+      <Container>
+        <p>{translate(STRING.MESSAGE_NO_RESULTS_FOR_FILTERING)}</p>
         <Button
           onClick={() => filters.map((filter) => clearFilter(filter.field))}
         >
           {translate(STRING.CLEAR_FILTERS)}
         </Button>
-      ) : null}
-    </div>
+      </Container>
+    )
+  }
+
+  return (
+    <Container>
+      <p>{translate(STRING.MESSAGE_NO_RESULTS)}</p>
+    </Container>
   )
 }
+
+const Container = ({ children }: { children: ReactNode }) => (
+  <div className="flex flex-col gap-6 items-center py-24">{children}</div>
+)

ui/src/utils/language.ts

@@ -24,6 +24,7 @@ export enum STRING {
   QUEUED,
   REFRESH,
   RESET,
+  RESET_PAGE,
   RETRY,
   RERUN,
   SAVE,
@@ -165,6 +166,7 @@ export enum STRING {
   MESSAGE_NO_IMAGE,
   MESSAGE_NO_RESULTS,
   MESSAGE_NO_RESULTS_FOR_FILTERING,
+  MESSAGE_NO_RESULTS_FOR_PAGE,
   MESSAGE_PASSWORD_FORMAT,
   MESSAGE_PASSWORD_UPDATED,
   MESSAGE_PERMISSIONS_MISSING,
@@ -293,6 +295,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.QUEUED]: 'Queued',
   [STRING.REFRESH]: 'Refresh',
   [STRING.RESET]: 'Reset',
+  [STRING.RESET_PAGE]: 'Reset page',
   [STRING.RETRY]: 'Retry',
   [STRING.RERUN]: 'Re-run',
   [STRING.SAVE]: 'Save',
@@ -443,7 +446,9 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.MESSAGE_NO_IMAGE]: 'No image',
   [STRING.MESSAGE_NO_RESULTS]: 'No results to show.',
   [STRING.MESSAGE_NO_RESULTS_FOR_FILTERING]:
-    'No results to show for the current fitering.',
+    'No results to show for the current filtering.',
+  [STRING.MESSAGE_NO_RESULTS_FOR_PAGE]:
+    'No results to show for the current page.',
   [STRING.MESSAGE_PASSWORD_FORMAT]:
     'The password must contain at least 8 characters and cannot be entirely numeric.',
   [STRING.MESSAGE_PASSWORD_UPDATED]: 'Your password has been updated!',

ui/src/utils/useFilters.ts

@@ -1,5 +1,6 @@
 import { isBefore, isValid } from 'date-fns'
 import { useSearchParams } from 'react-router-dom'
+import { SEARCH_PARAM_KEY_PAGE } from './usePagination'
 
 export const AVAILABLE_FILTERS: {
   label: string
@@ -141,13 +142,25 @@ export const useFilters = (defaultFilters?: { [field: string]: string }) => {
   const addFilter = (field: string, value: string) => {
     if (AVAILABLE_FILTERS.some((filter) => filter.field === field)) {
       searchParams.set(field, value)
+
+      // Reset page param if set, when filters are updated
+      if (searchParams.has(SEARCH_PARAM_KEY_PAGE)) {
+        searchParams.delete(SEARCH_PARAM_KEY_PAGE)
+      }
+
       setSearchParams(searchParams)
     }
   }
 
   const clearFilter = (field: string) => {
     if (AVAILABLE_FILTERS.some((filter) => filter.field === field)) {
       searchParams.delete(field)
+
+      // Reset page param if set, when filters are updated
+      if (searchParams.has(SEARCH_PARAM_KEY_PAGE)) {
+        searchParams.delete(SEARCH_PARAM_KEY_PAGE)
+      }
+
       setSearchParams(searchParams)
     }
   }

ui/src/utils/usePagination.ts

@@ -29,18 +29,22 @@ const useSearchParam = ({
     }
   }
 
-  const clearValue = () => {
+  const resetValue = () => {
     if (searchParams.has(key)) {
       searchParams.delete(key)
       setSearchParams(searchParams)
     }
   }
 
-  return { value, setValue, clearValue }
+  return { value, setValue, resetValue }
 }
 
-export const usePagination = ({ perPage }: { perPage?: number } = {}) => {
-  const { value: page, setValue: setPage } = useSearchParam({
+const usePagination = ({ perPage }: { perPage?: number } = {}) => {
+  const {
+    value: page,
+    setValue: setPage,
+    resetValue: resetPage,
+  } = useSearchParam({
     key: SEARCH_PARAM_KEY_PAGE,
     defaultValue: DEFAULT_PAGINATION.page,
   })
@@ -50,6 +54,9 @@ export const usePagination = ({ perPage }: { perPage?: number } = {}) => {
       page,
       perPage: perPage ?? DEFAULT_PAGINATION.perPage,
     },
+    resetPage,
     setPage,
   }
 }
+
+export { SEARCH_PARAM_KEY_PAGE, usePagination }