GlcoinCore/squeaknode
1
0
Fork 0
mirror of https://github.com/yzernik/squeaknode.git synced 2026-08-13 12:33:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show waiting indicator for buy squeak (#1993)

Browse source 
* Show loader modal on waiting for make squeak and buy squeak

* Handle error when buy squeak fails

* Show waiting indicator for download single squeak and download pubkey squeaks

* Fix mutation of profilesqueaks state
This commit is contained in:
Jonathan Zernik 2022-03-15 01:52:18 -07:00 • committed by GitHub
parent 1459578859
commit af7fabe6ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 78 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

54
frontend/src/components/Nav/index.js
View file

@ -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}) => {
</div>
</div>
{/* Block screen with modal when make squeak is waiting. */}
<div style={{display: useSelector(selectMakeSqueakStatus) === 'loading' ? 'block' : 'none'}} className="modal-edit">
<div style={{minHeight: '270px', height: 'initial'}} className="modal-content">
<div className="modal-header">
<p className="modal-title">Making squeak...</p>
</div>
<div style={{marginTop:'5px'}} className="modal-body">
<Loader />
</div>
</div>
</div>
{/* Block screen with modal when buy squeak is waiting. */}
<div style={{display: useSelector(selectBuySqueakStatus) === 'loading' ? 'block' : 'none'}} className="modal-edit">
<div style={{minHeight: '270px', height: 'initial'}} className="modal-content">
<div className="modal-header">
<p className="modal-title">Buying squeak...</p>
</div>
<div style={{marginTop:'5px'}} className="modal-body">
<Loader />
</div>
</div>
</div>
{/* Block screen with modal when download squeak is waiting. */}
<div style={{display: useSelector(selectDownloadSqueakStatus) === 'loading' ? 'block' : 'none'}} className="modal-edit">
<div style={{minHeight: '270px', height: 'initial'}} className="modal-content">
<div className="modal-header">
<p className="modal-title">Downloading squeak...</p>
</div>
<div style={{marginTop:'5px'}} className="modal-body">
<Loader />
</div>
</div>
</div>
{/* Block screen with modal when download pubkey squeaks is waiting. */}
<div style={{display: useSelector(selectDownloadPubkeySqueakStatus) === 'loading' ? 'block' : 'none'}} className="modal-edit">
<div style={{minHeight: '270px', height: 'initial'}} className="modal-content">
<div className="modal-header">
<p className="modal-title">Downloading pubkey squeaks...</p>
</div>
<div style={{marginTop:'5px'}} className="modal-body">
<Loader />
</div>
</div>
</div>
</div>
)

7
frontend/src/features/squeaks/Squeak.js
View file

@ -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();
}

18
frontend/src/features/squeaks/squeaksSlice.js
View file

@ -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