initial commit

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.tsx

@@ -1,39 +1,291 @@
-import React from 'react';
+import { useState } from 'react';
+import classNames from 'classnames';
 
 import '@fortawesome/fontawesome-free/css/all.css';
 import 'bulma/css/bulma.css';
-import './App.scss';
 
 import peopleFromServer from './people.json';
+import { Person } from './types/Person';
+import { Button } from './components/Button';
+import { SortLink } from './components/SortLink';
 
-export class App extends React.Component {
-  state = {};
-
-  render() {
-    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>
-      </div>
+export const App = () => {
+  const [people, setPeople] = useState<Person[]>(peopleFromServer);
+  const [selectedPeople, setSelectedPeople] = useState<Person[]>([]);
+  const [sortField, setSortField] = useState<keyof Person | ''>('');
+  const [isReversed, setReversed] = useState(false);
+  const [query, setQuery] = useState('');
+  const [sex, setSex] = useState('');
+
+  if (people.length === 0) {
+    return <p>No people yet</p>;
+  }
+
+  function isSelected({ slug }: Person) {
+    return selectedPeople.some(person => person.slug === slug);
+  }
+
+  const sortBy = (field: keyof Person) => {
+    const isFirstClick = sortField !== field;
+    const isSecondClick = sortField === field && !isReversed;
+
+    setSortField(isFirstClick || isSecondClick ? field : '');
+    setReversed(isSecondClick);
+  };
+
+  const selectPerson = (personToAdd: Person) => {
+    setSelectedPeople(current => [...current, personToAdd]);
+  };
+
+  const unselectPerson = (personToDelete: Person) => {
+    setSelectedPeople(current => current.filter(
+      person => person.slug !== personToDelete.slug,
+    ));
+  };
+
+  const clearSelection = () => {
+    setSelectedPeople([]);
+  };
+
+  const moveUp = (personToMove: Person) => {
+    setPeople(currentPeople => {
+      const position = currentPeople.findIndex(
+        person => person.slug === personToMove.slug,
+      );
+
+      if (position === 0) {
+        return currentPeople;
+      }
+
+      return [
+        ...currentPeople.slice(0, position - 1),
+        currentPeople[position],
+        currentPeople[position - 1],
+        ...currentPeople.slice(position + 1),
+      ];
+    });
+  };
+
+  const moveDown = (personToMove: Person) => {
+    setPeople(curentPeople => {
+      const position = curentPeople.findIndex(
+        person => person.slug === personToMove.slug,
+      );
+
+      if (position === curentPeople.length - 1) {
+        return curentPeople;
+      }
+
+      const updatedPeople = [...curentPeople];
+
+      updatedPeople[position] = curentPeople[position + 1];
+      updatedPeople[position + 1] = curentPeople[position];
+
+      return updatedPeople;
+    });
+  };
+
+  let visiblePeople = [...people];
+
+  if (sex) {
+    visiblePeople = visiblePeople.filter(person => person.sex === sex);
+  }
+
+  if (query) {
+    const lowerQuery = query.toLocaleLowerCase();
+
+    visiblePeople = visiblePeople.filter(person => {
+      const stringToCheck = `
+        ${person.name}
+        ${person.motherName || ''}
+        ${person.fatherName || ''}
+      `;
+
+      return stringToCheck
+        .toLocaleLowerCase()
+        .includes(lowerQuery);
+    });
+  }
+
+  if (sortField) {
+    visiblePeople.sort(
+      (a, b) => {
+        switch (sortField) {
+          case 'name':
+          case 'sex':
+          case 'motherName':
+          case 'fatherName': {
+            const aValue = a[sortField] || '';
+            const bValue = a[sortField] || '';
+
+            return aValue.localeCompare(bValue);
+          }
+
+          case 'born':
+            return a.born - b.born;
+
+          default:
+            return 0;
+        }
+      },
     );
   }
-}
+
+  if (isReversed) {
+    visiblePeople.reverse();
+  }
+
+  return (
+    <table className="table is-striped is-narrow">
+      <caption className="title is-5 has-text-info">
+        <p className="block">
+          {selectedPeople.length === 0 ? '-' : (
+            <>
+              {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+              <button
+                type="button"
+                className="delete"
+                onClick={clearSelection}
+              />
+              <span>{selectedPeople.map(p => p.name).join(', ')}</span>
+            </>
+          )}
+        </p>
+
+        <div className="field has-addons">
+          <div className="control has-icons-left is-expanded">
+            <input
+              className="input"
+              type="search"
+              placeholder="Search by name"
+              onChange={e => setQuery(e.target.value)}
+            />
+
+            <span className="icon is-small is-left">
+              <i className="fas fa-search" />
+            </span>
+          </div>
+        </div>
+
+        <div className="control">
+          <div className="select">
+            <select onChange={e => setSex(e.target.value)}>
+              <option value="">All</option>
+              <option value="f">Women</option>
+              <option value="m">Men</option>
+            </select>
+          </div>
+        </div>
+      </caption>
+
+      <thead>
+        <tr>
+          <th> </th>
+          <th>
+            name
+            <SortLink
+              isActive={sortField === 'name'}
+              isReversed={isReversed}
+              onClick={() => sortBy('name')}
+            />
+          </th>
+
+          <th>
+            sex
+            <SortLink
+              isActive={sortField === 'sex'}
+              isReversed={isReversed}
+              onClick={() => sortBy('sex')}
+            />
+          </th>
+
+          <th>
+            born
+            <SortLink
+              isActive={sortField === 'born'}
+              isReversed={isReversed}
+              onClick={() => sortBy('born')}
+            />
+          </th>
+
+          <th>
+            Mother
+            <SortLink
+              isActive={sortField === 'motherName'}
+              isReversed={isReversed}
+              onClick={() => sortBy('motherName')}
+            />
+          </th>
+
+          <th>
+            Father
+            <SortLink
+              isActive={sortField === 'fatherName'}
+              isReversed={isReversed}
+              onClick={() => sortBy('fatherName')}
+            />
+          </th>
+
+          <th> </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {visiblePeople.map(person => (
+          <tr
+            key={person.slug}
+            className={classNames({
+              'has-background-warning': isSelected(person),
+            })}
+          >
+            <td>
+              {isSelected(person) ? (
+                <Button
+                  onClick={() => unselectPerson(person)}
+                  className="is-small is-rounded is-danger"
+                >
+                  <span className="icon is-small">
+                    <i className="fas fa-minus" />
+                  </span>
+                </Button>
+              ) : (
+                <Button
+                  onClick={() => selectPerson(person)}
+                  className="is-small is-rounded is-success"
+                >
+                  <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>{person.motherName || ''}</td>
+            <td>{person.fatherName || ''}</td>
+
+            <td className="is-flex is-flex-wrap-nowrap">
+              <Button onClick={() => moveDown(person)}>
+                &darr;
+              </Button>
+
+              <Button onClick={() => moveUp(person)}>
+                &uarr;
+              </Button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

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/SortLink/SortLink.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import React from 'react';
+
+type Props = {
+  isActive: boolean;
+  isReversed: boolean;
+  onClick: () => void;
+};
+
+export const SortLink: React.FC<Props> = ({
+  isActive, isReversed, onClick,
+}) => (
+  <a href="#sort" onClick={onClick}>
+    <span className="icon">
+      <i
+        className={classNames('fas', {
+          'fa-sort': !isActive,
+          'fa-sort-up': isActive && !isReversed,
+          'fa-sort-down': isActive && isReversed,
+        })}
+      />
+    </span>
+  </a>
+);

src/components/SortLink/index.ts

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