From 57a8a5dccbc267543799fd01192b2a1534e53c64 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 5 Jan 2020 01:57:42 +0300
Subject: Isolate SolutionCard component

---
 src/components/SolutionCard/SolutionCard.js | 71 +++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/components/SolutionCard/SolutionCard.js

(limited to 'src/components/SolutionCard/SolutionCard.js')

diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
new file mode 100644
index 0000000..41d61c1
--- /dev/null
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -0,0 +1,71 @@
+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 SolutionCard = ({ 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 SolutionCard;
-- 
cgit v1.2.3


From c7771b2fe1fdc014ceb694979446f11c3cc7e79d Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 5 Jan 2020 02:08:47 +0300
Subject: Add header to SolutionCard

---
 src/components/SolutionCard/SolutionCard.js | 68 ++++++++++++++---------------
 1 file changed, 32 insertions(+), 36 deletions(-)

(limited to 'src/components/SolutionCard/SolutionCard.js')

diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
index 41d61c1..f8133db 100644
--- a/src/components/SolutionCard/SolutionCard.js
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -3,30 +3,28 @@ import React from 'react';
 import {
   Typography,
   Card,
-  Container,
-  Box,
-  ExpansionPanelSummary,
-  ExpansionPanel,
-  ExpansionPanelDetails,
+  CardHeader,
+  CardContent,
+  IconButton,
+  Avatar,
 } 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';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 
 const useStyles = makeStyles(theme => ({
-  item: {
-    margin: theme.spacing(3),
-    width: theme.spacing(60),
+  root: {
+    padding: theme.spacing(1),
 
-    '& .MuiBox-root': {
+    '& .MuiCardContent-root': {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
     },
 
-    '& .MuiTypography-h2': {
+    '& .MuiTypography-h3': {
       color: theme.palette.secondary.main,
       margin: theme.spacing(2),
     },
@@ -37,33 +35,31 @@ const useStyles = makeStyles(theme => ({
 const SolutionCard = ({ solution }) => {
   const classes = useStyles();
 
-  const author = solution.author? solution.author : 'anonymous';
+  const author = solution.author? solution.author.username : 'anonymous';
   return (
-    <Card elevation={4} className={classes.item}>
-      <Container maxWidth="xs">
-        <Box>
-          <TimerIcon/>
-          <Typography variant="h2">
-            { solution.result }
-          </Typography>
-        </Box>
-      </Container>
+    <Card elevation={5} className={classes.root}>
+      <CardHeader
+        avatar={
+          author === 'anonymous'?
+            (<Avatar/>)
+            :
+            (<Avatar>{author[0].toUpperCase()}</Avatar>)
+        }
+        title={author}
+        subheader="04.01.2020 13:20"
+        action={(
+          <IconButton>
+            <MoreVertIcon />
+          </IconButton>
+        )}
+      />
+      <CardContent>
+        <TimerIcon/>
+        <Typography variant="h3">
+          { solution.result }
+        </Typography>
+      </CardContent>
 
-      <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>
   )
 };
-- 
cgit v1.2.3


From 321674f2710910f87893b4d0e65e67b77d1ebaa4 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 5 Jan 2020 02:21:02 +0300
Subject: Use Grid instead of CSS to center time

---
 src/components/SolutionCard/SolutionCard.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

(limited to 'src/components/SolutionCard/SolutionCard.js')

diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
index f8133db..5f3e5b4 100644
--- a/src/components/SolutionCard/SolutionCard.js
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -7,6 +7,7 @@ import {
   CardContent,
   IconButton,
   Avatar,
+  Grid,
 } from "@material-ui/core";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -18,18 +19,11 @@ const useStyles = makeStyles(theme => ({
   root: {
     padding: theme.spacing(1),
 
-    '& .MuiCardContent-root': {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-
     '& .MuiTypography-h3': {
       color: theme.palette.secondary.main,
       margin: theme.spacing(2),
     },
   },
-
 }));
 
 const SolutionCard = ({ solution }) => {
@@ -54,12 +48,17 @@ const SolutionCard = ({ solution }) => {
         )}
       />
       <CardContent>
-        <TimerIcon/>
-        <Typography variant="h3">
-          { solution.result }
-        </Typography>
+        <Grid container direction="row" justify="center" alignItems="center">
+          <Grid item>
+            <TimerIcon/>
+          </Grid>
+          <Grid item>
+            <Typography variant="h3">
+              { solution.result }
+            </Typography>
+          </Grid>
+        </Grid>
       </CardContent>
-
     </Card>
   )
 };
-- 
cgit v1.2.3


From dd622def55c52255493c467e2be2f8e3473a1256 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 5 Jan 2020 03:13:24 +0300
Subject: Add DELETE as menu option to SolutionCard

---
 src/components/SolutionCard/SolutionCard.js | 34 ++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

(limited to 'src/components/SolutionCard/SolutionCard.js')

diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
index 5f3e5b4..f2d814c 100644
--- a/src/components/SolutionCard/SolutionCard.js
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   Typography,
@@ -8,12 +8,16 @@ import {
   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 useStyles = makeStyles(theme => ({
   root: {
@@ -26,10 +30,26 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const SolutionCard = ({ solution }) => {
+const SolutionCard = ({ solution, removeThisCard }) => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState(null);
 
   const author = solution.author? solution.author.username : 'anonymous';
+
+  const handleOpenMenu = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleDelete = () => {
+    del(`solutions/${solution.id}/`);
+    handleClose();
+    removeThisCard(solution.id);
+  };
+
   return (
     <Card elevation={5} className={classes.root}>
       <CardHeader
@@ -42,11 +62,19 @@ const SolutionCard = ({ solution }) => {
         title={author}
         subheader="04.01.2020 13:20"
         action={(
-          <IconButton>
+          <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>
-- 
cgit v1.2.3


From 5919ca26792796c99bfac316a9dfca0b9257fe76 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 5 Jan 2020 03:24:01 +0300
Subject: Parse date to SolutionCard

---
 src/components/SolutionCard/SolutionCard.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

(limited to 'src/components/SolutionCard/SolutionCard.js')

diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
index f2d814c..7cca74c 100644
--- a/src/components/SolutionCard/SolutionCard.js
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -19,6 +19,14 @@ 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),
@@ -30,11 +38,12 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const SolutionCard = ({ solution, removeThisCard }) => {
+const SolutionCard = ({ data, removeThisCard }) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState(null);
 
-  const author = solution.author? solution.author.username : 'anonymous';
+  const author = data.author? data.author.username : 'anonymous';
+  const date = new Date(data.date);
 
   const handleOpenMenu = event => {
     setAnchorEl(event.currentTarget);
@@ -45,9 +54,9 @@ const SolutionCard = ({ solution, removeThisCard }) => {
   };
 
   const handleDelete = () => {
-    del(`solutions/${solution.id}/`);
+    del(`solutions/${data.id}/`);
     handleClose();
-    removeThisCard(solution.id);
+    removeThisCard(data.id);
   };
 
   return (
@@ -60,7 +69,7 @@ const SolutionCard = ({ solution, removeThisCard }) => {
             (<Avatar>{author[0].toUpperCase()}</Avatar>)
         }
         title={author}
-        subheader="04.01.2020 13:20"
+        subheader={date.toLocaleString('default', DATE_FORMAT)}
         action={(
           <IconButton onClick={handleOpenMenu}>
             <MoreVertIcon />
@@ -82,7 +91,7 @@ const SolutionCard = ({ solution, removeThisCard }) => {
           </Grid>
           <Grid item>
             <Typography variant="h3">
-              { solution.result }
+              { data.result }
             </Typography>
           </Grid>
         </Grid>
-- 
cgit v1.2.3