Merge pull request #10 from garritfra/frontend

Frontend

frontend/.env

@@ -0,0 +1 @@
+BACKEND_ADDRESS=http://localhost:42000/

frontend/package-lock.json

@@ -838,9 +838,9 @@
       "integrity": "sha512-e9wgeY6gaY21on3ve0xAjgBVjGDWq/xUteK0ujsE53bUoxycMkqfnkUgMt6ffZtykZ5X12Mg3T7Pw4TRCObDKg=="
     },
     "@types/prop-types": {
-      "version": "15.5.9",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.9.tgz",
-      "integrity": "sha512-Nha5b+jmBI271jdTMwrHiNXM+DvThjHOfyZtMX9kj/c/LUj2xiLHsG/1L3tJ8DjAoQN48cHwUwtqBotjyXaSdQ=="
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.0.tgz",
+      "integrity": "sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg=="
     },
     "@types/q": {
       "version": "1.5.1",
@@ -848,9 +848,9 @@
       "integrity": "sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA=="
     },
     "@types/react": {
-      "version": "16.8.4",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.4.tgz",
-      "integrity": "sha512-Mpz1NNMJvrjf0GcDqiK8+YeOydXfD8Mgag3UtqQ5lXYTsMnOiHcKmO48LiSWMb1rSHB9MV/jlgyNzeAVxWMZRQ==",
+      "version": "16.8.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.7.tgz",
+      "integrity": "sha512-0xbkIyrDNKUn4IJVf8JaCn+ucao/cq6ZB8O6kSzhrJub1cVSqgTArtG0qCfdERWKMEIvUbrwLXeQMqWEsyr9dA==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -2042,9 +2042,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz",
-      "integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow=="
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz",
+      "integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg=="
     },
     "date-now": {
       "version": "0.1.4",
@@ -2222,9 +2222,9 @@
       }
     },
     "dotenv": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-5.0.1.tgz",
-      "integrity": "sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow=="
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz",
+      "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w=="
     },
     "dotenv-expand": {
       "version": "4.2.0",
@@ -4721,6 +4721,13 @@
         "terser": "^3.7.3",
         "v8-compile-cache": "^2.0.0",
         "ws": "^5.1.1"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-5.0.1.tgz",
+          "integrity": "sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow=="
+        }
       }
     },
     "parse-asn1": {

frontend/package.json

@@ -11,10 +11,11 @@
   "license": "ISC",
   "dependencies": {
     "@types/axios": "^0.14.0",
-    "@types/react": "^16.8.4",
+    "@types/react": "^16.8.7",
     "@types/react-dom": "^16.8.2",
     "axios": "^0.18.0",
     "body-parser": "^1.18.3",
+    "dotenv": "^6.2.0",
     "express": "^4.16.4",
     "parcel-bundler": "^1.11.0",
     "react": "^16.8.3",

frontend/src/App.tsx

@@ -1,15 +1,6 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
+import BlockList from "./BlockList";
 
 export default function App() {
-  useEffect(() => {
-    axios.get("https://baconipsum.com/api/?type=meat-and-filler").then(res => {
-      console.log(res.data);
-    });
-  });
-  return (
-    <div>
-      <h1>Hello from App!</h1>
-    </div>
-  );
+  return <BlockList />;
 }

frontend/src/BlockList.tsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+export default function BlockList() {
+  let [blocks, setBlocks] = useState([]);
+
+  let backendUrl: string = process.env.BACKEND_ADDRESS!;
+
+  if (backendUrl === undefined) {
+    throw Error("backend address not specified in ENV variable");
+  }
+
+  const blocksComponent = blocks.map(block => {
+    return <li key={block.hash}>{block.hash}</li>;
+  });
+
+  async function fetchBlocks() {
+    let result = await axios(backendUrl);
+    return result.data.Blocks;
+  }
+
+  useEffect(() => {
+    fetchBlocks().then(blocks => {
+      setBlocks(blocks);
+    });
+  }, []);
+
+  return (
+    <div>
+      <h1>{blocksComponent}</h1>
+    </div>
+  );
+}

frontend/src/index.tsx

@@ -2,4 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 
+require("dotenv").config();
+
 ReactDOM.render(<App />, document.getElementById("root"));