Add delete peer dialog (#221)

* Add delete peer dialog

* Got delete peer button working

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

@@ -0,0 +1,118 @@
+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 {
+  DeletePeerRequest,
+} 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 DeletePeerDialog({
+  open,
+  handleClose,
+  peer,
+  ...props
+}) {
+  var classes = useStyles();
+  const history = useHistory();
+
+  const deletePeer = (peerId) => {
+    console.log("called deleteSqueak");
+
+    var deletePeerRequest = new DeletePeerRequest()
+    deletePeerRequest.setPeerId(peerId);
+    console.log(deletePeerRequest);
+
+    client.deletePeer(deletePeerRequest, {}, (err, response) => {
+      if (err) {
+        console.log(err.message);
+        alert('Error deleting peer: ' + err.message);
+        return;
+      }
+
+      console.log(response);
+      reloadRoute();
+    });
+  };
+
+  const reloadRoute = () => {
+    history.go(0);
+  };
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    console.log( 'peer:', peer);
+    var peerId = peer.getPeerId();
+    console.log( 'peerId:', peerId);
+    deletePeer(peerId);
+    handleClose();
+  }
+
+  function MakeCancelButton() {
+    return (
+      <Button
+        onClick={handleClose}
+        variant="contained"
+        color="secondary"
+      >
+        Cancel
+      </Button>
+    )
+  }
+
+  function DeletePeerButton() {
+    return (
+      <Button
+       type="submit"
+       variant="contained"
+       color="primary"
+       className={classes.button}
+       >
+        Delete peer
+       </Button>
+    )
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+  <DialogTitle id="form-dialog-title">Delete peer</DialogTitle>
+  <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
+  <DialogContent>
+    Are you sure you want to delete this peer?
+  </DialogContent>
+  <DialogActions>
+    {MakeCancelButton()}
+    {DeletePeerButton()}
+  </DialogActions>
+  </form>
+    </Dialog>
+  )
+}

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

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

frontend/squeak-node-frontend/src/components/DeletePeerDialog/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/pages/peer/Peer.js

@@ -8,6 +8,7 @@ import {
   FormControlLabel,
   FormHelperText,
   Switch,
+  Button,
 } from "@material-ui/core";
 
 // styles
@@ -16,6 +17,7 @@ import useStyles from "./styles";
 // components
 import PageTitle from "../../components/PageTitle";
 import Widget from "../../components/Widget";
+import DeletePeerDialog from "../../components/DeletePeerDialog";
 
 import {
   GetPeerRequest,
@@ -30,6 +32,7 @@ export default function PeerPage() {
   var classes = useStyles();
   const { id } = useParams();
   const [peer, setPeer] = useState(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const getPeer = (id) => {
         console.log("called getPeer with peerId: " + id);
@@ -37,6 +40,10 @@ export default function PeerPage() {
         getPeerRequest.setPeerId(id);
         console.log(getPeerRequest);
         client.getPeer(getPeerRequest, {}, (err, response) => {
+          if (err) {
+            console.log(err.message);
+            return;
+          }
           console.log(response);
           setPeer(response.getSqueakPeer())
         });
@@ -68,6 +75,15 @@ export default function PeerPage() {
     getPeer(id)
   },[id]);
 
+  const handleClickOpenDeleteDialog = () => {
+    setDeleteDialogOpen(true);
+    console.log("deleteDialogOpen: " + deleteDialogOpen);
+  };
+
+  const handleCloseDeleteDialog = () => {
+     setDeleteDialogOpen(false);
+  };
+
   const handleSettingsDownloadingChange = (event) => {
     console.log("Downloading changed for peer id: " + id);
     console.log("Downloading changed to: " + event.target.checked);
@@ -95,6 +111,7 @@ export default function PeerPage() {
           Peer name: {peer.getPeerName()}
         </p>
         {PeerSettingsForm()}
+        {DeletePeerButton()}
       </>
     )
   }
@@ -117,6 +134,35 @@ export default function PeerPage() {
     )
   }
 
+  function DeletePeerButton() {
+    return (
+      <>
+      <Grid item xs={12}>
+        <div className={classes.root}>
+          <Button
+            variant="contained"
+            onClick={() => {
+              handleClickOpenDeleteDialog();
+            }}>Delete Peer
+          </Button>
+        </div>
+      </Grid>
+      </>
+    )
+  }
+
+  function DeletePeerDialogContent() {
+    return (
+      <>
+        <DeletePeerDialog
+          open={deleteDialogOpen}
+          handleClose={handleCloseDeleteDialog}
+          peer={peer}
+          ></DeletePeerDialog>
+      </>
+    )
+  }
+
   return (
     <>
       <PageTitle title={'Peer: ' + (peer ? peer.getPeerName() : null)} />
@@ -126,6 +172,7 @@ export default function PeerPage() {
         : NoPeerContent()
       }
       </div>
+      {DeletePeerDialogContent()}
     </>
   );
 }