Context
I'm learning FaunaDB with React and have written some bit of code using this article as a reference. The demo app I'm building is a coffee poll/counter app - user's would be shown coffee types and you click the button to increase the counter. At the moment, there are only two buttons/coffee options.
Problem
For a single user, the app works fine, but when I open two windows of the app, it doesn't seem to behave properly. Outlined below:
Window 1
Page loads with the values from Fauna (let's say mocha=1, long black=1). I click on mocha and the app should get the latest values from Fauna (just in case anyone else made any updates), then increments mocha and posts an update to Fauna (now mocha=2, long black=1). I have confirmed that these values get stored in FaunaDB.
Window 2
Page has loaded with the values from Fauna (let's say mocha=1, long black=1) - Window 1 and 2 was loaded at the same time. Now, in Window 2 I click the long black button. However, when the app gets the values it gets mocha=1, long black=1. It then increments long black and posts an update to Fauna (now, mocha=1, long black=2), therefore resetting what selection the user made in Window 1. It should have got mocha=2 instead of mocha=1.
I've been sitting on this problem for too long now and would really appreciate some direction.
Code snippets
Snippet from the API: https://gist.github.com/ClydeDz/76030075aebbd4673a45bdac13de7979
Snippet from the Service: https://gist.github.com/ClydeDz/eac99e33aa2c2d8da58b26f00e6478e0
Snippet from the Component: https://gist.github.com/ClydeDz/bbc26605b039892c62245f02a7b7a631
Is it possible getAllChoices
's .then
doesn't actually query Fauna but just returns whats in React's state? How do I confirm and fix this?