3 files changed, 91 insertions, 10 deletions

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 f062952..de4cb2a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,31 +1,52 @@
 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 Timer from './components/Timer/Timer';
+import Scoreboard from "./components/Scoreboard/Scoreboard";
 
 
 const App = () => {
 
   const [page, setPage] = useState('app');
 
+  const getPageComponent = page => {
+    switch (page) {
+      case 'app':
+        return (<Timer/>);
+      case 'scoreboard':
+        return (<Scoreboard/>);
+      default:
+        return (
+          <p>
+            This text is rendered outside of <code>Header</code> component, but
+            interacting with <code>Header</code> can influence content of this page!
+          </p>
+        )
+    }
+  };
+
+  const classes = useStyles();
   return (
-    <Root>
+    <ThemeProvider theme={theme}>
       <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>
-      <Timer />
-    </Root>
+      <Header setPage={setPage}/>
+      <Box className={classes.root}>
+        <Typography variant="h4"> This is the {page} page! </Typography>
+        { getPageComponent(page)}
+      </Box>
+    </ThemeProvider>
   );
 };
-
 const Root = styled.div`
   background: cornsilk;
   padding-bottom: 25px;