before change to fetchingredient

Author: malmla

labs/lab2/src/App.js

@@ -1,8 +1,8 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min';
-import inventory from './inventory.mjs';
-import { Order, Salad } from './salad.mjs'
+//import inventory from './inventory.mjs';
+import { Order } from './salad.mjs'
 import { useState } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 //import ComposeSalad from './ComposeSalad'
@@ -12,7 +12,7 @@ import { NavLink, Outlet } from 'react-router-dom';
 function App() {
   const [order, setOrder] = useState(new Order());
 
-  function addSaladOrder(saladForm) {
+  /* function addSaladOrder(saladForm) {
     const salad = new Salad();
 
     for (const item of saladForm.keys()) {
@@ -26,7 +26,7 @@ function App() {
     } else {
       console.log('saladen behöver ha en bas, en protein, och en dressing')
     }
-  }
+  } */
 
   function removeSaladOrder(e) {
     const newOrder = new Order(order.uuidOrder, order.saladList);
@@ -80,7 +80,7 @@ function App() {
       <Header />
       <Navbar />
 
-      <Outlet context={{order, setOrder, inventory, removeSaladOrder, addSaladOrder}}/>
+      <Outlet context={{order, setOrder, removeSaladOrder}}/>
 
       {/**<ViewOrder saladOrders={order} removeSaladOrder={removeSaladOrder} />
       <ComposeSalad inventory={inventory} addSaladOrder={addSaladOrder} /> **/}

labs/lab2/src/ComposeSalad.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useOutletContext, useNavigate, Outlet, NavLink } from 'react-router-dom';
+import { useOutletContext, useNavigate, useLoaderData, Outlet, NavLink } from 'react-router-dom';
 import { Salad, Order } from './salad.mjs';
 //import inventory from './inventory.mjs';
 
@@ -10,7 +10,7 @@ function ComposeSalad(props) {
   const [extras, setExtra] = useState(new Set());
   const order = useOutletContext()['order'];
   const setOrder = useOutletContext()['setOrder'];
-  const inventory = useOutletContext()['inventory'];
+  const inventory = useLoaderData();
   const navigate = useNavigate();
 
   const extrasList = Object.entries(inventory).filter(entry => entry[1]['extra']);

labs/lab2/src/router.js

@@ -7,6 +7,69 @@ import ViewOrder from "./ViewOrder";
 import Confirm from "./Confirm";
 import ViewIngredient from "./ViewIngredient";
 
+const baseServerURL = "http://localhost:8080";
+
+async function inventoryLoader() {
+  const inventory = { Sallad: { price: 10, foundation: true, vegan: true } };
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  /*let promiseFoundations = safeFetchJson(new URL('foundations', baseServerURL))
+    .then(result => {
+      console.log(result);
+      result.forEach(element => {
+        let promiseFoundationDetails = fetchIngredient('foundations', element)
+          .then(result => {
+            inventory[element] = {...result};
+            console.log(inventory);
+          });
+      });
+      return result;
+    }); */
+  let myPromise = [];
+  myPromise.push(fetchIngredientType('foundations', inventory));
+  myPromise.push(fetchIngredientType('extras', inventory));
+  myPromise.push(fetchIngredientType('proteins', inventory));
+  myPromise.push(fetchIngredientType('dressings', inventory));
+  
+  return Promise.all(myPromise).then(_ => {
+    return inventory;
+  });
+}
+
+async function fetchIngredientType (ingredientType, inventory) {
+  let promises = [];
+  safeFetchJson(new URL(ingredientType, baseServerURL))
+  .then(result => {
+    result.forEach(element => {
+      let promise = fetchIngredient(ingredientType, element);
+      promises.push({[element]: promise});
+      promise.then(result => {
+        inventory[element] = {...result};
+      });
+    });
+  })
+
+  return Promise.all(promises);
+}
+
+async function fetchIngredient(type, ingredient) {
+  let resp = safeFetchJson(new URL(type + '/' + ingredient, baseServerURL));
+  resp.then(properties => {
+    console.log({[ingredient]: {...properties}});
+  });
+  return resp;
+}
+
+function safeFetchJson(url) {
+  return fetch(url)
+    .then(response => {
+      if(!response.ok) {
+        throw new Error(`${url} returned status ${response.status}`);
+      }
+      return response.json();
+    });
+}
+
 const router = createBrowserRouter([
   {
     element: <App />,
@@ -17,6 +80,7 @@ const router = createBrowserRouter([
       },
       {
         path: "compose-salad",
+        loader: inventoryLoader,
         element: <ComposeSalad />,
         children: [
           {