Search by provider or product

Author: rachelekm

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

@@ -29,14 +29,46 @@ export default function Sidebar(props) {
   function providerSelectHandler(e) {
     setUserParams({
       ...userParams,
-      provider: e.target.value
+      provider: e.target.value,
+      product: 'all'
+    })
+  }
+
+  function productSelectHandler(e) {
+    setUserParams({
+      ...userParams,
+      product: e.target.value
     })
   }
 
   function isProviderSelected(provider) {
     return provider === userParams.provider;
   }
 
+  function isProductSelected(product) {
+    return product === userParams.product;
+  }
+
+  function getProductOptions(products){
+    return products && products.filter(product => product).map(({ title, id }) => {
+      return (
+        <option
+          key={id}
+          value={id}
+          selected={isProductSelected(id)}
+        >
+          {title}
+        </option>
+      );
+    });
+  }
+
+  function displayProducts() {
+    return userParams.provider !== 'all' ?
+      getProductOptions(products[userParams.provider])
+      : getProductOptions(Object.values(products).flat())
+  }
+
   const filterButtonClass = openFilters
     ? styles.filterButtonOpen
     : styles.filterButtonClosed
@@ -78,6 +110,13 @@ export default function Sidebar(props) {
                 <div>
                   <span>Providers: </span>
                   <select onChange={providerSelectHandler}>
+                    <option
+                        value='all'
+                        key='all'
+                        selected
+                      >
+                        All
+                      </option>
                     {providers.map((provider) => (
                       <option
                         value={provider.id}
@@ -91,17 +130,16 @@ export default function Sidebar(props) {
                 </div>
                 <div>
                   <div className={styles.blockLabel}>Products: </div>
-                  {products.length && (
-                    <select>
-                      {products.map(({ title, id }) => {
-                        return (
-                          <option key={id} value={id}>
-                            {title}
-                          </option>
-                        );
-                      })}
+                  <select onChange={productSelectHandler}>
+                      <option
+                        value='all'
+                        key='all'
+                        selected
+                      >
+                        All
+                      </option>
+                      {displayProducts()}
                     </select>
-                  )}
                 </div>
               </div>
             </div>

demo/app/src/context/appContext.js

@@ -21,8 +21,8 @@ export default function AppProvider({ children }) {
       today,
       new Date(new Date(today).setDate(today.getDate() + 3)),
     ],
-    provider: null,
-    product: null
+    provider: 'all',
+    product: 'all'
   });
   const [hoveredOpportunity, setHoveredOpportunity] = useState(null);
   const [selectedOpportunity, setSelectedOpportunity] = useState(null);

demo/app/src/hooks/useGetOpportunities.js

@@ -4,14 +4,14 @@ import { ALL_PROVIDERS } from "src/utils/constants";
 
 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)
-            });
+        method: "POST",
+        headers: {
+            "Content-type": "application/json",
+            "Backend": provider,
+            'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify(params)
+    });
 };
 
 const useGetOpportunities = (products, postParams) => {
@@ -21,9 +21,25 @@ const useGetOpportunities = (products, postParams) => {
     const [error, setError] = useState("");
     const { userToken } = useLocalStorage();
 
+    function setAsyncResultsData(promises){
+        Promise.all(promises).then(results => {
+            setData(Object.fromEntries(Object.values(results).map(value => {
+                return [value.provider, value.data.features]
+            })));
+            setIsLoading(false);
+        }).catch(e => {
+            setError(e);
+            setIsLoading(false);
+        });
+    }
+
+    async function fetchByProduct(p, productId){
+        return fetchOpportunity(userToken, p, Object.assign(params, {"product_id": productId})).then(async res => await res.json()).then(data => { return {'provider': p, 'data': data}});
+    }
+
     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}});
+            return fetchByProduct(p, product.id);
         });
     };
 
@@ -32,16 +48,31 @@ const useGetOpportunities = (products, postParams) => {
             setIsLoading(true);
             setError(false);
             // By default fetch all provider product opportunities
-            if(!provider && !params["product_id"]){
+            if(provider === 'all' && params["product_id"] === 'all'){
                 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]
-                    })));
+                setAsyncResultsData(allProvidersOpportunities);
+            }
+            else if(provider === 'all'){
+                const productOpportunities = ALL_PROVIDERS.reduce((all, p) => {
+                    const promise = fetchByProduct(p.id, params["product_id"]);
+                    return promise ? [...all, promise] : all;
+                }, []);
+
+                setAsyncResultsData(productOpportunities);
+            }
+            else if(params["product_id"] === 'all'){
+                const providerOpportunities = fetchAllProviderProducts(provider)
+                setAsyncResultsData(providerOpportunities);
+            }
+            else{
+                fetchOpportunity(userToken, provider, params)
+                .then(async res => await res.json())
+                .then(data => {
+                    setData({[provider]: data.features});
                     setIsLoading(false);
                 }).catch(e => {
                     setError(e);