Add delete squeak dialog (#175)

frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/DeleteSqueakDialog.js

@@ -0,0 +1,123 @@
+import React, {useState, useEffect} from 'react';
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Grid,
+  Box,
+  Link,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  TextField,
+  DialogActions,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
+import {useHistory} from "react-router-dom";
+import classnames from "classnames";
+
+// styles
+import useStyles from "./styles";
+
+import Widget from "../../components/Widget";
+import SqueakThreadItem from "../../components/SqueakThreadItem";
+
+import {
+  DeleteSqueakRequest,
+} from "../../proto/squeak_admin_pb"
+import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+
+var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
+
+export default function DeleteSqueakDialog({
+  open,
+  handleClose,
+  squeakToDelete,
+  ...props
+}) {
+  var classes = useStyles();
+  const history = useHistory();
+
+  const deleteSqueak = (squeakHash) => {
+    console.log("called deleteSqueak");
+
+    var deleteSqueakRequest = new DeleteSqueakRequest()
+    deleteSqueakRequest.setSqueakHash(squeakHash);
+    console.log(deleteSqueakRequest);
+
+    client.deleteSqueak(deleteSqueakRequest, {}, (err, response) => {
+      if (err) {
+        console.log(err.message);
+        alert('Error deleting squeak: ' + err.message);
+        return;
+      }
+
+      console.log(response);
+      reloadRoute();
+    });
+  };
+
+  const goToSqueakPage = (squeakHash) => {
+    history.push("/app/squeak/" + squeakHash);
+  };
+
+  const reloadRoute = () => {
+    history.go(0);
+  };
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    console.log( 'squeakToDelete:', squeakToDelete);
+    var squeakHash = squeakToDelete.getSqueakHash();
+    console.log( 'squeakHash:', squeakHash);
+    deleteSqueak(squeakHash);
+    handleClose();
+  }
+
+  function MakeCancelButton() {
+    return (
+      <Button
+        onClick={handleClose}
+        variant="contained"
+        color="secondary"
+      >
+        Cancel
+      </Button>
+    )
+  }
+
+  function DeleteSqueakButton() {
+    return (
+      <Button
+       type="submit"
+       variant="contained"
+       color="primary"
+       className={classes.button}
+       >
+        Delete Squeak
+       </Button>
+    )
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+  <DialogTitle id="form-dialog-title">Make Squeak</DialogTitle>
+  <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
+  <DialogContent>
+    Are you sure you want to delete this squeak?
+  </DialogContent>
+  <DialogActions>
+    {MakeCancelButton()}
+    {DeleteSqueakButton()}
+  </DialogActions>
+  </form>
+    </Dialog>
+  )
+}

frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DeleteSqueakDialog",
+  "version": "0.0.0",
+  "private": true,
+  "main": "DeleteSqueakDialog.js"
+}

frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/styles.js

@@ -0,0 +1,43 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  widgetWrapper: {
+    display: "flex",
+    minHeight: "100%",
+  },
+  widgetHeader: {
+    padding: theme.spacing(3),
+    paddingBottom: theme.spacing(1),
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  widgetRoot: {
+    boxShadow: theme.customShadows.widget,
+  },
+  widgetBody: {
+    paddingBottom: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+    paddingLeft: theme.spacing(3),
+  },
+  noPadding: {
+    padding: 0,
+  },
+  paper: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+  },
+  moreButton: {
+    margin: -theme.spacing(1),
+    padding: 0,
+    width: 40,
+    height: 40,
+    color: theme.palette.text.hint,
+    "&:hover": {
+      backgroundColor: theme.palette.primary.main,
+      color: "rgba(255, 255, 255, 0.35)",
+    },
+  },
+}));

frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js

@@ -17,6 +17,7 @@ import classnames from "classnames";
 import ReplyIcon from '@material-ui/icons/Reply';
 import RepeatIcon from '@material-ui/icons/Repeat';
 import FavoriteIcon from '@material-ui/icons/Favorite';
