garritfra
5 years ago
2 changed files with 35 additions and 31 deletions
@ -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 />; |
||||
} |
||||
|
@ -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> |
||||
); |
||||
} |
Loading…
Reference in new issue