basic_markup

.eslintrc.js

@@ -1,4 +1,3 @@
 module.exports = {
-  extends: "@mate-academy/eslint-config-react-typescript",
-  // extends: "@mate-academy/eslint-config-react",
+  extends: "@mate-academy/eslint-config-react",
 };

README.md

@@ -1,11 +1,11 @@
 # React - People table
 - Replace `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/react_people-table/)
+  [DEMO LINK](https://zarichnyi.github.io/react_people-table/)
 - Follow the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline)
 
 ## If you don't use **Typescript**
 1. Rename `.tsx` files to `.jsx`
-1. use `eslint-config-react` in `.eslintrs.js` 
+1. use `eslint-config-react` in `.eslintrs.js`
 
 ## Basic tasks
 1. Install all the NPM packages you need and types for them.

package.json

@@ -10,6 +10,7 @@
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.5",
+    "classnames": "^2.2.6",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/App.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
+import { Home } from './components/HomePage/Home';
+import { Peoples } from './components/PeoplePage/PeopleTable';
+import { PageNotFound } from './components/PageNotFound/PageNotFound';
+
+import './App.scss';
+
+const App = () => (
+  <div className="App">
+
+    <nav className="nav">
+      <ul className="nav__block">
+        <li className="nav__item">
+          <NavLink className="nav__link" to="/" exact>Home Page</NavLink>
+        </li>
+        <li className="nav__item">
+          <NavLink className="nav__link" to="/peoples">Peoples Page</NavLink>
+        </li>
+      </ul>
+    </nav>
+
+    <Switch>
+      <Route path="/" exact component={Home} />
+      <Route path="/home">
+        <Redirect to="/" />
+      </Route>
+      <Route path="/peoples" component={Peoples} />
+      <Route path="*" component={PageNotFound} />
+    </Switch>
+  </div>
+);
+
+export default App;

src/App.scss

@@ -1 +1,47 @@
 // styles go here
+ul {
+  list-style: none;
+}
+
+html {
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background-color: #7FDBFF;
+}
+
+#root {
+  margin: 0;
+}
+
+
+.App {
+  margin: 0;
+  padding: 0;
+}
+
+.nav {
+  display: flex;
+  justify-content: center;
+
+  &__block {
+    display: flex;
+    column-gap: 100px;
+  }
+
+  &__link {
+    color: #023e8a;
+    font-size: 30px;
+    text-decoration: none;
+    padding: 10px;
+    border-radius: 10px;
+    border:2px solid transparent;
+
+    &:hover {
+      border:2px solid black;
+    }
+  }
+}

src/api/GetPeople.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line max-len
+const peoples = 'https://mate-academy.github.io/react_people-table/api/people.json';
+
+export const getPeople = async() => {
+  const response = await fetch(peoples);
+  const people = response.json();
+
+  return people;
+};

src/components/HomePage/Home.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import './Home.scss';
+
+export const Home = () => (
+  <h1 className="title">Home Page</h1>
+);

src/components/HomePage/Home.scss

@@ -0,0 +1,3 @@
+.title {
+  text-align: center;
+}

src/components/PageNotFound/PageNotFound.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import './PageNotFound.scss';
+
+export const PageNotFound = () => (<h1 className="title"> PAGE NOT FOUND </h1>);

src/components/PageNotFound/PageNotFound.scss

@@ -0,0 +1,3 @@
+.title {
+  text-align: center;
+}

src/components/PeoplePage/PeopleList.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import classNames from 'classnames';
+import propTypes from 'prop-types';
+import { useLocation } from 'react-router-dom';
+import { PersonName } from '../PersonName/PersonName';
+import './PeopleStyle.scss';
+
+export const PeoplesList = ({ people }) => {
+  const location = useLocation();
+
+  const findParent = parentName => (
+    people.find(person => person.name === parentName)
+  );
+
+  return (
+    <>
+      {people.map((person) => {
+        const { slug, name, sex, born, died, motherName, fatherName } = person;
+
+        return (
+          <tr
+            key={person.name}
+            className={
+              classNames(
+                { selected: `/peoples/${slug}` === location.pathname },
+              )}
+          >
+            <td className="table__list-item">
+              <PersonName
+                name={name}
+                slug={slug}
+                sex={sex}
+              />
+            </td>
+            <td>{sex}</td>
+            <td>{born}</td>
+            <td>{died}</td>
+            <td>
+              {findParent(motherName)
+                ? (
+                  <PersonName
+                    name={motherName}
+                    slug={findParent(motherName).slug}
+                    sex={findParent(motherName).sex}
+                  />
+                )
+                : <>{motherName}</>
+              }
+            </td>
+            <td>
+              {findParent(fatherName)
+                ? (
+                  <PersonName
+                    name={fatherName}
+                    slug={findParent(fatherName).slug}
+                    sex={findParent(fatherName).sex}
+                  />
+                )
+                : <>{fatherName}</>
+              }
+            </td>
+          </tr>
+        );
+      })}
+    </>
+  );
+};

src/components/PeoplePage/PeopleStyle.scss

@@ -0,0 +1,34 @@
+.active {
+  background-color: #2a9d8f;
+}
+
+.title {
+  text-align: center;
+}
+
+.selected {
+  background-color: #06d6a0;
+}
+
+.table {
+  margin: 0 auto;
+  border-spacing: 0;
+
+  &__title-item {
+    padding: 10px;
+    background-color: #0077b6;
+    font-size: 18px;
+  }
+
+  &__list-item {
+    padding: 15px 0;
+  }
+
+  &__name-male {
+    color: #0077b6;
+  }
+
+  &__name-female {
+    color: #dc2f02;
+  }
+}

src/components/PeoplePage/PeopleTable.jsx

@@ -0,0 +1,59 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import * as api from '../../api/GetPeople';
+import { PeoplesList } from './PeopleList';
+import { SearchInput } from '../SearchSection/SearchInput';
+
+export const Peoples = () => {
+  const [people, setPeople] = useState('');
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const getUrlQuery = searchParams.get('query');
+
+  const tableTitle = ['Name', 'Sex', 'Born', 'Died', 'Mother', 'Father'];
+
+  useEffect(() => {
+    api.getPeople().then((peopleFromServer) => {
+      setPeople(peopleFromServer);
+      localStorage.setItem('people', JSON.stringify(peopleFromServer));
+    });
+  }, []);
+
+  useEffect(() => {
+    if (getUrlQuery) {
+      setPeople(JSON.parse(localStorage.getItem('people')).filter((person) => {
+        const { name, motherName, fatherName } = person;
+
+        return (name.toLowerCase().includes(getUrlQuery)
+          || (motherName && motherName.toLowerCase().includes(getUrlQuery))
+          || (fatherName && fatherName.toLowerCase().includes(getUrlQuery))
+        );
+      }));
+    } else {
+      setPeople(JSON.parse(localStorage.getItem('people')));
+    }
+  }, [getUrlQuery]);
+
+  return (
+    <>
+      <h1 className="title">Peoples Page</h1>
+      <SearchInput />
+      <table className="table">
+        <thead className="table__title">
+          <tr>
+            {tableTitle.map(item => (
+              <th className="table__title-item" key={item}>{item}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {people
+            ? <PeoplesList people={[...people]} />
+            : 'Loading...'
+          }
+        </tbody>
+      </table>
+    </>
+  );
+};

src/components/PersonName/PersonName.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+import './PersonName.scss';
+
+export const PersonName = ({ name, slug, sex }) => {
+
+  return (
+    <Link
+      className={classNames('table__list-link',
+        { 'table__name-male': sex === 'm' },
+        { 'table__name-female': sex === 'f' })
+      }
+      to={{ pathname: `/peoples/${slug}` }}
+    >
+      { name}
+    </Link>
+  );
+};

src/components/PersonName/PersonName.scss

@@ -0,0 +1,6 @@
+.table {
+  &__list-link {
+    text-decoration: none;
+    font-size: 18px;
+  }
+}

src/components/SearchSection/SearchInput.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import './SearchInput.scss';
+
+export const SearchInput = () => {
+  const history = useHistory();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const query = searchParams.get('query') || '';
+
+  return (
+    <div className="search_person_block">
+      <input
+        className="search_person_input"
+        placeholder="Find person"
+        type="text"
+        value={query}
+        onChange={(event) => {
+          searchParams.set('query', (event.target.value).toLocaleLowerCase());
+          history.push({
+            search: searchParams.toString() === 'query='
+              ? ''
+              : searchParams.toString(),
+          });
+        }}
+      />
+    </div>
+  );
+};

src/components/SearchSection/SearchInput.scss

@@ -0,0 +1,12 @@
+.search_person_block {
+  display: flex;
+  justify-content: center;
+}
+
+.search_person_input {
+  width: 30em;
+  height: 2em;
+  border-color: blue;
+  outline: none;
+  padding: 5px;
+}