In Loco 2.0

In the place; in the proper or natural place.

A Geographic Information System (GIS) used by Ministério Público do Estado do Rio de Janeiro to show social, institutional and administrative data, made with React and Leaflet, interacting with a public GeoServer backend.

Contributing

Our development objectives and open issues are all public on GitHub issues. Optionally, you can install ZenHub plugin (available on Chrome and Firefox) to see development plan board, see issues already in progress etc.

How to install?

1. Clone the project or download it to your machine.
2. On Windows, install .NET Framework 2.0 SDK (Sass build dependency)
3. If needed be, configure npm proxy
4. Run npm install
   1. Note: currently this step fails when running on Windows Subsystem for Linux.
5. This project uses EditorConfig to configure its code standards, please use the appropriate plugin on your IDE or text editor.

How to run

Run tests

$ npm install -g jest
$ npm run test

If you get error with jest, try running jest --no-cache

On mock mode

This mode does not call the geoserver, instead it simulates geoserver calls.

$ npm run mock

On development mode

$ npm start

On production mode

$ npm run prod

Production build

$ npm run build

Tests

The tests environment was made using jest and enzyme. At first, we're doing the following test types:

1. Component rendering with Snapshot test. Example:

import React from 'react';
import App from '../../src/components/App/App.js';
import renderer from 'react-test-renderer';

it('component renders correctly', () => {
    const app  = shallow(<App/>);
    expect(app).toMatchSnapshot();
});

2. Property tests (props)
3. Events tests

How to run all tests

$ npm run test : run all tests

$ npm run test:watch : run all tests right now and also when some component change

$ npm run test:coverage : run all tests and show coverage information

Docs

In order to contribute with the project, it is needed to documment the components. For each component we need to write:

1. Basic description of what the component is, soon after component class declaration, write the description with a comment:

   /**
    * App component that represents the application
    */

2. What every component method does and what it returns, right after module declaration

   /**
    * renders the element
    * @return html markup of the element
    */

Just like on following example, with App class.

import React from 'react';
import Input from '../input/Input.js';

require('./app.scss');

/**
 * App component that represents the application
 */

export default class App extends React.Component {
    /**
     * renders the element
     * @return html markup of the element
     */
    render() {
        return (
            <div style={{textAlign: 'center'}} className="module-app">
                <h1>Hello World</h1>
                <Input />
                <hr />
            </div>
        );
    }
}

Read project documentation

The development build (npm start) will also start docs build (esdoc). This docs build will compile all components docs and show a webpage. To access it just:

1. $ npm start
2. Access url http://localhost:3000/esdoc/