khanghoang

How to handle async in React (with Reflux) app?

Principles

• All components are dump, they are just view and render from their props.
• Logic handling should be done in Component Wrapper (we call it container or page).

Async Component

• Provide the interface for subclasses.
• The subclass need to implement the idealView(), errorView(), emptyView(), loadingView() or use the defined class decorators, e.g: javascript @defaultLoadingDecorator

khanghoang

Mock

Why you don't use ZhenLing mock server?

• We still use it, but not all the dev time.
• Every time we want to code, test we need to open simulator, so it will be hard for us if we want to use any automation tests later on.
• if (env === "DEV") {} is everywhere, we need to do it just in one place.

New way to mock

Extra benefits

khanghoang

// The car interface
inteface Vehicle
- (void)run

// class Car conforms `Vehicle` interface
class Car conforms Vehicle {
  // override run method
  - (void)run() {
    console.log("Car is running");
  }

khanghoang

function isInt(n){
    return Number(n) === n && n % 1 === 0;
}

function test(x) {
    // x is the number that the last squirrel takes
    return x * 5 + 1;
}

function thePreviousNuts(x) {

khanghoang

####Breaking changes:

• Change how we import files (from global variables using <script />in index.html to webpack modules import).
• Now the ENV variables by passing them from gulp to webpack (check the webpack.config.js).
• Change the command to run in native from gulp build-SG-en --config native to gulp build-SG-en --type native.

Why? To use the webpack ENV variable

####Improve:

• Console log will show you where the data comes from (Mock Data vs Mock Server).

khanghoang

import React, {Component} from 'react';

class CommentItemComponent extends Component {
    render() {
        return (
            <li>{this.props.comment}</li>
        );
    }
}

khanghoang

import React, {Component} from 'react';
import CommentItemComponent from './CommentItemComponent.js'

class ListCommentsComponent extends Component {
    render() {
        let comments = this.props.comments.map(c => <CommentItemComponent comment={c} />)
        return (
            <ul>
                {comments}
            </ul>

khanghoang

describe('<ListCommentsContainer />', () => {
    it('render enought list items', (done) => {
        let listCommentsContainer = mount(<ListCommentsContainer />);
        waitFor(() => {
            return listCommentsContainer.find('li').length === 5;
        }, done);
    });
});

khanghoang

class ListCommentsContainer extends Component {

    constructor(props) {
        super(props);
        this.state = {
            comments: [],
            isLoading: true
        }
    }

khanghoang

let waitsInProgress = [];
let message = `Timeout, it seems we don have the response from the async function`;
let waitFor = (testFunc, done, timeLeft = 2000) => {
    waitsInProgress.push(setTimeout(() => {
        if (timeLeft <= 0) {
            done(new Error(message));
        } else if (testFunc()) {
            done();
        } else {
            waitFor(testFunc, done, timeLeft - 10);