Merge pull request #23 from Eug-VS/solution-card

Isolate and improve SolutionCard

3 files changed, 133 insertions, 77 deletions

diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 1235f9a..d55944d 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,12 +1,25 @@
 import React, { useEffect, useState } from 'react';
 
-import { Container, Typography } from "@material-ui/core";
+import {
+  Container,
+  Typography,
+  Grid,
+} from "@material-ui/core";
 
 import { get } from "../../requests";
-import Solution from "./Solution";
+import SolutionCard from "../SolutionCard/SolutionCard";
+import { makeStyles } from "@material-ui/core/styles";
 
 
+const useStyles = makeStyles(theme => ({
+  pageHeader: {
+    textAlign: 'center',
+    margin: theme.spacing(2),
+  }
+}));
+
 const Scoreboard = () => {
+  const classes = useStyles();
   const [solutions, setSolutions] = useState([]);
 
   const updateSolutions = async () => {
@@ -14,15 +27,26 @@ const Scoreboard = () => {
     await setSolutions(response.data);
   };
 
+  const removeSolution = (id) => {
+    setSolutions(solutions.filter((solution => solution.id !== id)));
+  };
+
   useEffect(() => {
     updateSolutions();
   }, []);
 
-
   return (
-    <Container maxWidth="sm">
-      <Typography variant="h3" style={{textAlign: 'center'}}>Scoreboard</Typography>
-      {solutions.map(solution => (<Solution solution={solution}/>))}
+    <Container maxWidth="xs">
+      <Typography variant="h3" className={classes.pageHeader}>
+        Scoreboard
+      </Typography>
+      <Grid container justify="center" direction="column" spacing={3}>
+        {solutions.map(solution => (
+          <Grid item>
+            <SolutionCard data={solution} removeThisCard={removeSolution}/>
+          </Grid>
+        ))}
+      </Grid>
     </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;
diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
new file mode 100644
index 0000000..7cca74c
--- /dev/null
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+
+import {
+  Typography,
+  Card,
+  CardHeader,
+  CardContent,
+  IconButton,
+  Avatar,
+  Grid,
+  Menu,
+  MenuItem,
+} from "@material-ui/core";
+
+import { makeStyles } from "@material-ui/core/styles";
+import TimerIcon from '@material-ui/icons/Timer';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+import { del } from "../../requests";
+
+
+const DATE_FORMAT = {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+};
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(1),
+
+    '& .MuiTypography-h3': {
+      color: theme.palette.secondary.main,
+      margin: theme.spacing(2),
+    },
+  },
+}));
+
+const SolutionCard = ({ data, removeThisCard }) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const author = data.author? data.author.username : 'anonymous';
+  const date = new Date(data.date);
+
+  const handleOpenMenu = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleDelete = () => {
+    del(`solutions/${data.id}/`);
+    handleClose();
+    removeThisCard(data.id);
+  };
+
+  return (
+    <Card elevation={5} className={classes.root}>
+      <CardHeader
+        avatar={
+          author === 'anonymous'?
+            (<Avatar/>)
+            :
+            (<Avatar>{author[0].toUpperCase()}</Avatar>)
+        }
+        title={author}
+        subheader={date.toLocaleString('default', DATE_FORMAT)}
+        action={(
+          <IconButton onClick={handleOpenMenu}>
+            <MoreVertIcon />
+          </IconButton>
+        )}
+      />
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        keepMounted
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleDelete}>Delete</MenuItem>
+      </Menu>
+      <CardContent>
+        <Grid container direction="row" justify="center" alignItems="center">
+          <Grid item>
+            <TimerIcon/>
+          </Grid>
+          <Grid item>
+            <Typography variant="h3">
+              { data.result }
+            </Typography>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+};
+
+export default SolutionCard;