11 Table axios migrated

Author: brauliodiez

hooks/11_TableAxios/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      }
+    ]
+  ]
+}

hooks/11_TableAxios/Readme.md

@@ -0,0 +1,76 @@
+# 11 Table fetch
+
+In this sample we are going to update the previous sampe (mock table) and instead of
+returning mock data, return real data from the github rest api.
+
+# Steps to reproduce the sample
+
+- We will take as starting point sample _10 tableMock_, let's copy the content from this
+  sample and execute _npm install_.
+
+```bash
+npm install
+```
+
+- To retrieve data from the Github REST api we will make use of axios, let's install the package
+  (no need to install typing, they are already included in the library).
+
+```bash
+npm install axios --save
+```
+
+- Time to open the _memberApi_ file and replace the mock data with a real api call.
+
+_./src/api/memberApi.ts_
+
+```diff
+import { MemberEntity } from "../model/member";
++ import Axios, { AxiosResponse } from 'axios';
+
++ const gitHubURL = 'https://api.github.com';
++ const gitHubMembersUrl = `${gitHubURL}/orgs/lemoncode/members`;
+
+export const getMembersCollection = (): Promise<MemberEntity[]> => {
+  const promise = new Promise<MemberEntity[]>((resolve, reject) => {
++    try {
++      Axios.get<MemberEntity[]>(gitHubMembersUrl)
++        .then(response => resolve(mapMemberListApiToModel(response)));
++    } catch (ex) {
++      reject(ex);
++    }
+-    setTimeout(
+-      () =>
+-        resolve([
+-          {
+-            id: 1457912,
+-            login: "brauliodiez",
+-            avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3"
+-          },
+-          {
+-            id: 4374977,
+-            login: "Nasdan",
+-            avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3"
+-          }
+-        ]),
+-      500
+-    );
+  });
+
+  return promise;
+};
+
++ const mapMemberListApiToModel = ({data}: AxiosResponse<any[]>): MemberEntity[] =>
++  data.map(gitHubMember => ({
++    id: gitHubMember.id,
++    login: gitHubMember.login,
++    avatar_url: gitHubMember.avatar_url
++  }));
+```
+
+- Aaaand... we don't need to add any update on the rest of the application, why?
+  The function is providing the same contract it returns a promise<MemberEntity[]>,
+  let's give a try:
+
+```bash
+npm start
+```

hooks/11_TableAxios/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-typescript-by-sample",
+  "version": "1.0.0",
+  "description": "React Typescript examples",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server  --mode development --inline --hot --open",
+    "build": "webpack  --mode development"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "hooks"
+  ],
+  "author": "Braulio Diez Botella",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.3.1",
+    "@types/node": "^11.9.4",
+    "@types/react": "^16.8.3",
+    "@types/react-dom": "^16.8.1",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "style-loader": "^0.23.1",
+    "typescript": "^3.3.3",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2"
+  }
+}

hooks/11_TableAxios/src/api/memberApi.ts

@@ -0,0 +1,28 @@
+import { MemberEntity } from "../model/member";
+import Axios, { AxiosResponse } from "axios";
+
+const gitHubURL = "https://api.github.com";
+const gitHubMembersUrl = `${gitHubURL}/orgs/lemoncode/members`;
+
+export const getMembersCollection = (): Promise<MemberEntity[]> => {
+  const promise = new Promise<MemberEntity[]>((resolve, reject) => {
+    try {
+      Axios.get<MemberEntity[]>(gitHubMembersUrl).then(response =>
+        resolve(mapMemberListApiToModel(response))
+      );
+    } catch (ex) {
+      reject(ex);
+    }
+  });
+
+  return promise;
+};
+
+const mapMemberListApiToModel = ({
+  data
+}: AxiosResponse<any[]>): MemberEntity[] =>
+  data.map(gitHubMember => ({
+    id: gitHubMember.id,
+    login: gitHubMember.login,
+    avatar_url: gitHubMember.avatar_url
+  }));

