From a689f164745696edf579b627d17b809726d8cfbe Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 2 Jul 2020 18:33:58 -0300
Subject: [PATCH 1/4] [cms] feat: change proposaltoken to proposalname on
 invoice lineitem

This diff now allows users to select proposals by its name, instead of
its token.

Since getting proposals names require a batching request, and those
requests are bounded by 20 proposals for each request, those requests
have to be done more than once in case the token from the
invoice (details and diff), or
the proposal (new and edit actions) are not on the dropdown list.
---
 src/actions/api.js                            |  6 +-
 src/components/Diff/Diff.jsx                  |  4 +-
 src/components/Diff/DiffLineitems.jsx         | 23 ++++--
 src/components/Invoice/Invoice.jsx            |  7 +-
 .../InvoiceDatasheet/InvoiceDatasheet.jsx     | 19 ++++-
 .../components/LazySelector.jsx               | 37 ++++++++++
 src/components/InvoiceDatasheet/helpers.js    | 18 +++--
 src/components/InvoiceDatasheet/wrappers.jsx  | 74 ++++++++++++++++++-
 src/components/InvoiceForm/InvoiceForm.jsx    | 10 +--
 src/components/ModalDiff/ModalDiffInvoice.jsx | 33 ++++++++-
 src/containers/Invoice/Detail/Detail.jsx      | 44 ++++++++++-
 src/containers/Invoice/Edit/Edit.jsx          |  6 +-
 src/containers/Invoice/New/New.jsx            | 11 ++-
 src/containers/Invoice/New/hooks.js           | 16 +---
 src/containers/Proposal/Public/Public.jsx     |  2 +-
 src/containers/Proposal/Unvetted/Unvetted.jsx |  2 +-
 src/containers/Proposal/hooks/index.js        |  1 -
 src/hooks/api/useApprovedProposals.js         | 41 ++++++++++
 src/hooks/api/useProposalBatchWithoutRedux.js |  8 +-
 .../hooks => hooks/api}/useProposalsBatch.js  |  0
 20 files changed, 293 insertions(+), 69 deletions(-)
 create mode 100644 src/components/InvoiceDatasheet/components/LazySelector.jsx
 create mode 100644 src/hooks/api/useApprovedProposals.js
 rename src/{containers/Proposal/hooks => hooks/api}/useProposalsBatch.js (100%)

diff --git a/src/actions/api.js b/src/actions/api.js
index aa805c461..c1dcfad94 100644
--- a/src/actions/api.js
+++ b/src/actions/api.js
@@ -344,16 +344,16 @@ export const onFetchAdminInvoices = () =>
 
 export const onFetchProposalsBatchWithoutState = (
   tokens,
-  fetchPropsoals = true,
+  fetchProposals = true,
   fetchVoteSummary = true
 ) =>
   withCsrf(async (_, __, csrf) => {
     const res = await Promise.all([
-      fetchPropsoals && api.proposalsBatch(csrf, tokens),
+      fetchProposals && api.proposalsBatch(csrf, tokens),
       fetchVoteSummary && api.proposalsBatchVoteSummary(csrf, tokens)
     ]);
     const proposals =
-      fetchPropsoals && res.find((res) => res && res.proposals).proposals;
+      fetchProposals && res.find((res) => res && res.proposals).proposals;
     const summaries =
       fetchVoteSummary && res.find((res) => res && res.summaries).summaries;
     return [proposals, summaries];
diff --git a/src/components/Diff/Diff.jsx b/src/components/Diff/Diff.jsx
index cd6fbca08..be253e0b7 100644
--- a/src/components/Diff/Diff.jsx
+++ b/src/components/Diff/Diff.jsx
@@ -157,7 +157,7 @@ export const DiffText = ({ newText, oldText }) => {
   ));
 };
 
