Add DELETE as menu option to SolutionCard

3 files changed, 44 insertions, 5 deletions

diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 48d3c8a..039b951 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -27,6 +27,10 @@ const Scoreboard = () => {
     await setSolutions(response.data);
   };
 
+  const removeSolution = (id) => {
+    setSolutions(solutions.filter((solution => solution.id !== id)));
+  };
+
   useEffect(() => {
     updateSolutions();
   }, []);
@@ -39,7 +43,7 @@ const Scoreboard = () => {
       <Grid container justify="center" direction="column" spacing={3}>
         {solutions.map(solution => (
           <Grid item>
-            <SolutionCard solution={solution}/>
+            <SolutionCard solution={solution} removeThisCard={removeSolution}/>
           </Grid>
         ))}
       </Grid>
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>
diff --git a/src/requests.js b/src/requests.js
index 91eaf65..caa19e8 100644
--- a/src/requests.js
+++ b/src/requests.js
@@ -9,9 +9,16 @@ export const get = (url) => {
   );
 };
 
-export const post =  (url, data) => {
+export const post = (url, data) => {
   return axios.post(
     baseApiUrl + url,
     data
   );
 };
+
+export const del = (url, data) => {
+  return axios.delete(
+    baseApiUrl + url,
+    data
+  )
+};