Merge pull request #260 from scientist-softserv/138-display-pos-refactor

138 display pos refactor

Author: alishaevn

pages/requests/[uuid].js

@@ -40,27 +40,24 @@ const Request = () => {
   const { messages, isLoadingMessages, isMessagesError, mutateMessages, messagesData } = useMessages(uuid, session?.accessToken)
   const { files, isLoadingFiles, isFilesError, mutateFiles, filesData } = useFiles(uuid, session?.accessToken)
 
-  const [allPOs, setAllPOs] = useState(false)
+  const [allPOs, setAllPOs] = useState([])
   const [isPOError, setIsPOError] = useState(false)
-  const [isPOLoading, setIsPOLoading] = useState(false)
+  const [isLoadingPOs, setIsLoadingPOs] = useState(true)
   useEffect(() => {
-    const getPOsAsync = async () => {
-      const response = await getAllPOs(request?.quotedWareID, uuid, request?.identifier, session?.accessToken)
-      if (response.allPOs) {
-        setAllPOs(response.allPOs)
-      } else if (response.isPOError) {
-        setIsPOError(response.isPOError)
-      } else {
-        setIsPOLoading(true)
-      }
+    if (request) {
+      (async () => {
+        const { allPOs, isLoadingPOs, isPOError } = await getAllPOs(request?.quotedWareID, uuid, request?.identifier, session?.accessToken)
+
+        setIsLoadingPOs(isLoadingPOs)
+        setAllPOs(allPOs)
+        setIsPOError(isPOError)
+      })()
     }
-    getPOsAsync()
-  }, [allPOs, isPOError, request?.quotedWareID, uuid, request?.identifier, session?.accessToken])
-  
-  const isLoading = isLoadingRequest || isLoadingSOWs || isLoadingFiles || isLoadingMessages || isPOLoading
-  const isError = isRequestError || isSOWError || isFilesError|| isMessagesError
-  let documents = (allSOWs) ? [...allSOWs] : []
-  allPOs ? (documents = [...documents, ...allPOs]) : (documents = [...documents])
+  }, [allPOs, isPOError, request, uuid, session])
+
+  const isLoading = isLoadingRequest || isLoadingSOWs || isLoadingFiles || isLoadingMessages || isLoadingPOs
+  const isError = isRequestError || isSOWError || isFilesError|| isMessagesError || isPOError
+  const documents = (allSOWs) ? [...allSOWs, ...allPOs] : []
 
   if (isLoading) return <Loading wrapperClass='item-page mt-5' />
 
