refactor and simplify how we get and show our purchase orders

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

@@ -217,6 +217,13 @@ export const configureSOWs = (sows, 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

@@ -4,6 +4,7 @@ import {
   configureDynamicFormSchema,
   configureDynamicFormUiSchema,
   configureMessages,
+  configurePO,
   configureRequests,
   configureSOWs,
 } from './configurations'
@@ -58,24 +59,24 @@ 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.
 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,
     }
   }
 }