FINALLY THE BACKEND AND FRONT END ARE TALKING NOW

1 files changed, 15 insertions, 39 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 06a80a6..a7e4ef0 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -1,49 +1,28 @@
 import React, { useState, useEffect } from "react";
+import axios from "axios";
+
 import AddNewItemForm from "./Form/AddNewItemForm";
 import ItemsDisplay from "./Display/ItemsDisplay";
 import SummaryDisplay from "./Display/SummaryDisplay";
 
-const sampleData = [
-  {
-    "Model": "Kisan Chair",
-    "Description": "Very good chair",
-    "Price": 10000,
-    "HSN": 9403
-  }, {
-    "Model": "Supreme Chair",
-    "Description": "Even better chair",
-    "Price": "2134983",
-    "HSN": 9403
-  }, {
-    "Model": "Action Houseware",
-    "Description": "Not a chair",
-    "Price": 69,
-    "HSN": 69
-  }, {
-    "Model": "Coirfit Mattress",
-    "Description": "Not a chair (neither houseware)",
-    "Price": 19,
-    "HSN": 420
-  }, {
-    "Model": "AVRO Chair",
-    "Description": "Formerly AVON lol",
-    "Price": 291,
-    "HSN": 9403
-  }, {
-    "Model": "Mystery Item",
-    "Description": "hehe heheheheheh",
-    "Price": 1212312,
-    "HSN": 42069
-  }
-];
-
 const BillingPage = () => {
+  const [savedItems, getSavedItems] = useState([])
+
+  // get data from server on startup
   useEffect(() => {
-    alert("yo this app in beta");
+    axios.get(`/api/items`)
+      .then((res) => {
+        getSavedItems(res.data);
+      })
+      .catch((res) => {
+        alert("The promise returned an error idk what to do");
+        console.log(res);
+      })
   }, []);
   // to be handled by backend
   const defGSTValue = 18;
 
+  // update the items from AddNewItemForm
   const [items, setItems] = useState([]);
   const getItems = (item) => {
     setItems(
@@ -51,12 +30,9 @@ const BillingPage = () => {
     );
   };
 
-  useEffect(() => {
-  }, [items]);
-
   return (
     <div>
-      <AddNewItemForm savedItems={sampleData} addItem={getItems} defGSTValue={defGSTValue}/>
+      <AddNewItemForm savedItems={savedItems} addItem={getItems} defGSTValue={defGSTValue}/>
       <ItemsDisplay items={items} defGSTValue={defGSTValue}/>
       <SummaryDisplay items={items}/>
     </div>