+import DeleteIcon from '@material-ui/icons/Delete';
 
 // styles
 import useStyles from "./styles";
@@ -28,6 +29,7 @@ export default function SqueakDetailItem({
   handleAddressClick,
   handleSqueakClick,
   handleReplyClick,
+  handleDeleteClick,
   ...props
 }) {
   var classes = useStyles();
@@ -55,6 +57,14 @@ export default function SqueakDetailItem({
     }
   }
 
+  const onDeleteClick = (event) => {
+    event.preventDefault();
+    console.log("Handling delete click...");
+    if (handleDeleteClick) {
+      handleDeleteClick();
+    }
+  }
+
   return (
     <Box
       p={1}
@@ -131,6 +141,14 @@ export default function SqueakDetailItem({
                   <FavoriteIcon />
                 </Box>
             </Grid>
+            <Grid item xs={3} sm={1}>
+                <Box
+                  p={1}
+                  onClick={onDeleteClick}
+                  >
+                  <DeleteIcon />
+                </Box>
+            </Grid>
           </Grid>
     </Box>
   )

frontend/squeak-node-frontend/src/pages/squeak/Squeak.js

@@ -17,6 +17,7 @@ import Widget from "../../components/Widget";
 import SqueakDetailItem from "../../components/SqueakDetailItem";
 import SqueakThreadItem from "../../components/SqueakThreadItem";
 import MakeSqueakDialog from "../../components/MakeSqueakDialog";
+import DeleteSqueakDialog from "../../components/DeleteSqueakDialog";
 
 import {
   GetSqueakDisplayRequest,
@@ -32,7 +33,8 @@ export default function SqueakPage() {
   const { hash } = useParams();
   const [squeak, setSqueak] = useState(null);
   const [ancestorSqueaks, setAncestorSqueaks] = useState(null);
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const getSqueak = (hash) => {
       var getSqueakDisplayRequest = new GetSqueakDisplayRequest()
@@ -75,6 +77,15 @@ export default function SqueakPage() {
      setOpen(false);
   };
 
+  const handleClickOpenDeleteDialog = () => {
+    setDeleteDialogOpen(true);
+    console.log("deleteDialogOpen: " + deleteDialogOpen);
+  };
+
+  const handleCloseDeleteDialog = () => {
+     setDeleteDialogOpen(false);
+  };
+
   const goToSqueakAddressPage = (squeakAddress) => {
     history.push("/app/squeakaddress/" + squeakAddress);
   };
@@ -83,6 +94,10 @@ export default function SqueakPage() {
     history.push("/app/squeak/" + hash);
   };
 
+  const showDeleteDialog = (hash) => {
+    handleClickOpenDeleteDialog()
+  };
+
   useEffect(()=>{
     getSqueak(hash)
   },[hash]);
@@ -106,6 +121,7 @@ export default function SqueakPage() {
             //.reverse()
             .map(ancestorSqueak =>
             <Box
+              key={ancestorSqueak.getSqueakHash()}
               >
             <SqueakThreadItem
               key={ancestorSqueak.getSqueakHash()}
@@ -122,10 +138,12 @@ export default function SqueakPage() {
             key={squeak.getSqueakHash()}
             handleAddressClick={() => goToSqueakAddressPage(squeak.getAuthorAddress())}
             handleReplyClick={handleClickOpen}
+            handleDeleteClick={showDeleteDialog}
             squeak={squeak}>
           </SqueakDetailItem>
         </div>
         {MakeSqueakDialogContent()}
+        {DeleteSqueakDialogContent()}
       </>
     )
   }
@@ -142,6 +160,18 @@ export default function SqueakPage() {
     )
   }
 
+  function DeleteSqueakDialogContent() {
+    return (
+      <>
+        <DeleteSqueakDialog
+          open={deleteDialogOpen}
+          handleClose={handleCloseDeleteDialog}
+          squeakToDelete={squeak}
+          ></DeleteSqueakDialog>
+      </>
+    )
+  }
+
   return (
     <>
       <PageTitle title="Squeak" />