/oam-browser-next

The next generation of the OpenAerialMap.

Primary LanguageJavaScript

OAM Browser Next

The next generation of the OpenAerialMap.

yarn install Installs necessary dependencies.

The following environment variables are required. You can copy and rename .env.sample to .env for use as a template.
REACT_APP_API_URL The URL with port of the oam-api.
REACT_APP_ACCESS_TOKEN_KEY The key used for local storage of JWT.
REACT_APP_UPLOAD_BUCKET The S3 bucket for uploads.
REACT_APP_AWS_KEY The non-secret AWS key for signing uploads.
REACT_APP_MAPBOX_ACCESS_TOKEN

Can be used with a local instance of oam-api-next for development.

yarn start Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

yarn test Runs unit tests.

yarn run build Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Design Approach

The application uses Redux for state management.

The Redux store is a vanilla JS object but each logical state slice is an ImmutableJS map.

State slices are never queried directly from the store but are accessed via selectors which are memomized using the Reselect library where appropriate.

The application design uses both Presentational and Container components but makes liberal use of react-redux connect as outlined here.

State that is transient or does not affect other components in the application can be maintained directly in components where appropriate as described here.

Pure stateless React components are preferred but Class components are used where local state is required.

Any impure actions which may have side effects (asynchronous API requests, interaction with browser local storage) are isolated in Redux middleware.

Cross-cutting actions are also managed through the use of middleware.

The application uses Mapbox GL JS for map display and management. When the Map React component mounts it loads a style and some GeoJSON data. This state is then pushed into the Redux store where all subsequent actions act on this state and provide the Map component with the new updated style via props. A more detailed description of this approach is available in this blog post by Tom Macwright.

The application uses Material-UI for UI components and styling.

Individual component style overrides are acheived using Material UIs own css injection with JSS.

The application store is configured to support the redux-devtools-extension for advanced debugging with state rewind and fast forward.

Because the application makes extensive use of HOCs, wrapped components are exposed as the default export while raw components are available as a named component. This allows for unit testing without invoking HOC behavior.

The application uses tape-await to simplify asynchronous test flow for middleware.