hooks/11_TableAxios/src/app.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import {
+  HelloComponent,
+  NameEditComponent,
+  ColorBrowser,
+  ColorPicker,
+  SidebarComponent,
+  MemberTableComponent
+} from "./components";
+import { Color } from "./model/color";
+
+export const App = () => {
+  const [name, setName] = React.useState("defaultUserName");
+  const [editingName, setEditingName] = React.useState("defaultUserName");
+  const [color, setColor] = React.useState<Color>({
+    red: 20,
+    green: 40,
+    blue: 180
+  });
+  const [isVisible, setVisible] = React.useState(false);
+
+  const loadUsername = () => {
+    setTimeout(() => {
+      setName("name from async call");
+      setEditingName("name from async call");
+    }, 500);
+  };
+
+  React.useEffect(() => {
+    loadUsername();
+  }, []);
+
+  const setUsernameState = () => {
+    setName(editingName);
+  };
+
+  return (
+    <>
+      <SidebarComponent isVisible={isVisible}>
+        <h1>Cool Scfi movies</h1>
+        <ul>
+          <li>
+            <a href="https://www.imdb.com/title/tt0816692/">Interstellar</a>
+          </li>
+          <li>
+            <a href="https://www.imdb.com/title/tt0083658/">Blade Runner</a>
+          </li>
+          <li>
+            <a href="https://www.imdb.com/title/tt0062622/">
+              2001: a space odyssey
+            </a>
+          </li>
+        </ul>
+      </SidebarComponent>
+      <MemberTableComponent />
+      <ColorBrowser color={color} />
+      <ColorPicker color={color} onColorUpdated={setColor} />
+      <HelloComponent userName={name} />
+      <NameEditComponent
+        initialUserName={name}
+        editingName={editingName}
+        onNameUpdated={setUsernameState}
+        onEditingNameUpdated={setEditingName}
+        disabled={editingName === "" || editingName === name}
+      />
+      <div style={{ float: "right" }}>
+        <button onClick={() => setVisible(!isVisible)}>Toggle Sidebar</button>
+      </div>
+    </>
+  );
+};

hooks/11_TableAxios/src/components/colorBrowser.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Color } from "../model/color";
+
+interface Props {
+  color: Color;
+}
+
+export const ColorBrowser = (props: Props) => {
+  const divStyle: React.CSSProperties = {
+    width: "11rem",
+    height: "7rem",
+    backgroundColor: `rgb(${props.color.red},${props.color.green}, ${
+      props.color.blue
+    })`
+  };
+
+  return <div style={divStyle} />;
+};

hooks/11_TableAxios/src/components/colorPicker.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Color } from "../model/color";
+
+interface Props {
+  color: Color;
+  onColorUpdated: (color: Color) => void;
+}
+
+const updateColor = (props: Props, colorId: keyof Color) => value => {
+  // keyof Color ensures only 'red', 'blue' or 'green' can be passed in.
+  props.onColorUpdated({
+    ...props.color, // this creates a clone of the current props.color object...
+    [colorId]: value // ... which gets one of its properties (colorId) immediately replaced by a new value.
+  });
+};
+
+export const ColorPicker = (props: Props) => (
+  <div>
+    <ColorSliderComponent
+      value={props.color.red}
+      onValueUpdated={updateColor(props, "red")}
+    />
+    <br />
+    <ColorSliderComponent
+      value={props.color.green}
+      onValueUpdated={updateColor(props, "green")}
+    />
+    <br />
+    <ColorSliderComponent
+      value={props.color.blue}
+      onValueUpdated={updateColor(props, "blue")}
+    />
+    {props.color.blue}
+    <br />
+  </div>
+);
+
+interface PropsColorSlider {
+  value: number;
+  onValueUpdated: (newValue: number) => void;
+}
+
+const ColorSliderComponent = (props: PropsColorSlider) => {
+  return (
+    <div>
+      <input
+        type="range"
+        min="0"
+        max="255"
+        value={props.value}
+        onChange={event => props.onValueUpdated(+event.target.value)}
+      />
+      {props.value}
+    </div>
+  );
+};

hooks/11_TableAxios/src/components/hello.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+interface Props {
+  userName: string;
+}
+
+export const HelloComponent = (props: Props) => {
+  return <h2>Hello user: {props.userName} !</h2>;
+};

hooks/11_TableAxios/src/components/index.tsx

@@ -0,0 +1,6 @@
+export * from "./hello";
+export * from "./nameEdit";
+export * from "./colorBrowser";
+export * from "./colorPicker";
+export * from "./sidebar";
+export * from "./memberTable";

hooks/11_TableAxios/src/components/memberTable.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { MemberEntity } from "../model/member";
+import { getMembersCollection } from "../api/memberApi";
+
+const useMemberCollection = () => {
+  const [memberCollection, setMemberCollection] = React.useState<
+    MemberEntity[]
+  >([]);
+
+  const loadMemberCollection = () => {
+    getMembersCollection().then(memberCollection =>
+      setMemberCollection(memberCollection)
+    );
+  };
+
+  return { memberCollection, loadMemberCollection };
+};
+
+export const MemberTableComponent = () => {
+  const { memberCollection, loadMemberCollection } = useMemberCollection();
+
+  React.useEffect(() => {
+    loadMemberCollection();
+  }, []);
+
+  return (
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th>Avatar</th>
+            <th>Id</th>
+            <th>Name</th>
+          </tr>
+        </thead>
+        <tbody>
+          {memberCollection.map(member => (
+            <MemberRow key={member.id} member={member} />
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+const MemberRow = ({ member }: { member: MemberEntity }) => (
+  <tr>
+    <td>
+      <img src={member.avatar_url} style={{ maxWidth: "10rem" }} />
+    </td>
+    <td>
+      <span>{member.id}</span>
+    </td>
+    <td>
+      <span>{member.login}</span>
+    </td>
+  </tr>
+);