Show squeak details inside dialog (#692)

frontend/src/components/SqueakDetailItem/SqueakDetailItem.js

@@ -31,6 +31,7 @@ import Widget from "../../components/Widget";
 import MakeSqueakDialog from "../../components/MakeSqueakDialog";
 import DeleteSqueakDialog from "../../components/DeleteSqueakDialog";
 import BuySqueakDialog from "../../components/BuySqueakDialog";
+import SqueakDetailsDialog from "../../components/SqueakDetailsDialog";
 
 
 import {
@@ -57,6 +58,7 @@ export default function SqueakDetailItem({
   const [replyDialogOpen, setReplyDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [buyDialogOpen, setBuyDialogOpen] = useState(false);
+  const [viewDetailsDialogOpen, setViewDetailsDialogOpen] = useState(false);
 
   const handleClickOpen = () => {
     setReplyDialogOpen(true);
@@ -83,6 +85,14 @@ export default function SqueakDetailItem({
     setBuyDialogOpen(false);
   };
 
+  const handleClickOpenViewDetailsDialog = () => {
+    setViewDetailsDialogOpen(true);
+  };
+
+  const handleCloseViewDetailsDialog = () => {
+    setViewDetailsDialogOpen(false);
+  };
+
   const goToSqueakAddressPage = () => {
     history.push("/app/squeakaddress/" + squeak.getAuthorAddress());
   };
@@ -139,7 +149,8 @@ export default function SqueakDetailItem({
       return;
     }
     //handleClickOpenDeleteDialog();
-    goToSqueakDetailPage();
+    // goToSqueakDetailPage();
+    handleClickOpenViewDetailsDialog();
   }
 
   const onUnlockClick = (event) => {
@@ -307,6 +318,19 @@ export default function SqueakDetailItem({
     )
   }
 
+  function ViewDetailsDialogContent() {
+    return (
+      <>
+        <SqueakDetailsDialog
+          open={viewDetailsDialogOpen}
+          handleClose={handleCloseViewDetailsDialog}
+          hash={hash}
+          squeak={squeak}
+          ></SqueakDetailsDialog>
+      </>
+    )
+  }
+
   return (
     <>
     <Box
@@ -399,6 +423,7 @@ export default function SqueakDetailItem({
     {MakeSqueakDialogContent()}
     {DeleteSqueakDialogContent()}
     {BuyDialogContent()}
+    {ViewDetailsDialogContent()}
     </>
   )
 }

frontend/src/components/SqueakDetailsDialog/SqueakDetailsDialog.js

@@ -0,0 +1,133 @@
+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 {
+  getSqueakDetailsRequest,
+} from "../../squeakclient/requests"
+
+
+export default function SqueakDetailsDialog({
+  open,
+  handleClose,
+  hash,
+  squeak,
+  ...props
+}) {
+  var classes = useStyles();
+  const history = useHistory();
+
+  const [squeakDetails, setSqueakDetails] = useState(null);
+
+  const getSqueakDetails = (hash) => {
+      getSqueakDetailsRequest(hash, setSqueakDetails);
+  };
+
+  useEffect(()=>{
+    getSqueakDetails(hash)
+  },[hash]);
+
+  function MakeCancelButton() {
+    return (
+      <Button
+        onClick={handleClose}
+        variant="contained"
+        color="secondary"
+      >
+        Cancel
+      </Button>
+    )
+  }
+
+  function SqueakDetailsContent() {
+    return (
+      <>
+        <Widget disableWidgetMenu>
+          <Grid container spacing={2}>
+            <Grid item xs={6}>
+              <div>
+                <div key="hash" className={classes.legendItemContainer}>
+
+                  <Typography color="text" colorBrightness="secondary">
+                    Hash
+                  </Typography>
+                  <Typography color="text">
+                      &nbsp;{squeak.getSqueakHash()}
+                  </Typography>
+                </div>
+
+                <div key="address" className={classes.legendItemContainer}>
+
+                  <Typography color="text" colorBrightness="secondary">
+                    Address
+                  </Typography>
+                  <Typography color="text">
+                      &nbsp;{squeak.getAuthorAddress()}
+                  </Typography>
+                </div>
+
+                <div key="rawdata" className={classes.legendItemContainer}>
+                  <Typography color="text" colorBrightness="secondary">
+                    Raw Data
+                  </Typography>
+                  <TextField
+                    id="standard-textarea"
+                    placeholder="Placeholder"
+                    value={squeakDetails.getSqueakDetailEntry().getSerializedSqueakHex()}
+                    fullWidth="true"
+                    variant="outlined"
+                    multiline
+                  />
+                </div>
+
+              </div>
+            </Grid>
+          </Grid>
+        </Widget>
+      </>
+    )
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+  <DialogTitle id="form-dialog-title">View Squeak Details</DialogTitle>
+  <form className={classes.root} noValidate autoComplete="off">
+  <DialogContent>
+    {squeak && squeakDetails &&
+      SqueakDetailsContent()
+    }
+  </DialogContent>
+  <DialogActions>
+    {MakeCancelButton()}
+  </DialogActions>
+  </form>
+    </Dialog>
+  )
+}

frontend/src/components/SqueakDetailsDialog/package.json

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

frontend/src/components/SqueakDetailsDialog/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)",
+    },
+  },
+}));