Created API + Model, updated Container state with API and mapper auxiliary module

Author: arp82

02 create API and expose it in Container/src/api/index.ts

@@ -0,0 +1 @@
+export {fetchMemberList} from './memberApi';

02 create API and expose it in Container/src/api/memberApi.ts

@@ -0,0 +1,48 @@
+import { MemberEntity } from './model';
+
+const baseRoot = 'https://api.github.com/orgs/lemoncode';
+const membersURL = `${baseRoot}/members`
+
+export const fetchMemberList = () : Promise<MemberEntity[]> => {
+
+  return fetch(membersURL)
+            .then(checkStatus)
+            .then(parseJSON)
+            .then(resolveMembers)
+
+
+}
+
+// If we return a value that is not a "thennable", it is automatically
+// promoted to a promise, so we can keep chaining "then" class without
+// wrapping the returned values with Promise.resolve(...)
+const checkStatus = (response : Response) : Response => {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  } else {
+    let error = new Error(response.statusText);
+    throw error;
+  }
+}
+
+const parseJSON = (response : Response) : any => {
+  return response.json();
+}
+
+// This simplified syntax represents the following steps:
+// 1- First, we call our function for each entry in the "data" array
+// 2- For each of this objects, we then create 3 input varialbes (id, login, avatar_url)
+// using destructuring in the signature for the arrow function's arguments
+// 3- We create a new object with these 3 variables using the short syntax
+// for objects parameters (i.e. {id, login, avatar_url} equals {id:id, login: login,
+// avatar_url: avatar_url})
+// 4- Finally, we perform a "cast" of this object to MemberEntity TS interface 
+// (since our properties have the same names and types as the ones in the interface, 
+// we sort of "implement" it)
+const resolveMembers = (data : any) : MemberEntity[] => {
+  const members = data.map(
+    ({id, login, avatar_url,}) => ({ id, login, avatar_url, } as MemberEntity)
+  );
+
+  return members;
+}

02 create API and expose it in Container/src/api/model/index.ts

@@ -0,0 +1 @@
+export {MemberEntity} from './member';

02 create API and expose it in Container/src/api/model/member.ts

@@ -0,0 +1,5 @@
+export interface MemberEntity {
+    login: string;
+    id: number;
+    avatar_url: string;
+}

02 create API and expose it in Container/src/pages/members/container.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { MemberListPage } from './page';
 import { MemberEntity } from './viewModel';
+import { fetchMemberList } from '../../api';
+import { mapMemberListFromModelToVm } from './mapper';
 
 interface State {
   memberList : MemberEntity[];
@@ -14,22 +16,11 @@ export class MemberListContainer extends React.Component<{}, State> {
   }
 
   fetchMembers = () => {
-    setTimeout(() => {
+    fetchMemberList().then((memberList) => {
       this.setState({
-        memberList: [
-          {
-            id: 1,
-            name: 'John',
-            avatarUrl: 'https://avatars1.githubusercontent.com/u/1457912?v=4',
-          },
-          {
-            id: 2,
-            name: 'Martin',
-            avatarUrl: 'https://avatars2.githubusercontent.com/u/4374977?v=4',
-          },
-        ]
+        memberList: mapMemberListFromModelToVm(memberList),
       });
-    }, 500);
+    });
   }
 
   render() {

02 create API and expose it in Container/src/pages/members/mapper.ts

@@ -0,0 +1,14 @@
+import * as apiModel from '../../api/model';
+import * as vm from './viewModel';
+
+const mapMemberFromModelToVm = (member: apiModel.MemberEntity) : vm.MemberEntity => (
+    {
+        id: member.id,
+        avatarUrl: member.avatar_url,
+        name: member.login,
+    }
+)
+
+export const mapMemberListFromModelToVm = (memberList: apiModel.MemberEntity[]) : vm.MemberEntity[]  => (
+    memberList.map(mapMemberFromModelToVm)
+)