removed-map-from-initial-code

src/App.jsx

@@ -0,0 +1,103 @@
+/* eslint-disable import/order */
+import React, { useState } from 'react';
+
+import '@fortawesome/fontawesome-free/css/all.css';
+import 'bulma/css/bulma.css';
+import './App.scss';
+
+import peopleFromServer from './people.json';
+import { PeopleHeader } from './components/PeopleHeader';
+import { PeopleFilters } from './components/PeopleFilters';
+import { PeopleTable } from './components/PeopleTable';
+import { FILTERBYSEX, SORTBY } from './constants';
+
+function getFilteredPeople(people, sex, query) {
+  let filteredPeople = [...people];
+
+  if (query) {
+    const normalizedQuery = query.toLowerCase();
+
+    filteredPeople = filteredPeople.filter(person => (
+      person.name.toLowerCase().startsWith(normalizedQuery)
+    ));
+  }
+
+  if (sex !== 'all') {
+    filteredPeople = filteredPeople.filter(person => person.sex === sex);
+  }
+
+  return filteredPeople;
+}
+
+function sortPeople(people, sortBy) {
+  const sortedPeople = [...people];
+
+  if (!Object.keys(sortBy).length) {
+    return sortedPeople;
+  }
+
+  const [property] = Object.entries(sortBy);
+
+  const [key, value] = property;
+
+  switch (key) {
+    case SORTBY.BORN:
+      sortedPeople.sort((a, b) => {
+        return value === 'ASC'
+          ? a.born - b.born
+          : b.born - a.born;
+      });
+      break;
+
+    case SORTBY.NAME:
+    case SORTBY.SEX:
+      sortedPeople.sort((a, b) => {
+        return value === 'ASC'
+          ? a[key].localeCompare(b[key])
+          : b[key].localeCompare(a[key]);
+      });
+      break;
+
+    default:
+      return sortedPeople;
+  }
+
+  return sortedPeople;
+}
+
+export const App = () => {
+  const [selectedPeople, setSelectedPeople] = useState([]);
+  const [filterBy, setFilterBy] = useState(FILTERBYSEX.ALL);
+  const [query, setQuery] = useState('');
+  const [sortBy, setSortBy] = useState({});
+
+  const peopleForRendering = getFilteredPeople(
+    peopleFromServer, filterBy, query,
+  );
+  const visiblePeople = sortPeople(peopleForRendering, sortBy);
+
+  const selectedPeopleNames = selectedPeople.map(person => person.name)
+    .join(', ');
+
+  return (
+    <div className="box">
+      <PeopleHeader
+        selectedPeopleNames={selectedPeopleNames}
+      />
+
+      <PeopleFilters
+        filterBy={filterBy}
+        setFilterBy={setFilterBy}
+        setQuery={setQuery}
+      />
+
+      <PeopleTable
+        sortBy={sortBy}
+        setSortBy={setSortBy}
+        peopleToRender={visiblePeople}
+        selectedPeople={selectedPeople}
+        setSelectedPeople={setSelectedPeople}
+      />
+    </div>
+  );
+};

src/components/Button.jsx

@@ -0,0 +1,19 @@
+export const Button = ({
+  type = 'button',
+  onClick,
+  className = 'button',
+  children,
+  ...props
+}) => {
+  return (
+    <button
+      {...props}
+      // eslint-disable-next-line react/button-has-type
+      type={type}
+      onClick={onClick}
+      className={className}
+    >
+      {children}
+    </button>
+  );
+};

src/components/PeopleFilters.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import cn from 'classnames';
+import { Button } from './Button';
+import { FILTERBYSEX } from '../constants';
+
+export const PeopleFilters = ({
+  setFilterBy,
+  filterBy,
+  setQuery,
+}) => {
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setFilterBy(FILTERBYSEX.ALL);
+        }}
+        className={cn({
+          'has-text-danger': filterBy === FILTERBYSEX.ALL,
+        })}
+      >
+        all
+      </Button>
+
+      <Button
+        onClick={() => {
+          setFilterBy(FILTERBYSEX.M);
+        }}
+        className={cn({
+          'has-text-danger': filterBy === FILTERBYSEX.M,
+        })}
+      >
+        m
+      </Button>
+
+      <Button
+        onClick={() => {
+          setFilterBy(FILTERBYSEX.F);
+        }}
+        className={cn({
+          'has-text-danger': filterBy === FILTERBYSEX.F,
+        })}
+      >
+        f
+      </Button>
+
+      <input
+        type="search"
+        onChange={(event) => {
+          setQuery(event.target.value);
+        }}
+      />
+    </>
+  );
+};

