Fetch all provider product opps by default

Author: rachelekm

demo/app/src/components/Sidebar/Opportunity.js

@@ -3,12 +3,14 @@ import styles from './Sidebar.module.scss'
 
 export default function Opportunity({
     title,
+    provider,
     start,
     end
 }) {
   return (
     <div className={styles.opportunityPreview}>
         <h1>{title}</h1>
+        <h2>{provider}</h2>
         <div className={styles.previewStartDate}>
             {formatToFriendlyString(start) ?? 'no start date given'}
         </div>

demo/app/src/components/Sidebar/OpportunityList.js

@@ -16,21 +16,24 @@ function mouseOutStyleChange(e) {
 
   return (
     <div className={styles.opportunityList}>
-        {(opportunities||[]).map((opp, index) => {
-            const { start, end } = parseStacDatetime(opp.properties.datetime);
-            return <Opportunity
-                key={index}
-                title={opp.id}
-                start={start}
-                end={end}
-                // onMouseEnter={(e) => {
-                //     mouseInStyleChange(e);
-                //     setHoveredOpportunity(index)}}
-                // onMouseLeave={(e) => {
-                //     mouseOutStyleChange(e);
-                //     setHoveredOpportunity(null)}}
-                // onClick={(e) => setSelectedOpportunity(index)}
-            />
+        {Object.entries(opportunities||{}).map(([provider, opps]) => {
+            return opps && opps.map((opp, index) => {
+              const { start, end } = parseStacDatetime(opp.properties.datetime);
+              return <Opportunity
+                  key={index}
+                  title={opp.id}
+                  provider={provider}
+                  start={start}
+                  end={end}
+                  // onMouseEnter={(e) => {
+                  //     mouseInStyleChange(e);
+                  //     setHoveredOpportunity(index)}}
+                  // onMouseLeave={(e) => {
+                  //     mouseOutStyleChange(e);
+                  //     setHoveredOpportunity(null)}}
+                  // onClick={(e) => setSelectedOpportunity(index)}
+              />
+            })
         })
         }
     </div>

demo/app/src/components/Sidebar/Sidebar.js

@@ -10,6 +10,7 @@ import styles from "./Sidebar.module.scss";
 import { useAppContext } from 'src/context/appContext';
 import OpportunityList from './OpportunityList';
 import { useEffect, useState } from 'react';
+import { ALL_PROVIDERS as providers } from 'src/utils/constants';
 
 export default function Sidebar(props) {
   const {
@@ -22,8 +23,7 @@ export default function Sidebar(props) {
     isLoadingProducts,
     isErrorProducts,
     userParams,
-    setUserParams,
-    providers
+    setUserParams
   } = useAppContext();
 
   function providerSelectHandler(e) {

demo/app/src/context/appContext.js

@@ -21,7 +21,8 @@ export default function AppProvider({ children }) {
       today,
       new Date(new Date(today).setDate(today.getDate() + 3)),
     ],
-    provider: 'earthsearch'
+    provider: null,
+    product: null
   });
   const [hoveredOpportunity, setHoveredOpportunity] = useState(null);
   const [selectedOpportunity, setSelectedOpportunity] = useState(null);
@@ -32,27 +33,14 @@ export default function AppProvider({ children }) {
         params: {
           "geometry": userParams.geometry,
           "datetime": formatToISOString(userParams.dateRange),
-          "product_id": userParams.provider === 'earthsearch' ? 'sentinel-2-l1c' : null
+          "product_id": userParams.product
         },
         provider: userParams.provider
       } : null;
   }, [userParams])
 
-  const { isLoading: isLoadingOpps, data: opportunities, error: errorOpps } = useGetOpportunities(postParams);
   const { isLoading: isLoadingProducts, data: products, error: errorProducts } = useGetProducts();
-  const providers = [{
-    id: 'earthsearch',
-    name: 'EarthSearch'
-  }, {
-    id: 'blacksky',
-    name: 'BlackSky'
-  }, {
-    id: 'planet',
-    name: 'Planet'
-  }, {
-    id: 'umbra',
-    name: 'Umbra'
-  }]
+  const { isLoading: isLoadingOpps, data: opportunities, error: errorOpps } = useGetOpportunities(products, postParams);
 
   const app = {
     userParams,
@@ -69,8 +57,7 @@ export default function AppProvider({ children }) {
     setHoveredOpportunity,
     openFilters,
     setOpenFilters,
-    setHoveredOpportunity,
-    providers
+    setHoveredOpportunity
   }
 
   return (

demo/app/src/hooks/useGetOpportunities.js

@@ -1,34 +1,53 @@
 import { useEffect, useState } from "react";
 import useLocalStorage from "./useLocalStorage";
+import { ALL_PROVIDERS } from "src/utils/constants";
 
-const useGetOpportunities = (postParams) => {
+function fetchOpportunity(token, provider, params){
+    return fetch("/api/opportunities", {
+                method: "POST",
+                headers: {
+                    "Content-type": "application/json",
+                    "Backend": provider,
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify(params)
+            });
+};
+
+const useGetOpportunities = (products, postParams) => {
     const {params, provider} = !!postParams && postParams;
     const [data, setData] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState("");
     const { userToken } = useLocalStorage();
 
+    function fetchAllProviderProducts(p){
+        return products[p] && products[p].map(async product => {
+            return fetchOpportunity(userToken, p, Object.assign(params, {"product_id": product.id})).then(async res => await res.json()).then(data => { return {'provider': p, 'data': data}});
+        });
+    };
+
     useEffect(() => {
         if (params) {
             setIsLoading(true);
             setError(false);
-            fetch("/api/opportunities", {
-                method: "POST",
-                headers: {
-                    "Content-type": "application/json",
-                    "Backend": provider,
-                    'Authorization': `Bearer ${userToken}`
-                },
-                body: JSON.stringify(params)
-            })
-            .then((res) => res.json())
-            .then((data) => {
-                setData(data.features)
-                setIsLoading(false)
-            }).catch(e => {
-                setError(e);
-                setIsLoading(false);
-            });
+            // By default fetch all provider product opportunities
+            if(!provider && !params["product_id"]){
+                const allProvidersOpportunities = ALL_PROVIDERS.reduce((all, p) => {
+                    const promises = fetchAllProviderProducts(p.id);
+                    return promises ? [...all, ...promises] : all;
+                }, []);
+
+                Promise.all(allProvidersOpportunities).then(results => {
+                    setData(Object.fromEntries(Object.values(results).map(value => {
+                        return [value.provider, value.data.features]
+                    })));
+                    setIsLoading(false);
+                }).catch(e => {
+                    setError(e);
+                    setIsLoading(false);
+                });
+            }
         }
     }, [params, provider]);
 

demo/app/src/hooks/useGetProducts.js

@@ -1,22 +1,30 @@
 import { useEffect, useState } from "react";
 import useLocalStorage from "./useLocalStorage";
+import { ALL_PROVIDERS } from "src/utils/constants";
 
 const useGetProducts = () => {
-    const [data, setData] = useState(null);
+    const [data, setData] = useState({});
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState("");
     const { userToken } = useLocalStorage();
 
     useEffect(() => {
-        fetch('/api/products', {headers: new Headers({
-            'Backend': 'earthsearch',
-            'Authorization': `Bearer ${userToken}`
-        })})
-        .then((res) => res.json())
-        .then((data) => {
-            setData(data['products'])
+        const allProductRequests = ALL_PROVIDERS.map(async provider => {
+            return fetch('/api/products', {headers: new Headers({
+                'Backend': provider.id,
+                'Authorization': `Bearer ${userToken}`
+            })})
+            .then(async res => await res.json())
+            .then(data => { return {'provider': provider.id, 'data': data}})
+        });
+
+        Promise.all(allProductRequests).then((results) => {
+            setData(Object.fromEntries(Object.values(results).map(value => {
+                return [value.provider, value.data.products]
+            })));
             setIsLoading(false)
         }).catch(e => setError(e));
+
     }, []);
 
     return { data, isLoading, error };

demo/app/src/utils/constants.js

@@ -0,0 +1,13 @@
+export const ALL_PROVIDERS = [{
+    id: 'earthsearch',
+    name: 'EarthSearch'
+  }, {
+    id: 'blacksky',
+    name: 'BlackSky'
+  }, {
+    id: 'planet',
+    name: 'Planet'
+  }, {
+    id: 'umbra',
+    name: 'Umbra'
+  }];