Skip to content

Add database and switch to observables

Kévin Commaille requested to merge db-observables into dev

Presentation

This allows us to switch from Redux + AsyncStorage to Observables + WatermelonDB. This should fix #53 (closed) and is a first (and big) step #58 (closed).

It should simplify the data flow:

  • The state is automatically saved in storage if needed. Meaning we can use the app mithout an internet connection from now on.
  • We use actions to change the state like before, but side effects can also listen to actions natively
  • The state is mostly ready to be used as is, most of the computing takes place before it is stored

It's also a bit more complex on a few points:

  • We need to understand how observables work
  • The state is either cached or fetched asynchronously. That's why if we use hooks instead of the withObservables HOC, we will have to check if we have data before rendering.
  • We could introduce data syncing errors between the client and the state

The file structure is always the same:

  • The model.js file is there if we need a schema and model to store the data in the database. It should only be used in the main database.js.
  • The service.js file takes care of database syncing and is the host of the actions. A service should only be used by other services, and the 'main' file. A service should only use other services and files in its folder or subfolders.
  • The 'main' file named like the folder (with possibly an extra 's' if it represents a collection) is the interface between the service and the UI. It should only use its associated service file and external libraries if needed. It should have mostly getters and a setAction function. It should also host all computing that's needed between the state and the UI (although for now it's complicated with the withObservables HOC, most computing needs to happen in the components).

Note: This is only a first step. A lot of performance improvements should be done next.

Known limitations

  • If there's a gap in the timeline, the app will know about it but the user won't be able to fix it easily
  • If the app is closed and reopened, the user might need to swipe the screen several times to see older messages in the timeline

Todo

  • Add the database and create schemas and models
  • Create new services:
    • Auth
    • Chats
    • Messages
    • Users
  • Adapt existing services:
    • Matrix
    • Notifications
  • Adapt the scenes:
    • Auth
    • Chat
    • ChatList
    • NewChat
    • Settings
  • Cleanup:
    • Remove unused files
    • Remove Redux, AsyncStorage and other unused libs

Bonuses

  • Better error messages on login failure
  • Show a list of known users (ie users in the database) on the new chat screen when no search term is typed
  • Send typing notifications
  • Send a read receipt when the chat screen is open and every time a message is received
Edited by Kévin Commaille

Merge request reports