readme.md

12 Table Http

Let's move forward with the table sample, this time we are going to replace the mock data by real one.

We will take a startup point sample 11 TableMock:

Summary steps:

• Configure transpilation and add extra transpile step babel >> es5.
• Update API in order to work with promises and fetch data from Github API.
• Update the tableComponent in order to show this data.

Prerequisites

Install Node.js and npm (v6.6.0 or newer) if they are not already installed on your computer.

Verify that you are running at least node v6.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions may produce errors.

Steps to build it

• Copy the content from 11 TableMock and execute:

  npm install
  

• Let's remove the file mermberMockData.ts in src/api directory.

• Just to provide support to old browsers let's install the following libraries:

npm install whatwg-fetch --save-dev

• In webpack.config.js let's add the new whatwg-fetch polyfill as entry point:

webpack.config.js

entry: ['@babel/polyfill',
+        'whatwg-fetch',
        './main.tsx'
],

• Let's replace memberAPI load members with the fetch / promise one:

./src/api/memberAPI.ts

import { MemberEntity } from '../model/member';

// Sync mock data API, inspired from:
// https://gist.github.com/coryhouse/fd6232f95f9d601158e4
class MemberAPI {

  // Just return a copy of the mock data
  getAllMembers() : Promise<MemberEntity[]> {
    const gitHubMembersUrl : string = 'https://api.github.com/orgs/lemoncode/members';

    return fetch(gitHubMembersUrl)
      .then((response) => this.checkStatus(response))
      .then((response) => this.parseJSON(response))
      .then((data) => this.resolveMembers(data));
  }

  private checkStatus(response : Response) : Promise<Response> {
    if (response.status >= 200 && response.status < 300) {
      return Promise.resolve(response);
    } else {
      let error = new Error(response.statusText);
      throw error;
    }
  }

  private parseJSON(response : Response) : any {
    return response.json();
  }

  private resolveMembers (data : any) : Promise<MemberEntity[]> {
    const members = data.map((gitHubMember) => {
      var member : MemberEntity = {
        id: gitHubMember.id,
        login: gitHubMember.login,
        avatar_url: gitHubMember.avatar_url,
      };

      return member;
    });

    return Promise.resolve(members);
  }
}

export const memberAPI = new MemberAPI();

• Add a new component memberHead to create the table's header:

./src/memberHead.tsx

import * as React from 'react';
import { MemberEntity } from './model/member';

export const MemberHead = () =>
    <tr>
        <th>
            Avatar
        </th>
        <th>
            Id
        </th>
        <th>
            Name
        </th>
    </tr>

• Now it's time to update our membersTable component.
  

./src/membersTable.tsx

• Import the new component:

+ import { MemberHead } from './memberHead';

• Modify the render function:

-<thead>
- <tr>
-    <th>
-      Avatar
-    </th>
-   <th>
-      Id
-    </th>
-    <th>
-      Name
-    </th>
-  </tr>
- </thead>
+ <thead>
+    <MemberHead />
+ </thead>

• Let's consume the new promise base method to retrieve the users:

// Standard react lifecycle function:
// https://facebook.github.io/react/docs/component-specs.html
public componentDidMount() {
-  this.setState({members: memberAPI.getAllMembers()})
+  memberAPI.getAllMembers().then((members) =>
+    this.setState({members: members})
+  );
}

• Let's give a try and check the results

npm start