Handle reply and delete in squeak detail component (#363)

* Rename replyDialogOpen state variable

* Move reply dialog inside squeak detail component

* Move delete dialog inside squeak detail component

frontend/src/components/MakeSqueakDialog/MakeSqueakDialog.js

@@ -110,6 +110,7 @@ export default function MakeSqueakDialog({
     return (
       <>
         <SqueakThreadItem
+          hash={replytoSqueak.getSqueakHash()}
           squeak={replytoSqueak}>
         </SqueakThreadItem>
       </>

frontend/src/components/SqueakDetailItem/SqueakDetailItem.js

@@ -27,6 +27,8 @@ import DownloadIcon from '@material-ui/icons/CloudDownload';
 import useStyles from "./styles";
 
 import Widget from "../../components/Widget";
+import MakeSqueakDialog from "../../components/MakeSqueakDialog";
+import DeleteSqueakDialog from "../../components/DeleteSqueakDialog";
 
 import moment from 'moment';
 
@@ -39,11 +41,26 @@ export default function SqueakDetailItem({
 }) {
   var classes = useStyles();
 
-  // local
-  // var [moreButtonRef, setMoreButtonRef] = useState(null);
-  // var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
-
   const history = useHistory();
+  const [replyDialogOpen, setReplyDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  const handleClickOpen = () => {
+    setReplyDialogOpen(true);
+  };
+
+  const handleClose = () => {
+     setReplyDialogOpen(false);
+  };
+
+  const handleClickOpenDeleteDialog = () => {
+    setDeleteDialogOpen(true);
+    console.log("deleteDialogOpen: " + deleteDialogOpen);
+  };
+
+  const handleCloseDeleteDialog = () => {
+     setDeleteDialogOpen(false);
+  };
 
   const goToSqueakAddressPage = () => {
     history.push("/app/squeakaddress/" + squeak.getAuthorAddress());
@@ -70,17 +87,19 @@ export default function SqueakDetailItem({
   const onReplyClick = (event) => {
     event.preventDefault();
     console.log("Handling reply click...");
-    if (handleReplyClick) {
-      handleReplyClick();
+    if (!squeak) {
+      return;
     }
+    handleClickOpen();
   }
 
   const onDeleteClick = (event) => {
     event.preventDefault();
     console.log("Handling delete click...");
-    if (handleDeleteClick) {
-      handleDeleteClick();
+    if (!squeak) {
+      return;
     }
+    handleClickOpenDeleteDialog();
   }
 
   const onUnlockClick = (event) => {
@@ -194,7 +213,32 @@ export default function SqueakDetailItem({
     )
   }
 
+  function MakeSqueakDialogContent() {
+    return (
+      <>
+        <MakeSqueakDialog
+          open={replyDialogOpen}
+          handleClose={handleClose}
+          replytoSqueak={squeak}
+          ></MakeSqueakDialog>
+      </>
+    )
+  }
+
+  function DeleteSqueakDialogContent() {
+    return (
+      <>
+        <DeleteSqueakDialog
+          open={deleteDialogOpen}
+          handleClose={handleCloseDeleteDialog}
+          squeakToDelete={squeak}
+          ></DeleteSqueakDialog>
+      </>
+    )
+  }
+
   return (
+    <>
     <Box
       p={1}
       m={0}
@@ -274,5 +318,8 @@ export default function SqueakDetailItem({
             </Grid>
           </Grid>
     </Box>
+    {MakeSqueakDialogContent()}
+    {DeleteSqueakDialogContent()}
+    </>
   )
 }

frontend/src/pages/squeak/Squeak.js

@@ -16,8 +16,6 @@ import PageTitle from "../../components/PageTitle";
 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,
@@ -31,8 +29,6 @@ export default function SqueakPage() {
   const { hash } = useParams();
   const [squeak, setSqueak] = useState(null);
   const [ancestorSqueaks, setAncestorSqueaks] = useState([]);
-  const [open, setOpen] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const getSqueak = (hash) => {
       getSqueakDisplayRequest(hash, setSqueak);
@@ -41,27 +37,6 @@ export default function SqueakPage() {
       getAncestorSqueakDisplaysRequest(hash, setAncestorSqueaks);
   };
 
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-     setOpen(false);
-  };
-
-  const handleClickOpenDeleteDialog = () => {
-    setDeleteDialogOpen(true);
-    console.log("deleteDialogOpen: " + deleteDialogOpen);
-  };
-
-  const handleCloseDeleteDialog = () => {
-     setDeleteDialogOpen(false);
-  };
-
-  const showDeleteDialog = (hash) => {
-    handleClickOpenDeleteDialog()
-  };
-
   const unknownAncestorHash = () => {
       if (!ancestorSqueaks) {
         return null;
@@ -142,37 +117,9 @@ export default function SqueakPage() {
         <div>
           <SqueakDetailItem
             key={hash}
-            handleReplyClick={handleClickOpen}
-            handleDeleteClick={showDeleteDialog}
             squeak={squeak}>
           </SqueakDetailItem>
         </div>
-        {MakeSqueakDialogContent()}
-        {DeleteSqueakDialogContent()}
-      </>
-    )
-  }
-
-  function MakeSqueakDialogContent() {
-    return (
-      <>
-        <MakeSqueakDialog
-          open={open}
-          handleClose={handleClose}
-          replytoSqueak={squeak}
-          ></MakeSqueakDialog>
-      </>
-    )
-  }
-
-  function DeleteSqueakDialogContent() {
-    return (
-      <>
-        <DeleteSqueakDialog
-          open={deleteDialogOpen}
-          handleClose={handleCloseDeleteDialog}
-          squeakToDelete={squeak}
-          ></DeleteSqueakDialog>
       </>
     )
   }