From 7c4e13d11bc2fc5b0f03efc959dd551a30565e8a Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Thu, 2 Jan 2020 17:20:23 +0300
Subject: Create Scoreboard component & integrate with API
---
src/components/Scoreboard/Scoreboard.js | 28 ++++++++++++++++++++++++++++
src/components/Scoreboard/Solution.js | 32 ++++++++++++++++++++++++++++++++
src/index.js | 28 +++++++++++++++++++++++-----
3 files changed, 83 insertions(+), 5 deletions(-)
create mode 100644 src/components/Scoreboard/Scoreboard.js
create mode 100644 src/components/Scoreboard/Solution.js
(limited to 'src')
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
new file mode 100644
index 0000000..1ebca90
--- /dev/null
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -0,0 +1,28 @@
+import React, {useEffect, useState} from 'react';
+
+
+import { get } from "../../requests";
+import Solution from "./Solution";
+
+
+const Scoreboard = () => {
+ const [solutions, setSolutions] = useState([]);
+
+ const updateSolutions = async () => {
+ const response = await get('solutions/');
+ await setSolutions(response.data);
+ };
+
+ useEffect(() => {
+ updateSolutions();
+ }, []);
+
+
+ return (
+ <div>
+ { solutions.map(solution => <Solution solution={solution}/>) }
+ </div>
+ );
+};
+
+export default Scoreboard;
\ No newline at end of file
diff --git a/src/components/Scoreboard/Solution.js b/src/components/Scoreboard/Solution.js
new file mode 100644
index 0000000..3f46eb5
--- /dev/null
+++ b/src/components/Scoreboard/Solution.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+ Card,
+ CardContent,
+ Typography,
+ Paper,
+} from "@material-ui/core";
+
+import styled from "styled-components";
+
+const Solution = ({ solution }) => {
+
+ const author = solution.author? solution.author : 'anonymous';
+ return (
+ <PaperWrapper elevation={2} style={{backgroundColor: "#ddbea3"}}>
+ <Typography variant="h4" style={{fontWeight: "bold"}}>
+ { solution.result }
+ </Typography>
+ <Typography>
+ by {author}
+ </Typography>
+ </PaperWrapper>
+ )
+};
+
+const PaperWrapper = styled(Card)`
+ padding: 10px;
+ margin: 25px;
+`;
+
+export default Solution;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 5c657f9..38a79a6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,17 @@
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
+import {
+ Typography,
+ Paper,
+ Container,
+} from "@material-ui/core";
+
import styled from 'styled-components';
import CssBaseline from '@material-ui/core/CssBaseline'
import Header from './components/Header/Header';
+import Scoreboard from "./components/Scoreboard/Scoreboard";
const App = () => {
@@ -15,11 +22,22 @@ const App = () => {
<Root>
<CssBaseline/>
<Header setPage={setPage} />
- <h1> This is the {page} page! </h1>
- <p>
- This text is rendered outside of <code>Header</code> component, but
- interacting with <code>Header</code> can influence content of this page!
- </p>
+ <Container maxWidth="xl">
+ <Paper elevation={4} style={{backgroundColor: "bisque"}}>
+ <Typography variant="h4"> This is the {page} page! </Typography>
+ {
+ (page === 'scoreboard')?
+ (<Scoreboard/>)
+ :
+ (
+ <p>
+ This text is rendered outside of <code>Header</code> component, but
+ interacting with <code>Header</code> can influence content of this page!
+ </p>
+ )
+ }
+ </Paper>
+ </Container>
</Root>
);
};
--
cgit v1.2.3