From 321a754f24cac7dc454d3778bd2b5c6cb3c76711 Mon Sep 17 00:00:00 2001 From: Jonathan Zernik Date: Tue, 4 Aug 2020 18:36:09 -0700 Subject: [PATCH] Add delete profile button (#220) * Delete profile working * Add delete profile button --- .../DeleteProfileDialog.js | 118 ++++++++++++++++++ .../DeleteProfileDialog/package.json | 6 + .../components/DeleteProfileDialog/styles.js | 43 +++++++ .../src/pages/profile/Profile.js | 48 +++++++ 4 files changed, 215 insertions(+) create mode 100644 frontend/squeak-node-frontend/src/components/DeleteProfileDialog/DeleteProfileDialog.js create mode 100644 frontend/squeak-node-frontend/src/components/DeleteProfileDialog/package.json create mode 100644 frontend/squeak-node-frontend/src/components/DeleteProfileDialog/styles.js diff --git a/frontend/squeak-node-frontend/src/components/DeleteProfileDialog/DeleteProfileDialog.js b/frontend/squeak-node-frontend/src/components/DeleteProfileDialog/DeleteProfileDialog.js new file mode 100644 index 00000000..b5ccce13 --- /dev/null +++ b/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 ( + + ) + } + + function DeleteProfileButton() { + return ( + + ) + } + + return ( + + Delete Profile +
+ + Are you sure you want to delete this profile? + + + {MakeCancelButton()} + {DeleteProfileButton()} + +
+ + ) +} diff --git a/frontend/squeak-node-frontend/src/components/DeleteProfileDialog/package.json b/frontend/squeak-node-frontend/src/components/DeleteProfileDialog/package.json new file mode 100644 index 00000000..79677554 --- /dev/null +++ b/frontend/squeak-node-frontend/src/components/DeleteProfileDialog/package.json @@ -0,0 +1,6 @@ +{ + "name": "DeleteProfileDialog", + "version": "0.0.0", + "private": true, + "main": "DeleteProfileDialog.js" +} diff --git a/frontend/squeak-node-frontend/src/components/DeleteProfileDialog/styles.js b/frontend/squeak-node-frontend/src/components/DeleteProfileDialog/styles.js new file mode 100644 index 00000000..f2d64da1 --- /dev/null +++ b/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)", + }, + }, +})); diff --git a/frontend/squeak-node-frontend/src/pages/profile/Profile.js b/frontend/squeak-node-frontend/src/pages/profile/Profile.js index 1e6b7853..f0d84fe3 100644 --- a/frontend/squeak-node-frontend/src/pages/profile/Profile.js +++ b/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()}

{ProfileSettingsForm()} + {DeleteProfileButton()} ) } @@ -140,6 +158,35 @@ export default function ProfilePage() { ) } + function DeleteProfileButton() { + return ( + <> + +
+ +
+ + + ) + } + + function DeleteProfileDialogContent() { + return ( + <> + + + ) + } + return ( <> @@ -149,6 +196,7 @@ export default function ProfilePage() { : NoProfileContent() } + {DeleteProfileDialogContent()} ); }