-export const DiffInvoices = ({ oldData, newData, className }) => {
+export const DiffInvoices = ({ oldData, newData, className, proposals }) => {
   const newLineitems = setLineitemParams(newData.lineitems, {
     rate: newData.contractorrate
   });
@@ -169,7 +169,7 @@ export const DiffInvoices = ({ oldData, newData, className }) => {
 
   return (
     <SheetRenderer headers={createTableHeaders()} className={className}>
-      <DiffLineitemsDatasheet lineItems={lineitemsDiff} />
+      <DiffLineitemsDatasheet lineItems={lineitemsDiff} proposals={proposals} />
     </SheetRenderer>
   );
 };
diff --git a/src/components/Diff/DiffLineitems.jsx b/src/components/Diff/DiffLineitems.jsx
index 410d2fe79..8523f69d5 100644
--- a/src/components/Diff/DiffLineitems.jsx
+++ b/src/components/Diff/DiffLineitems.jsx
@@ -1,10 +1,11 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import { classNames, useTheme } from "pi-ui";
 import { fromUSDCentsToUSDUnits, fromMinutesToHours } from "src/helpers";
 import styles from "./Diff.module.css";
 import { TableRow } from "src/components/InvoiceDatasheet/InvoiceDatasheet";
 import { getTotalsLine } from "src/components/InvoiceDatasheet/helpers";
+import get from "lodash/get";
 
 const renderGrid = (lineItems) =>
   lineItems.reduce(
@@ -15,7 +16,7 @@ const renderGrid = (lineItems) =>
         domain,
         subdomain,
         description,
-        proposaltoken,
+        proposalname,
         subuserid,
         subrate,
         labor,
@@ -40,7 +41,7 @@ const renderGrid = (lineItems) =>
           value: description,
           multiline: true
         },
-        { value: proposaltoken },
+        { value: proposalname },
         { value: subuserid },
         { value: subRate },
         { value: laborHours },
@@ -57,15 +58,23 @@ const renderGrid = (lineItems) =>
     { grid: [], expenseTotal: 0, laborTotal: 0, total: 0 }
   );
 
-const DiffLineitems = ({ lineItems }) => {
+const DiffLineitems = ({ lineItems, proposals }) => {
   const { themeName } = useTheme();
   const isDarkTheme = themeName === "dark";
 
-  const { grid, expenseTotal, laborTotal, total } = useMemo(
-    () => renderGrid(lineItems),
-    [lineItems]
+  const getProposalName = useCallback(
+    (token) => get(proposals, [token, "name"]),
+    [proposals]
   );
 
+  const { grid, expenseTotal, laborTotal, total } = useMemo(() => {
+    const newLineItems = lineItems.map((item) => ({
+      ...item,
+      proposalname: getProposalName(item.proposaltoken)
+    }));
+    return renderGrid(newLineItems);
+  }, [lineItems, getProposalName]);
+
   const numberOfCols = grid.length && grid[0] && grid[0].items.length;
 
   const newTotals = [
diff --git a/src/components/Invoice/Invoice.jsx b/src/components/Invoice/Invoice.jsx
index 096f21ca4..6a49cb6dd 100644
--- a/src/components/Invoice/Invoice.jsx
+++ b/src/components/Invoice/Invoice.jsx
@@ -23,7 +23,7 @@ import ThumbnailGrid from "src/components/Files";
 import { useLoaderContext } from "src/containers/Loader";
 import VersionPicker from "src/components/VersionPicker";
 
-const Invoice = ({ invoice, extended, approvedProposalsTokens }) => {
+const Invoice = ({ invoice, extended, approvedProposals }) => {
   const {
     censorshiprecord,
     file,
@@ -113,6 +113,7 @@ const Invoice = ({ invoice, extended, approvedProposalsTokens }) => {
                       )}
                       version={version}
                       token={invoiceToken}
+                      proposals={approvedProposals}
                     />
                   )}
                 </Subtitle>
@@ -189,7 +190,7 @@ const Invoice = ({ invoice, extended, approvedProposalsTokens }) => {
                   value={invoice && invoice.input.lineitems}
                   readOnly
                   userRate={invContractorRate / 100}
-                  proposalsTokens={approvedProposalsTokens || []}
+                  proposals={approvedProposals || []}
                 />
               </>
             )}
@@ -203,7 +204,7 @@ const Invoice = ({ invoice, extended, approvedProposalsTokens }) => {
 
 Invoice.propTypes = {
   invoice: PropTypes.object.isRequired,
-  approvedProposalsTokens: PropTypes.array
+  approvedProposals: PropTypes.array
 };
 
 export default Invoice;
diff --git a/src/components/InvoiceDatasheet/InvoiceDatasheet.jsx b/src/components/InvoiceDatasheet/InvoiceDatasheet.jsx
index 99bde0e52..ca52e0534 100644
--- a/src/components/InvoiceDatasheet/InvoiceDatasheet.jsx
+++ b/src/components/InvoiceDatasheet/InvoiceDatasheet.jsx
@@ -11,6 +11,7 @@ import CellRenderer from "./components/CellRenderer";
 import TableButton from "./components/TableButton";
 import usePolicy from "src/hooks/api/usePolicy";
 import useSubContractors from "src/hooks/api/useSubContractors";
+
 import {
   processCellsChange,
   convertLineItemsToGrid,
@@ -50,13 +51,23 @@ const InvoiceDatasheet = React.memo(function InvoiceDatasheet({
   readOnly,
   userRate,
   errors,
-  proposalsTokens
+  proposals
 }) {
   const { policy } = usePolicy();
   const { subContractors } = useSubContractors();
   const [grid, setGrid] = useState([]);
   const [currentRate, setCurrentRate] = useState(userRate || 0);
 
+  const proposalsOptions = useMemo(
+    () =>
+      proposals &&
+      proposals.map((p) => ({
+        label: p.name,
+        value: p.censorshiprecord.token
+      })),
+    [proposals]
+  );
+
   const handleCellsChange = useCallback(
     (changes) => {
       const { grid: newGrid } = processCellsChange(grid, changes, userRate);
@@ -93,7 +104,7 @@ const InvoiceDatasheet = React.memo(function InvoiceDatasheet({
         errors,
         currentRate,
         policy,
-        proposalsTokens,
+        proposalsOptions,
         subContractors
       );
       setGrid(grid);
@@ -104,7 +115,7 @@ const InvoiceDatasheet = React.memo(function InvoiceDatasheet({
       errors,
       currentRate,
       policy,
-      proposalsTokens,
+      proposalsOptions,
       subContractors
     ]
   );
@@ -242,7 +253,7 @@ InvoiceDatasheet.propTypes = {
   value: PropTypes.array.isRequired,
   readOnly: PropTypes.bool.isRequired,
   onChange: PropTypes.func,
-  proposalsTokens: PropTypes.array.isRequired
+  proposals: PropTypes.array.isRequired
 };
 
 InvoiceDatasheet.defaultProps = {
diff --git a/src/components/InvoiceDatasheet/components/LazySelector.jsx b/src/components/InvoiceDatasheet/components/LazySelector.jsx
new file mode 100644
index 000000000..739d26808
--- /dev/null
+++ b/src/components/InvoiceDatasheet/components/LazySelector.jsx
@@ -0,0 +1,37 @@
+import React, { useState, useCallback, useMemo } from "react";
+import { Select } from "pi-ui";
+
+const fetchingOption = {
+  isFetchingOption: true,
+  label: "Fetch more...",
+  value: ""
+};
+
+const LazySelector = ({ options, onFetch, needsFetch, onChange, onCommit }) => {
+  const [selected, setSelected] = useState();
+  const getValueObj = useCallback(
+    (value) => options.find((op) => op.value === value),
+    [options]
+  );
+
+  const handleChange = useCallback(
+    ({ isFetchingOption = false, value }) => {
+      if (isFetchingOption) {
+        onFetch();
+      } else {
+        setSelected(getValueObj(value));
+        onChange(value);
+        onCommit(value);
+      }
+    },
+    [onFetch, setSelected, onChange, onCommit, getValueObj]
+  );
+
+  const ops = useMemo(
+    () => (needsFetch ? [...options, fetchingOption] : options),
+    [options, needsFetch]
+  );
+  return <Select options={ops} value={selected} onChange={handleChange} />;
+};
+
+export default LazySelector;
diff --git a/src/components/InvoiceDatasheet/helpers.js b/src/components/InvoiceDatasheet/helpers.js
index 759e1bc4b..dffc5b042 100644
--- a/src/components/InvoiceDatasheet/helpers.js
+++ b/src/components/InvoiceDatasheet/helpers.js
@@ -7,7 +7,9 @@ import {
 import {
   selectWrapper,
   textAreaWrapper,
-  multilineTextWrapper
+  multilineTextWrapper,
+  proposalViewWrapper,
+  proposalSelectWrapper
 } from "./wrappers";
 
 export const columnTypes = {
@@ -75,7 +77,7 @@ export const convertLineItemsToGrid = (
   errors,
   userRate = 0,
   policy,
-  proposalsTokens,
+  proposalsOptions,
   subContractors
 ) => {
   const {
@@ -140,11 +142,8 @@ export const convertLineItemsToGrid = (
           readOnly,
           value: line.proposaltoken,
           error: rowErrors && rowErrors.proposaltoken,
-          dataEditor: selectWrapper(
-            proposalsTokens.map((token) => {
-              return { label: token, value: token };
-            })
-          )
+          dataEditor: proposalSelectWrapper(proposalsOptions),
+          valueViewer: proposalViewWrapper(proposalsOptions)
         },
         {
           readOnly: isSubContractorReadonly,
@@ -238,7 +237,7 @@ export const createTableHeaders = () => [
   { value: "Domain", readOnly: true, width: "12rem" },
   { value: "Subdomain", readOnly: true, width: "14rem" },
   { value: "Description", readOnly: true, width: "30rem" },
-  { value: "Proposal Token", readOnly: true, width: "10rem" },
+  { value: "Proposal", readOnly: true, width: "30rem" },
   { value: "Subcontr. ID", readOnly: true, width: "10rem" },
   { value: "Subcontr. Rate (USD)", readOnly: true, width: "8rem" },
   { value: "Labor (hours)", readOnly: true, width: "7rem" },
@@ -363,3 +362,6 @@ export const processCellsChange = (currentGrid, changes, userRate = 0) => {
     { grid: currentGrid }
   );
 };
+
+export const getProposalsOptions = (proposals = []) =>
+  proposals.map((p) => ({ label: p.name, value: p.censorshiprecord.token }));
diff --git a/src/components/InvoiceDatasheet/wrappers.jsx b/src/components/InvoiceDatasheet/wrappers.jsx
index 6e112cf5b..81b1d7a3e 100644
--- a/src/components/InvoiceDatasheet/wrappers.jsx
+++ b/src/components/InvoiceDatasheet/wrappers.jsx
@@ -1,8 +1,18 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import SelectEditor from "./components/SelectEditor";
 import TextArea from "./components/TextArea";
+import LazySelector from "./components/LazySelector";
+import { getProposalsOptions } from "./helpers";
+import { isEmpty } from "src/helpers";
+import { Spinner } from "pi-ui";
+import useApprovedProposals from "src/hooks/api/useApprovedProposals";
+import drop from "lodash/drop";
+import take from "lodash/take";
+
 import { multilineCellValue, textWrapper } from "./InvoiceDatasheet.module.css";
 
+const PROPOSAL_PAGE_SIZE = 20;
+
 export const selectWrapper = (options) => (props) => (
   <SelectEditor {...{ ...props, options }} />
 );
@@ -16,3 +26,65 @@ export const textAreaWrapper = () => (props) => (
 export const multilineTextWrapper = () => ({ value }) => (
   <div className={multilineCellValue}>{value}</div>
 );
+
+export const proposalViewWrapper = (proposals) => ({ cell: { value } }) => {
+  const findProposal = useCallback(
+    (v) => proposals && proposals.find((p) => p.value === v),
+    []
+  );
+
+  const selectedProposal = findProposal(value);
+
+  return (
+    <>
+      {!isEmpty(value) && !selectedProposal && <Spinner invert />}
+      <span>{selectedProposal && selectedProposal.label}</span>
+    </>
+  );
+};
+
+export const proposalSelectWrapper = (initialOptions) => (props) => {
+  const {
+    proposals,
+    proposalsTokens,
+    onFetchProposalsBatch
+  } = useApprovedProposals();
+
+  const [needsFetch, setNeedsFetch] = useState(
+    proposalsTokens.length > proposals.length
+  );
+  const [loading, setLoading] = useState(false);
+
+  const [options, setOptions] = useState(initialOptions);
+
+  const fetchProposalsBatch = useCallback(async () => {
+    const remainingTokens = drop(proposalsTokens, options.length);
+    const tokenParams = take(remainingTokens, PROPOSAL_PAGE_SIZE);
+    setLoading(true);
+    const res = await onFetchProposalsBatch(tokenParams, false);
+    const fetchedProposals = res && res[0];
+    setNeedsFetch(remainingTokens.length - fetchedProposals.length > 0);
+    setLoading(false);
+    const newOptions = [...options, ...getProposalsOptions(fetchedProposals)];
+    setOptions(newOptions);
+    return;
+  }, [proposalsTokens, onFetchProposalsBatch, options, setOptions]);
+
+  return (
+    <>
+      {!loading && (
+        <LazySelector
+          options={options}
+          onFetch={fetchProposalsBatch}
+          needsFetch={needsFetch}
+          {...props}
+        />
+      )}
+      {loading && (
+        <div className="margin-top-s">
+          <Spinner invert />
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/InvoiceForm/InvoiceForm.jsx b/src/components/InvoiceForm/InvoiceForm.jsx
index bacc73045..9807d054a 100644
--- a/src/components/InvoiceForm/InvoiceForm.jsx
+++ b/src/components/InvoiceForm/InvoiceForm.jsx
@@ -39,7 +39,7 @@ const InvoiceForm = React.memo(function InvoiceForm({
   isValid: isFormValid,
   submitSuccess,
   setSessionStorageInvoice,
-  approvedProposalsTokens,
+  approvedProposals,
   validateFiles,
   requireGitHubName,
   isEditing
@@ -179,7 +179,7 @@ const InvoiceForm = React.memo(function InvoiceForm({
         userRate={values.rate}
         errors={lineItemErrors}
         onChange={handleChangeInvoiceDatasheet}
-        proposalsTokens={approvedProposalsTokens}
+        proposals={approvedProposals}
       />
       <div className="justify-right">
         <DraftSaver submitSuccess={submitSuccess} />
@@ -193,7 +193,7 @@ const InvoiceFormWrapper = ({
   initialValues,
   onSubmit,
   history,
-  approvedProposalsTokens,
+  approvedProposals,
   editMode
 }) => {
   const { policy } = usePolicy();
@@ -284,7 +284,7 @@ const InvoiceFormWrapper = ({
             ...props,
             submitSuccess,
             setSessionStorageInvoice,
-            approvedProposalsTokens,
+            approvedProposals,
             validateFiles,
             requireGitHubName,
             isEditing: editMode
@@ -296,7 +296,7 @@ const InvoiceFormWrapper = ({
 };
 
 InvoiceFormWrapper.propTypes = {
-  approvedProposalsTokens: PropTypes.array.isRequired,
+  approvedProposals: PropTypes.array.isRequired,
   initialValues: PropTypes.object,
   onSubmit: PropTypes.func,
   setSessionStorageInvoice: PropTypes.func,
diff --git a/src/components/ModalDiff/ModalDiffInvoice.jsx b/src/components/ModalDiff/ModalDiffInvoice.jsx
index f9cb3d08d..b8dff7f75 100644
--- a/src/components/ModalDiff/ModalDiffInvoice.jsx
+++ b/src/components/ModalDiff/ModalDiffInvoice.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, useEffect } from "react";
 import { Text, Modal, CopyableText } from "pi-ui";
 import PropTypes from "prop-types";
 import { DiffInvoices } from "src/components/Diff/Diff";
@@ -14,11 +14,41 @@ import Field from "src/components/Invoice/Field";
 import { Row } from "src/components/layout";
 import styles from "./ModalDiff.module.css";
 import { presentationalInvoiceName } from "src/containers/Invoice/helpers";
+import uniq from "lodash/uniq";
+import isEmpty from "lodash/isEmpty";
+import useApprovedProposals from "src/hooks/api/useApprovedProposals";
 
 const ModalDiffInvoice = ({ onClose, invoice, prevInvoice, ...props }) => {
   const prevLineItems =
     prevInvoice && prevInvoice.input ? prevInvoice.input : [];
 
+  const propsByToken = useMemo(
+    () =>
+      uniq([
+        ...prevLineItems.lineitems.map(({ proposaltoken }) => proposaltoken),
+        ...invoice.input.lineitems.map(({ proposaltoken }) => proposaltoken)
+      ]),
+    [invoice.input.lineitems, prevLineItems]
+  );
+  const {
+    proposalByToken,
+    onFetchProposalsBatch,
+    isLoading
+  } = useApprovedProposals();
+
+  useEffect(() => {
+    if (!isLoading && !isEmpty(proposalByToken)) {
+      const remainingTokens = propsByToken
+        ? propsByToken.filter(
+            (t) => !Object.keys(proposalByToken).some((pt) => pt === t)
+          )
+        : [];
+      if (!isEmpty(remainingTokens)) {
+        onFetchProposalsBatch(remainingTokens, false);
+      }
+    }
+  }, [isLoading, proposalByToken, propsByToken, onFetchProposalsBatch]);
+
   return (
     <Modal
       onClose={onClose}
@@ -77,6 +107,7 @@ const ModalDiffInvoice = ({ onClose, invoice, prevInvoice, ...props }) => {
         <DiffInvoices
           newData={invoice.input}
           oldData={prevLineItems}
+          proposals={proposalByToken}
           className="margin-top-m"
         />
       </div>
diff --git a/src/containers/Invoice/Detail/Detail.jsx b/src/containers/Invoice/Detail/Detail.jsx
index 6edc60646..b0b1eb300 100644
--- a/src/containers/Invoice/Detail/Detail.jsx
+++ b/src/containers/Invoice/Detail/Detail.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useMemo } from "react";
 import { withRouter } from "react-router-dom";
 import get from "lodash/fp/get";
 import { useInvoice } from "./hooks";
@@ -8,14 +8,50 @@ import { AdminInvoiceActionsProvider } from "src/containers/Invoice/Actions";
 import Comments from "src/containers/Comments";
 import { isUnreviewedInvoice } from "../helpers";
 import { GoBackLink } from "src/components/Router";
+import useApprovedProposals from "src/hooks/api/useApprovedProposals";
+import isEmpty from "lodash/isEmpty";
+import flow from "lodash/fp/flow";
+import map from "lodash/fp/map";
+import filter from "lodash/fp/filter";
+import uniq from "lodash/fp/uniq";
 
 const InvoiceDetail = ({ Main, match }) => {
   const invoiceToken = get("params.token", match);
   const threadParentCommentID = get("params.commentid", match);
-  const { invoice, loading, approvedProposalsTokens } = useInvoice(
-    invoiceToken
+  const { invoice, loading } = useInvoice(invoiceToken);
+  const tokens = useMemo(
+    () =>
+      invoice &&
+      invoice.input &&
+      invoice.input.lineitems &&
+      flow(
+        map(({ proposaltoken }) => proposaltoken),
+        uniq,
+        filter((t) => t !== "")
+      )(invoice.input.lineitems),
+    [invoice]
   );
 
+  const {
+    proposals,
+    proposalByToken,
+    onFetchProposalsBatch,
+    isLoading
+  } = useApprovedProposals();
+
+  useEffect(() => {
+    if (!isLoading && !isEmpty(proposalByToken)) {
+      const remainingTokens = tokens
+        ? tokens.filter(
+            (t) => !Object.keys(proposalByToken).some((pt) => pt === t)
+          )
+        : [];
+      if (!isEmpty(remainingTokens)) {
+        onFetchProposalsBatch(remainingTokens, false);
+      }
+    }
+  }, [isLoading, proposalByToken, tokens, onFetchProposalsBatch]);
+
   return (
     <>
       <Main fillScreen>
@@ -25,7 +61,7 @@ const InvoiceDetail = ({ Main, match }) => {
             <Invoice
               invoice={invoice}
               extended
-              approvedProposalsTokens={approvedProposalsTokens || []}
+              approvedProposals={proposals || []}
             />
           ) : (
             <InvoiceLoader extended />
diff --git a/src/containers/Invoice/Edit/Edit.jsx b/src/containers/Invoice/Edit/Edit.jsx
index e60a3c284..931b9d975 100644
--- a/src/containers/Invoice/Edit/Edit.jsx
+++ b/src/containers/Invoice/Edit/Edit.jsx
@@ -4,7 +4,7 @@ import get from "lodash/fp/get";
 import { withRouter } from "react-router-dom";
 import { Card } from "pi-ui";
 import { useInvoice } from "../Detail/hooks";
-import { useApprovedProposalsTokens } from "../New/hooks";
+import useApprovedProposals from "src/hooks/api/useApprovedProposals";
 import { useEditInvoice } from "./hooks";
 import { fromUSDCentsToUSDUnits } from "src/helpers";
 import InvoiceLoader from "src/components/Invoice/InvoiceLoader";
@@ -14,7 +14,7 @@ const EditInvoice = ({ match }) => {
   const tokenFromUrl = get("params.token", match);
   const { onEditInvoice } = useEditInvoice();
   const { invoice, loading } = useInvoice(tokenFromUrl);
-  const approvedTokens = useApprovedProposalsTokens();
+  const { proposals } = useApprovedProposals();
 
   const isInvoiceLoaded = !loading && !!invoice;
 
@@ -43,7 +43,7 @@ const EditInvoice = ({ match }) => {
         <InvoiceForm
           initialValues={initialValues}
           onSubmit={onEditInvoice}
-          approvedProposalsTokens={approvedTokens}
+          approvedProposals={proposals}
           editMode
         />
       ) : (
diff --git a/src/containers/Invoice/New/New.jsx b/src/containers/Invoice/New/New.jsx
index e01558c7c..bf3a98c6d 100644
--- a/src/containers/Invoice/New/New.jsx
+++ b/src/containers/Invoice/New/New.jsx
@@ -1,17 +1,16 @@
 import React from "react";
 import { Card } from "pi-ui";
 import InvoiceForm from "src/components/InvoiceForm";
-import { useNewInvoice, useApprovedProposalsTokens } from "./hooks";
+import { useNewInvoice } from "./hooks";
+import useApprovedProposals from "src/hooks/api/useApprovedProposals";
 
 const NewInvoice = () => {
   const { onSubmitInvoice } = useNewInvoice();
-  const approvedTokens = useApprovedProposalsTokens();
+  const { proposals } = useApprovedProposals();
+
   return (
     <Card className="container margin-bottom-l">
-      <InvoiceForm
-        onSubmit={onSubmitInvoice}
-        approvedProposalsTokens={approvedTokens}
-      />
+      <InvoiceForm onSubmit={onSubmitInvoice} approvedProposals={proposals} />
     </Card>
   );
 };
diff --git a/src/containers/Invoice/New/hooks.js b/src/containers/Invoice/New/hooks.js
index 560e1bace..92df8fc90 100644
--- a/src/containers/Invoice/New/hooks.js
+++ b/src/containers/Invoice/New/hooks.js
@@ -1,22 +1,8 @@
-import * as external_api from "src/lib/external_api";
 import * as act from "src/actions";
-import * as sel from "src/selectors";
-import { useAction, useSelector } from "src/redux";
-import { useEffect, useState } from "react";
+import { useAction } from "src/redux";
 
 export function useNewInvoice() {
   return {
     onSubmitInvoice: useAction(act.onSaveNewInvoice)
   };
 }
-
-export function useApprovedProposalsTokens() {
-  const isTestnet = useSelector(sel.isTestNet);
-  const [approvedTokens, setApprovedTokens] = useState([]);
-  useEffect(() => {
-    external_api.getCmsApprovedProposalsTokens(isTestnet).then((res) => {
-      setApprovedTokens(res.approved);
-    });
-  }, [isTestnet]);
-  return approvedTokens;
-}
diff --git a/src/containers/Proposal/Public/Public.jsx b/src/containers/Proposal/Public/Public.jsx
index 5b384bced..52f54d91a 100644
--- a/src/containers/Proposal/Public/Public.jsx
+++ b/src/containers/Proposal/Public/Public.jsx
@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from "react";
 import { Spinner } from "pi-ui";
 import styles from "./PublicProposals.module.css";
 import { tabValues, mapProposalsTokensByTab } from "./helpers";
-import { useProposalsBatch } from "../hooks";
+import useProposalsBatch from "src/hooks/api/useProposalsBatch";
 import Proposal from "src/components/Proposal";
 import ProposalLoader from "src/components/Proposal/ProposalLoader";
 import { PublicActionsProvider } from "src/containers/Proposal/Actions";
diff --git a/src/containers/Proposal/Unvetted/Unvetted.jsx b/src/containers/Proposal/Unvetted/Unvetted.jsx
index ae6494c3d..88b6febad 100644
--- a/src/containers/Proposal/Unvetted/Unvetted.jsx
+++ b/src/containers/Proposal/Unvetted/Unvetted.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { useProposalsBatch } from "../hooks";
+import useProposalsBatch from "src/hooks/api/useProposalsBatch";
 import Proposal from "src/components/Proposal";
 import ProposalLoader from "src/components/Proposal/ProposalLoader";
 import { tabValues, mapProposalsTokensByTab } from "./helpers";
diff --git a/src/containers/Proposal/hooks/index.js b/src/containers/Proposal/hooks/index.js
index 621398957..ee8bd7de9 100644
--- a/src/containers/Proposal/hooks/index.js
+++ b/src/containers/Proposal/hooks/index.js
@@ -1,4 +1,3 @@
 export { default as useProposalVote } from "./useProposalVote";
-export { default as useProposalsBatch } from "./useProposalsBatch";
 export { default as useProposalURLs } from "./useProposalURLs";
 export { default as useProposalVoteTimeInfo } from "./useProposalVoteTimeInfo";
diff --git a/src/hooks/api/useApprovedProposals.js b/src/hooks/api/useApprovedProposals.js
new file mode 100644
index 000000000..c9306169b
--- /dev/null
+++ b/src/hooks/api/useApprovedProposals.js
@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import useAPIAction from "src/hooks/utils/useAPIAction";
+import useProposalsBatch from "src/hooks/api/useProposalsBatch";
+import { isEmpty } from "src/helpers";
+
+export default function useApprovedProposals() {
+  const {
+    isLoadingTokenInventory,
+    proposals,
+    proposalsTokens,
+    onFetchProposalsBatch
+  } = useProposalsBatch();
+
+  const requestParams = useMemo(() => [proposalsTokens.approved, false], [
+    proposalsTokens
+  ]);
+
+  const needsFetch = useMemo(
+    () =>
+      isEmpty(proposals) &&
+      proposalsTokens &&
+      proposalsTokens.approved &&
+      proposalsTokens.approved.length,
+    [proposals, proposalsTokens]
+  );
+
+  const [loading, error] = useAPIAction(
+    onFetchProposalsBatch,
+    requestParams,
+    needsFetch
+  );
+
+  return {
+    proposals: !isEmpty(proposals) ? Object.values(proposals) : [],
+    proposalByToken: proposals,
+    isLoading: loading || isLoadingTokenInventory,
+    error,
+    onFetchProposalsBatch,
+    proposalsTokens: proposalsTokens.approved
+  };
+}
diff --git a/src/hooks/api/useProposalBatchWithoutRedux.js b/src/hooks/api/useProposalBatchWithoutRedux.js
index a419ee152..00b1e606f 100644
--- a/src/hooks/api/useProposalBatchWithoutRedux.js
+++ b/src/hooks/api/useProposalBatchWithoutRedux.js
@@ -4,7 +4,7 @@ import { useAction } from "src/redux";
 
 export default function useProposalBatchWithoutRedux(
   tokens,
-  fetchPropsoals = true,
+  fetchProposals = true,
   fetchVoteSummary = true
 ) {
   const onFetchProposalsBatchWithoutState = useAction(
@@ -16,7 +16,7 @@ export default function useProposalBatchWithoutRedux(
   const resetData = () => setProposalsWithVoteSummaries(null);
   const [isRequesting, setIsRequesting] = useState(false);
   useEffect(() => {
-    const fetchProposals = async () => {
+    const onFetchProposals = async () => {
       const [proposals, summaries] = await onFetchProposalsBatchWithoutState(
         tokens,
         fetchProposals,
@@ -28,13 +28,13 @@ export default function useProposalBatchWithoutRedux(
 
     if (tokens && !proposalsWithVoteSummaries && !isRequesting) {
       setIsRequesting(true);
-      fetchProposals();
+      onFetchProposals();
     }
   }, [
     tokens,
     isRequesting,
     onFetchProposalsBatchWithoutState,
-    fetchPropsoals,
+    fetchProposals,
     fetchVoteSummary,
     proposalsWithVoteSummaries
   ]);
diff --git a/src/containers/Proposal/hooks/useProposalsBatch.js b/src/hooks/api/useProposalsBatch.js
similarity index 100%
rename from src/containers/Proposal/hooks/useProposalsBatch.js
rename to src/hooks/api/useProposalsBatch.js

From a253fc4a59d72c902eeec49cc9efe8acd6e2c7a7 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Thu, 9 Jul 2020 12:31:50 -0300
Subject: [PATCH 2/4] improve useApprovedProposals hook readability.

- add onFetchRemainingProposalsBatch method to fetch remaining
  tokens and lazy load proposal list
---
 .../components/LazySelector.jsx               | 33 +++++++--
 src/components/InvoiceDatasheet/wrappers.jsx  | 57 ++++-----------
 src/components/ModalDiff/ModalDiffInvoice.jsx | 45 ++++--------
 src/containers/Invoice/Detail/Detail.jsx      | 44 ++----------
 src/containers/Invoice/Edit/Edit.jsx          | 11 ++-
 src/containers/Invoice/helpers.js             | 14 ++++
 src/hooks/api/useApprovedProposals.js         | 72 ++++++++++++++++---
 7 files changed, 150 insertions(+), 126 deletions(-)

diff --git a/src/components/InvoiceDatasheet/components/LazySelector.jsx b/src/components/InvoiceDatasheet/components/LazySelector.jsx
index 739d26808..b43df1e63 100644
--- a/src/components/InvoiceDatasheet/components/LazySelector.jsx
+++ b/src/components/InvoiceDatasheet/components/LazySelector.jsx
@@ -1,5 +1,5 @@
-import React, { useState, useCallback, useMemo } from "react";
-import { Select } from "pi-ui";
+import React, { useState, useCallback, useMemo, useEffect } from "react";
+import { Select, Spinner } from "pi-ui";
 
 const fetchingOption = {
   isFetchingOption: true,
@@ -7,8 +7,16 @@ const fetchingOption = {
   value: ""
 };
 
-const LazySelector = ({ options, onFetch, needsFetch, onChange, onCommit }) => {
+const LazySelector = ({
+  options,
+  onFetch,
+  needsFetch,
+  onChange,
+  onCommit,
+  error = null
+}) => {
   const [selected, setSelected] = useState();
+  const [loading, setLoading] = useState(false);
   const getValueObj = useCallback(
     (value) => options.find((op) => op.value === value),
     [options]
@@ -17,6 +25,7 @@ const LazySelector = ({ options, onFetch, needsFetch, onChange, onCommit }) => {
   const handleChange = useCallback(
     ({ isFetchingOption = false, value }) => {
       if (isFetchingOption) {
+        setLoading(true);
         onFetch();
       } else {
         setSelected(getValueObj(value));
@@ -31,7 +40,23 @@ const LazySelector = ({ options, onFetch, needsFetch, onChange, onCommit }) => {
     () => (needsFetch ? [...options, fetchingOption] : options),
     [options, needsFetch]
   );
-  return <Select options={ops} value={selected} onChange={handleChange} />;
+
+  useEffect(
+    function onOptionsChangeOrError() {
+      return () => {
+        setLoading(false);
+      };
+    },
+    [options, error]
+  );
+
+  return loading ? (
+    <div className="margin-top-s">
+      <Spinner invert />
+    </div>
+  ) : (
+    <Select options={ops} value={selected} onChange={handleChange} />
+  );
 };
 
 export default LazySelector;
diff --git a/src/components/InvoiceDatasheet/wrappers.jsx b/src/components/InvoiceDatasheet/wrappers.jsx
index 81b1d7a3e..3722b4900 100644
--- a/src/components/InvoiceDatasheet/wrappers.jsx
+++ b/src/components/InvoiceDatasheet/wrappers.jsx
@@ -1,13 +1,10 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import SelectEditor from "./components/SelectEditor";
 import TextArea from "./components/TextArea";
 import LazySelector from "./components/LazySelector";
-import { getProposalsOptions } from "./helpers";
 import { isEmpty } from "src/helpers";
 import { Spinner } from "pi-ui";
 import useApprovedProposals from "src/hooks/api/useApprovedProposals";
-import drop from "lodash/drop";
-import take from "lodash/take";
 
 import { multilineCellValue, textWrapper } from "./InvoiceDatasheet.module.css";
 
@@ -43,48 +40,24 @@ export const proposalViewWrapper = (proposals) => ({ cell: { value } }) => {
   );
 };
 
-export const proposalSelectWrapper = (initialOptions) => (props) => {
+export const proposalSelectWrapper = (options) => (props) => {
   const {
-    proposals,
-    proposalsTokens,
-    onFetchProposalsBatch
+    remainingTokens,
+    onFetchRemainingProposalsBatch,
+    error
   } = useApprovedProposals();
 
-  const [needsFetch, setNeedsFetch] = useState(
-    proposalsTokens.length > proposals.length
-  );
-  const [loading, setLoading] = useState(false);
-
-  const [options, setOptions] = useState(initialOptions);
-
-  const fetchProposalsBatch = useCallback(async () => {
-    const remainingTokens = drop(proposalsTokens, options.length);
-    const tokenParams = take(remainingTokens, PROPOSAL_PAGE_SIZE);
-    setLoading(true);
-    const res = await onFetchProposalsBatch(tokenParams, false);
-    const fetchedProposals = res && res[0];
-    setNeedsFetch(remainingTokens.length - fetchedProposals.length > 0);
-    setLoading(false);
-    const newOptions = [...options, ...getProposalsOptions(fetchedProposals)];
-    setOptions(newOptions);
-    return;
-  }, [proposalsTokens, onFetchProposalsBatch, options, setOptions]);
+  const onLoadMoreOptions = useCallback(() => {
+    onFetchRemainingProposalsBatch(PROPOSAL_PAGE_SIZE);
+  }, [onFetchRemainingProposalsBatch]);
 
   return (
-    <>
-      {!loading && (
-        <LazySelector
-          options={options}
-          onFetch={fetchProposalsBatch}
-          needsFetch={needsFetch}
-          {...props}
-        />
-      )}
-      {loading && (
-        <div className="margin-top-s">
-          <Spinner invert />
-        </div>
-      )}
-    </>
+    <LazySelector
+      options={options}
+      onFetch={onLoadMoreOptions}
+      needsFetch={remainingTokens.length > 0}
+      error={error}
+      {...props}
+    />
   );
 };
diff --git a/src/components/ModalDiff/ModalDiffInvoice.jsx b/src/components/ModalDiff/ModalDiffInvoice.jsx
index b8dff7f75..8bdaa9d15 100644
--- a/src/components/ModalDiff/ModalDiffInvoice.jsx
+++ b/src/components/ModalDiff/ModalDiffInvoice.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from "react";
+import React, { useMemo } from "react";
 import { Text, Modal, CopyableText } from "pi-ui";
 import PropTypes from "prop-types";
 import { DiffInvoices } from "src/components/Diff/Diff";
@@ -15,39 +15,22 @@ import { Row } from "src/components/layout";
 import styles from "./ModalDiff.module.css";
 import { presentationalInvoiceName } from "src/containers/Invoice/helpers";
 import uniq from "lodash/uniq";
-import isEmpty from "lodash/isEmpty";
 import useApprovedProposals from "src/hooks/api/useApprovedProposals";
 
 const ModalDiffInvoice = ({ onClose, invoice, prevInvoice, ...props }) => {
-  const prevLineItems =
-    prevInvoice && prevInvoice.input ? prevInvoice.input : [];
+  const prevInput = prevInvoice && prevInvoice.input ? prevInvoice.input : [];
 
-  const propsByToken = useMemo(
-    () =>
-      uniq([
-        ...prevLineItems.lineitems.map(({ proposaltoken }) => proposaltoken),
-        ...invoice.input.lineitems.map(({ proposaltoken }) => proposaltoken)
-      ]),
-    [invoice.input.lineitems, prevLineItems]
-  );
-  const {
-    proposalByToken,
-    onFetchProposalsBatch,
-    isLoading
-  } = useApprovedProposals();
+  const proposalsTokens = useMemo(() => {
+    const prevTokens = prevInput.lineitems
+      ? prevInput.lineitems.map(({ proposaltoken }) => proposaltoken)
+      : [];
+    const tokens = invoice.input.lineitems.map(
+      ({ proposaltoken }) => proposaltoken
+    );
+    return uniq([...prevTokens, ...tokens]);
+  }, [invoice.input.lineitems, prevInput]);
 
-  useEffect(() => {
-    if (!isLoading && !isEmpty(proposalByToken)) {
-      const remainingTokens = propsByToken
-        ? propsByToken.filter(
-            (t) => !Object.keys(proposalByToken).some((pt) => pt === t)
-          )
-        : [];
-      if (!isEmpty(remainingTokens)) {
-        onFetchProposalsBatch(remainingTokens, false);
-      }
-    }
-  }, [isLoading, proposalByToken, propsByToken, onFetchProposalsBatch]);
+  const { proposalsByToken } = useApprovedProposals(proposalsTokens);
 
   return (
     <Modal
@@ -106,8 +89,8 @@ const ModalDiffInvoice = ({ onClose, invoice, prevInvoice, ...props }) => {
       <div className={styles.lineitemsWrapper}>
         <DiffInvoices
           newData={invoice.input}
-          oldData={prevLineItems}
-          proposals={proposalByToken}
+          oldData={prevInput}
+          proposals={proposalsByToken}
           className="margin-top-m"
         />
       </div>
diff --git a/src/containers/Invoice/Detail/Detail.jsx b/src/containers/Invoice/Detail/Detail.jsx
index b0b1eb300..27840bbb9 100644
--- a/src/containers/Invoice/Detail/Detail.jsx
+++ b/src/containers/Invoice/Detail/Detail.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { withRouter } from "react-router-dom";
 import get from "lodash/fp/get";
 import { useInvoice } from "./hooks";
@@ -6,51 +6,19 @@ import Invoice from "src/components/Invoice";
 import InvoiceLoader from "src/components/Invoice/InvoiceLoader";
 import { AdminInvoiceActionsProvider } from "src/containers/Invoice/Actions";
 import Comments from "src/containers/Comments";
-import { isUnreviewedInvoice } from "../helpers";
+import { isUnreviewedInvoice, getProposalsTokensFromInvoice } from "../helpers";
 import { GoBackLink } from "src/components/Router";
 import useApprovedProposals from "src/hooks/api/useApprovedProposals";
-import isEmpty from "lodash/isEmpty";
-import flow from "lodash/fp/flow";
-import map from "lodash/fp/map";
-import filter from "lodash/fp/filter";
-import uniq from "lodash/fp/uniq";
 
 const InvoiceDetail = ({ Main, match }) => {
   const invoiceToken = get("params.token", match);
   const threadParentCommentID = get("params.commentid", match);
   const { invoice, loading } = useInvoice(invoiceToken);
-  const tokens = useMemo(
-    () =>
-      invoice &&
-      invoice.input &&
-      invoice.input.lineitems &&
-      flow(
-        map(({ proposaltoken }) => proposaltoken),
-        uniq,
-        filter((t) => t !== "")
-      )(invoice.input.lineitems),
-    [invoice]
-  );
-
-  const {
-    proposals,
-    proposalByToken,
-    onFetchProposalsBatch,
-    isLoading
-  } = useApprovedProposals();
+  const tokens = useMemo(() => getProposalsTokensFromInvoice(invoice), [
+    invoice
+  ]);
 
-  useEffect(() => {
-    if (!isLoading && !isEmpty(proposalByToken)) {
-      const remainingTokens = tokens
-        ? tokens.filter(
-            (t) => !Object.keys(proposalByToken).some((pt) => pt === t)
-          )
-        : [];
-      if (!isEmpty(remainingTokens)) {
-        onFetchProposalsBatch(remainingTokens, false);
-      }
-    }
-  }, [isLoading, proposalByToken, tokens, onFetchProposalsBatch]);
+  const { proposals } = useApprovedProposals(tokens);
 
   return (
     <>
diff --git a/src/containers/Invoice/Edit/Edit.jsx b/src/containers/Invoice/Edit/Edit.jsx
index 931b9d975..1b08d362f 100644
--- a/src/containers/Invoice/Edit/Edit.jsx
+++ b/src/containers/Invoice/Edit/Edit.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import get from "lodash/fp/get";
 import { withRouter } from "react-router-dom";
@@ -9,12 +9,12 @@ import { useEditInvoice } from "./hooks";
 import { fromUSDCentsToUSDUnits } from "src/helpers";
 import InvoiceLoader from "src/components/Invoice/InvoiceLoader";
 import InvoiceForm from "src/components/InvoiceForm";
+import { getProposalsTokensFromInvoice } from "../helpers";
 
 const EditInvoice = ({ match }) => {
   const tokenFromUrl = get("params.token", match);
   const { onEditInvoice } = useEditInvoice();
   const { invoice, loading } = useInvoice(tokenFromUrl);
-  const { proposals } = useApprovedProposals();
 
   const isInvoiceLoaded = !loading && !!invoice;
 
@@ -37,6 +37,13 @@ const EditInvoice = ({ match }) => {
       }
     : null;
 
+  const proposalsTokens = useMemo(
+    () => getProposalsTokensFromInvoice(invoice),
+    [invoice]
+  );
+
+  const { proposals } = useApprovedProposals(proposalsTokens);
+
   return (
     <Card className="container margin-bottom-l">
       {isInvoiceLoaded ? (
diff --git a/src/containers/Invoice/helpers.js b/src/containers/Invoice/helpers.js
index bc4660e49..06db2cea1 100644
--- a/src/containers/Invoice/helpers.js
+++ b/src/containers/Invoice/helpers.js
@@ -5,6 +5,10 @@ import {
   getCurrentDefaultMonthAndYear
 } from "src/helpers";
 import { INVOICE_STATUS_NEW, INVOICE_STATUS_UPDATED } from "./constants";
+import flow from "lodash/fp/flow";
+import map from "lodash/fp/map";
+import filter from "lodash/fp/filter";
+import uniq from "lodash/fp/uniq";
 
 /**
  * Returns the initial month and year to be applied to a blank invoice form
@@ -124,3 +128,13 @@ export const getPreviousMonthsRange = (range) => {
     getCurrentDefaultMonthAndYear()
   ];
 };
+
+export const getProposalsTokensFromInvoice = (invoice) =>
+  invoice &&
+  invoice.input &&
+  invoice.input.lineitems &&
+  flow(
+    map(({ proposaltoken }) => proposaltoken),
+    uniq,
+    filter((t) => t !== "")
+  )(invoice.input.lineitems);
diff --git a/src/hooks/api/useApprovedProposals.js b/src/hooks/api/useApprovedProposals.js
index c9306169b..c19318824 100644
--- a/src/hooks/api/useApprovedProposals.js
+++ b/src/hooks/api/useApprovedProposals.js
@@ -1,27 +1,40 @@
-import { useMemo } from "react";
+import { useMemo, useEffect, useCallback, useState } from "react";
 import useAPIAction from "src/hooks/utils/useAPIAction";
 import useProposalsBatch from "src/hooks/api/useProposalsBatch";
 import { isEmpty } from "src/helpers";
+import keys from "lodash/keys";
 
-export default function useApprovedProposals() {
+const remainingTokensFilter = (proposals) => (token) =>
+  !keys(proposals).some((proposalToken) => proposalToken === token);
+
+const getRemainingTokens = (tokens = [], proposals = [], limit = 0) =>
+  !limit
+    ? tokens.filter(remainingTokensFilter(proposals))
+    : tokens.filter(remainingTokensFilter(proposals)).slice(0, limit);
+
+export default function useApprovedProposals(initialTokens = []) {
   const {
     isLoadingTokenInventory,
-    proposals,
+    proposals: proposalsByToken,
     proposalsTokens,
     onFetchProposalsBatch
   } = useProposalsBatch();
 
+  const [remainingTokens, setRemaining] = useState(
+    getRemainingTokens(proposalsTokens.approved, proposalsByToken)
+  );
+
   const requestParams = useMemo(() => [proposalsTokens.approved, false], [
     proposalsTokens
   ]);
 
   const needsFetch = useMemo(
     () =>
-      isEmpty(proposals) &&
+      isEmpty(proposalsByToken) &&
       proposalsTokens &&
       proposalsTokens.approved &&
       proposalsTokens.approved.length,
-    [proposals, proposalsTokens]
+    [proposalsByToken, proposalsTokens]
   );
 
   const [loading, error] = useAPIAction(
@@ -30,12 +43,53 @@ export default function useApprovedProposals() {
     needsFetch
   );
 
+  const isLoading = loading || isLoadingTokenInventory;
+
+  const onFetchProposalsBatchByTokensRemaining = useCallback(
+    (tokens, limit) => {
+      const newRemainingTokens = getRemainingTokens(
+        tokens,
+        proposalsByToken,
+        limit
+      );
+
+      if (!isEmpty(newRemainingTokens)) {
+        onFetchProposalsBatch(newRemainingTokens, false);
+        setRemaining(newRemainingTokens);
+      }
+    },
+    [onFetchProposalsBatch, proposalsByToken, setRemaining]
+  );
+
+  useEffect(
+    function fetchProposalsByInitialTokens() {
+      if (!isEmpty(initialTokens) && !isLoading && !isEmpty(proposalsByToken)) {
+        onFetchProposalsBatchByTokensRemaining(initialTokens);
+      }
+    },
+    [
+      isLoading,
+      proposalsByToken,
+      initialTokens,
+      onFetchProposalsBatchByTokensRemaining
+    ]
+  );
+
+  const onFetchRemainingProposalsBatch = useCallback(
+    (limit) => {
+      onFetchProposalsBatchByTokensRemaining(remainingTokens, limit);
+    },
+    [remainingTokens, onFetchProposalsBatchByTokensRemaining]
+  );
+
   return {
-    proposals: !isEmpty(proposals) ? Object.values(proposals) : [],
-    proposalByToken: proposals,
+    proposals: !isEmpty(proposalsByToken)
+      ? Object.values(proposalsByToken)
+      : [],
+    proposalsByToken,
     isLoading: loading || isLoadingTokenInventory,
     error,
-    onFetchProposalsBatch,
-    proposalsTokens: proposalsTokens.approved
+    remainingTokens,
+    onFetchRemainingProposalsBatch
   };
 }

From c42f3bf7e141b3b2c35c03f9e8ea89d19ccc7197 Mon Sep 17 00:00:00 2001
From: Thiago Figueiredo <thiagofigueiredo777@gmail.com>
Date: Fri, 10 Jul 2020 17:04:03 -0300
Subject: [PATCH 3/4] [CMS] Set owned proposals on manage cms user

---
 src/actions/api.js                            | 13 +++-
 .../ManageContractor/ManageContractor.jsx     |  2 +-
 .../Detail/ManageContractor/ManageDccForm.jsx | 65 ++++++++++++++++---
 .../User/Detail/ManageContractor/UserView.jsx | 62 +++++++++++-------
 .../User/Detail/ManageContractor/helpers.js   |  5 ++
 .../User/Detail/ManageContractor/hooks.js     | 15 +++++
 src/lib/api.js                                |  6 +-
 src/reducers/models/users.js                  | 11 +++-
 8 files changed, 140 insertions(+), 39 deletions(-)

diff --git a/src/actions/api.js b/src/actions/api.js
index c1dcfad94..0645edd2e 100644
--- a/src/actions/api.js
+++ b/src/actions/api.js
@@ -521,11 +521,17 @@ export const onEditCmsUser = (cmsUserInfo) =>
       });
   });
 
-export const onManageCmsUser = (userID, domain, type, supervisorIDs) =>
+export const onManageCmsUser = (
+  userID,
+  domain,
+  type,
+  supervisorIDs,
+  proposalsOwned
+) =>
   withCsrf((dispatch, _, csrf) => {
     dispatch(act.REQUEST_MANAGE_CMS_USER());
     return api
-      .manageCmsUser(csrf, userID, domain, type, supervisorIDs)
+      .manageCmsUser(csrf, userID, domain, type, supervisorIDs, proposalsOwned)
       .then((response) =>
         dispatch(
           act.RECEIVE_MANAGE_CMS_USER({
@@ -533,7 +539,8 @@ export const onManageCmsUser = (userID, domain, type, supervisorIDs) =>
             userID,
             domain,
             type,
-            supervisorIDs
+            supervisorIDs,
+            proposalsOwned
           })
         )
       )
diff --git a/src/containers/User/Detail/ManageContractor/ManageContractor.jsx b/src/containers/User/Detail/ManageContractor/ManageContractor.jsx
index 482c98fc6..90ef0638b 100644
--- a/src/containers/User/Detail/ManageContractor/ManageContractor.jsx
+++ b/src/containers/User/Detail/ManageContractor/ManageContractor.jsx
@@ -4,7 +4,7 @@ import ManageDccForm from "./ManageDccForm";
 import UserView from "./UserView";
 import EditContractorForm from "./EditContractorForm";
 import useContractor from "../hooks/useContractor";
-import isEmpty from "lodash/isEmpty";
+import { isEmpty } from "lodash";
 
 const ManageContractor = ({ userID, isUserPageOwner }) => {
   const [showDccForm, setShowDccForm] = useState(true);
diff --git a/src/containers/User/Detail/ManageContractor/ManageDccForm.jsx b/src/containers/User/Detail/ManageContractor/ManageDccForm.jsx
index 4c3f9dc4d..b34c5c11a 100644
--- a/src/containers/User/Detail/ManageContractor/ManageDccForm.jsx
+++ b/src/containers/User/Detail/ManageContractor/ManageDccForm.jsx
@@ -10,6 +10,7 @@ import {
 import { Formik } from "formik";
 import styles from "./ManageContractor.module.css";
 import useSupervisors from "src/hooks/api/useSupervisors";
+import useApprovedProposals from "src/hooks/api/useApprovedProposals";
 
 const selectStyles = {
   container: (provided) => ({
@@ -19,7 +20,7 @@ const selectStyles = {
   })
 };
 
-const selectSupervisorStyles = {
+const multipleSelectStyles = {
   container: (provided) => ({
     ...provided,
     width: "100%",
@@ -28,16 +29,21 @@ const selectSupervisorStyles = {
 };
 
 const ManageDccForm = ({ onUpdate, user }) => {
-  const { domain, contractortype, userid, supervisoruserids = [] } = user;
+  const {
+    domain,
+    contractortype,
+    userid,
+    supervisoruserids = [],
+    proposalsowned = []
+  } = user;
+
   const [updated, setUpdated] = useState(false);
 
   const { loading: loadingSupervisors, supervisors } = useSupervisors();
-
   const supervisorsOptions = useMemo(
     () => getSupervisorsOptions(supervisors, userid),
     [supervisors, userid]
   );
-
   const initialSupervisorOptions = useMemo(
     () =>
       supervisorsOptions.filter((option) =>
@@ -46,6 +52,30 @@ const ManageDccForm = ({ onUpdate, user }) => {
     [supervisorsOptions, supervisoruserids]
   );
 
+  const {
+    proposals,
+    isLoading: loadingOwnedProposals
+  } = useApprovedProposals();
+  const proposalsOptions = useMemo(
+    () =>
+      proposals
+        ? [
+            ...proposals.map(({ name, censorshiprecord }) => ({
+              label: name,
+              value: censorshiprecord.token
+            }))
+          ]
+        : [],
+    [proposals]
+  );
+  const initialOwnedProposals = useMemo(
+    () =>
+      proposalsOptions.filter((option) =>
+        proposalsowned.some((token) => token === option.value)
+      ),
+    [proposalsOptions, proposalsowned]
+  );
+
   const handleSubmitForm = useCallback(
     async (values, { setSubmitting, setFieldError, resetForm }) => {
       try {
@@ -53,7 +83,8 @@ const ManageDccForm = ({ onUpdate, user }) => {
           userid,
           values.domain,
           values.type,
-          values.users.map((user) => user.value)
+          values.users.map((user) => user.value),
+          values.proposals.map((prop) => prop.value)
         );
         setSubmitting(false);
         setUpdated(true);
@@ -73,7 +104,8 @@ const ManageDccForm = ({ onUpdate, user }) => {
       initialValues={{
         domain,
         type: contractortype,
-        users: initialSupervisorOptions
+        users: initialSupervisorOptions,
+        proposals: initialOwnedProposals
       }}>
       {({
         values,
@@ -86,7 +118,11 @@ const ManageDccForm = ({ onUpdate, user }) => {
         const handleChangeUserSelector = (options) => {
           setFieldValue("users", options);
         };
-        const submitEnabled = dirty && !loadingSupervisors;
+        const handleChangeOwnedProposals = (options) => {
+          setFieldValue("proposals", options);
+        };
+        const submitEnabled =
+          dirty && !loadingSupervisors && !loadingOwnedProposals;
         return (
           <>
             <form onSubmit={handleSubmit}>
@@ -127,7 +163,20 @@ const ManageDccForm = ({ onUpdate, user }) => {
                       onChange={handleChangeUserSelector}
                       isMulti
                       options={supervisorsOptions}
-                      styles={selectSupervisorStyles}
+                      styles={multipleSelectStyles}
+                    />
+                  }
+                />
+                <InfoSection
+                  label="Owned Proposals"
+                  info={
+                    <Select
+                      placeholder="Select Proposals"
+                      value={values.proposals}
+                      onChange={handleChangeOwnedProposals}
+                      isMulti
+                      options={proposalsOptions}
+                      styles={multipleSelectStyles}
                     />
                   }
                 />
diff --git a/src/containers/User/Detail/ManageContractor/UserView.jsx b/src/containers/User/Detail/ManageContractor/UserView.jsx
index 5695cd7c6..543305536 100644
--- a/src/containers/User/Detail/ManageContractor/UserView.jsx
+++ b/src/containers/User/Detail/ManageContractor/UserView.jsx
@@ -1,35 +1,45 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { H2, Message, Button } from "pi-ui";
+import { H2, Message, Button, Spinner } from "pi-ui";
 import InfoSection from "../InfoSection.jsx";
-import { typeOptions, domainOptions } from "./helpers";
+import { typeOptions, domainOptions, getOwnedProposals } from "./helpers";
+import useApprovedProposals from "src/hooks/api/useApprovedProposals";
 
 const UserDccInfo = ({
   contractorType,
   domain,
   supervisorIds,
+  proposalsOwned,
+  isLoadingProposals,
   showEdit,
   onToggleDccEdit
-}) => (
-  <>
-    <H2>DCC Info</H2>
-    <div className="margin-top-s margin-bottom-s">
-      <InfoSection label="Contractor Type" info={contractorType} />
-      <InfoSection label="Domain" info={domain} />
-      <InfoSection
-        label="Supervisors IDs"
-        info={
-          supervisorIds.length ? supervisorIds.join(", ") : "No supervisors"
-        }
-      />
-    </div>
-    {showEdit && (
-      <Button className="margin-bottom-m" onClick={onToggleDccEdit}>
-        Edit
-      </Button>
-    )}
-  </>
-);
+}) => {
+  const supervisors = supervisorIds.length
+    ? supervisorIds.join(", ")
+    : "No supervisors";
+  const proposals = proposalsOwned.length
+    ? proposalsOwned.join(", ")
+    : "No owned proposals";
+  return (
+    <>
+      <H2>DCC Info</H2>
+      <div className="margin-top-s margin-bottom-s">
+        <InfoSection label="Contractor Type" info={contractorType} />
+        <InfoSection label="Domain" info={domain} />
+        <InfoSection label="Supervisors IDs" info={supervisors} />
+        <InfoSection
+          label="Owned Proposals"
+          info={isLoadingProposals ? <Spinner invert /> : proposals}
+        />
+      </div>
+      {showEdit && (
+        <Button className="margin-bottom-m" onClick={onToggleDccEdit}>
+          Edit
+        </Button>
+      )}
+    </>
+  );
+};
 
 const UserContractorInfo = ({
   githubname,
@@ -68,7 +78,11 @@ const ManageContractorUserView = ({
   onToggleContractorInfoEdit
 }) => {
   const { domain, contractortype, supervisoruserids = [] } = user;
-
+  const { proposalsByToken, isLoading } = useApprovedProposals();
+  const ownedProposals = getOwnedProposals(
+    user.proposalsowned,
+    proposalsByToken
+  );
   return (
     <>
       {requireGitHubName && (
@@ -81,6 +95,8 @@ const ManageContractorUserView = ({
           contractorType={typeOptions[contractortype]}
           domain={domainOptions[domain]}
           supervisorIds={supervisoruserids}
+          proposalsOwned={ownedProposals}
+          isLoadingProposals={isLoading}
           showEdit={showDccForm}
           onToggleDccEdit={onToggleDccEdit}
         />
diff --git a/src/containers/User/Detail/ManageContractor/helpers.js b/src/containers/User/Detail/ManageContractor/helpers.js
index 8e07a3eef..2caa75d28 100644
--- a/src/containers/User/Detail/ManageContractor/helpers.js
+++ b/src/containers/User/Detail/ManageContractor/helpers.js
@@ -1,3 +1,5 @@
+import { get } from "lodash";
+
 export const typeOptions = [
   "No type defined",
   "Direct",
@@ -38,3 +40,6 @@ export const getSupervisorsOptions = (supervisors, currentUserID) =>
       label: username,
       value: id
     }));
+
+export const getOwnedProposals = (owned, proposalsByToken) =>
+  owned ? owned.map((token) => get(proposalsByToken, [token, "name"])) : [];
diff --git a/src/containers/User/Detail/ManageContractor/hooks.js b/src/containers/User/Detail/ManageContractor/hooks.js
index e69de29bb..9779b8b2f 100644
--- a/src/containers/User/Detail/ManageContractor/hooks.js
+++ b/src/containers/User/Detail/ManageContractor/hooks.js
@@ -0,0 +1,15 @@
+import * as external_api from "src/lib/external_api";
+import * as sel from "src/selectors";
+import { useSelector } from "src/redux";
+import { useEffect, useState } from "react";
+
+export function useApprovedProposalsTokens() {
+  const isTestnet = useSelector(sel.isTestNet);
+  const [approvedTokens, setApprovedTokens] = useState([]);
+  useEffect(() => {
+    external_api.getCmsApprovedProposalsTokens(isTestnet).then((res) => {
+      setApprovedTokens(res.approved);
+    });
+  }, [isTestnet]);
+  return approvedTokens;
+}
diff --git a/src/lib/api.js b/src/lib/api.js
index 349095946..378c92331 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -385,13 +385,15 @@ export const manageCmsUser = (
   userid,
   domain,
   contractortype,
-  supervisoruserids
+  supervisoruserids,
+  proposalsowned
 ) =>
   POST("/admin/managecms", csrf, {
     userid,
     domain,
     contractortype,
-    supervisoruserids
+    supervisoruserids,
+    proposalsowned
   });
 
 export const verifyUserPayment = () =>
diff --git a/src/reducers/models/users.js b/src/reducers/models/users.js
index e49d79cd6..b16ceb583 100644
--- a/src/reducers/models/users.js
+++ b/src/reducers/models/users.js
@@ -95,12 +95,19 @@ const users = (state = DEFAULT_STATE, action) =>
               verifiedkey: action.payload
             }))(state),
           [act.RECEIVE_MANAGE_CMS_USER]: () => {
-            const { domain, type, supervisorIDs, userID } = action.payload;
+            const {
+              domain,
+              type,
+              supervisorIDs,
+              proposalsOwned,
+              userID
+            } = action.payload;
             return update(["byID", userID], (user) => ({
               ...user,
               domain,
               contractortype: type,
-              supervisoruserids: supervisorIDs
+              supervisoruserids: supervisorIDs,
+              proposalsowned: proposalsOwned
             }))(state);
           },
           [act.RECEIVE_USER_SEARCH]: () => {

From fc2301a9bf87e89696c489a44e96b6ab79b8ab2f Mon Sep 17 00:00:00 2001
From: Thiago Figueiredo <thiagofigueiredo777@gmail.com>
Date: Tue, 14 Jul 2020 17:39:22 -0300
Subject: [PATCH 4/4] Remove unnecessary use of memoization hooks with
 supervisors and owned proposals field; code cleanup

---
 .../ManageContractor/ManageContractor.jsx     |  2 +-
 .../Detail/ManageContractor/ManageDccForm.jsx | 45 +++++----------
 .../User/Detail/ManageContractor/helpers.js   | 57 +++++++++++++++----
 3 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/src/containers/User/Detail/ManageContractor/ManageContractor.jsx b/src/containers/User/Detail/ManageContractor/ManageContractor.jsx
index 90ef0638b..482c98fc6 100644
--- a/src/containers/User/Detail/ManageContractor/ManageContractor.jsx
+++ b/src/containers/User/Detail/ManageContractor/ManageContractor.jsx
@@ -4,7 +4,7 @@ import ManageDccForm from "./ManageDccForm";
 import UserView from "./UserView";
 import EditContractorForm from "./EditContractorForm";
 import useContractor from "../hooks/useContractor";
-import { isEmpty } from "lodash";
+import isEmpty from "lodash/isEmpty";
 
 const ManageContractor = ({ userID, isUserPageOwner }) => {
   const [showDccForm, setShowDccForm] = useState(true);
diff --git a/src/containers/User/Detail/ManageContractor/ManageDccForm.jsx b/src/containers/User/Detail/ManageContractor/ManageDccForm.jsx
index b34c5c11a..cc1b82735 100644
--- a/src/containers/User/Detail/ManageContractor/ManageDccForm.jsx
+++ b/src/containers/User/Detail/ManageContractor/ManageDccForm.jsx
@@ -1,11 +1,12 @@
 import { Button, Message, H2, Select } from "pi-ui";
 import SelectField from "src/components/Select/SelectField";
-import React, { useCallback, useState, useMemo } from "react";
+import React, { useCallback, useState } from "react";
 import InfoSection from "../InfoSection.jsx";
 import {
   selectTypeOptions,
   selectDomainOptions,
-  getSupervisorsOptions
+  getInitialAndOptionsProposals,
+  getInitialAndOptionsSupervisors
 } from "./helpers";
 import { Formik } from "formik";
 import styles from "./ManageContractor.module.css";
@@ -39,42 +40,22 @@ const ManageDccForm = ({ onUpdate, user }) => {
 
   const [updated, setUpdated] = useState(false);
 
+  // Parse supervisors initial values and options
   const { loading: loadingSupervisors, supervisors } = useSupervisors();
-  const supervisorsOptions = useMemo(
-    () => getSupervisorsOptions(supervisors, userid),
-    [supervisors, userid]
-  );
-  const initialSupervisorOptions = useMemo(
-    () =>
-      supervisorsOptions.filter((option) =>
-        supervisoruserids.some((supervisorid) => supervisorid === option.value)
-      ),
-    [supervisorsOptions, supervisoruserids]
-  );
+  const {
+    supervisorsOptions,
+    initialSupervisorOptions
+  } = getInitialAndOptionsSupervisors(supervisors, supervisoruserids);
 
+  // Parse owned proposals initial values and options
   const {
     proposals,
     isLoading: loadingOwnedProposals
   } = useApprovedProposals();
-  const proposalsOptions = useMemo(
-    () =>
-      proposals
-        ? [
-            ...proposals.map(({ name, censorshiprecord }) => ({
-              label: name,
-              value: censorshiprecord.token
-            }))
-          ]
-        : [],
-    [proposals]
-  );
-  const initialOwnedProposals = useMemo(
-    () =>
-      proposalsOptions.filter((option) =>
-        proposalsowned.some((token) => token === option.value)
-      ),
-    [proposalsOptions, proposalsowned]
-  );
+  const {
+    proposalsOptions,
+    initialOwnedProposals
+  } = getInitialAndOptionsProposals(proposals, proposalsowned);
 
   const handleSubmitForm = useCallback(
     async (values, { setSubmitting, setFieldError, resetForm }) => {
diff --git a/src/containers/User/Detail/ManageContractor/helpers.js b/src/containers/User/Detail/ManageContractor/helpers.js
index 2caa75d28..2a41f030b 100644
--- a/src/containers/User/Detail/ManageContractor/helpers.js
+++ b/src/containers/User/Detail/ManageContractor/helpers.js
@@ -1,4 +1,5 @@
-import { get } from "lodash";
+import get from "lodash/get";
+import includes from "lodash/includes";
 
 export const typeOptions = [
   "No type defined",
@@ -31,15 +32,49 @@ export const selectDomainOptions = domainOptions.map((op, idx) => ({
   label: op
 }));
 
-export const getSupervisorsOptions = (supervisors, currentUserID) =>
-  supervisors &&
-  Array.isArray(supervisors) &&
-  supervisors
-    .filter(({ id }) => id !== currentUserID)
-    .map(({ username, id }) => ({
-      label: username,
-      value: id
-    }));
-
 export const getOwnedProposals = (owned, proposalsByToken) =>
   owned ? owned.map((token) => get(proposalsByToken, [token, "name"])) : [];
+
+export const getInitialAndOptionsProposals = (proposals, proposalsowned) => {
+  const proposalsOptions = [];
+  const initialOwnedProposals = [];
+
+  for (const {
+    name,
+    censorshiprecord: { token }
+  } of proposals) {
+    const value = { label: name, value: token };
+    if (includes(proposalsowned, token)) {
+      initialOwnedProposals.push(value);
+    } else {
+      proposalsOptions.push(value);
+    }
+  }
+
+  return {
+    proposalsOptions,
+    initialOwnedProposals
+  };
+};
+
+export const getInitialAndOptionsSupervisors = (
+  supervisors,
+  userSupervisors
+) => {
+  const supervisorsOptions = [];
+  const initialSupervisorOptions = [];
+
+  for (const { username, id } of supervisors) {
+    const value = { label: username, value: id };
+    if (includes(userSupervisors, id)) {
+      initialSupervisorOptions.push(value);
+    } else {
+      supervisorsOptions.push(value);
+    }
+  }
+
+  return {
+    supervisorsOptions,
+    initialSupervisorOptions
+  };
+};