Isolate SolutionCard component

2 files changed, 2 insertions, 73 deletions

diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 1235f9a..399a017 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Container, Typography } from "@material-ui/core";
 
 import { get } from "../../requests";
-import Solution from "./Solution";
+import SolutionCard from "../SolutionCard/SolutionCard";
 
 
 const Scoreboard = () => {
@@ -22,7 +22,7 @@ const Scoreboard = () => {
   return (
     <Container maxWidth="sm">
       <Typography variant="h3" style={{textAlign: 'center'}}>Scoreboard</Typography>
-      {solutions.map(solution => (<Solution solution={solution}/>))}
+      {solutions.map(solution => (<SolutionCard solution={solution}/>))}
     </Container>
   );
 };
diff --git a/src/components/Scoreboard/Solution.js b/src/components/Scoreboard/Solution.js
deleted file mode 100644
index 1d54b04..0000000
--- a/src/components/Scoreboard/Solution.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-
-import {
-  Typography,
-  Card,
-  Container,
-  Box,
-  ExpansionPanelSummary,
-  ExpansionPanel,
-  ExpansionPanelDetails,
-} from "@material-ui/core";
-
-import { makeStyles } from "@material-ui/core/styles";
-import TimerIcon from '@material-ui/icons/Timer';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-
-
-const useStyles = makeStyles(theme => ({
-  item: {
-    margin: theme.spacing(3),
-    width: theme.spacing(60),
-
-    '& .MuiBox-root': {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-
-    '& .MuiTypography-h2': {
-      color: theme.palette.secondary.main,
-      margin: theme.spacing(2),
-    },
-  },
-
-}));
-
-const Solution = ({ solution }) => {
-  const classes = useStyles();
-
-  const author = solution.author? solution.author : 'anonymous';
-  return (
-    <Card elevation={4} className={classes.item}>
-      <Container maxWidth="xs">
-        <Box>
-          <TimerIcon/>
-          <Typography variant="h2">
-            { solution.result }
-          </Typography>
-        </Box>
-      </Container>
-
-      <ExpansionPanel>
-        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon style={{color: 'white'}}/>}>
-          <Typography variant="h6">
-            By {author}
-          </Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-          </Typography>
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
-    </Card>
-  )
-};
-
-export default Solution;