Add download offers button (#2177)

* Got re-download offers button working in buy modal

* Add loader when downloading offers in buy modal

* Update frontend build

frontend/src/api/client.js

@@ -163,6 +163,8 @@ import {
   GetSentPaymentsForPeerReply,
   GetReceivedPaymentsForPeerRequest,
   GetReceivedPaymentsForPeerReply,
+  DownloadSqueakSecretKeyRequest,
+  DownloadSqueakSecretKeyReply,
 } from '../proto/squeak_admin_pb';
 
 import axios from 'axios'
@@ -923,6 +925,18 @@ export const downloadSqueak = (squeakHash) => {
     });
 }
 
+export const downloadSqueakSecretKey = (squeakHash) => {
+    console.log('Calling downloadSqueakSecretKey');
+    const request = new DownloadSqueakSecretKeyRequest();
+    request.setSqueakHash(squeakHash);
+    const deser = DownloadSqueakSecretKeyReply.deserializeBinary;
+    return baseRequest({
+      url: '/downloadsqueaksecretkey',
+      req: request,
+      deser: deser,
+    });
+}
+
 export const getTwitterAccounts = () => {
     console.log('Calling getTwitterAccounts');
     const request = new GetTwitterAccountsRequest();

frontend/src/features/squeaks/BuySqueak.js

@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom'
 import { getProfileImageSrcString } from '../../squeakimages/images';
 import Loader from '../../components/Loader'
 
-import { Form, Input, Checkbox, Relevant, Debug, TextArea, Option } from 'informed';
+import { Form, Input, Checkbox, Relevant, Debug, TextArea, Option, useFormApi } from 'informed';
 
 import Select from 'react-select'
 
@@ -21,6 +21,8 @@ import {
   selectBuySqueakStatus,
   selectSqueakOffers,
   fetchSqueakOffers,
+  selectDownloadSqueakOffersStatus,
+  setDownloadSqueakOffers,
 } from '../squeaks/squeaksSlice'
 import {
   fetchPaymentSummary,
@@ -43,6 +45,7 @@ const BuySqueak = (props) => {
   const signingProfiles = useSelector(selectSigningProfiles);
   const buySqueakStatus = useSelector(selectBuySqueakStatus);
   const squeakOffers = useSelector(selectSqueakOffers);
+  const downloadSqueakOffersStatus = useSelector(selectDownloadSqueakOffersStatus);
   const dispatch = useDispatch();
 
   const [offer, setOffer] = useState(null);
@@ -86,12 +89,45 @@ const BuySqueak = (props) => {
     });
   }
 
+  const submitDownloadOffers = ({ values }) => {
+    console.log(values);
+    console.log('downloadOffers');
+    dispatch(setDownloadSqueakOffers(squeakHash));
+  }
+
+  const SubmitDownloadOffersButton = () => {
+    const formApi = useFormApi();
+
+    return <button
+      type="submit"
+      className={'squeak-btn-side squeak-btn-active'}
+      onClick={formApi.submitForm}>
+      Re-download Offers
+    </button>
+  };
+
+    const DownloadOffersForm = () => (
+      <Form onSubmit={submitDownloadOffers} className="Squeak-input-side">
+          <div className="inner-input-links">
+            <div className="input-links-side">
+            </div>
+            <div className="squeak-btn-holder">
+              {downloadSqueakOffersStatus === 'idle' ?
+              <SubmitDownloadOffersButton /> :
+              <Loader />
+              }
+            </div>
+          </div>
+      </Form>
+    );
+
   return (
     <>
 
 
     <div className="Squeak-input-side">
       <div className="edit-input-wrap">
+        <DownloadOffersForm />
         {squeakOffers.length} offers
         <div className="inner-input-box">
           <Select options={optionsFromOffers(squeakOffers)} onChange={handleChangeOffer} />

frontend/src/features/squeaks/squeaksSlice.js

@@ -20,6 +20,7 @@ import {
   getSqueakOffers,
   buySqueak,
   downloadSqueak,
+  downloadSqueakSecretKey,
 } from '../../api/client'
 
 const initialState = {
@@ -36,10 +37,10 @@ const initialState = {
   profileSqueaksStatus: 'idle',
   profileSqueaks: [],
   makeSqueakStatus: 'idle',
-  squeakOffersStatus: 'idle',
   squeakOffers: [],
   buySqueakStatus: 'idle',
   downloadSqueakStatus: 'idle',
+  downloadSqueakOffersStatus: 'idle',
 }
 
 // Thunk functions
@@ -215,6 +216,16 @@ export const setDownloadSqueak = createAsyncThunk(
   }
 )
 
+export const setDownloadSqueakOffers = createAsyncThunk(
+  'squeaks/setDownloadSqueakOffers',
+  async (squeakHash) => {
+    console.log('Downloading squeak offers');
+    await downloadSqueakSecretKey(squeakHash);
+    const response = await getSqueakOffers(squeakHash);
+    return response.getOffersList();
+  }
+)
+
 const updateCurrentSqueak = (state, newSqueak) => {
   const currentSqueak = state.currentSqueak;
   if (currentSqueak && currentSqueak.getSqueakHash() === newSqueak.getSqueakHash()) {
@@ -409,13 +420,11 @@ const squeaksSlice = createSlice({
     })
     .addCase(fetchSqueakOffers.pending, (state, action) => {
       state.squeakOffers = [];
-      state.squeakOffersStatus = 'loading'
     })
     .addCase(fetchSqueakOffers.fulfilled, (state, action) => {
       console.log(action);
       const squeakOffers = action.payload;
       state.squeakOffers = squeakOffers;
-      state.squeakOffersStatus = 'idle';
     })
     .addCase(setBuySqueak.pending, (state, action) => {
       state.buySqueakStatus = 'loading'
@@ -447,6 +456,18 @@ const squeaksSlice = createSlice({
       // TODO: check if current squeak is the one that got downloaded.
       state.currentSqueak = newSqueak;
     })
+    .addCase(setDownloadSqueakOffers.pending, (state, action) => {
+      state.downloadSqueakOffersStatus = 'loading'
+    })
+    .addCase(setDownloadSqueakOffers.rejected, (state, action) => {
+      state.downloadSqueakOffersStatus = 'idle'
+    })
+    .addCase(setDownloadSqueakOffers.fulfilled, (state, action) => {
+      console.log(action);
+      state.downloadSqueakOffersStatus = 'idle';
+      const squeakOffers = action.payload;
+      state.squeakOffers = squeakOffers;
+    })
   },
 })
 
@@ -504,8 +525,8 @@ export const selectMakeSqueakStatus = state => state.squeaks.makeSqueakStatus
 
 export const selectSqueakOffers = state => state.squeaks.squeakOffers
 
-export const selectSqueakOffersStatus = state => state.squeaks.squeakOffersStatus
-
 export const selectBuySqueakStatus = state => state.squeaks.buySqueakStatus
 
 export const selectDownloadSqueakStatus = state => state.squeaks.downloadSqueakStatus
+
+export const selectDownloadSqueakOffersStatus = state => state.squeaks.downloadSqueakOffersStatus

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

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.206389cd.css",
-    "main.js": "/static/js/main.de2a65b4.js",
+    "main.js": "/static/js/main.dd6380f2.js",
     "static/css/306.7f7715a0.chunk.css": "/static/css/306.7f7715a0.chunk.css",
     "static/js/306.90b2a66c.chunk.js": "/static/js/306.90b2a66c.chunk.js",
     "static/css/900.b66ac5fb.chunk.css": "/static/css/900.b66ac5fb.chunk.css",
@@ -11,7 +11,7 @@
     "static/media/icon.svg": "/static/media/icon.982210ec9275956e4d3cc77fa90167fd.svg",
     "index.html": "/index.html",
     "main.206389cd.css.map": "/static/css/main.206389cd.css.map",
-    "main.de2a65b4.js.map": "/static/js/main.de2a65b4.js.map",
+    "main.dd6380f2.js.map": "/static/js/main.dd6380f2.js.map",
     "306.7f7715a0.chunk.css.map": "/static/css/306.7f7715a0.chunk.css.map",
     "306.90b2a66c.chunk.js.map": "/static/js/306.90b2a66c.chunk.js.map",
     "900.b66ac5fb.chunk.css.map": "/static/css/900.b66ac5fb.chunk.css.map",
@@ -21,6 +21,6 @@
   },
   "entrypoints": [
     "static/css/main.206389cd.css",
-    "static/js/main.de2a65b4.js"
+    "static/js/main.dd6380f2.js"
   ]
 }

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

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#1da1f2"/><meta nam="description" content="Squeaknode!"/><meta name="og:title" content="Squeaknode"/><meta name="og:description" content="check out my the Squeaknode I made"/><link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><script defer="defer" src="/static/js/main.de2a65b4.js"></script><link href="/static/css/main.206389cd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#1da1f2"/><meta nam="description" content="Squeaknode!"/><meta name="og:title" content="Squeaknode"/><meta name="og:description" content="check out my the Squeaknode I made"/><link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><script defer="defer" src="/static/js/main.dd6380f2.js"></script><link href="/static/css/main.206389cd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>