@@ -80,7 +77,7 @@ const Request = () => {
   if (isError) {
     return (
       <Notice
-        alert={configureErrors([isRequestError, isSOWError, isMessagesError, isFilesError])}
+        alert={configureErrors([isRequestError, isSOWError, isMessagesError, isFilesError, isPOError])}
         dismissible={false}
         withBackButton={true}
         buttonProps={{

utils/api/configurations.js

@@ -185,37 +185,45 @@ export const  configureFiles = (data) => {
   return allFiles
 }
 
-export const configureDocuments = (documents, requestIdentifier) => {
-  return documents?.map(document => ({
-    identifier: document.identifier,
+export const configureDocument = (document, requestIdentifier) => {
+  return {
     date: normalizeDate(document.created_at),
     documentStatus: document.status,
     documentStatusColor: statusColors[configureStatus(document.status)].bg,
     documentType: document.type,
     documentTypeColor: 'bg-dark',
+    identifier: document.identifier,
     lineItems: configureLineItems(document.line_items),
     requestIdentifier,
-    subtotalPrice: document.retail_subtotal_price_currency,
-    taxAmount: document.tax_cost_currency,
-    terms: document.payment_terms,
-    totalPrice: document.retail_total_price_currency,
     shippingPrice: document.shipping_cost_currency,
     shipTo: {
-      organizationName: document.ship_to?.organization_name,
-      text: document.ship_to?.text,
+      organizationName: document.ship_to.organization_name,
+      text: document.ship_to.text,
     },
     shipFrom: {
-      organizationName: document.ship_from?.organization_name,
-      text: document.ship_from?.text,
+      organizationName: document.ship_from.organization_name,
+      text: document.ship_from.text,
     },
-    // the following properties only need to exist on POs
-    turnaroundTime: document.turn_around_time.human || null,
-    poNumber: document.po_number || null,
-    relatedSOWIdentifier: document.proposal_ref?.identifier || null,
-    adPO: document.scientist_identifier || null,
+    subtotalPrice: document.retail_subtotal_price_currency,
+    taxAmount: document.tax_cost_currency,
+    terms: document.payment_terms,
+    totalPrice: document.retail_total_price_currency,
+  }
+}
+
+export const configureSOWs = (sows, requestIdentifier) => {
+  return sows?.map((sow) => ({
+    ...configureDocument(sow, requestIdentifier),
   }))
 }
 
+export const configurePO = (po, requestIdentifier) => ({
+  ...configureDocument(po, requestIdentifier),
+  turnaroundTime: po.turn_around_time.human,
+  poNumber: po.po_number,
+  relatedSOWIdentifier: po.proposal_ref?.identifier,
+  adPO: po.scientist_identifier,
+})
 
 const configureLineItems = (lineItems) => (lineItems.map(lineItem => ({
   id: lineItem.id,

utils/api/requests.js

@@ -1,11 +1,12 @@
 import useSWR from 'swr'
 import {
   configureFiles,
-  configureDocuments,
   configureDynamicFormSchema,
   configureDynamicFormUiSchema,
   configureMessages,
+  configurePO,
   configureRequests,
+  configureSOWs,
 } from './configurations'
 import { fetcher, posting, updating } from './base'
 
@@ -45,7 +46,7 @@ export const useAllSOWs = (id, requestIdentifier, accessToken) => {
   const { data, error } = useSWR(id ? [`/quote_groups/${id}/proposals.json`, accessToken] : null)
   let allSOWs
   if (data) {
-    allSOWs = configureDocuments(data, requestIdentifier)
+    allSOWs = configureSOWs(data, requestIdentifier)
   }
 
   return {
@@ -55,27 +56,29 @@ export const useAllSOWs = (id, requestIdentifier, accessToken) => {
   }
 }
 
-// The name of this function is getAllPOs vs. useAllPOs.
-// Since it is async, it is technically not a custom hook and according to linter should not start with use.
+// The name of this function is getAllPOs vs. useAllPOs. Since it is not a hook, it should not start with "use".
 export const getAllPOs = async (quotedWareId, uuid, requestIdentifier, accessToken) => {
-  let allPOs
-  let enhancedPOArray = []
-  let arrayOfPOIds = []
   try {
     // TODO(summer-cook): eventually we can use the useSWRList hook here instead of mapping & calling the fetcher.
     // This hook is actively being contributed to the swr repo, but the semantics of the work are still being debated.
     // See https://github.com/vercel/swr/discussions/1988 for the RFC and https://github.com/vercel/swr/pull/2047 for the PR.
-    const allPOData = await fetcher(`quote_groups/${uuid}/quoted_wares/${quotedWareId}/purchase_orders.json`, accessToken)
-    allPOData && allPOData.map((po) => {arrayOfPOIds.push(po.id)})
-    arrayOfPOIds && await Promise.all(arrayOfPOIds.map(async (poId) => {
-      const onePOData = await fetcher(`quote_groups/${uuid}/quoted_wares/${quotedWareId}/purchase_orders/${poId}.json`, accessToken)
-      return enhancedPOArray.push(onePOData)
-    }))
-    allPOs = configureDocuments(enhancedPOArray, requestIdentifier)
-    return { allPOs }
+    const data = await fetcher(`quote_groups/${uuid}/quoted_wares/${quotedWareId}/purchase_orders.json`, accessToken)
+    const configuredPOs = data.map(async (po) => {
+      const purchaseOrder = await fetcher(`quote_groups/${uuid}/quoted_wares/${quotedWareId}/purchase_orders/${po.id}.json`, accessToken)
+      return configurePO(purchaseOrder, requestIdentifier)
+    })
+    const allPOs = await Promise.all(configuredPOs).then(res => res)
+
+    return {
+      allPOs,
+      isLoadingPOs: !allPOs,
+      isPOError: false,
+    }
   } catch (error) {
     return {
-      isPOError: error
+      allPOs: [],
+      isLoadingPOs: false,
+      isPOError: error,
     }
   }
 }