State-driven UI for Likes/Dislikes

Need help App Organization
1

Hi Bubble community,

I’m stuck on getting my like/dislike votes to properly render. The setup is as follows.

A thumb up and thumb down for voting exist in two places. There’s a reusable item card on a repeating group in a library, and then an item details page that also has a thumb up/down.

Using the thumb up as an example, my logic is:

  1. default thumb is empty
  2. when “voted” is no, fill the thumb up when the user’s likes contain this item. This does the initial population/display based on the database value
  3. when the thumb is tapped, “voted” is set to yes, a “liked” state (defaulted to no) is set to yes if the db value is liked, and the immediately the state is set to flip. This way when the item is liked in the db, the flip makes it no longer liked. But if it is not set to like in the db, then it now sets to like.

All of this is working in both places. The problem is that if a user taps a thumb in the library, “voted” is set to yes. It correctly displays either the filled or empty thumb, but then if they go to the details page and change their vote and go back to the library, it no longer displays correctly because the state is still set to “yes” so it’s displaying the last state that was set on the library. I thought that navigating to the details page would reset all the state values on the library, but apparently not so.

Curiously, I am not having this problem in the reverse.

Scenario A:

  1. user taps an icon on the recipe library (voted is set to yes)
  2. user navigates to the recipe details. display is correct (details page voted is still set to no)
  3. user taps icon in the recipe details (voted is set to yes)
  4. user navigates to the recipe library. Display is NOT correct

Scenario B:

  1. user taps an icon in the details page (voted is set to yes)
  2. user navigates to the library. display is correct (library page voted is still set to no)
  3. user taps an icon on the library (voted is set to yes)
  4. user navigates to the details play. Display IS correct

Since I can’t set states across pages, I can’t figure out how to get this working. I could just drive the visuals based on the db values, but I moved away from that because it was so slow. If I remove the “voted” condition, then the display flips when there’s a discrepancy between the state and the db value.

Any recommendations are appreciated.

2

Update: I got it working by resetting all 3 states back to their default when I navigate away from the view, rather than trying to reset when navigating back to the resuable (which is inside a repeating group).

The purpose of using states to drive the view is because it’s faster than loading data from the database. But if the user is navigating away from the view and coming back, that’s plenty of time for the db to update so clearing the “voted” back to no lets the value fill based on the db value.