refactor: Replace hard coded page sizes.

politeia added the page sizes to the policy replies. This diff replaces
the hardcoded page sizes with policy reply values.

src/components/ModalDiff/ModalDiffInvoice.jsx

@@ -16,10 +16,13 @@ import styles from "./ModalDiff.module.css";
 import { presentationalInvoiceName } from "src/containers/Invoice/helpers";
 import uniq from "lodash/uniq";
 import useApprovedProposals from "src/hooks/api/useApprovedProposals";
+import usePolicy from "src/hooks/api/usePolicy";
 
 const ModalDiffInvoice = ({ onClose, invoice, prevInvoice, ...props }) => {
   const prevInput = prevInvoice && prevInvoice.input ? prevInvoice.input : [];
-
+  const {
+    policyTicketVote: { summariespagesize: proposalPageSize }
+  } = usePolicy();
   const proposalsTokens = useMemo(() => {
     const prevTokens = prevInput.lineitems
       ? prevInput.lineitems.map(({ proposaltoken }) => proposaltoken)
@@ -30,7 +33,10 @@ const ModalDiffInvoice = ({ onClose, invoice, prevInvoice, ...props }) => {
     return uniq([...prevTokens, ...tokens]).filter((t) => t !== "");
   }, [invoice.input.lineitems, prevInput]);
 
-  const { proposalsByToken, error } = useApprovedProposals(proposalsTokens);
+  const { proposalsByToken, error } = useApprovedProposals(
+    proposalPageSize,
+    proposalsTokens
+  );
 
   return (
     <Modal

src/components/Proposal/RawProposal.jsx

@@ -3,11 +3,18 @@ import get from "lodash/fp/get";
 import { classNames } from "pi-ui";
 import { getMarkdownContent } from "src/containers/Proposal/helpers";
 import { useProposal } from "src/containers/Proposal/Detail/hooks";
+import usePolicy from "src/hooks/api/usePolicy";
 import styles from "./Proposal.module.css";
 
 const RawProposal = ({ match }) => {
+  const {
+    policyTicketVote: { summariespagesize: proposalPageSize }
+  } = usePolicy();
   const tokenFromUrl = get("params.token", match);
-  const { proposal, loading, error } = useProposal(tokenFromUrl);
+  const { proposal, loading, error } = useProposal(
+    tokenFromUrl,
+    proposalPageSize
+  );
   const rawMarkdown = proposal ? getMarkdownContent(proposal.files) : null;
   return !loading && !error ? (
     <div>

src/components/RecordsView/RecordsView.jsx

@@ -6,11 +6,7 @@ import { getRecordsByTabOption } from "./helpers";
 import HelpMessage from "src/components/HelpMessage";
 import { useConfig } from "src/containers/Config";
 import { shortRecordToken } from "src/helpers";
-import {
-  NOJS_ROUTE_PREFIX,
-  PROPOSAL_STATUS_CENSORED,
-  PROPOSAL_PAGE_SIZE
-} from "src/constants";
+import { NOJS_ROUTE_PREFIX, PROPOSAL_STATUS_CENSORED } from "src/constants";
 
 const LoadingPlaceholders = ({ numberOfItems, placeholder }) => {
   const Item = placeholder;
@@ -65,7 +61,7 @@ const RecordsView = ({
   onSetIndex,
   hasMore,
   filterCensored,
-  pageSize = PROPOSAL_PAGE_SIZE,
+  pageSize,
   sort
 }) => {
   const [loadingItems, setLoadingItems] = useState(pageSize);

src/constants.js

@@ -100,10 +100,6 @@ export const PROPOSAL_APPROVED = 8;
 export const PROPOSAL_COMMENT_UPVOTE = 1;
 export const PROPOSAL_COMMENT_DOWNVOTE = -1;
 
-export const PROPOSAL_PAGE_SIZE = 5;
-export const BILLING_STATUS_CHANGES_PAGE_SIZE = 5;
-export const INVENTORY_PAGE_SIZE = 20;
-
 // Proposals presentational statuses returned by the 'voteinv' &
 // 'proposalinv' endpoints from the API.
 export const UNREVIEWED = "unreviewed";

src/containers/Comments/Download/DownloadCommentsTimestamps.jsx

@@ -3,6 +3,7 @@ import DownloadJSON from "src/components/DownloadJSON";
 import { useDownloadCommentsTimestamps } from "./hooks";
 import { Spinner, Link } from "pi-ui";
 import { loadCommentsTimestamps } from "src/lib/local_storage";
+import { usePolicy } from "src/hooks";
 
 const DownloadCommentsTimestampsWrapper = ({
   label,
@@ -23,8 +24,11 @@ const DownloadCommentsTimestampsWrapper = ({
 };
 
 const DownloadCommentsTimestamps = ({ recordToken }) => {
+  const {
+    policyComments: { timestampspagesize: timestampsPageSize }
+  } = usePolicy();
   const { loading, progress, timestamps, multiPage } =
-    useDownloadCommentsTimestamps(recordToken);
+    useDownloadCommentsTimestamps(recordToken, timestampsPageSize);
 
   return loading ? (
     <>

src/containers/Comments/Download/hooks.js

@@ -35,8 +35,7 @@ export function useDownloadComments(token) {
   return { comments, onFetchCommentsTimestamps };
 }
 
-const TIMESTAMPS_PAGE_SIZE = 100;
-export function useDownloadCommentsTimestamps(recordToken) {
+export function useDownloadCommentsTimestamps(recordToken, timestampsPageSize) {
   const [timestamps, setTimestamps] = useState(null);
   const [remaining, setRemaining] = useState([]);
   const [progress, setProgress] = useState(0);
@@ -50,7 +49,7 @@ export function useDownloadCommentsTimestamps(recordToken) {
     [allCommentsBySection]
   );
   const commentsLength = comments?.length || 0;
-  const multiPage = commentsLength > TIMESTAMPS_PAGE_SIZE;
+  const multiPage = commentsLength > timestampsPageSize;
   const onFetchCommentsTimestamps = useAction(act.onFetchCommentsTimestamps);
 
   useEffect(() => {
@@ -59,8 +58,8 @@ export function useDownloadCommentsTimestamps(recordToken) {
   }, [comments]);
 
   const getCommentIdsForPagination = (commentIds) => [
-    take(TIMESTAMPS_PAGE_SIZE)(commentIds),
-    takeRight(commentIds.length - TIMESTAMPS_PAGE_SIZE)(commentIds)
+    take(timestampsPageSize)(commentIds),
+    takeRight(commentIds.length - timestampsPageSize)(commentIds)
   ];
 
   const getProgressPercentage = useCallback(

src/containers/Invoice/Edit/Edit.jsx

@@ -9,11 +9,15 @@ import { useEditInvoice } from "./hooks";
 import { fromUSDCentsToUSDUnits } from "src/helpers";
 import InvoiceLoader from "src/components/Invoice/InvoiceLoader";
 import InvoiceForm from "src/components/InvoiceForm";
+import usePolicy from "src/hooks/api/usePolicy";
 
 const EditInvoice = ({ match }) => {
   const tokenFromUrl = get("params.token", match);
   const { onEditInvoice } = useEditInvoice();
   const { invoice, loading, error } = useInvoice(tokenFromUrl);
+  const {
+    policyTicketVote: { summariespagesize: proposalPageSize }
+  } = usePolicy();
 
   const isInvoiceLoaded = !loading && !!invoice;
 
@@ -37,7 +41,7 @@ const EditInvoice = ({ match }) => {
     : null;
 
   const { proposalsNotRFP: proposals, error: proposalsError } =
-    useApprovedProposals();
+    useApprovedProposals(proposalPageSize);
   return (
     <Card className="container margin-bottom-l">
       {error ? (

src/containers/Invoice/New/New.jsx

@@ -3,10 +3,15 @@ import { Card } from "pi-ui";
 import InvoiceForm from "src/components/InvoiceForm";
 import { useNewInvoice } from "./hooks";
 import useApprovedProposals from "src/hooks/api/useApprovedProposals";
+import usePolicy from "src/hooks/api/usePolicy";
 
 const NewInvoice = () => {
+  const {
+    policyTicketVote: { summariespagesize: proposalPageSize }
+  } = usePolicy();
   const { onSubmitInvoice } = useNewInvoice();
-  const { proposalsNotRFP: proposals, error } = useApprovedProposals();
+  const { proposalsNotRFP: proposals, error } =
+    useApprovedProposals(proposalPageSize);
 
   return (
     <Card className="container margin-bottom-l">

src/containers/Proposal/Admin/Admin.jsx

@@ -5,6 +5,7 @@ import ProposalLoader from "src/components/Proposal/ProposalLoader";
 import useQueryStringWithIndexValue from "src/hooks/utils/useQueryStringWithIndexValue";
 import { tabValues, statusByTab } from "./helpers";
 import { mapProposalsTokensByTab } from "src/containers/Proposal/helpers";
+import usePolicy from "src/hooks/api/usePolicy";
 import {
   UnvettedActionsProvider,
   PublicActionsProvider
@@ -24,6 +25,12 @@ const AdminProposals = ({ TopBanner, PageDetails, Main }) => {
     0,
     tabLabels
   );
+  const {
+    policyTicketVote: {
+      summariespagesize: proposalPageSize,
+      inventorypagesize: inventoryPageSize
+    }
+  } = usePolicy();
   const {
     proposals,
     proposalsTokens,
@@ -37,7 +44,9 @@ const AdminProposals = ({ TopBanner, PageDetails, Main }) => {
     fetchVoteSummary: false,
     fetchProposalSummary: true,
     unvetted: true,
-    proposalStatus: statusByTab[tabLabels[tabIndex]]
+    proposalStatus: statusByTab[tabLabels[tabIndex]],
+    proposalPageSize: proposalPageSize,
+    inventoryPageSize: inventoryPageSize
   });
 
   const getEmptyMessage = useCallback((tab) => {
@@ -70,6 +79,7 @@ const AdminProposals = ({ TopBanner, PageDetails, Main }) => {
       onFetchMoreProposals={onFetchMoreProposals}
       dropdownTabsForMobile={true}
       hasMore={hasMoreProposals}
+      pageSize={proposalPageSize}
       isLoading={loading || verifying}
       getEmptyMessage={getEmptyMessage}>
       {({ tabs, content }) => (

src/containers/Proposal/Detail/Detail.jsx

@@ -9,7 +9,8 @@ import {
   usePaywall,
   useIdentity,
   useDocumentTitle,
-  useModalContext
+  useModalContext,
+  usePolicy
 } from "src/hooks";
 import Comments from "src/containers/Comments";
 import ProposalLoader from "src/components/Proposal/ProposalLoader";
@@ -49,6 +50,9 @@ const SetPageTitle = ({ title }) => {
 const ProposalDetail = ({ Main, match, history }) => {
   const tokenFromUrl = shortRecordToken(get("params.token", match));
   const threadParentCommentID = get("params.commentid", match);
+  const {
+    policyTicketVote: { summariespagesize: proposalPageSize }
+  } = usePolicy();
   const {
     proposal,
     loading,
@@ -64,7 +68,7 @@ const ProposalDetail = ({ Main, match, history }) => {
     commentsLoading,
     onReloadProposalDetails,
     billingStatusChangeUsername
-  } = useProposal(tokenFromUrl, threadParentCommentID);
+  } = useProposal(tokenFromUrl, proposalPageSize, threadParentCommentID);
   const { userid } = currentUser || {};
   const isSingleThread = !!threadParentID;
   const proposalToken = getProposalToken(proposal);

src/containers/Proposal/Detail/hooks.js

@@ -50,7 +50,7 @@ const getProposalRfpLinksTokens = (proposal) => {
   return isSubmission ? [proposal.linkto] : proposal.linkedfrom;
 };
 
-export function useProposal(token, threadParentID) {
+export function useProposal(token, proposalPageSize, threadParentID) {
   const tokenShort = shortRecordToken(token);
   const onFetchProposalDetails = useAction(act.onFetchProposalDetails);
   const onFetchProposalsBatch = useAction(act.onFetchProposalsBatch);
@@ -191,8 +191,10 @@ export function useProposal(token, threadParentID) {
       },
       verify: () => {
         if (hasRemainingTokens) {
-          const [tokensBatch, next] =
-            getTokensForProposalsPagination(remainingTokens);
+          const [tokensBatch, next] = getTokensForProposalsPagination(
+            remainingTokens,
+            proposalPageSize
+          );
           // Fetch vote & proposal summaries only if the proposal is a RFP.
           // If it is a submission, just grab the records info.
           onFetchProposalsBatch({

src/containers/Proposal/Download/DownloadVotesTimestamps.jsx

@@ -4,6 +4,7 @@ import DownloadJSON from "src/components/DownloadJSON";
 import { useDownloadVoteTimestamps } from "./hooks";
 import { Spinner, Link } from "pi-ui";
 import { loadVotesTimestamps } from "src/lib/local_storage";
+import { usePolicy } from "src/hooks";
 
 const DownloadVotesTimestampsWrapper = ({ label, recordToken, votesCount }) => {
   const [start, setStart] = useState(false);
@@ -26,8 +27,13 @@ const DownloadVotesTimestampsWrapper = ({ label, recordToken, votesCount }) => {
 };
 
 const DownloadVotesTimestamps = ({ recordToken, votesCount }) => {
+  const {
+    policy: {
+      policyTicketVote: { timestampspagesize: timestampsPageSize }
+    }
+  } = usePolicy();
   const { timestamps, progress, loading, error, multiPage } =
-    useDownloadVoteTimestamps(recordToken, votesCount);
+    useDownloadVoteTimestamps(recordToken, votesCount, timestampsPageSize);
 
   return loading ? (
     <>

src/containers/Proposal/Download/hooks.js

@@ -8,22 +8,25 @@ import {
   loadVotesTimestamps
 } from "src/lib/local_storage";
 
-const TIMESTAMPS_PAGE_SIZE = 100;
-export function useDownloadVoteTimestamps(token, votesCount) {
+export function useDownloadVoteTimestamps(
+  token,
+  votesCount,
+  timestampsPageSize
+) {
   const [votes, setVotes] = useState(null);
   const [auths, setAuths] = useState(null);
   const [details, setDetails] = useState(null);
   const [page, setPage] = useState(1);
   const [progress, setProgress] = useState(0);
-  const multiPage = votesCount > TIMESTAMPS_PAGE_SIZE;
+  const multiPage = votesCount > timestampsPageSize;
   const onFetchTicketVoteTimestamps = useAction(
     act.onFetchTicketVoteTimestamps
   );
 
   const getProgressPercentage = useCallback(
     (total) =>
-      total ? ((total * TIMESTAMPS_PAGE_SIZE) / votesCount).toFixed(0) : 0,
-    [votesCount]
+      total ? ((total * timestampsPageSize) / votesCount).toFixed(0) : 0,
+    [votesCount, timestampsPageSize]
   );
 
   useEffect(() => {

src/containers/Proposal/Edit/Edit.jsx

@@ -20,10 +20,14 @@ import { getMarkdownContent, isPublicProposal } from "../helpers";
 import { formatUnixTimestampToObj } from "src/utils";
 import { getAttachmentsFiles } from "src/helpers";
 import { usdFormatter } from "src/utils";
+import usePolicy from "src/hooks/api/usePolicy";
 
 const EditProposal = ({ match }) => {
   const tokenFromUrl = get("params.token", match);
-  const { proposal, loading } = useProposal(tokenFromUrl);
+  const {
+    policyTicketVote: { summariespagesize: proposalPageSize }
+  } = usePolicy();
+  const { proposal, loading } = useProposal(tokenFromUrl, proposalPageSize);
   const isPublic = isPublicProposal(proposal);
   const { onEditProposal, currentUser } = useEditProposal();
   const { userid } = currentUser || {};

src/containers/Proposal/User/Submitted.jsx

@@ -9,8 +9,7 @@ import {
 import LazyList from "src/components/LazyList";
 import LoadingPlaceholders from "src/components/LoadingPlaceholders";
 import HelpMessage from "src/components/HelpMessage";
-
-const PAGE_SIZE = 20;
+import usePolicy from "src/hooks/api/usePolicy";
 
 const Proposals = (props) => {
   const renderProposal = (record) => {
@@ -20,8 +19,11 @@ const Proposals = (props) => {
   const [hasMoreToLoad, setHasMore] = useState(false);
 
   const { userID } = props;
+  const {
+    policyTicketVote: { summariespagesize: proposalPageSize }
+  } = usePolicy();
   const { proposals, loading, numOfUserProposals, onFetchMoreProposals } =
-    useUserProposals({ userID });
+    useUserProposals({ proposalPageSize, userID });
 
   const amountOfProposalsFetched = proposals ? proposals.length : 0;
 
@@ -53,7 +55,9 @@ const Proposals = (props) => {
   const amountOfMissingProposals =
     numOfUserProposals - amountOfProposalsFetched;
   const itemsToBeLoaded =
-    amountOfMissingProposals > PAGE_SIZE ? PAGE_SIZE : amountOfMissingProposals;
+    amountOfMissingProposals > proposalPageSize
+      ? proposalPageSize
+      : amountOfMissingProposals;
 
   return (
     <UnvettedActionsProvider>

src/containers/Proposal/User/hooks.js

@@ -21,7 +21,6 @@ import isEmpty from "lodash/fp/isEmpty";
 import keys from "lodash/fp/keys";
 import difference from "lodash/fp/difference";
 import assign from "lodash/fp/assign";
-import { PROPOSAL_PAGE_SIZE } from "src/constants";
 import {
   getRfpLinkedProposals,
   getTokensForProposalsPagination
@@ -81,7 +80,7 @@ const getUnfetchedTokens = (proposals, tokens) =>
   difference(tokens)(keys(proposals));
 
 export function useUserProposals({
-  proposalPageSize = PROPOSAL_PAGE_SIZE,
+  proposalPageSize,
   fetchRfpLinks = true,
   fetchVoteSummary = true,
   fetchProposalSummary = true,