stennie / o-fish-web

Web application for the Officer's Fishery Information Sharing Hub (O-FISH). The web app allows agencies to gain insights from the aggregated information gathered during a routine vessel inspection (submitted via the web app).

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.

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:

1. From the top-level directory (where this README file lives) run:
   npm install
2. Copy src/config.js.tmpl to src/config.js
3. 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"
      }
    }
  }

5. npm start (for local testing)
6. 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 interested in why, read Dan Abramov's (Co-author of Redux) opinion on the topic.

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.