feat: added pagination to staging

Chia-Network · Apr 22, 2022 · e5b4377 · e5b4377
1 parent a30a03d
commit e5b4377
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 90 deletions.
diff --git a/src/components/blocks/APIStagingPagination.js b/src/components/blocks/APIStagingPagination.js
@@ -10,88 +10,95 @@ import {
 } from '..';
 import { getStagingPaginatedData } from '../../store/actions/climateWarehouseActions';
 
-const APIStagingPagination = withTheme(({ showLast = false, actions }) => {
-  const dispatch = useDispatch();
-  const climateWarehouseStore = useSelector(store => store.climateWarehouse);
-  const [currentPageNumber, setCurrentPageNumber] = useState(1);
-  const [numberOfPages, setNumberOfPages] = useState(
-    climateWarehouseStore.pageCount || 1,
-  );
-  const backButtonIsDisabled = currentPageNumber === 1;
-  const nextButtonIsDisabled = currentPageNumber === numberOfPages;
+const APIStagingPagination = withTheme(
+  ({ showLast = false, actions, formType }) => {
+    const dispatch = useDispatch();
+    const climateWarehouseStore = useSelector(store => store.climateWarehouse);
+    const [currentPageNumber, setCurrentPageNumber] = useState(1);
+    const [numberOfPages, setNumberOfPages] = useState(
+      climateWarehouseStore.pageCount || 1,
+    );
+    const backButtonIsDisabled = currentPageNumber === 1;
+    const nextButtonIsDisabled = currentPageNumber === numberOfPages;
 
-  useEffect(() => {
-    setCurrentPageNumber(1);
-    setNumberOfPages(climateWarehouseStore.stagingPageCount || 1);
-  }, [climateWarehouseStore.stagingPageCount]);
+    useEffect(() => {
+      setCurrentPageNumber(1);
+      setNumberOfPages(climateWarehouseStore.stagingPageCount || 1);
+    }, [climateWarehouseStore.stagingPageCount]);
+
+    const changeCurrentPageTo = newPage => {
+      setCurrentPageNumber(newPage);
 
-  const changeCurrentPageTo = newPage => {
-    setCurrentPageNumber(newPage);
-
-    const options = {
-      type: actions,
-      page: newPage,
-      resultsLimit: 1,
+      const options = {
+        type: actions,
+        page: newPage,
+        formType: formType[0]?.table,
+        resultsLimit: 1,
+      };
+
+      dispatch(getStagingPaginatedData(options));
     };
-    dispatch(getStagingPaginatedData(options));
-  };
 
-  let displayedPages = [currentPageNumber];
-  let numberOfAddedPages = 1;
-  for (
-    let i = 1;
-    i < 5 && numberOfAddedPages < 5 && numberOfAddedPages < numberOfPages;
-    i++
-  ) {
-    if (currentPageNumber - i > 0) {
-      displayedPages.unshift(currentPageNumber - i);
-      numberOfAddedPages++;
-    }
-    if (currentPageNumber + i <= numberOfPages) {
-      displayedPages.push(currentPageNumber + i);
-      numberOfAddedPages++;
+    let displayedPages = [currentPageNumber];
+    let numberOfAddedPages = 1;
+    for (
+      let i = 1;
+      i < 5 && numberOfAddedPages < 5 && numberOfAddedPages < numberOfPages;
+      i++
+    ) {
+      if (currentPageNumber - i > 0) {
+        displayedPages.unshift(currentPageNumber - i);
+        numberOfAddedPages++;
+      }
+      if (currentPageNumber + i <= numberOfPages) {
+        displayedPages.push(currentPageNumber + i);
+        numberOfAddedPages++;
+      }
     }
-  }
 
-  return (
-    <PaginationContainer>
-      <ControlsContainer
-        isDisabled={backButtonIsDisabled}
-        isBackButton={true}
-        onClick={() =>
-          !backButtonIsDisabled && changeCurrentPageTo(currentPageNumber - 1)
-        }>
-        <ArrowDownIcon height={12} width={12} />
-      </ControlsContainer>
-      {displayedPages &&
-        displayedPages.map(element => (
-          <PagesContainer
-            key={element}
-            isActive={currentPageNumber === element}
-            onClick={() =>
-              currentPageNumber !== element && changeCurrentPageTo(element)
-            }>
-            {element}
-          </PagesContainer>
-        ))}
-      {showLast && currentPageNumber + 3 < numberOfPages && numberOfPages > 5 && (
-        <>
-          <ThreeDotsIcon width={10} height={10} />
-          <PagesContainer onClick={() => changeCurrentPageTo(numberOfPages)}>
-            {numberOfPages}
-          </PagesContainer>
-        </>
-      )}
-      <ControlsContainer
-        isDisabled={nextButtonIsDisabled}
-        isNextButton
-        onClick={() =>
-          !nextButtonIsDisabled && changeCurrentPageTo(currentPageNumber + 1)
-        }>
-        <ArrowDownIcon height={12} width={12} />
-      </ControlsContainer>
-    </PaginationContainer>
-  );
-});
+    return (
+      <PaginationContainer>
+        <ControlsContainer
+          isDisabled={backButtonIsDisabled}
+          isBackButton={true}
+          onClick={() =>
+            !backButtonIsDisabled && changeCurrentPageTo(currentPageNumber - 1)
+          }>
+          <ArrowDownIcon height={12} width={12} />
+        </ControlsContainer>
+        {displayedPages &&
+          displayedPages.map(element => (
+            <PagesContainer
+              key={element}
+              isActive={currentPageNumber === element}
+              onClick={() =>
+                currentPageNumber !== element && changeCurrentPageTo(element)
+              }>
+              {element}
+            </PagesContainer>
+          ))}
+        {showLast &&
+          currentPageNumber + 3 < numberOfPages &&
+          numberOfPages > 5 && (
+            <>
+              <ThreeDotsIcon width={10} height={10} />
+              <PagesContainer
+                onClick={() => changeCurrentPageTo(numberOfPages)}>
+                {numberOfPages}
+              </PagesContainer>
+            </>
+          )}
+        <ControlsContainer
+          isDisabled={nextButtonIsDisabled}
+          isNextButton
+          onClick={() =>
+            !nextButtonIsDisabled && changeCurrentPageTo(currentPageNumber + 1)
+          }>
+          <ArrowDownIcon height={12} width={12} />
+        </ControlsContainer>
+      </PaginationContainer>
+    );
+  },
+);
 
 export { APIStagingPagination };
diff --git a/src/components/blocks/StagingDataGroups.js b/src/components/blocks/StagingDataGroups.js
@@ -3,19 +3,26 @@ import styled, { withTheme } from 'styled-components';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils';
 import { getDiff } from '../../utils/objectUtils';
-import {
-  Modal,
-  MinusIcon,
-  Body,
-  ErrorIcon,
-  SuccessIcon,
-  ReloadIcon,
-  StyledPaginationContainer,
-} from '..';
+import { Modal, MinusIcon, Body, ErrorIcon, SuccessIcon, ReloadIcon } from '..';
 import { modalTypeEnum, APIStagingPagination } from '.';
 import { useWindowSize } from '../hooks/useWindowSize';
 import { DetailedViewStagingModal } from './DetailedViewStagingModal';
 
+const StyledPaginationContainer = styled('div')`
+  box-sizing: border-box;
+  background-color: white;
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 70px;
+  width: 100%;
+  max-height: 70px;
+  z-index: 10000;
+  margin: 25px 0px 25px 0px;
+`;
+
 const StyledChangeGroup = styled('div')`
   background: #f0f2f5;
   margin: 20px 20px 20px 20px;
@@ -406,7 +413,7 @@ const StagingDataGroups = withTheme(
               </React.Fragment>
             ))}
           <StyledPaginationContainer>
-            <APIStagingPagination actions="staging" />
+            <APIStagingPagination actions="staging" formType={data} />
           </StyledPaginationContainer>
           {detailedViewData && (
             <DetailedViewStagingModal

diff --git a/src/pages/Projects/index.js b/src/pages/Projects/index.js
@@ -248,6 +248,7 @@ const Projects = () => {
     const options = {
       type: 'staging',
       page: 1,
+      formType: 'Projects',
       resultsLimit: 1,
     };
     dispatch(getStagingPaginatedData(options));

diff --git a/src/pages/Units/index.js b/src/pages/Units/index.js
@@ -15,6 +15,7 @@ import {
   commitStagingData,
   getPaginatedData,
   retryStagingData,
+  getStagingPaginatedData
 } from '../../store/actions/climateWarehouseActions';
 import {
   setPendingError,
@@ -231,6 +232,16 @@ const Units = () => {
     pageIsMyRegistryPage,
   ]);
 
+  useEffect(() => {
+    const options = {
+      type: 'staging',
+      page: 1,
+      formType: 'Units',
+      resultsLimit: 1,
+    };
+    dispatch(getStagingPaginatedData(options));
+  }, [dispatch]);
+
   const filteredColumnsTableData = useMemo(() => {
     if (!climateWarehouseStore.units) {
       return null;

diff --git a/src/store/actions/climateWarehouseActions.js b/src/store/actions/climateWarehouseActions.js
@@ -353,18 +353,23 @@ export const getPaginatedData = ({
   };
 };
 
-export const getStagingPaginatedData = ({ type, page, resultsLimit }) => {
+export const getStagingPaginatedData = ({
+  type,
+  formType,
+  page,
+  resultsLimit,
+}) => {
   return async dispatch => {
     const pageAndLimitAreValid =
       typeof page === 'number' && typeof resultsLimit === 'number';
 
     if (pageAndLimitAreValid) {
       dispatch(activateProgressIndicator);
       try {
-        let url = `${constants.API_HOST}/${type}?page=${page}&limit=${resultsLimit}`;
+        let url = `${constants.API_HOST}/${type}?table=${formType}&page=${page}&limit=${resultsLimit}`;
 
         const response = await fetchWrapper(url);
-        console.log(response);
+
         if (response.ok) {
           dispatch(
             setReadOnly(response.headers.get('cw-read-only') === 'true'),