WildAid O-FISH Web App

The WildAid Marine Program works to protect vulnerable marine environments.

O-FISH (Officer Fishery Information Sharing Hub) is a multi-platform application that enables officers to browse and record boarding report data from their mobile devices.

Developers are expected to follow the MongoDB Community Code of Conduct guidelines.

This repo implements the O-FISH web app.

The details behind the data architecture, schema, and partitioning strategy are described in Realm Data and Partitioning Strategy Behind the WildAid O-FISH Mobile Apps.

Details on installing all applications making up the solution can be found here.

Prerequisites

This is the Web app for O-FISH. To build and use the app, you must use the sandbox realm-app-id or build your own foundation.

Setting up MongoDB Charts is optional, but places where charts should be will show errors if you don't - other functionality will be unaffected.

Node.js must be installed.

Building and running the app:

From the top-level directory (where this README file lives) run: npm install
Copy src/config.js.tmpl to src/config.js
Set your configuration data in src/config.js (leave the chartId values as they are if you haven't set up MongoDB Charts for the sample data - if you have then you can get the ids from the Charts UI):

module.exports = {
    appName: 'ofish-web',
    realmServiceName: "mongodb-atlas",
    realmAppId: 'wildaid-xxxxx',
    database: 'wildaid',
    chartsConfig: {
      baseUrl: "https://charts.mongodb.com/charts-wildaid-xxxxx",
      "boardings": {
        chartId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      },
      "boarding-compliance":{
        chartId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      },
      "patrol-hours":{
        chartId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      },
      "compliance-rate":{
        chartId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      },
      "boardings-count-chart":{
        chartId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      },
      "citations-and-warnings":{
        chartId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      }
    }
  }

npm start (for local testing)
npm run build (for deployment)

Code and architecture highlights:

This application uses React and is based on the React Services Architecture rather than Redux. If you are interested in why, read You Might Not Need Redux from Dan Abramov (co-author of Redux).

All services use as a singleton object. There is no dependency injection needed because there is no service inheritance.

Key code snippets:

Services

Found in /src/services. Here you will find all of the basic interaction with the MongoDB Realm service.

Connect MongoDB Realm - stitch.service.js:

  get client() {
    return this._localStitchClient;//For use the stitch client from another services
  }

  get database() {
    if (!this._database) {
      throw new Error("You are not logged in! Please, login first.");
    }
    return this._database;
  }

  constructor() {
    this._localStitchClient = Stitch.initializeDefaultAppClient(config.realmAppId);

    // The database object will be available only after authentication
    this._database = null;
  }

  // This method should be called from Login form with the Realm user credentials:
  authenticateStitch(login, pass) {
    return this._localStitchClient.auth
      .loginWithCredential(new UserPasswordCredential(login, pass))
      .then((user) => {
        this.reinitializeClient();
        return user;
      });
  }

  //After stitch authentication, you can connect to the database
  reinitializeClient() {
    this._database = this._localStitchClient
      .getServiceClient(RemoteMongoClient.factory, config.realmServiceName)
      .db(config.database);
  }

There are also examples of calling Realm functions:

getVesselsWithFacet(limit, offset, search, filter) {
    return this._localStitchClient.callFunction("searchFacetByVessels", [limit, offset, search, filter]);
  }

auth.service.js uses EventEmitter to fire an authorized event when authentication is complete:

this.emit("authorized", user);

Other components subscribe to that event, for example the user profile component uses it as a trigger to display user information.

Authentication

Authentication is invoked from /src/root/root.component.js through the renderRoutes method (/src/helpers/map-routing.js).

This method checks if the user is already authenticated and redirects the user to the login page if not:

const auth = authService.isStitchAuthenticated;
if (route.auth){
  if (!auth){
    return <Redirect to="/login" />;
  } else {
    if (!authService.isAuthenticated){
      return authService.reauthenticateUser().then(()=>{
        return <Redirect to={route.path} />
      });
    }
  }
}

if (route.redirectTo) return <Redirect to={route.redirectTo} />;

if (route.routes){
  return <route.component isLoggedIn={auth} {...props} routes={route.routes}/>;
} else {
  return <route.component isLoggedIn={auth} {...props} />;
}
};

MongoDB Charts

src/charts/chart-box.component.js is a React-ready component to embed MongoDB Charts:

export default function ChartBox({ options, className })

Example chart options:

const chartOptions = {
  width: "100%",
  height: "100%",
  refreshInterval: 1300, // in seconds.
  useAuthenticatedAccess: true,
  chartId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  filter: {exampleField: "someValue"}
};

Pages

The code for each page is in /src.

Common components are in /src/partials.

Testing

Quick examples of Jest and React-Testing-Library tests in src/test-examples/
Read TESTS.md for detailed how-tos, setup, and test structure

WildAid/o-fish-web