Use dialog for buy offer (#690)

* Use dialog for buy offer

* Remove expire timestamp epoch time from display

frontend/src/components/BuyOfferDetailItem/BuyOfferDetailItem.js

@@ -95,7 +95,7 @@ export default function BuyOfferDetailItem({
         <Typography
           size="md"
           >
-            Expires: {moment(expireTime*1000).fromNow()} ({expireTime})
+            Expires: {moment(expireTime*1000).fromNow()}
           </Typography>
       </Box>
     )
@@ -114,9 +114,7 @@ export default function BuyOfferDetailItem({
         </Typography>
         <Typography
           size="md"
-          >Node Pubkey:
-          <Link href="#" onClick={() => {
-            console.info("I'm a button.");
+          >Node Pubkey: <Link href="#" onClick={() => {
             goToLightningNodePage(
               offer.getNodePubkey(),
               offer.getNodeHost(),
@@ -126,11 +124,6 @@ export default function BuyOfferDetailItem({
             {offer.getNodePubkey()}
           </Link>
         </Typography>
-
-        <Typography size="md">
-        {PayOfferButton()}
-        </Typography>
-
       </Box>
     )
   }

frontend/src/components/BuySqueakDialog/BuySqueakDialog.js

@@ -0,0 +1,205 @@
+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 BuyOfferItem from "../../components/BuyOfferItem";
+import BuyOfferDetailItem from "../../components/BuyOfferDetailItem";
+
+import {
+  makeSqueakRequest,
+  getSigningProfilesRequest,
+} from "../../squeakclient/requests"
+import {
+  getBuyOffersRequest,
+  syncSqueakRequest,
+} from "../../squeakclient/requests"
+import {
+  payOfferRequest,
+} from "../../squeakclient/requests"
+
+
+export default function BuySqueakDialog({
+  open,
+  handleClose,
+  hash,
+  ...props
+}) {
+  var classes = useStyles();
+  const history = useHistory();
+
+  var [selectedOfferId, setSelectedOfferId] = useState(-1);
+  const [offers, setOffers] = useState([]);
+
+  const resetFields = () => {
+    setSelectedOfferId(-1);
+  };
+
+  const handleChange = (event) => {
+    setSelectedOfferId(event.target.value);
+  };
+
+  const handleResponse = (response) => {
+    // Open pay confirmation dialog
+  };
+
+  const handleErr = (err) => {
+    alert('Error paying offer: ' + err);
+  };
+
+  // const payOffer = (offerID) => {
+  //   alert('Pay offer ID here: ' + offerID);
+  //   pay(offer.getOfferId());
+  // };
+
+  const loadOffers = () => {
+    getBuyOffersRequest(hash, setOffers);
+  };
+
+  const handlePayResponse = (response) => {
+    // goToSqueakPage(offer.getSqueakHash());
+    reloadRoute();
+  };
+
+  const handlePayErr = (err) => {
+    alert('Payment failure: ' + err);
+  };
+
+  const pay = (offerId) => {
+    payOfferRequest(offerId, handlePayResponse, handlePayErr);
+  };
+
+  const reloadRoute = () => {
+    history.go(0);
+  };
+
+  const getSelectedOffer = () => {
+    var offer;
+    for (offer of offers) {
+      if (offer.getOfferId() == selectedOfferId) {
+        return offer;
+      }
+    }
+    return null;
+  };
+
+  useEffect(() => {
+    loadOffers()
+  }, []);
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    console.log( 'selectedOfferId:', selectedOfferId);
+    if (selectedOfferId == -1) {
+      alert('Selected Offer Id must be selected.');
+      return;
+    }
+    pay(selectedOfferId);
+    handleClose();
+  }
+
+  function MakeSelectSigningProfile() {
+    return (
+      <FormControl className={classes.formControl} required style={{minWidth: 120}}>
+        <InputLabel id="offer-select-label">Offer</InputLabel>
+        <Select
+          labelId="offer-select-label"
+          id="offer-select"
+          value={selectedOfferId}
+          onChange={handleChange}
+        >
+          {offers.map(offer =>
+            <MenuItem key={offer.getOfferId()} value={offer.getOfferId()}>
+              {offer.getPeer().getPeerName()} ({offer.getPriceMsat()} msats)
+            </MenuItem>
+          )}
+        </Select>
+      </FormControl>
+    )
+  }
+
+  function MakeSqueakContentInput() {
+    var selectedOffer = getSelectedOffer();
+    if (selectedOffer == null) {
+      return <></>
+    }
+    return (
+      <Box
+        p={1}
+        key={selectedOffer.getOfferId()}
+        >
+      <BuyOfferDetailItem
+        key={selectedOffer.getOfferId()}
+        offer={selectedOffer}>
+      </BuyOfferDetailItem>
+      </Box>
+    )
+  }
+
+  function MakeCancelButton() {
+    return (
+      <Button
+        onClick={handleClose}
+        variant="contained"
+        color="secondary"
+      >
+        Cancel
+      </Button>
+    )
+  }
+
+  function MakeSqueakButton() {
+    return (
+      <Button
+       type="submit"
+       variant="contained"
+       color="primary"
+       className={classes.button}
+       >
+       Buy Squeak
+       </Button>
+    )
+  }
+
+  return (
+    <Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
+  <DialogTitle id="form-dialog-title">Buy Squeak</DialogTitle>
+  <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
+  <DialogContent>
+    {MakeSelectSigningProfile()}
+    {MakeSqueakContentInput()}
+  </DialogContent>
+  <DialogActions>
+    {MakeCancelButton()}
+    {MakeSqueakButton()}
+  </DialogActions>
+  </form>
+    </Dialog>
+  )
+}

frontend/src/components/BuySqueakDialog/package.json

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

frontend/src/components/BuySqueakDialog/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/src/components/SqueakDetailItem/SqueakDetailItem.js

@@ -30,6 +30,8 @@ import useStyles from "./styles";
 import Widget from "../../components/Widget";
 import MakeSqueakDialog from "../../components/MakeSqueakDialog";
 import DeleteSqueakDialog from "../../components/DeleteSqueakDialog";
+import BuySqueakDialog from "../../components/BuySqueakDialog";
+
 
 import {
   syncSqueakRequest,
@@ -54,6 +56,7 @@ export default function SqueakDetailItem({
   const history = useHistory();
   const [replyDialogOpen, setReplyDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [buyDialogOpen, setBuyDialogOpen] = useState(false);
 
   const handleClickOpen = () => {
     setReplyDialogOpen(true);
@@ -72,6 +75,14 @@ export default function SqueakDetailItem({
      setDeleteDialogOpen(false);
   };
 
+  const handleClickOpenBuyDialog = () => {
+    setBuyDialogOpen(true);
+  };
+
+  const handleCloseBuyDialog = () => {
+    setBuyDialogOpen(false);
+  };
+
   const goToSqueakAddressPage = () => {
     history.push("/app/squeakaddress/" + squeak.getAuthorAddress());
   };
@@ -137,7 +148,8 @@ export default function SqueakDetailItem({
     if (!squeak) {
       return;
     }
-    goToBuyPage(squeak.getSqueakHash());
+    // goToBuyPage(squeak.getSqueakHash());
+    handleClickOpenBuyDialog();
   }
 
   const onDownloadClick = (event) => {
@@ -283,6 +295,18 @@ export default function SqueakDetailItem({
     )
   }
 
+  function BuyDialogContent() {
+    return (
+      <>
+        <BuySqueakDialog
+          open={buyDialogOpen}
+          handleClose={handleCloseBuyDialog}
+          hash={hash}
+          ></BuySqueakDialog>
+      </>
+    )
+  }
+
   return (
     <>
     <Box
@@ -374,6 +398,7 @@ export default function SqueakDetailItem({
     </Box>
     {MakeSqueakDialogContent()}
     {DeleteSqueakDialogContent()}
+    {BuyDialogContent()}
     </>
   )
 }