README.md

# Genesys Catalog UI

React application.

# Run with Docker

Pick an image from [Docker image registry](https://gitlab.croptrust.org/genesys-pgr/catalog/genesys-catalog-ui/container_registry).

```bash
docker run -it \
  -e CLIENT_ID=my-...-client \
  -e CLIENT_SECRET=my-...-client \
  -e CATALOG_API_URL=https://catalog-master.review.genesys-pgr.org \
 dockerhub.croptrust.org/genesys-pgr/catalog/genesys-catalog-ui:1.0
```

Also inspect the Docker [swarm compose file](docker/review-compose-template.yml) that we use for CI.

# Development

This project uses npm, gulp and webpack to package the React TypeScript application.

Optional params supported:

`CLIENT_SECRET` - ui app sicret used for oauth authentication in java server

`CLIENT_ID` - ui app id used for oauth authentication in java server

`CATALOG_API_URL` - url to java server

`googleClientId` - id of google project, used for oauth authentication with google.

Google api for configure projects: <https://console.developers.google.com>

To start a live-reload server and work on the application, run:

```bash
npm run server
```

This starts the _webpack-dev-server_ on port 3000:

- <http://localhost:3000/webpack-dev-server/>
- <http://localhost:3000/>

Pack the React application for production and test server-side loading (run express server):

```bash
npm run server:production
```

Example of using optional params:

```bash
CLIENT_ID=client-id CLIENT_SECRET=client-secret CATALOG_API_URL=http://localhost:8080 npm run server
```

## Documentation

We rely on the following libraries to make things work:

- React Toolbox: <http://react-toolbox.com/#/components>
- Flexbox Grid Layout: <http://flexboxgrid.com/>
- Material Icons: <https://material.io/icons/>

- React CSS modules: <https://github.com/gajus/react-css-modules#whats-the-problem>

- Immutability helpers: <https://github.com/kolodny/immutability-helper>