You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
❗️ First of all, if you are updating the cards list dynamically (e.g. adding new cards when there are 5 cards left in the current stack) and you are still facing the issue when the list doesn't update, please, make sure you have the latest version of the package. This issue should be fixed there.
Now, let's talk about our patient. Swiper doesn't update state after all cards were swiped because it considers the stack is finished and it stops adding new cards to it. Here the part of the code responsible for this:
swipedAllCards is a state variable, that is being set here
incrementCardIndex=onSwiped=>{const{ firstCardIndex }=this.stateconst{ infinite }=this.propsletnewCardIndex=firstCardIndex+1letswipedAllCards=falsethis.onSwipedCallbacks(onSwiped)constallSwipedCheck=()=>newCardIndex===this.props.cards.lengthif(allSwipedCheck()){if(!infinite){this.props.onSwipedAll()// onSwipeAll may have added cardsif(allSwipedCheck()){swipedAllCards=true// look here}}else{newCardIndex=0;}}this.setCardIndex(newCardIndex,swipedAllCards)}
So once it is set to true it won't ever change to false because that stack just stops rendering.
How did I manage to fix it?
❗️DISCLAIMER: I don't think this is the best solution. This is why I've opened this issue, so we could find a more universal solution.
I've moved swipedAllCards property from state to props because I think we can decide ourselves when the list is finished or not. I've also added a isLoading prop to allow managing loading state of the swiper. To prevent Swiper from stopping rendering cards inside while case I've added CardListLoadingComponent and CardListEmptyComponent that are shown during the loading and empty state. Here is my renderStack function:
renderStack=()=>{const{ firstCardIndex }=this.state;const{ swipedAllCards }=this.props;constrenderedCards=[];let{
cards,
stackSize,
infinite,
showSecondCard,
loading,
CardListLoadingComponent,
CardListEmptyComponent,}=this.props;letindex=firstCardIndex;letfirstCard=true;letcardPosition=0;if(swipedAllCards&&loading){// check for loadingreturnCardListLoadingComponent;}if(swipedAllCards&&!loading){// check for emptyreturnCardListEmptyComponent;}while(stackSize-->0&&(firstCard||showSecondCard)){constkey=this.getCardKey(cards[index],index);this.pushCardToStack(renderedCards,index,cardPosition,key,firstCard);firstCard=false;if(index===cards.length-1){if(!infinite)break;index=0;}else{index++;}cardPosition++;}returnrenderedCards;};
After this refactoring I had a working Deck Swiper so I stopped looking for a more reliable and universal solution. We have a heavy backend request for the new stack of cards, so while the request is pending the loading props is set to true and loading component is shown. When backend stops sending new cards the swipedAllCards is set to true and empty component is shown.
The text was updated successfully, but these errors were encountered:
❗️ First of all, if you are updating the cards list dynamically (e.g. adding new cards when there are 5 cards left in the current stack) and you are still facing the issue when the list doesn't update, please, make sure you have the latest version of the package. This issue should be fixed there.
Now, let's talk about our patient. Swiper doesn't update state after all cards were swiped because it considers the stack is finished and it stops adding new cards to it. Here the part of the code responsible for this:
swipedAllCards is a state variable, that is being set here
So once it is set to
true
it won't ever change to false because that stack just stops rendering.How did I manage to fix it?
❗️DISCLAIMER: I don't think this is the best solution. This is why I've opened this issue, so we could find a more universal solution.
I've moved
swipedAllCards
property fromstate
toprops
because I think we can decide ourselves when the list is finished or not. I've also added aisLoading
prop to allow managing loading state of the swiper. To prevent Swiper from stopping rendering cards insidewhile
case I've addedCardListLoadingComponent
andCardListEmptyComponent
that are shown during the loading and empty state. Here is myrenderStack
function:And here is my
incrementCardIndex
function:After this refactoring I had a working Deck Swiper so I stopped looking for a more reliable and universal solution. We have a heavy backend request for the new stack of cards, so while the request is pending the
loading
props is set totrue
and loading component is shown. When backend stops sending new cards theswipedAllCards
is set totrue
and empty component is shown.The text was updated successfully, but these errors were encountered: