add SelectedPeople and PeopleList components

package.json

@@ -19,7 +19,7 @@
     "@cypress/webpack-dev-server": "^1.8.4",
     "@mate-academy/cypress-tools": "^1.0.4",
     "@mate-academy/eslint-config-react-typescript": "^1.0.11",
-    "@mate-academy/scripts": "^1.2.3",
+    "@mate-academy/scripts": "^1.2.8",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^17.0.45",

src/App.scss

@@ -2,3 +2,11 @@
 iframe {
   display: none;
 }
+
+button {
+  cursor: pointer;
+}
+
+tr {
+  transition: 0.3s background-color;
+}

src/App.tsx

@@ -1,39 +1,28 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import '@fortawesome/fontawesome-free/css/all.css';
 import 'bulma/css/bulma.css';
 import './App.scss';
 
-import peopleFromServer from './people.json';
+import { Loader } from './components/Loader';
+import { PeopleList } from './components/PeopleList';
 
-export class App extends React.Component {
-  state = {};
+export const App: React.FC = () => {
+  const [isLoaded, setIsLoaded] = useState(false);
 
-  render() {
-    return (
-      <div className="box">
-        <h1 className="title">People table</h1>
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoaded(true);
+    }, 1000);
+  }, []);
 
-        <table className="table is-striped is-narrow">
-          <thead>
-            <tr>
-              <th>name</th>
-              <th>sex</th>
-              <th>born</th>
-            </tr>
-          </thead>
+  return (
+    <div className="box">
+      <h1 className="title">People table</h1>
 
-          <tbody>
-            {peopleFromServer.map(person => (
-              <tr key={person.slug}>
-                <td>{person.name}</td>
-                <td>{person.sex}</td>
-                <td>{person.born}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
+      {isLoaded
+        ? <PeopleList />
+        : <Loader />}
+    </div>
+  );
+};

src/components/Button/Button.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  children: React.ReactNode;
+};
+
+export const Button: React.FC<Props> = ({ children, className, ...props }) => (
+  <button
+    type="button"
+    className={`button ${className}`}
+    {...props}
+  >
+    {children}
+  </button>
+);

src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

src/components/PeopleList/PeopleList.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { Person } from '../../types/Person';
+import peopleFromServer from '../../people.json';
+import { SelectedPeople } from '../SelectedPeople';
+import { PeopleTable } from '../PeopleTable';
+import { SortField } from '../../types/SortFields';
+
+function sortByField(items: Person[], field: SortField) {
+  return [...items].sort((personA, personB) => {
+    switch (field) {
+      case SortField.Born:
+      case SortField.Died:
+        return personA[field] - personB[field];
+
+      case SortField.Name:
+      case SortField.Slug:
+        return personA[field].localeCompare(personB[field]);
+
+      default:
+        return 0;
+    }
+  });
+}
+
+export const PeopleList: React.FC<{}> = () => {
+  const [people, setPeople] = useState<Person[]>(peopleFromServer);
+
+  const moveDown = (person: Person) => {
+    setPeople(currentPeople => {
+      const peopleCopy = [...currentPeople];
+
+      const personIndex = peopleCopy.findIndex(
+        personA => personA.slug === person.slug,
+      );
+
+      if (personIndex === peopleCopy.length - 1) {
+        return currentPeople;
+      }
+
+      peopleCopy[personIndex + 1] = person;
+      peopleCopy[personIndex] = currentPeople[personIndex + 1];
+
+      return peopleCopy;
+    });
+  };
+
+  const moveUp = (person: Person) => {
+    setPeople(currentPeople => {
+      const peopleCopy = [...currentPeople];
+
+      const personIndex = peopleCopy.findIndex(
+        personA => personA.slug === person.slug,
+      );
+
+      if (personIndex === 0) {
+        return currentPeople;
+      }
+
+      peopleCopy[personIndex - 1] = person;
+      peopleCopy[personIndex] = currentPeople[personIndex - 1];
+
+      return peopleCopy;
+    });
+  };
+
+  const selectionToggler = (personId: string) => {
+    setPeople(currentPeople => (
+      currentPeople.map(person => {
+        if (person.id === personId) {
+          return {
+            ...person,
+            selected: !person.selected,
+          };
+        }
+
+        return person;
+      })
+    ));
+  };
+
+  const clearSelectedPeople = () => {
+    setPeople(currentPeople => (
+      currentPeople.map(person => ({
+        ...person,
+        selected: false,
+      }))
+    ));
+  };
+
+  const sortPeople = (field: SortField) => {
+    setPeople(currentPeople => (
+      sortByField(currentPeople, field)
+    ));
+  };
+
+  if (people.length === 0) {
+    return (
+      <p>No people data yet</p>
+    );
+  }
+
+  return (
+    <>
+      <SelectedPeople
+        people={people}
+        clearSelectedPeople={clearSelectedPeople}
+      />
+
+      <PeopleTable
+        people={people}
+        moveDown={moveDown}
+        moveUp={moveUp}
+        selectionToggler={selectionToggler}
+        sortPeople={sortPeople}
+      />
+    </>
+  );
+};

src/components/PeopleList/index.ts

@@ -0,0 +1 @@
+export * from './PeopleList';

src/components/PeopleTable/PeopleTable.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import cn from 'classnames';
+import { Button } from '../Button';
+import { SortField } from '../../types/SortFields';
+import { Person } from '../../types/Person';
+
+type Props = {
+  people: Person[];
+  moveUp: (person: Person) => void;
+  moveDown: (person: Person) => void;
+  selectionToggler: (personId: string) => void;
+  sortPeople: (field: SortField) => void;
+};
+
+export const PeopleTable: React.FC<Props> = ({
+  people,
+  moveUp,
+  moveDown,
+  selectionToggler,
+  sortPeople,
+}) => (
+  <table className="table is-striped is-narrow">
+    <thead>
+      <tr>
+        <th>select</th>
+        <th>
+          name
+
+          <a
+            href="#sort"
+            onClick={() => sortPeople(SortField.Name)}
+          >
+            <span className="icon">
+              <i className="fas fa-sort" />
+            </span>
+          </a>
+        </th>
+        <th>sex</th>
+        <th>born</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      {people.map(person => (
+        <tr
+          key={person.slug}
+          className={cn({
+            'has-background-warning': person.selected,
+          })}
+        >
+          <td>
+            <Button
+              className={cn({
+                'is-danger': person.selected,
+                'is-success': !person.selected,
+              })}
+              onClick={() => selectionToggler(person.id)}
+            >
+              <span className="icon is-small">
+                <i className={
+                  cn('fas', {
+                    'fa-minus': person.selected,
+                    'fa-plus': !person.selected,
+                  })
+                }
+                />
+              </span>
+            </Button>
+          </td>
+          <td
+            className={cn({
+              'has-text-link': person.sex === 'm',
+              'has-text-danger': person.sex === 'f',
+            })}
+          >
+            {person.name}
+          </td>
+          <td>{person.sex}</td>
+          <td>{person.born}</td>
+          <td>
+            <button
+              type="button"
+              onClick={() => moveDown(person)}
+            >
+              &darr;
+            </button>
+          </td>
+
+          <td>
+            <button
+              type="button"
+              onClick={() => moveUp(person)}
+            >
+              &uarr;
+            </button>
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);

src/components/PeopleTable/index.ts

@@ -0,0 +1 @@
+export * from './PeopleTable';

src/components/SelectedPeople/SelectedPeople.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Person } from '../../types/Person';
+
+type Props = {
+  people: Person[];
+  clearSelectedPeople: () => void;
+};
+
+export const SelectedPeople: React.FC<Props> = ({
+  people,
+  clearSelectedPeople,
+}) => {
+  const selectedPeople = people.filter(person => person.selected);
+
+  if (selectedPeople.length === 0) {
+    return (
+      <p>
+        No selected people
+      </p>
+    );
+  }
+
+  return (
+    <article className="title is-5 has-text-info">
+      <button
+        aria-label="Remove"
+        type="button"
+        className="delete"
+        onClick={clearSelectedPeople}
+      />
+
+      <ul>
+        {selectedPeople.map(person => (
+          <li key={person.id}>{person.name}</li>
+        ))}
+      </ul>
+    </article>
+  );
+};

src/components/SelectedPeople/index.ts

@@ -0,0 +1 @@
+export * from './SelectedPeople';