src/components/PeopleHeader.jsx

@@ -0,0 +1,11 @@
+export const PeopleHeader = ({ selectedPeopleNames }) => {
+  return (
+    <h1 className="title">
+      {selectedPeopleNames.length === 0 ? (
+        'People table'
+      ) : (
+        `Selected person is ${selectedPeopleNames}`
+      )}
+    </h1>
+  );
+};

src/components/PeopleTable.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import cn from 'classnames';
+import { SORTBY } from '../constants';
+import { Button } from './Button';
+
+function isSelected(selected, current) {
+  return selected === current;
+}
+
+export const PeopleTable = ({
+  setSortBy,
+  sortBy,
+  peopleToRender,
+  selectedPeople,
+  setSelectedPeople,
+}) => (
+  <table className="table is-striped is-narrow">
+    <thead>
+      <th>
+        <Button
+          className={cn({
+            'has-background-warning': isSelected(
+              Object.keys(sortBy)[0],
+              SORTBY.NAME,
+            ),
+          })}
+          onClick={() => {
+            setSortBy({
+              [SORTBY.NAME]: sortBy[SORTBY.NAME] ? 'DESC' : 'ASC',
+            });
+          }}
+        >
+          name
+        </Button>
+      </th>
+      <th>
+        <Button
+          className={cn({
+            'has-background-warning': isSelected(
+              Object.keys(sortBy)[0],
+              SORTBY.SEX,
+            ),
+          })}
+          onClick={() => {
+            setSortBy({
+              [SORTBY.SEX]: sortBy[SORTBY.SEX] ? 'DESC' : 'ASC',
+            });
+          }}
+        >
+          sex
+        </Button>
+      </th>
+      <th>
+        <Button
+          className={cn({
+            'has-background-warning': isSelected(
+              Object.keys(sortBy)[0],
+              SORTBY.BORN,
+            ),
+          })}
+          onClick={() => {
+            setSortBy({
+              [SORTBY.BORN]: sortBy[SORTBY.BORN] ? 'DESC' : 'ASC',
+            });
+          }}
+        >
+          born
+        </Button>
+      </th>
+    </thead>
+
+    <tbody>
+      {peopleToRender.map((person) => {
+        const isPersonSelected = selectedPeople.includes(person);
+
+        return (
+          <tr
+            key={person.slug}
+            onClick={() => {
+              // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+              isPersonSelected
+                ? setSelectedPeople(selectedPeople.filter(p => (
+                  p.slug !== person.slug
+                )))
+                : setSelectedPeople([...selectedPeople, person]);
+            }}
+            className={cn({
+              'has-background-warning': isPersonSelected,
+            })}
+          >
+            <td>{person.name}</td>
+            <td
+              className={cn({
+                'has-text-danger': person.sex === 'f',
+                'has-text-link': person.sex === 'm',
+              })}
+            >
+              {person.sex}
+            </td>
+            <td>{person.born}</td>
+            {isSelected ? (
+              <Button>
+                <i className="fa-solid fa-skull-crossbones" />
+              </Button>
+            ) : (
+              <Button>
+                <i className="fa-solid fa-circle-plus" />
+              </Button>
+            )}
+          </tr>
+        );
+      })}
+    </tbody>
+  </table>
+);

src/constants.js

@@ -0,0 +1,11 @@
+export const FILTERBYSEX = {
+  ALL: 'all',
+  M: 'm',
+  F: 'f',
+};
+
+export const SORTBY = {
+  NAME: 'name',
+  SEX: 'sex',
+  BORN: 'born',
+};

src/index.tsx → src/index.jsx

@@ -2,7 +2,7 @@ import { createRoot } from 'react-dom/client';
 import { App } from './App';
 
 const root = createRoot(
-  document.getElementById('root') as HTMLDivElement,
+  document.getElementById('root'),
 );
 
 root.render(<App />);