oly-lib

Oly 🐤

Welcome to Oly Air France 🐤

Quick start

Ensure that NodeJS is installed.

1. Clone the project with git clone [e-mail]:sportheroes/oly.git
2. Run npm install in the root oly folder.
3. Run npm start to launch the App.

If you prefer Yarn, use theses following commands instead:

2. Run `yarn` in the root oly folder.
3. Run `yarn start` to launch the App.

Having trouble getting these steps to work on your machine? Follow the troubleshooting guide below.

Routing

Because Oly 🐤 manage multiple applications, you need to have a correct hosts configuration to show the good experience. Ensure theses hosts are in your etc/hosts.

127.0.0.1 running.airfrance.local

Components

Components are micro-elements that form a part of your UI app. Each component has its own structure and styles. Let's suppose our component will be called NewReactComponent. Then, manually, create these files in the components folder:

components
|--new-react-component
|  |--index.js
|  |--style.scss

Note that every component is at the same level

A React component can be one of two types.

A function component

It is the simplest form of a React component, a simple function, with optional props if needed:

import './style.scss';

const NewReactComponent = () => {
  return (
    <a href="">
      <img
        className="new-react-component-class"
        src="http://via.placeholder.com/136x36"
        alt=""
      />
    </a>
  );
};

export default NewReactComponent;

Inside the return function, you can add raw html.

Note that you have to use the jsx-html-class syntax className to add a css class attribute.

A class component

It is also a function with props, but that function can also receive a state:

import React from 'react';

import './style.scss';

class NewReactComponent extends React.Component {
  constructor(props) {
      super(props);

      this.state = { isDisplay: false };

      this.openNav = this.openNav.bind(this);
  }

  openNav() {
    this.setState(prevState => ({
      isDisplay: !prevState.isDisplay,
    }));
  }

  render() {
    const { isDisplay } = this.state;

    const mobileMenu = isDisplay ? 'main-header__nav--is-open' : '';

    return(
      <div className={`main-header__nav ${mobileMenu}`}>
        <ul>
          <li>Nav item</li>
          <li>Nav item</li>
        </ul>
      </div>

      <button onClick={this.openNav}>
    )
  }
}

export default NewReactComponent;

Here, we've created a state object and initialized it with a false status. This state gets initialized in the constructor. If you're using a constructor, you need to call super(). This is not optional and you will get an error otherwise.

Import you component

After created your component, you can call it in a view with this 2 lines:

• import NewReactComponent from 'components/NewReactComponent';
• <NewReactComponent />

Here is the final view file:

import React from 'react';

import NewReactComponent from '../../components/NewReactComponent';

class Home extends React.Component {
  constructor(props) {
      super(props);
  }

  render() {
    return(
      <div>
          <NewReactComponent />
      </div>
    )
  }
}

export default Home;

Components are reusable: you can declare it wherever you want them to appear (in others components for example).

Views

Create a view

Usually you would wrap your component into a view. A view has basically the same structure as a component. However, you can access to your view via an url address.

Let's create a view named Home. Then, manually, create these files in the views folder:

views
|--Home
|  |--index.js
|  |--style.scss

Your index.js should be like:

import React from 'react';

import './style.scss'

class Home extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        Hello World
      </div>
    )
  }
}

export default Home;

We also need to declare our route into the router app. In the routes folder, fill the index.js fill as below:

import App from '../../bootstrap/App';

const myApp = [
  {
    component: App,
    routes: [
      {
        component: Home,
        exact: true,
        path: '/',
      }
    ],
  },
];

You will need the name of your view and its path.

Create multiple views allows us to split our app into separate routes and load the route dynamically when needed. We may also need to split our app at the component-level. Ex: do we need to load at the same time a component at the top of the page and an other one at the very bottom of the page ?

To achieve that, we use the library React Loadable.

Code splitting

React Loadable allows us to asynchronously loads the components of a view. Let's add a Loadable.js file into our Home view.

views
|--Home
|  |--index.js
|  |--Loadable.js
|  |--style.scss

The Loadable.js file should look like this:

import path from 'path';
import React from 'react';
import Loadable from 'react-loadable';

import fakeDelay from '../fakeDelay';

function LoadingComponent() {
  return <div>Loading...</div>;
}

export default Loadable({
  loader: () => fakeDelay(1000).then(() => import('./index')),
  loading: LoadingComponent,
  serverSideRequirePath: path.join(__dirname, './index'),
});

By adding this few lines, React Loadable automatically split our code at the level-component.

Note that React Loadable also includes a loader to display while our component is loading.

Now, we juste need to add the following line into the router app: import Home from '../../views/Home/Loadable';:

import App from '../../bootstrap/App';
import Home from '../../views/Home/Loadable';

const myApp = [
  {
    component: App,
    routes: [
      {
        component: Home,
        exact: true,
        path: '/',
      }
    ],
  },
];

Note: to learn more about React Loadable, you can check the full documentation here: http://thejameskyle.com/react-loadable.html

Versioning

Oly 🐤 follows Sport Heroes Group github process, defined here : https://github.com/sportheroes/process/tree/master/github.

Use git cz to properly format each commit!

Deployment

Requirements

• Python.
• AWS CLI : https://pypi.python.org/pypi/awscli.
• AWS Sport Heroes access.

Staging

Staging environment (AWS S3) uses only static files. The dist/ directory of each builded app is uploaded to a S3 bucket using this command :

yarn deploy:running:stage

Production

TBD.

Troubleshooting

npm and Node.js

Oly 🐤 uses npm to manage dependencies. Please install Node.js, and try running npm install again.

If Node.js is already installed, make sure you’re running v8 or up.

JavaScript and compilation issues

JavaScript dependencies sometimes get out of sync and inexplicable bugs start to happen. Follow these steps to give a fresh start to your development environment:

1. The installed npm version must be at least v3.10. You can update your npm with: npm install npm -g (sudo may be required).
2. Re-install dependencies: rm -rf node_modules && npm install
3. npm start

If this did not work, try running npm cache clean and repeat the above steps.