Create Redux store for pages: Animal list and Favourites

[saulyz]

Pages Animal list and Favourites are connected. In both pages user can toggle favourite property of Animal Card. If this has been done for certain animals successive things must happen:

• Animal needs an updated prop of favourite on the Animal list page.
• Animal stays or is removed from the list of Favourite animals page.
• (in the future) Animal is or is not viewed in the recent Favourites widget on the Home page.

Graphql does not allow easily maintain and update dependent queries in the application. The list contents in Favourites and the deep property of each animal.

Animal list (type Animals[]) and Favourites (Animals[]) should be stored and manipulated through a Redux store. Any favourite toggle should immediately change store for all the App. And the relevant mutations should be made to the backend from the Redux. Redux must keep in sync with the backend. Be aware of the Animal list filtering and pagination features that will need to work with Redux.

Other App data is not in this task scope. After this task is implemented other cache context solutions should be removed.

[saulyz]

When implementing this dynamic App state management solution via Redux, maybe we should not merge favourite property into Animal structure, instead just use it from the Favourites list. So AnimalCard (or one that has favourite toggle) would directly use data from Redux Favourites scope and would not be dependent on the current Animal data itself. This would allow simplification and avoid complex merging "user data" (is that animal favourite for X user) with "animal data" (the animal entity from database).

[rikius]

one additional suggestion use websockets for updating asyncs update. example of usage: https://socket.io/