fix: Under review tab pagination bug.

src/containers/Proposal/Actions/UnvettedActionsProvider.jsx

@@ -52,8 +52,8 @@ const UnvettedActionsProvider = ({ children, history }) => {
       successTitle: "Proposal approved",
       successMessage: (
         <Text>
-          The proposal has been successfully approved! Now it will appear under{" "}
-          <Link to="/?tab=in%20discussion">In discussion</Link> tab among Public
+          The proposal has been successfully approved! Now it will appear in{" "}
+          <Link to="/?tab=under%20review">Under review</Link> tab among Public
           Proposals.
         </Text>
       ),

src/hooks/api/useProposalsBatch.js

@@ -96,7 +96,7 @@ export default function useProposalsBatch({
 }) {
   const [remainingTokens, setRemainingTokens] = useState([]);
   const [voteStatuses, setStatuses] = useState(statuses);
-  const [previousPage, setPreviousPage] = useState(0);
+  const [initializedInventory, setInitializedInventory] = useState(false);
   const isByRecordStatus = isUndefined(voteStatuses);
   const proposals = useSelector(sel.proposalsByToken);
   const recordState = unvetted
@@ -116,7 +116,9 @@ export default function useProposalsBatch({
     isByRecordStatus ? sel.allByRecordStatus : sel.allByVoteStatus
   );
   const tokens = useMemo(
-    () => allByStatus[getProposalStatusLabel(currentStatus, isByRecordStatus)],
+    () =>
+      allByStatus[getProposalStatusLabel(currentStatus, isByRecordStatus)] ||
+      [],
     [allByStatus, isByRecordStatus, currentStatus]
   );
   const page = useMemo(() => {
@@ -130,12 +132,66 @@ export default function useProposalsBatch({
   const onFetchProposalsBatch = useAction(act.onFetchProposalsBatch);
   const onFetchTokenInventory = useAction(act.onFetchTokenInventory);
   const hasRemainingTokens = !isEmpty(remainingTokens);
+
+  const scanNextStatusTokens = (index, oldTokens) => {
+    if (index < currentStatuses.length) {
+      const status = currentStatuses[index];
+      const newTokens = getUnfetchedTokens(
+        proposals,
+        uniq(
+          allByStatus[getProposalStatusLabel(status, isByRecordStatus)] || []
+        )
+      );
+      const tokens = [...oldTokens, ...newTokens];
+      if (tokens.length < proposalPageSize) {
+        // scan the next status.
+        return scanNextStatusTokens(index + 1, tokens);
+      }
+      return {
+        index,
+        tokens
+      };
+    }
+    return { index, tokens: [] };
+  };
+
   const [state, send] = useFetchMachine({
     actions: {
       initial: () => send(START),
       start: () => {
-        if (hasRemainingTokens) return send(VERIFY);
-        if (page && page === previousPage) return send(RESOLVE);
+        // If remaining tokens length is greater than proposal page size.
+        // Fetch proposals.
+        if (remainingTokens.length >= proposalPageSize) return send(VERIFY);
+
+        // If remaining tokens length is smaller than proposal page size.
+        // Find more tokens from inventory or scan from the next status
+
+        // Condition to scan: inventory is initialized and
+        // the tokens are able to be fetched from the next page
+        const currentStatusTokens =
+          allByStatus[
+            getProposalStatusLabel(currentStatus, isByRecordStatus)
+          ] || [];
+        if (
+          initializedInventory &&
+          !(
+            currentStatusTokens.length % INVENTORY_PAGE_SIZE === 0 &&
+            currentStatusTokens.length > 0
+          )
+        ) {
+          const { index, tokens } = scanNextStatusTokens(
+            statusIndex + 1,
+            remainingTokens
+          );
+          setStatusIndex(index);
+          setRemainingTokens(tokens);
+          if (isEmpty(tokens)) return send(RESOLVE);
+
+          return send(VERIFY);
+        }
+
+        // Fetch tokens from inventory. Fetch all statuses at the first page.
+        // Next times, fetch the next page of the current status.
         onFetchTokenInventory(
           recordState,
           page && currentStatus, // first page fetches all status
@@ -144,17 +200,23 @@ export default function useProposalsBatch({
         )
           .catch((e) => send(REJECT, e))
           .then(({ votes, records }) => {
-            setPreviousPage(page);
+            setInitializedInventory(true);
             // prepare token batch to fetch proposal for given status
             const proposalStatusLabel = getProposalStatusLabel(
               currentStatus,
               isByRecordStatus
             );
-            const tokens = (isByRecordStatus ? records : votes)[
+            const newTokens = (isByRecordStatus ? records : votes)[
               proposalStatusLabel
             ];
-            if (!tokens) return send(RESOLVE);
+            const tokens = [...newTokens, ...remainingTokens];
             setRemainingTokens(tokens);
+            if (
+              tokens.length < proposalPageSize &&
+              statusIndex + 1 < currentStatuses.length
+            )
+              return send(RESOLVE);
+
             return send(VERIFY);
           });
         return send(FETCH);
@@ -198,21 +260,24 @@ export default function useProposalsBatch({
         return send(FETCH);
       },
       done: () => {
-        // If there are not remaining tokens, check if have unscanned status.
-        // If yes, change the index to the new status and set up new tokens
-        if (!hasRemainingTokens && statusIndex + 1 < currentStatuses.length) {
-          const newIndex = statusIndex + 1;
-          const newStatus = currentStatuses[newIndex];
-          const unfetchedTokens = getUnfetchedTokens(
+        // If the remaining tokens is smaller than proposal page size and have not scanned status.
+        // Check the new status and set up new tokens
+        if (
+          remainingTokens.length < proposalPageSize &&
+          statusIndex + 1 < currentStatuses.length
+        ) {
+          const nextIndex = statusIndex + 1;
+          const nextStatus = currentStatuses[nextIndex];
+          const nextStatusTokens = getUnfetchedTokens(
             proposals,
             uniq(
               allByStatus[
-                getProposalStatusLabel(newStatus, isByRecordStatus)
+                getProposalStatusLabel(nextStatus, isByRecordStatus)
               ] || []
             )
           );
-          setRemainingTokens(unfetchedTokens);
-          setStatusIndex(newIndex);
+          setRemainingTokens([...remainingTokens, ...nextStatusTokens]);
+          setStatusIndex(nextIndex);
           if (!values(proposals).length) {
             // If no proposals are fetched yet.
             // Continue the fetching cycle to fetch the first page.
@@ -250,6 +315,7 @@ export default function useProposalsBatch({
       }
       return false;
     });
+
     setRemainingTokens(unfetchedTokens);
     setStatusIndex(index);
     if (isByRecordStatus) {
@@ -273,10 +339,13 @@ export default function useProposalsBatch({
     tokens && tokens.length && tokens.length % INVENTORY_PAGE_SIZE === 0;
 
   const onFetchMoreProposals = useCallback(() => {
-    if (isEmpty(remainingTokens) && isAnotherInventoryCallRequired)
+    if (
+      remainingTokens.length < proposalPageSize &&
+      isAnotherInventoryCallRequired
+    )
       return send(START);
     return send(VERIFY);
-  }, [send, remainingTokens, isAnotherInventoryCallRequired]);
+  }, [send, remainingTokens, proposalPageSize, isAnotherInventoryCallRequired]);
 
   const anyError = error || state.error;
   useThrowError(anyError);

teste2e/cypress/e2e/records/recordsList.js

@@ -40,7 +40,7 @@ describe("Records list", () => {
       });
       cy.wait("@records.records");
       // each proposal should be rendered accordingly to inventory response
-      cy.assertListLengthByTestId("record-title", RECORDS_PAGE_SIZE + 3) // first records batch
+      cy.assertListLengthByTestId("record-title", RECORDS_PAGE_SIZE) // first records batch
         .each(([{ id }], position) => {
           const tokens = getTokensByStatusTab(inventory, "Under Review");
           const expectedToken = shortRecordToken(tokens[position]);
@@ -50,22 +50,27 @@ describe("Records list", () => {
     it("can render records and inventory pagination correctly", () => {
       cy.visit(`/`);
       cy.wait("@ticketvote.inventory");
+      // Fetch 'started', 'authorized' and 'unauthorized' proposals
       cy.wait("@records.records");
-      cy.assertListLengthByTestId("record-title", 8);
+      // 3 items of started status and 2 items of unauthorized status
+      cy.assertListLengthByTestId("record-title", 5);
       cy.scrollTo("bottom");
       cy.wait("@records.records");
-      cy.assertListLengthByTestId("record-title", 13);
+      cy.assertListLengthByTestId("record-title", 10);
       cy.scrollTo("bottom");
       cy.wait("@records.records");
-      cy.assertListLengthByTestId("record-title", 18);
+      cy.assertListLengthByTestId("record-title", 15);
       cy.scrollTo("bottom");
       cy.wait("@records.records");
-      cy.assertListLengthByTestId("record-title", 23);
+      cy.assertListLengthByTestId("record-title", 20);
       // finished first inventory page
       cy.scrollTo("bottom");
       cy.wait("@ticketvote.inventory").its("request.body.page").should("eq", 2);
       cy.wait("@records.records");
       // records from second inventory page
+      cy.assertListLengthByTestId("record-title", 25);
+      cy.scrollTo("bottom");
+      cy.wait("@records.records");
       cy.assertListLengthByTestId("record-title", 28);
       cy.scrollTo("bottom");
       // wait to see if no requests are done, since inventory is fully fetched
@@ -80,7 +85,7 @@ describe("Records list", () => {
       // navigate to in discussion tab
       cy.findByTestId("tab-0").click();
       cy.wait("@records.records");
-      cy.assertListLengthByTestId("record-title", 8);
+      cy.assertListLengthByTestId("record-title", 5);
     });
     it("can list legacy proposals", () => {
       // for approved proposals