Front end application
VisColl uses IndexedDB to persist a local copy of the Redux store in the user's web browser. Specifically we persist the user subtree of the store. This prevents the user from requiring to login again once they close the web browser.
The three main containers within the app are
-
Authentication: contains the login, registration, password reset components -
Dashboard: contains components for the dashboard view -
Project: contains components for the edit project view
Containers, represented as orange boxes in the diagram below, are the 'smart' components that connect to the Redux store and dispatch actions. Regular components, in blue below, are presentational components that receive data and callbacks from containers.
The store is composed of four subtrees: user, dashboard, active and global. The user tree contains the user's account information along with its authentication token. The dashboard tree contains a list of the user's existing projects and images. The active, which gets populated when the user opens a project, contains the entire project data and relevant app states for the project edit view. The global tree contains general states that are used across the whole app.
Axios and two custom middleware are used in this application.
Axios is used to insert the user's authentication token into the request headers before the requests are sent over to the API. Axios is also configured to show and hide notifications, backend error messages and the loading pop-up.
This middleware listens for collation modification action types (eg adding/deleting leaves) and then calls relevant functions with logic to modify the project state. For consistency, all action types captured by this middleware are suffixed by _FRONTEND.
This middleware modifies the redux store after receiving the payload from the backend. The action types captured by this middleware are suffixed by _BACKEND.