ERROR in conditions to show a loading bar - react-native

Question

I hope they are fine, my problem is that it does not take my conditions that when my data is not loaded in this case coupons, it does not show and only shows the bar loading, what I achieve is what is in the gif below
So in my interface State I have this property loadingCoupons: boolean,
In my state I have the property created above with value true... loadingCoupons: true
so in my updateCoupons method I put it false so that when loading the loading bar is removed
updateCoupons = async () => {
const coupons = await this.props.coupons.get(this.state.page, this.state.limit)
const couponsUsed = await this.props.coupons.getUsed(this.state.page, this.state.limit)
const couponsExpired = await this.props.coupons.getExpired(this.state.page, this.state.limit)
this.setState({
coupons,
couponsUsed,
couponsExpired,
loading: false,
loadingCoupons: false
})
}
In my render is the property loadingCoupons
So the code where I execute this, that everything is done is this, why my conditions are not met? What you should do is that when changing the tab, load and when you have the data loaded, show it, currently it always shows the loading bar
type IPathParams = {}
type IProps = RouteComponentProps<IPathParams> & {
coupons: Coupon
providerModel: ProviderModel
cartModel: CartModel
user: User
}
interface State {
msg: any
coupons: any
couponsUsed: any
couponsExpired: any
limit: any
loading: boolean
page: any
views: any
valueInput:string
spinner:boolean
couponsActvive:boolean
alert:boolean
couponValidate:any
message:string
alertDelete:boolean
messageDelete:string
segmentCoupons:any
loadingCoupons: boolean
}
class Coupons extends React.PureComponent<IProps, State> {
state: State = {
msg: { msg: null, active: false },
coupons: [],
couponsUsed: [],
couponsExpired: [],
limit: 10,
loading: true,
page: 0,
views: {
valid: { name: 0, active: true },
used: { name: 1, active: false },
expired: { name: 2, active: false }
},
valueInput:'',
spinner:false,
couponsActvive:false,
alert:false,
couponValidate:false,
message:'',
alertDelete:false,
messageDelete:'',
segmentCoupons:'',
loadingCoupons: true
}
async componentDidMount() {
this.updateCoupons()
}
updateCoupons = async () => {
const coupons = await this.props.coupons.get(this.state.page,
this.state.limit)
const couponsUsed = await this.props.coupons.getUsed(this.state.page,
this.state.limit)
const couponsExpired = await
this.props.coupons.getExpired(this.state.page,
this.state.limit)
this.setState({
coupons,
couponsUsed,
couponsExpired,
loading: false,
loadingCoupons: false
})
}
goToCart = () => {
// this.props.history.replace('/cart')
window.location.href = "/cart";
}
goToHome = () => {
this.props.history.replace('/home')
}
groupedCoupons = (coupons: any) => {
return groupBy(coupons, (coupon: any) => {
return coupon._id
})
}
activateCoupon = async (id: string) => {
const result = await this.props.coupons.activate(id)
const msg = !result.length && Object(result)
if (!result.length && msg) {
msg.active = true
msg.msg = Object(result).description
if (Object(result).code) {
msg.header = "Felicitaciones!!!"
} else {
msg.header = "Upps"
}
this.setState({
msg
})
} else if (result.length) {
msg.msg = 'Activación satisfactoria.'
msg.active = true
this.setState({
msg
})
}
const coupons = await this.props.coupons.get(this.state.page,
this.state.limit)
this.setState({
coupons,
loading: false,
loadingCoupons: false
})
}
renderCouponList(key: any, coupons: any) {
const { views } = this.state
return (
<div key={key} className="list-orders">
<div className="list">
{coupons.map((coupon: any) => {
const { _id, amount, minimum_amount, date_expires, discount_type,
code, image } = coupon
const expire = moment(new Date(date_expires)).format('DD/MM/YYYY')
return (
<Fragment key={_id}>
<div className="coupon">
<IonAvatar className="no-radius">
<img className="img_coupon" src={(image &&
`${process.env.REACT_APP_BFF_IMAGE}coupons/${image.url}`)} />
</IonAvatar>
<div className="provider">
<div className="code">CÓDIGO: #{code}</div>
<div className="expire">VENCE: {expire}</div>
{discount_type === 'porcent' ? (
<div className="amount"><strong>Descuento {amount}%
</strong></div>
) : discount_type === 'amount' && (
<div className="amount"><strong>{asClp(amount)} de
regalo</strong></div>
)}
<div className="minimum_amount">COMPRAS SOBRE
{asClp(minimum_amount)}</div>
</div>
{views.valid.active && (
<div className="button-wrapper">
<button onClick={() =>
this.activateCoupon(_id)}>Activar</button>
</div>
)}
{coupon.couponType === "referal" &&
<div className="button-garbage">
<IonIcon
className="icon"
src={Garbage}
onClick={() => this.deleteCouponReferal(coupon.code)}
/>
</div>
}
</div>
</Fragment>
)
})}
</div>
</div>
)
}
deleteCouponReferal = async (code:any) =>{
const user: any = (await this.props.user.getUser()) || {}
const result = await this.props.coupons.removeCouponReferal(code, user.id)
if(result.status===200){
this.setState({
alertDelete:true,
messageDelete:result.respuesta
})
setTimeout(() => {
window.location.reload()
}, 2000);
}
}
onChangeInput = async (value: any) => {
const val = Number(value)
const { views } = this.state
switch (val) {
case 0:
views.valid.active = true
views.used.active = false
views.expired.active = false
this.setState({
views, segmentCoupons:val
})
await this.updateCoupons()
break;
case 1:
views.valid.active = false
views.used.active = true
views.expired.active = false
this.setState({
views, segmentCoupons:val
})
await this.updateCoupons()
break;
case 2:
views.valid.active = false
views.used.active = false
views.expired.active = true
this.setState({
views, segmentCoupons:val
})
await this.updateCoupons()
break;
default:
break;
}
}
onChangeValidate = (event:any) =>{
this.setState({
valueInput:event
})
}
buttonValidate = async () =>{
const { valueInput } = this.state
const user: any = (await this.props.user.getUser()) || {}
this.setState({
spinner:true,
})
const result = await this.props.coupons.countReferal(valueInput, user.id)
if(result.status===400){
this.setState({
couponValidate:false,
message:result.respuesta
})
}else if(result.status===200){
this.setState({
couponValidate:false,
message:result.respuesta
})
}else if(result.status===404){
this.setState({
couponValidate:true,
message:result.respuesta
})
}else if(result.status===409){
this.setState({
couponValidate:'409',
message:result.respuesta
})
}
this.setState({
valueInput:'',
spinner:Object.keys(result).length > 0 ? false :true,
couponsActvive: Object.keys(result).length > 0 ? true :false,
alert:true,
})
}
render() {
const { history, cartModel } = this.props
const { coupons, couponsExpired, couponsUsed, loading, views,
msg,valueInput,
spinner,alert,
couponValidate, message, alertDelete, messageDelete, segmentCoupons,
loadingCoupons } = this.state
const length = coupons.length
const lengthExpired = couponsExpired.length
const lengthUsed = couponsUsed.length
const grouped = this.groupedCoupons(coupons)
const groupedExpired = this.groupedCoupons(couponsExpired)
const groupedUsed = this.groupedCoupons(couponsUsed)
const productCount = cartModel.getCart().length
return (
<IonPage className="orders-page-cupons">
<IonHeader>
<ToolBar
title="Cupones"
secondaryButtons={[{ type: 'back', onClick: history.goBack }]}
tertiaryButtons={[{ key: 'cart', onClick: this.goToCart, icon:
cartToolbarIcon, badge: productCount }]}
primaryButtons={[{ key: 'home', onClick: this.goToHome, icon:
homeIcon }]}
/>
</IonHeader>
{/* Without items */}
<IonContent>
{msg.active && (
<IonSlides pager={false}>
<IonSlide>
<IonAlert
isOpen={msg.active}
onDidDismiss={() => this.setState({
msg: { active: false, msg: null }
})}
header={msg.header}
message={msg.msg}
buttons={
[{
text: 'Cerrar',
handler: () => this.setState({
msg: { active: false, msg: null }
}),
}]
}
/>
</IonSlide>
</IonSlides>
)}
{alert && (
<IonAlert
isOpen={true}
header={!couponValidate ? '¡Felicitaciones!' : couponValidate ===
'409' ? '' :'Código Incorrecto'}
message={couponValidate ?
message :
message
}
buttons={
[{
text: 'Cerrar',
handler: () => this.setState({
alert:false
}),
}]
}
/>
) }
{loading && <IonProgressBar type="indeterminate"></IonProgressBar>}
{!loading && (
<IonContent>
<IonSegment onIonChange={e => this.onChangeInput(e.detail.value ||
'')}
value={views.valid.active ? views.valid.name :
views.used.active ? views.used.name :
views.expired.active && views.expired.name}>
<IonSegmentButton value={views.valid.name}>
<IonLabel>Disponibles</IonLabel>
</IonSegmentButton>
<IonSegmentButton value={views.used.name}>
<IonLabel>Activos</IonLabel>
</IonSegmentButton>
<IonSegmentButton value={views.expired.name}>
<IonLabel>Canjeados</IonLabel>
</IonSegmentButton>
</IonSegment>
{loadingCoupons && <IonProgressBar type="indeterminate">
</IonProgressBar>}
{views.valid.active && <div className="new-coupons">
<div className="cotainer-coupons-referal">
<div className="title-new-coupons">
Nuevo Cupón
</div>
<div>
<div className="container-input">
<IonInput
value={valueInput}
maxlength={13}
onIonChange={e => this.onChangeValidate(e.detail.value)}>
</IonInput>
</div>
<div className="container-btn-validate" >
<IonButton
onClick={this.buttonValidate}
disabled={valueInput ? false: true}
>Validar
{spinner && <IonSpinner name="crescent" />}
</IonButton>
</div>
</div>
</div>
</div>}
{length > 0 && segmentCoupons === 0 && !loadingCoupons? (
<div className="wrapper-orders">
{Object.keys(grouped).map((key: any) => {
return this.renderCouponList(key, grouped[key])
})}
</div>
) : views.valid.active && (
<div className="without-products">
<IonImg src={withoutCouponsIcon} />
<div className="message">Sin cupones.</div>
</div>
)}
{lengthExpired > 0 && segmentCoupons === 2 && !loadingCoupons? (
<div className="wrapper-orders">
{Object.keys(groupedExpired).map((key: any) => {
return this.renderCouponList(key, groupedExpired[key])
})}
</div>
) : views.expired.active && (
<div className="without-products">
<IonImg src={withoutCouponsIcon} />
<div className="message">Sin cupones.</div>
</div>
)}
{(lengthUsed > 0 && segmentCoupons === 1 && !loadingCoupons) ? (
<div className="wrapper-orders">
{Object.keys(groupedUsed).map((key: any) => {
return this.renderCouponList(key, groupedUsed[key])
})}
</div>
) : views.used.active && (
<div className="without-products">
<IonImg src={withoutCouponsIcon} />
<div className="message">Sin cupones.</div>
</div>
)}
</IonContent>
)}
{alertDelete && (
<IonAlert
isOpen={true}
message={messageDelete}
buttons={
[{
text: 'Cerrar',
handler: () => this.setState({
alert:false
}),
}]
}
/>
) }
</IonContent>
</IonPage>
)
}
}
export default withRouter(withIonLifeCycle(Coupons))

Answer 1

There are a lot of async functions without error handling in your code, otherwise it looks good.
Therefore I'd guess that there is probably an error thrown somewhere before setState is called which is lost due to the nature of async functions. Async functions will always return a Promise which is rejected with the error in case an unhandled error is thrown.
Therefore you should have at least error handling (in case of async/await usually a try ... catch block) for every react lifecycle function, otherwise the error might get lost. The async function will just return a promise which is rejected with the error and react wont care about the return value. Therefore you wont notice the error.
You can find more on async lifecycle functions here: https://www.valentinog.com/blog/await-react/