Add delete profile button (#220)

* Delete profile working

* Add delete profile button

frontend/squeak-node-frontend/src/components/DeleteProfileDialog/DeleteProfileDialog.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 {
+  DeleteSqueakProfileRequest,
+} 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 DeleteProfileDialog({
+  open,
+  handleClose,
+  profile,
+  ...props
+}) {
+  var classes = useStyles();
+  const history = useHistory();
+
+  const deleteProfile = (profileId) => {
+    console.log("called deleteSqueak");
+
+    var deleteSqueakProfileRequest = new DeleteSqueakProfileRequest()
+    deleteSqueakProfileRequest.setProfileId(profileId);
+    console.log(deleteSqueakProfileRequest);
+
+    client.deleteSqueakProfile(deleteSqueakProfileRequest, {}, (err, response) => {
+      if (err) {
+        console.log(err.message);
+        alert('Error deleting profile: ' + err.message);
+        return;
+      }
+
+      console.log(response);
+      reloadRoute();
+    });
+  };
+
+  const reloadRoute = () => {
+    history.go(0);
+  };
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    console.log( 'profile:', profile);
+    var profileId = profile.getProfileId();
+    console.log( 'profileId:', profileId);
+    deleteProfile(profileId);
+    handleClose();
+  }
+
+  function MakeCancelButton() {
+    return (
+      <Button
+        onClick={handleClose}
+        variant="contained"
+        color="secondary"
+      >
+        Cancel
+      </Button>
+    )
+  }
+
+  function DeleteProfileButton() {
+    return (
+      <Button
+       type="submit"
+       variant="contained"
+       color="primary"
+       className={classes.button}
+       >
+        Delete Profile
+       </Button>
+    )
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+  <DialogTitle id="form-dialog-title">Delete Profile</DialogTitle>
+  <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
+  <DialogContent>
+    Are you sure you want to delete this profile?
+  </DialogContent>
+  <DialogActions>
+    {MakeCancelButton()}
+    {DeleteProfileButton()}
+  </DialogActions>
+  </form>
+    </Dialog>
+  )
+}

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

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

frontend/squeak-node-frontend/src/components/DeleteProfileDialog/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/profile/Profile.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 DeleteProfileDialog from "../../components/DeleteProfileDialog";
 
 import {
   GetSqueakProfileRequest,
@@ -31,6 +33,8 @@ export default function ProfilePage() {
   var classes = useStyles();
   const { id } = useParams();
   const [squeakProfile, setSqueakProfile] = useState(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
 
   const getSqueakProfile = (id) => {
         console.log("called getSqueakProfile with profileId: " + id);
@@ -38,6 +42,11 @@ export default function ProfilePage() {
         getSqueakProfileRequest.setProfileId(id);
         console.log(getSqueakProfileRequest);
         client.getSqueakProfile(getSqueakProfileRequest, {}, (err, response) => {
+          if (err) {
+            console.log(err.message);
+            return;
+          }
+
           console.log(response);
           setSqueakProfile(response.getSqueakProfile())
         });
@@ -81,6 +90,14 @@ export default function ProfilePage() {
     getSqueakProfile(id)
   },[id]);
 
+  const handleClickOpenDeleteDialog = () => {
+    setDeleteDialogOpen(true);
+  };
+
+  const handleCloseDeleteDialog = () => {
+     setDeleteDialogOpen(false);
+  };
+
   const handleSettingsFollowingChange = (event) => {
     console.log("Following changed for profile id: " + id);
     console.log("Following changed to: " + event.target.checked);
@@ -114,6 +131,7 @@ export default function ProfilePage() {
           Profile name: {squeakProfile.getProfileName()}
         </p>
         {ProfileSettingsForm()}
+        {DeleteProfileButton()}
       </>
     )
   }
@@ -140,6 +158,35 @@ export default function ProfilePage() {
     )
   }
 
+  function DeleteProfileButton() {
+    return (
+      <>
+      <Grid item xs={12}>
+        <div className={classes.root}>
+          <Button
+            variant="contained"
+            onClick={() => {
+              handleClickOpenDeleteDialog();
+            }}>Delete Profile
+          </Button>
+        </div>
+      </Grid>
+      </>
+    )
+  }
+
+  function DeleteProfileDialogContent() {
+    return (
+      <>
+        <DeleteProfileDialog
+          open={deleteDialogOpen}
+          handleClose={handleCloseDeleteDialog}
+          profile={squeakProfile}
+          ></DeleteProfileDialog>
+      </>
+    )
+  }
+
   return (
     <>
       <PageTitle title={'Squeak Profile: ' + (squeakProfile ? squeakProfile.getProfileName() : null)} />
@@ -149,6 +196,7 @@ export default function ProfilePage() {
         : NoProfileContent()
       }
       </div>
+      {DeleteProfileDialogContent()}
     </>
   );
 }