From 0264fe7f9cb01f389e7c3345e8211ff778b16550 Mon Sep 17 00:00:00 2001 From: Jonathan Zernik Date: Thu, 30 Jul 2020 01:35:44 -0700 Subject: [PATCH] Add delete squeak dialog (#175) --- .../DeleteSqueakDialog/DeleteSqueakDialog.js | 123 ++++++++++++++++++ .../DeleteSqueakDialog/package.json | 6 + .../components/DeleteSqueakDialog/styles.js | 43 ++++++ .../SqueakDetailItem/SqueakDetailItem.js | 18 +++ .../src/pages/squeak/Squeak.js | 32 ++++- 5 files changed, 221 insertions(+), 1 deletion(-) create mode 100644 frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/DeleteSqueakDialog.js create mode 100644 frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/package.json create mode 100644 frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/styles.js diff --git a/frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/DeleteSqueakDialog.js b/frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/DeleteSqueakDialog.js new file mode 100644 index 00000000..da80983f --- /dev/null +++ b/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 ( + + ) + } + + function DeleteSqueakButton() { + return ( + + ) + } + + return ( + + Make Squeak +
+ + Are you sure you want to delete this squeak? + + + {MakeCancelButton()} + {DeleteSqueakButton()} + +
+ + ) +} diff --git a/frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/package.json b/frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/package.json new file mode 100644 index 00000000..b3efa475 --- /dev/null +++ b/frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/package.json @@ -0,0 +1,6 @@ +{ + "name": "DeleteSqueakDialog", + "version": "0.0.0", + "private": true, + "main": "DeleteSqueakDialog.js" +} diff --git a/frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/styles.js b/frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/styles.js new file mode 100644 index 00000000..f2d64da1 --- /dev/null +++ b/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)", + }, + }, +})); diff --git a/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js b/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js index d838452d..8bdaf33e 100644 --- a/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js +++ b/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 ( + + + + + ) diff --git a/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js b/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js index 137478bf..f0c926b4 100644 --- a/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js +++ b/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 => goToSqueakAddressPage(squeak.getAuthorAddress())} handleReplyClick={handleClickOpen} + handleDeleteClick={showDeleteDialog} squeak={squeak}> {MakeSqueakDialogContent()} + {DeleteSqueakDialogContent()} ) } @@ -142,6 +160,18 @@ export default function SqueakPage() { ) } + function DeleteSqueakDialogContent() { + return ( + <> + + + ) + } + return ( <>