From 53396bccb8f5eccab0e68fd6f82344a4c1b0d415 Mon Sep 17 00:00:00 2001
From: garritfra <garritfranke@gmail.com>
Date: Wed, 6 Mar 2019 20:31:05 +0100
Subject: [PATCH] Refactor App component

---
 frontend/src/App.tsx       | 33 ++-------------------------------
 frontend/src/BlockList.tsx | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/BlockList.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0add435..c5a435b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,35 +1,6 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
+import BlockList from "./BlockList";
 
 export default function App() {
-  let [blocks, setBlocks] = useState([]);
-
-  let backendUrl: string = process.env.BACKEND_ADDRESS!;
-
-  if (backendUrl === undefined) {
-    throw Error("backend address not specified in ENV variable");
-  }
-
-  console.log(backendUrl);
-
-  async function fetchBlocks() {
-    let result = await axios(backendUrl);
-    return result.data.Blocks;
-  }
-
-  useEffect(() => {
-    fetchBlocks().then(blocks => {
-      setBlocks(blocks);
-    });
-  }, []);
-
-  let blocksComponent = blocks.map(block => {
-    return <li key={block.hash}>{block.hash}</li>;
-  });
-
-  return (
-    <div>
-      <h1>{blocksComponent}</h1>
-    </div>
-  );
+  return <BlockList />;
 }
diff --git a/frontend/src/BlockList.tsx b/frontend/src/BlockList.tsx
new file mode 100644
index 0000000..826f14b
--- /dev/null
+++ b/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>
+  );
+}