React People table

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 { PeopleTable } from './components/PeopleTable';
 
-export class App extends React.Component {
-  state = {};
+export const App: React.FC = () => {
+  const [isLoaded, setLoading] = useState(false);
 
-  render() {
-    return (
-      <div className="box">
-        <h1 className="title">People table</h1>
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(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
+        ? <PeopleTable />
+        : <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/PeopleTable/PeopleTable.tsx

@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { Person } from '../../types/Person';
+import { Button } from '../Button';
+import peopleFromServer from '../../people.json';
+
+enum SortField {
+  Name = 'name',
+  Slug = 'slug',
+  Born = 'born',
+  Died = 'died',
+  Null = 'null',
+}
+
+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 PeopleTable: React.FC<{}> = () => {
+  const [people, setPeople] = useState<Person[]>(peopleFromServer);
+  const [selectedPeople, setSelectedPeople] = useState<Person[]>([]);
+  const [sortField, setSortField] = useState<SortField>(SortField.Null);
+
+  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 selectPerson = (person: Person) => {
+    setSelectedPeople(currentPeople => [...currentPeople, person]);
+  };
+
+  const unselectPerson = (person: Person) => {
+    setSelectedPeople((currentPeople) => (
+      currentPeople.filter(
+        selectedPerson => selectedPerson.slug !== person.slug,
+      )
+    ));
+  };
+
+  const clearSelectedPeople = () => {
+    setSelectedPeople([]);
+  };
+
+  const isPersonSelected = (person: Person) => {
+   return selectedPeople.some(
+      selectedPerson => selectedPerson.slug === person.slug,
+    );
+  };
+
+  const visiblePeople = sortByField(people, sortField);
+
+  if (people.length === 0) {
+    return (
+      <p>No people data yet</p>
+    );
+  }
+
+  return (
+    <table className="table is-striped is-narrow">
+      <caption className="title is-5 has-text-info">
+        {selectedPeople.length > 0 && (
+          <button
+            aria-label="Remove"
+            type="button"
+            className="delete"
+            onClick={clearSelectedPeople}
+          />
+        )}
+
+        {selectedPeople.map(person => person.name).join(', ') || '-'}
+      </caption>
+
+      <thead>
+        <tr>
+          <th>select</th>
+          <th>
+            name
+
+            <a
+              href="#sort"
+              onClick={() => setSortField(SortField.Name)}
+            >
+              <span className="icon">
+                <i className="fas fa-sort" />
+              </span>
+            </a>
+          </th>
+          <th>sex</th>
+          <th>born</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {visiblePeople.map(person => (
+          <tr
+            key={person.slug}
+            className={classNames({
+              'has-background-warning': isPersonSelected(person),
+            })}
+          >
+            <td>
+              {isPersonSelected(person)
+                ? (
+                  <Button
+                    className="is-danger"
+                    onClick={() => unselectPerson(person)}
+                  >
+                    <span className="icon is-small">
+                      <i className="fas fa-minus" />
+                    </span>
+                  </Button>
+                )
+                : (
+                  <Button
+                    className="is-success"
+                    onClick={() => selectPerson(person)}
+                  >
+                    <span className="icon is-small">
+                      <i className="fas fa-plus" />
+                    </span>
+                  </Button>
+                )}
+            </td>
+            <td
+              className={classNames({
+                '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';