IEN-930 | IEN-938 | Automatic page refresh is clearing BCCNM upload d…

…ata | Add variable pagination to the BCCNM/Inspire data review page (#665)

* add session storage to avoid reload clean; modify page size;

* fix formatting;

* fix e2e page size error;

* add back page size:5 because of e2e testing;

* set pageSizes as optional props

---------

Co-authored-by: Jerry Wang <jerryappleid761208@gmail.com>

.github/workflows/deploy-dev.yml

@@ -43,7 +43,7 @@ jobs:
         with:
           role-to-assume: ${{secrets.AWS_SA_ROLE_ARN}}
           aws-region: ca-central-1
-      
+
       - name: setup terraform
         uses: hashicorp/setup-terraform@v3
 

.github/workflows/deploy-test.yml

@@ -43,7 +43,7 @@ jobs:
         with:
           role-to-assume: ${{secrets.AWS_SA_ROLE_ARN}}
           aws-region: ca-central-1
-      
+
       - name: setup terraform
         uses: hashicorp/setup-terraform@v3
 

apps/web/src/components/Pagination.tsx

@@ -13,6 +13,7 @@ export interface PaginationProps {
   id: string;
   pageOptions: PageOptions;
   onChange: (options: PageOptions) => void;
+  pageSizes?: number[];
 }
 
 const PAGE_SIZES = [5, 10, 25, 50];
@@ -22,11 +23,12 @@ export const Pagination = (props: PaginationProps) => {
     id,
     pageOptions: { pageSize, pageIndex, total },
     onChange,
+    pageSizes = PAGE_SIZES, // if not provided, use default page sizes
   } = props;
 
   const numOfPages = Math.ceil(total / pageSize);
 
-  const pageSizeOptions = PAGE_SIZES.map(size => ({ value: size }));
+  const pageSizeOptions = pageSizes.map(size => ({ value: size }));
   const pageListOptions = Array.from(Array(numOfPages).keys()).map(i => ({ value: i + 1 }));
 
   const startIndex = (pageIndex - 1) * pageSize + 1;

apps/web/src/components/admin/BccnmNcasPreview.tsx

@@ -52,12 +52,14 @@ export const BccnmNcasPreview = ({ data }: { data: BccnmNcasValidation[] }) => {
         id='bccnm-ncas-page-top'
         pageOptions={{ pageIndex, pageSize, total: filteredData.length }}
         onChange={handlePageOptions}
+        pageSizes={[10, 30, 50, 100]}
       />
       <BccnmNcasUpdateTable data={pagedData} />
       <Pagination
         id='bccnm-ncas-page-bottom'
         pageOptions={{ pageIndex, pageSize, total: filteredData.length }}
         onChange={handlePageOptions}
+        pageSizes={[10, 30, 50, 100]}
       />
     </>
   );

apps/web/src/components/admin/BccnmNcasSection.tsx

@@ -5,10 +5,14 @@ import { BccnmNcasDataUploader } from './BccnmNcasDataUploader';
 import { BccnmNcasPreview } from './BccnmNcasPreview';
 import { applyBccnmNcasUpdates } from '../../services/admin';
 import { toast } from 'react-toastify';
+import { useSessionStorage } from './hooks/useSessionStorage';
 
 export const BccnmNcasSection = () => {
   const [uploaderOpen, setUploaderOpen] = useState(false);
-  const [data, setData] = useState<BccnmNcasValidation[]>();
+  const [data, setData] = useSessionStorage<BccnmNcasValidation[] | undefined>(
+    'BCCNM_UPLOAD_DATE',
+    undefined,
+  );
   const [loading, setLoading] = useState(false);
 
   const applyChanges = async () => {

apps/web/src/components/admin/hooks/useSessionStorage.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable no-console */
+import { useState, useEffect } from 'react';
+
+// Custom hook to handle session storage in a type-safe manner
+export function useSessionStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = sessionStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error('Failed to retrieve from sessionStorage', error);
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      sessionStorage.setItem(key, JSON.stringify(storedValue));
+    } catch (error) {
+      console.error('Failed to save to sessionStorage', error);
+    }
+  }, [key, storedValue]);
+
+  // Cleanup session storage on page left
+  useEffect(() => {
+    const handleCleanSessionStorage = () => {
+      sessionStorage.removeItem(key);
+    };
+
+    return () => {
+      handleCleanSessionStorage();
+    };
+  }, [key]);
+
+  return [storedValue, setStoredValue];
+}