Skip to content

Front end application

Jump to bottom
Monica Ung edited this page Jan 30, 2018 · 10 revisions

Data flow of VisColl

Viscoll-data-flow-diagram

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.

Component tree

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.

viscoll-component-tree

Redux store

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 tree, 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.

Active project tree structure

active: {
  project: {
    groupIDs : [...],
    leafIDs : [...],
    rectoIDs : [...],
    versoIDs : [...],
    Groups: {...},
    Leafs: {...},
    Rectos: {...},
    Versos: {...},
    Notes: {...},
    ...
  }
}

The active project tree holds the data of the project that the user is currently viewing and editing.

The group, leaf, recto, verso, and note collation objects are stored in the Javascript objects active.project.Groups, active.project.Leafs, active.project.Rectos, active.project.Versos, and active.project.Notes respectively. These are used as dictionaries, where the keys are the collation object IDs, to lookup the collation objects. The order of the groups, leaves and sides are captured by arrays of ID's: active.project.groupIDs, active.project.leafIDs, active.project.rectoIDs, and active.project.versoIDs. Note that the dictionaries of the collation objects are not necessarily ordered, they are only used to look up the objects.

Middleware

Axios and two custom middleware are used in this application.

Axios

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.

frontendBeforeActionsMiddleware

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.

frontendAfterActionsMiddleware

This middleware modifies the redux store after receiving the payload from the backend. The action types captured by this middleware are suffixed by _BACKEND.

Clone this wiki locally