Refactor App component

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 />;
 }

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>
+  );
+}