[Lesson]: lesson code

src/App.scss

@@ -2,3 +2,7 @@
 iframe {
   display: none;
 }
+
+.selected {
+  background-color: red;
+}

src/App.tsx

@@ -3,36 +3,88 @@ import React from 'react';
 import '@fortawesome/fontawesome-free/css/all.css';
 import 'bulma/css/bulma.css';
 import './App.scss';
+import { getPeopleFromServer } from './api';
+import { Person } from './types/Person';
+import { PeoplesTable } from './PeoplesTable';
+import { Loader } from './Loader';
 
-import peopleFromServer from './people.json';
+const MOCK_LOADING_TIME = 1000;
 
-export class App extends React.Component {
-  state = {};
+type State = {
+  peopleFromServer: Person[];
+  isError: boolean;
+  isLoading: boolean;
+};
+
+export class App extends React.Component<{}, State> {
+  state: State = {
+    peopleFromServer: [],
+    isError: false,
+    isLoading: false,
+  };
+
+  componentDidMount() {
+    this.setState({
+      isLoading: true,
+    });
+
+    const people = getPeopleFromServer();
+
+    if (!people) {
+      setTimeout(
+        () => {
+          this.setState({
+            isError: true,
+            isLoading: false,
+          });
+        },
+        MOCK_LOADING_TIME,
+      );
+
+      return;
+    }
+
+    setTimeout(
+      () => {
+        this.setState({
+          peopleFromServer: people,
+          isLoading: false,
+        });
+      },
+      MOCK_LOADING_TIME,
+    );
+  }
 
   render() {
+    const {
+      peopleFromServer,
+      isLoading,
+      isError,
+    } = this.state;
+
+    const isNoUsers = peopleFromServer.length === 0
+      && !isLoading
+      && !isError;
+
     return (
       <div className="box">
         <h1 className="title">People table</h1>
 
-        <table className="table is-striped is-narrow">
-          <thead>
-            <tr>
-              <th>name</th>
-              <th>sex</th>
-              <th>born</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            {peopleFromServer.map(person => (
-              <tr key={person.slug}>
-                <td>{person.name}</td>
-                <td>{person.sex}</td>
-                <td>{person.born}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        {isError && (
+          <p>Sorry, an error occurred</p>
+        )}
+
+        {isLoading && (
+          <Loader />
+        )}
+
+        {isNoUsers && (
+          <p>No users.</p>
+        )}
+
+        {peopleFromServer.length > 0 && (
+          <PeoplesTable peopleToDisplay={peopleFromServer} />
+        )}
       </div>
     );
   }

src/Loader.tsx

@@ -0,0 +1,3 @@
+export const Loader: React.FC = () => (
+  <p>Loading...</p>
+);

src/PeoplesTable.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { PersonFromTable } from './PersonFromTable';
+import { Person } from './types/Person';
+
+type Props = {
+  peopleToDisplay: Person[];
+};
+
+type State = {
+  selectedPersonSlug: string;
+};
+
+export class PeoplesTable extends React.Component<Props, State> {
+  state: State = {
+    selectedPersonSlug: '',
+  };
+
+  handleSelectPerson = (personSlug: string) => {
+    this.setState({
+      selectedPersonSlug: personSlug,
+    });
+  };
+
+  render() {
+    const {
+      peopleToDisplay,
+    } = this.props;
+
+    const {
+      selectedPersonSlug,
+    } = this.state;
+
+    return (
+      <table className="table is-narrow">
+        <thead>
+          <tr>
+            <th>name</th>
+            <th>sex</th>
+            <th>born</th>
+            <th>select</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {peopleToDisplay.map(person => (
+            <PersonFromTable
+              key={person.slug}
+              selectPerson={this.handleSelectPerson}
+              person={person}
+              className={
+                selectedPersonSlug === person.slug
+                  ? 'selected'
+                  : ''
+              }
+            />
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}

src/PersonFromTable.tsx

@@ -0,0 +1,29 @@
+import { Person } from './types/Person';
+
+type Props = {
+  person: Person;
+  selectPerson: (personSlug: string) => void;
+  className?: string;
+};
+
+export const PersonFromTable: React.FC<Props> = ({
+  person,
+  selectPerson,
+  className,
+}) => (
+  <tr className={className}>
+    <td>{person.name}</td>
+    <td>{person.sex}</td>
+    <td>{person.born}</td>
+    <td>
+      <button
+        type="button"
+        onClick={() => {
+          selectPerson(person.slug);
+        }}
+      >
+        Select
+      </button>
+    </td>
+  </tr>
+);

src/api.ts

@@ -0,0 +1,5 @@
+import peopleFromServer from './people.json';
+
+export const getPeopleFromServer = () => {
+  return peopleFromServer;
+};