felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

trying to fetch API

This commit is contained in:
Kristoffer Longva Eriksen 2022-03-23 10:09:34 +01:00
parent a9756fc051
commit 11b0669552
1 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/client/src/frontpage.js
View File

@ -15,12 +15,12 @@ import CssBaseline from "@mui/material/CssBaseline";
import AppBar from "@mui/material/AppBar"; import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar"; import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Grid from '@mui/material/Grid' import Grid from "@mui/material/Grid";
import Box from '@mui/material/Box' import Box from "@mui/material/Box";
function CreateButton(props) { function CreateButton(props) {
return ( return (
<Link to="/create" style={{textDecoration:'none'}}> <Link to="/create" style={{ textDecoration: "none" }}>
<Button variant="contained" color="primary"> <Button variant="contained" color="primary">
Create Tournament Create Tournament
</Button> </Button>
@ -30,7 +30,7 @@ function CreateButton(props) {
function OverviewButton(props) { function OverviewButton(props) {
return ( return (
<Link to="/tournament" style={{textDecoration:'none'}}> <Link to="/tournament" style={{ textDecoration: "none" }}>
<Button variant="contained" color="success"> <Button variant="contained" color="success">
View Tournament View Tournament
</Button> </Button>
@ -58,13 +58,26 @@ function ListElement(props) {
); );
} }
function TournamentList() {
let [data, setData] = React.useState(null);
React.useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((res) => res.json())
.then((data) => {
console.log(data);
})
.catch((err) => console.log("oopsie"));
}, []);
return <div>{data && data.map((id) => console.log(id))}</div>;
}
function Home() { function Home() {
return ( return (
<React.StrictMode> <React.StrictMode>
<CssBaseline /> <CssBaseline />
<AppBar position="relative" color="primary"> <AppBar position="relative" color="primary">
<Toolbar> <Toolbar>
<HomeImage className='mainIcon'/> <HomeImage className="mainIcon" />
<Typography>This is an Appbar</Typography> <Typography>This is an Appbar</Typography>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
@ -73,14 +86,25 @@ function Home() {
<Box> <Box>
<CreateButton /> <CreateButton />
</Box> </Box>
<ListElement name="Weekend Warmup" competitors="16" date="29.04.2022" /> <ListElement
<ListElement name="Saturday Showdown" competitors="8" date="30.04.2022"/> name="Weekend Warmup"
<ListElement name="Sunday Funday" competitors="64" date="01.05.2022" /> competitors="16"
date="29.04.2022"
/>
<ListElement
name="Saturday Showdown"
competitors="8"
date="30.04.2022"
/>
<ListElement
name="Sunday Funday"
competitors="64"
date="01.05.2022"
/>
<TournamentList />
</Container> </Container>
</main> </main>
<footer className="footer"> <footer className="footer"></footer>
</footer>
</React.StrictMode> </React.StrictMode>
); );
} }