garritfra
5 years ago
2 changed files with 35 additions and 31 deletions
@ -1,35 +1,6 @@ |
|||||||
import React, { useState, useEffect } from "react"; |
import React, { useState, useEffect } from "react"; |
||||||
import axios from "axios"; |
import BlockList from "./BlockList"; |
||||||
|
|
||||||
export default function App() { |
export default function App() { |
||||||
let [blocks, setBlocks] = useState([]); |
return <BlockList />; |
||||||
|
|
||||||
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> |
|
||||||
); |
|
||||||
} |
} |
||||||
|
@ -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