Fix wrong offers show in dialog (#1115)

* Fix loading buy offers from stream

* Loading offers seems to be working now

* Update frontend build

frontend/src/components/BuyOfferDetailItem/BuyOfferDetailItem.js

@@ -59,6 +59,9 @@ export default function BuyOfferDetailItem({
       <Typography
         size="md"
       >
+        Squeak hash:
+        {' '}
+        {offer.getSqueakHash()}
         Price:
         {' '}
         {offer.getPriceMsat() / 1000}

frontend/src/components/BuySqueakDialog/BuySqueakDialog.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   MenuItem,
   Typography,
@@ -65,9 +65,10 @@ export default function BuySqueakDialog({
     getBuyOffersRequest(hash, setOffers);
   };
   const subscribeOffers = () => {
-    subscribeBuyOffersRequest(hash, (offer) => {
-      const newOffers = offers.concat([offer]);
-      setOffers(newOffers);
+    return subscribeBuyOffersRequest(hash, (offer) => {
+      setOffers((prevOffers) => {
+        return prevOffers.concat([offer]);
+      });
     });
   };
   const downloadOffers = () => {
@@ -112,10 +113,13 @@ export default function BuySqueakDialog({
     return `${peerAddress.getHost()}:${peerAddress.getPort()}`;
   };
 
-  // TODO: load offers using "onRendered" callback.
-  // useEffect(() => {
-  //   loadOffers()
-  // }, []);
+  useEffect(() => {
+    loadOffers();
+  }, []);
+  useEffect(() => {
+    const stream = subscribeOffers();
+    return () => stream.cancel();
+  }, [hash]);
 
   function handleSubmit(event) {
     event.preventDefault();
@@ -129,8 +133,8 @@ export default function BuySqueakDialog({
   }
 
   function load(event) {
-    loadOffers();
-    subscribeOffers();
+    //loadOffers();
+    //subscribeOffers();
     downloadOffers();
   }
 
@@ -187,10 +191,8 @@ export default function BuySqueakDialog({
     return (
       <Box
         p={1}
-        key={selectedOffer.getOfferId()}
       >
         <BuyOfferDetailItem
-          key={selectedOffer.getOfferId()}
           offer={selectedOffer}
         />
       </Box>
@@ -224,7 +226,7 @@ export default function BuySqueakDialog({
 
   return (
     <Dialog open={open} onRendered={load} onEnter={resetFields} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
-      <DialogTitle id="form-dialog-title">Buy Squeak</DialogTitle>
+      <DialogTitle id="form-dialog-title">Buy Squeak for hash {hash}</DialogTitle>
       <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
         <DialogContent>
           <Box>

frontend/src/components/SqueakDetailItem/SqueakDetailItem.js

@@ -220,6 +220,7 @@ export default function SqueakDetailItem({
     return (
       <>
         <BuySqueakDialog
+          key={hash}
           open={buyDialogOpen}
           handleClose={handleCloseBuyDialog}
           handlePaymentComplete={handlePaymentComplete}

frontend/src/squeakclient/requests.js

@@ -638,6 +638,7 @@ export function subscribeBuyOffersRequest(hash, handleResponse) {
     console.log(end);
     alert(`Stream ended: ${end}`);
   });
+  return stream;
 }
 
 export function subscribeSqueakDisplayRequest(hash, handleResponse) {

itests/test.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-#pytest -s tests
+pytest -s tests
 #pytest -s tests -k "test_buy_squeak"
 #pytest -s tests -k "test_sell_squeak"
 #pytest -s tests -k "test_download_single_squeak"
@@ -10,4 +10,4 @@
 #pytest -s tests -k "test_share_single_squeak"
 #pytest -s tests -k "test_delete_squeak"
 #pytest -s tests -k "test_subscribe_squeaks"
-pytest -s tests -k "test_download_squeaks_for_address"
+#pytest -s tests -k "test_download_squeaks_for_address"

squeaknode/admin/webapp/static/build/asset-manifest.json

@@ -1,14 +1,14 @@
 {
   "files": {
-    "main.js": "/static/js/main.698dfea5.chunk.js",
-    "main.js.map": "/static/js/main.698dfea5.chunk.js.map",
+    "main.js": "/static/js/main.7a5a1e9d.chunk.js",
+    "main.js.map": "/static/js/main.7a5a1e9d.chunk.js.map",
     "runtime-main.js": "/static/js/runtime-main.9f0ba400.js",
     "runtime-main.js.map": "/static/js/runtime-main.9f0ba400.js.map",
     "static/css/2.ea4ba2f0.chunk.css": "/static/css/2.ea4ba2f0.chunk.css",
     "static/js/2.9773e69b.chunk.js": "/static/js/2.9773e69b.chunk.js",
     "static/js/2.9773e69b.chunk.js.map": "/static/js/2.9773e69b.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.5576855b7ac92f096220ad34d2ca9cd2.js": "/precache-manifest.5576855b7ac92f096220ad34d2ca9cd2.js",
+    "precache-manifest.64861491e22f3dc094822bd9a09ecbe0.js": "/precache-manifest.64861491e22f3dc094822bd9a09ecbe0.js",
     "service-worker.js": "/service-worker.js",
     "static/css/2.ea4ba2f0.chunk.css.map": "/static/css/2.ea4ba2f0.chunk.css.map",
     "static/js/2.9773e69b.chunk.js.LICENSE.txt": "/static/js/2.9773e69b.chunk.js.LICENSE.txt",
@@ -20,6 +20,6 @@
     "static/js/runtime-main.9f0ba400.js",
     "static/css/2.ea4ba2f0.chunk.css",
     "static/js/2.9773e69b.chunk.js",
-    "static/js/main.698dfea5.chunk.js"
+    "static/js/main.7a5a1e9d.chunk.js"
   ]
 }

squeaknode/admin/webapp/static/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeak Node</title><meta name="description" content="Squeak Node is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.ea4ba2f0.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.9773e69b.chunk.js"></script><script src="/static/js/main.698dfea5.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeak Node</title><meta name="description" content="Squeak Node is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.ea4ba2f0.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.9773e69b.chunk.js"></script><script src="/static/js/main.7a5a1e9d.chunk.js"></script></body></html>

squeaknode/admin/webapp/static/build/precache-manifest.64861491e22f3dc094822bd9a09ecbe0.js

@@ -1,6 +1,6 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "c8e083bdbf1737325048554458dce96d",
+    "revision": "46fb5dbc7ee74e3dbaa877f13de0cc97",
     "url": "/index.html"
   },
   {
@@ -16,8 +16,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/static/js/2.9773e69b.chunk.js.LICENSE.txt"
   },
   {
-    "revision": "2e9381928cf77facf7fc",
-    "url": "/static/js/main.698dfea5.chunk.js"
+    "revision": "e72da439f753d658c74d",
+    "url": "/static/js/main.7a5a1e9d.chunk.js"
   },
   {
     "revision": "cc9816de5a8639d377ea",

squeaknode/admin/webapp/static/build/service-worker.js

@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.5576855b7ac92f096220ad34d2ca9cd2.js"
+  "/precache-manifest.64861491e22f3dc094822bd9a09ecbe0.js"
 );
 
 self.addEventListener('message', (event) => {