Add proxy for BE / call for sheet and group

FE/simple-sheet-fe/package.json

@@ -34,5 +34,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:8080"
 }

FE/simple-sheet-fe/src/App.js

@@ -1,25 +1,47 @@
+import React, {useState, useEffect} from 'react';
 import logo from './logo.svg';
 import './App.css';
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  const [error, setError] = useState(null),
+        [isLoaded, setIsLoaded] = useState(false),
+        [items, setItems] = useState([]),
+        handleAjaxError = error => {
+          setIsLoaded(true);
+          setError(error);
+
+          console.log('err', error);
+        };
+
+        useEffect(() => {
+          fetch('/sheets/1')
+          .then(res => res.json())
+          .then(
+            res => {
+              console.log('sheets', res);
+
+              fetch(`/groups/${res.id}`)
+              .then(res => res.json())
+              .then(res => {
+                setIsLoaded(true);
+                console.log('groups', res);
+              }, handleAjaxError)
+            }, handleAjaxError)
+        }, []);
+
+    if (error) {
+      return <p>error</p>;
+    } else if (!isLoaded) {
+      return <p>loading</p>;
+    } else {
+      return (
+        <div className="App">
+          <header className="App-header">
+            Simple Sheet
+          </header>
+        </div>
+      );
+    }
 }
 
 export default App;