diff --git a/frontend/src/components/Nav/index.js b/frontend/src/components/Nav/index.js index 2f6e22c3..8bb64298 100644 --- a/frontend/src/components/Nav/index.js +++ b/frontend/src/components/Nav/index.js @@ -10,6 +10,8 @@ import axios from 'axios' import {API_URL} from '../../config' import MakeSqueak from '../../features/squeaks/MakeSqueak' import ContentEditable from 'react-contenteditable' +import Loader from '../Loader' + import { enable as enableDarkMode, disable as disableDarkMode, @@ -32,6 +34,12 @@ import { import { setLogout, } from '../../features/account/accountSlice' +import { + selectMakeSqueakStatus, + selectBuySqueakStatus, + selectDownloadSqueakStatus, + selectDownloadPubkeySqueakStatus, +} from '../../features/squeaks/squeaksSlice' const Nav = ({history}) => { const [moreMenu, setMoreMenu] = useState(false) @@ -259,7 +267,53 @@ const Nav = ({history}) => { + {/* Block screen with modal when make squeak is waiting. */} +
+
+
+

Making squeak...

+
+
+ +
+
+
+ {/* Block screen with modal when buy squeak is waiting. */} +
+
+
+

Buying squeak...

+
+
+ +
+
+
+ + {/* Block screen with modal when download squeak is waiting. */} +
+
+
+

Downloading squeak...

+
+
+ +
+
+
+ + {/* Block screen with modal when download pubkey squeaks is waiting. */} +
+
+
+

Downloading pubkey squeaks...

+
+
+ +
+
+
) diff --git a/frontend/src/features/squeaks/Squeak.js b/frontend/src/features/squeaks/Squeak.js index 8747278b..65ab9064 100644 --- a/frontend/src/features/squeaks/Squeak.js +++ b/frontend/src/features/squeaks/Squeak.js @@ -14,6 +14,7 @@ import SqueakCard from '../../components/SqueakCard' import Loader from '../../components/Loader' import MakeSqueak from '../squeaks/MakeSqueak' +import { unwrapResult } from '@reduxjs/toolkit' import { selectNetwork, @@ -140,7 +141,11 @@ const Squeak = (props) => { squeakHash: props.match.params.id, } console.log('Buy clicked.'); - dispatch(setBuySqueak(values)); + dispatch(setBuySqueak(values)) + .then(unwrapResult) + .catch((err) => { + alert(err.message); + }); toggleBuyModal(); } diff --git a/frontend/src/features/squeaks/squeaksSlice.js b/frontend/src/features/squeaks/squeaksSlice.js index de032e53..27832cdc 100644 --- a/frontend/src/features/squeaks/squeaksSlice.js +++ b/frontend/src/features/squeaks/squeaksSlice.js @@ -340,6 +340,9 @@ const squeaksSlice = createSlice({ console.log('setMakeSqueak pending'); state.makeSqueakStatus = 'loading' }) + .addCase(setMakeSqueak.rejected, (state, action) => { + state.makeSqueakStatus = 'idle' + }) .addCase(setMakeSqueak.fulfilled, (state, action) => { console.log('setMakeSqueak fulfilled'); console.log(action); @@ -359,6 +362,9 @@ const squeaksSlice = createSlice({ .addCase(setBuySqueak.pending, (state, action) => { state.buySqueakStatus = 'loading' }) + .addCase(setBuySqueak.rejected, (state, action) => { + state.buySqueakStatus = 'idle' + }) .addCase(setBuySqueak.fulfilled, (state, action) => { console.log(action); state.buySqueakStatus = 'idle'; @@ -375,6 +381,9 @@ const squeaksSlice = createSlice({ .addCase(setDownloadSqueak.pending, (state, action) => { state.downloadSqueakStatus = 'loading' }) + .addCase(setDownloadSqueak.rejected, (state, action) => { + state.downloadSqueakStatus = 'idle' + }) .addCase(setDownloadSqueak.fulfilled, (state, action) => { console.log(action); state.downloadSqueakStatus = 'idle'; @@ -385,6 +394,9 @@ const squeaksSlice = createSlice({ .addCase(setDownloadPubkeySqueaks.pending, (state, action) => { state.downloadPubkeySqueakStatus = 'loading' }) + .addCase(setDownloadPubkeySqueaks.rejected, (state, action) => { + state.downloadPubkeySqueakStatus = 'idle' + }) .addCase(setDownloadPubkeySqueaks.fulfilled, (state, action) => { console.log(action); state.downloadPubkeySqueakStatus = 'idle'; @@ -447,3 +459,9 @@ 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 selectDownloadPubkeySqueakStatus = state => state.squeaks.downloadPubkeySqueakStatus