From a147d2440fd695499313a3bd7fecc654ed40cb47 Mon Sep 17 00:00:00 2001
From: Oksana Drozdyk <oksanadrozdik66@gmail.com>
Date: Fri, 13 Oct 2023 12:55:29 +0300
Subject: [PATCH] add main tasks solution

---
 src/App.jsx                                   | 331 +++++-------------
 .../FilterByInput/FilterByInput.jsx           |  33 ++
 .../FilterUserList/FilterUserList.jsx         |  16 +
 src/components/Product/Product.jsx            |  31 ++
 src/components/ProductList/ProductList.jsx    |   5 +
 src/components/Table/Table.jsx                |  15 +
 src/components/TableHead/TableHead.jsx        |  53 +++
 src/utils.js                                  |  55 +++
 8 files changed, 305 insertions(+), 234 deletions(-)
 create mode 100644 src/components/FilterByInput/FilterByInput.jsx
 create mode 100644 src/components/FilterUserList/FilterUserList.jsx
 create mode 100644 src/components/Product/Product.jsx
 create mode 100644 src/components/ProductList/ProductList.jsx
 create mode 100644 src/components/Table/Table.jsx
 create mode 100644 src/components/TableHead/TableHead.jsx
 create mode 100644 src/utils.js

diff --git a/src/App.jsx b/src/App.jsx
index ff3285812..95cc66728 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,248 +1,111 @@
 /* eslint-disable jsx-a11y/accessible-emoji */
-import React from 'react';
+import React, { useState } from 'react';
 import './App.scss';
 
-// import usersFromServer from './api/users';
-// import categoriesFromServer from './api/categories';
-// import productsFromServer from './api/products';
-
-// const products = productsFromServer.map((product) => {
-//   const category = null; // find by product.categoryId
-//   const user = null; // find by category.ownerId
-
-//   return null;
-// });
-
-export const App = () => (
-  <div className="section">
-    <div className="container">
-      <h1 className="title">Product Categories</h1>
-
-      <div className="block">
-        <nav className="panel">
-          <p className="panel-heading">Filters</p>
-
-          <p className="panel-tabs has-text-weight-bold">
-            <a
-              data-cy="FilterAllUsers"
-              href="#/"
-            >
-              All
-            </a>
-
-            <a
-              data-cy="FilterUser"
-              href="#/"
-            >
-              User 1
-            </a>
-
-            <a
-              data-cy="FilterUser"
-              href="#/"
-              className="is-active"
-            >
-              User 2
-            </a>
-
-            <a
-              data-cy="FilterUser"
-              href="#/"
-            >
-              User 3
-            </a>
-          </p>
-
-          <div className="panel-block">
-            <p className="control has-icons-left has-icons-right">
-              <input
-                data-cy="SearchField"
-                type="text"
-                className="input"
-                placeholder="Search"
-                value="qwe"
+import { products, findOwners, filterByOwner, filterByName } from './utils';
+import { Table } from './components/Table/Table';
+import { FilterUserList } from './components/FilterUserList/FilterUserList';
+import { FilterByInput } from './components/FilterByInput/FilterByInput';
+
+export const App = () => {
+  const [selectedUser, setSelectedUser] = useState('All');
+  const [query, setQuery] = useState('');
+  const owners = findOwners(products);
+  const ownersList = ['All', ...owners, 'John'];
+  const filteredByUser = filterByOwner(products, selectedUser);
+  const filteredProducts = filterByName(filteredByUser, query);
+
+  return (
+    <div className="section">
+      <div className="container">
+        <h1 className="title">Product Categories</h1>
+
+        <div className="block">
+          <nav className="panel">
+            <p className="panel-heading">Filters</p>
+
+            <p className="panel-tabs has-text-weight-bold">
+              <FilterUserList
+                owners={ownersList}
+                selectedUser={selectedUser}
+                onSelectedUser={user => setSelectedUser(user)}
               />
-
-              <span className="icon is-left">
-                <i className="fas fa-search" aria-hidden="true" />
-              </span>
-
-              <span className="icon is-right">
-                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-                <button
-                  data-cy="ClearButton"
-                  type="button"
-                  className="delete"
-                />
-              </span>
             </p>
-          </div>
-
-          <div className="panel-block is-flex-wrap-wrap">
-            <a
-              href="#/"
-              data-cy="AllCategories"
-              className="button is-success mr-6 is-outlined"
-            >
-              All
-            </a>
-
-            <a
-              data-cy="Category"
-              className="button mr-2 my-1 is-info"
-              href="#/"
-            >
-              Category 1
-            </a>
-
-            <a
-              data-cy="Category"
-              className="button mr-2 my-1"
-              href="#/"
-            >
-              Category 2
-            </a>
-
-            <a
-              data-cy="Category"
-              className="button mr-2 my-1 is-info"
-              href="#/"
-            >
-              Category 3
-            </a>
-            <a
-              data-cy="Category"
-              className="button mr-2 my-1"
-              href="#/"
-            >
-              Category 4
-            </a>
-          </div>
-
-          <div className="panel-block">
-            <a
-              data-cy="ResetAllButton"
-              href="#/"
-              className="button is-link is-outlined is-fullwidth"
-            >
-              Reset all filters
-            </a>
-          </div>
-        </nav>
-      </div>
 
-      <div className="box table-container">
-        <p data-cy="NoMatchingMessage">
-          No products matching selected criteria
-        </p>
-
-        <table
-          data-cy="ProductTable"
-          className="table is-striped is-narrow is-fullwidth"
-        >
-          <thead>
-            <tr>
-              <th>
-                <span className="is-flex is-flex-wrap-nowrap">
-                  ID
-
-                  <a href="#/">
-                    <span className="icon">
-                      <i data-cy="SortIcon" className="fas fa-sort" />
-                    </span>
-                  </a>
-                </span>
-              </th>
-
-              <th>
-                <span className="is-flex is-flex-wrap-nowrap">
-                  Product
-
-                  <a href="#/">
-                    <span className="icon">
-                      <i data-cy="SortIcon" className="fas fa-sort-down" />
-                    </span>
-                  </a>
-                </span>
-              </th>
-
-              <th>
-                <span className="is-flex is-flex-wrap-nowrap">
-                  Category
-
-                  <a href="#/">
-                    <span className="icon">
-                      <i data-cy="SortIcon" className="fas fa-sort-up" />
-                    </span>
-                  </a>
-                </span>
-              </th>
-
-              <th>
-                <span className="is-flex is-flex-wrap-nowrap">
-                  User
-
-                  <a href="#/">
-                    <span className="icon">
-                      <i data-cy="SortIcon" className="fas fa-sort" />
-                    </span>
-                  </a>
-                </span>
-              </th>
-            </tr>
-          </thead>
-
-          <tbody>
-            <tr data-cy="Product">
-              <td className="has-text-weight-bold" data-cy="ProductId">
-                1
-              </td>
-
-              <td data-cy="ProductName">Milk</td>
-              <td data-cy="ProductCategory">🍺 - Drinks</td>
-
-              <td
-                data-cy="ProductUser"
-                className="has-text-link"
+            <FilterByInput
+              filterBy={newQuery => setQuery(newQuery)}
+              query={query}
+              onClearButton={() => setQuery('')}
+            />
+
+            <div className="panel-block is-flex-wrap-wrap">
+              <a
+                href="#/"
+                data-cy="AllCategories"
+                className="button is-success mr-6 is-outlined"
               >
-                Max
-              </td>
-            </tr>
-
-            <tr data-cy="Product">
-              <td className="has-text-weight-bold" data-cy="ProductId">
-                2
-              </td>
-
-              <td data-cy="ProductName">Bread</td>
-              <td data-cy="ProductCategory">🍞 - Grocery</td>
+                All
+              </a>
 
-              <td
-                data-cy="ProductUser"
-                className="has-text-danger"
+              <a
+                data-cy="Category"
+                className="button mr-2 my-1 is-info"
+                href="#/"
               >
-                Anna
-              </td>
-            </tr>
+                Category 1
+              </a>
 
-            <tr data-cy="Product">
-              <td className="has-text-weight-bold" data-cy="ProductId">
-                3
-              </td>
-
-              <td data-cy="ProductName">iPhone</td>
-              <td data-cy="ProductCategory">💻 - Electronics</td>
+              <a
+                data-cy="Category"
+                className="button mr-2 my-1"
+                href="#/"
+              >
+                Category 2
+              </a>
 
-              <td
-                data-cy="ProductUser"
-                className="has-text-link"
+              <a
+                data-cy="Category"
+                className="button mr-2 my-1 is-info"
+                href="#/"
+              >
+                Category 3
+              </a>
+              <a
+                data-cy="Category"
+                className="button mr-2 my-1"
+                href="#/"
+              >
+                Category 4
+              </a>
+            </div>
+
+            <div className="panel-block">
+              <a
+                data-cy="ResetAllButton"
+                href="#/"
+                className="button is-link is-outlined is-fullwidth"
+                onClick={() => {
+                  setSelectedUser('All');
+                  setQuery('');
+                }}
               >
-                Roma
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                Reset all filters
+              </a>
+            </div>
+          </nav>
+        </div>
+
+        <div className="box table-container">
+          {!filteredProducts.length
+            ? (
+              <p data-cy="NoMatchingMessage">
+                No products matching selected criteria
+              </p>
+            )
+            : <Table products={filteredProducts} />
+          }
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/src/components/FilterByInput/FilterByInput.jsx b/src/components/FilterByInput/FilterByInput.jsx
new file mode 100644
index 000000000..4e27622a0
--- /dev/null
+++ b/src/components/FilterByInput/FilterByInput.jsx
@@ -0,0 +1,33 @@
+export const FilterByInput = ({ filterBy, query, onClearButton }) => (
+  <div className="panel-block">
+    <p className="control has-icons-left has-icons-right">
+      <input
+        data-cy="SearchField"
+        type="text"
+        className="input"
+        placeholder="Search"
+        value={query}
+        onChange={(event) => {
+          filterBy(event.target.value);
+        }}
+      />
+
+      <span className="icon is-left">
+        <i className="fas fa-search" aria-hidden="true" />
+      </span>
+
+      {query
+        && (
+          <span className="icon is-right">
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+            <button
+              data-cy="ClearButton"
+              type="button"
+              className="delete"
+              onClick={onClearButton}
+            />
+          </span>
+        )}
+    </p>
+  </div>
+);
diff --git a/src/components/FilterUserList/FilterUserList.jsx b/src/components/FilterUserList/FilterUserList.jsx
new file mode 100644
index 000000000..28e34cd7d
--- /dev/null
+++ b/src/components/FilterUserList/FilterUserList.jsx
@@ -0,0 +1,16 @@
+import cn from 'classnames';
+
+export const FilterUserList = ({ owners, selectedUser, onSelectedUser }) => (
+  owners.map(user => (
+    <a
+      data-cy={user === 'All' ? 'FilterAllUsers' : 'FilterUser'}
+      href="#/"
+      className={cn({
+        'is-active': selectedUser === user,
+      })}
+      onClick={() => onSelectedUser(user)}
+    >
+      {user}
+    </a>
+  ))
+);
diff --git a/src/components/Product/Product.jsx b/src/components/Product/Product.jsx
new file mode 100644
index 000000000..3ceb8d1f3
--- /dev/null
+++ b/src/components/Product/Product.jsx
@@ -0,0 +1,31 @@
+import cn from 'classnames';
+
+export const Product = ({ product }) => {
+  const {
+    id,
+    name,
+    category,
+    owner,
+  } = product;
+
+  return (
+    <tr data-cy="Product">
+      <td className="has-text-weight-bold" data-cy="ProductId">
+        {id}
+      </td>
+
+      <td data-cy="ProductName">{name}</td>
+      <td data-cy="ProductCategory">{`${category.icon} - ${category.title}`}</td>
+
+      <td
+        data-cy="ProductUser"
+        className={cn({
+          'has-text-link': owner.sex === 'm',
+          'has-text-danger': owner.sex === 'f',
+        })}
+      >
+        {owner.name}
+      </td>
+    </tr>
+  );
+};
diff --git a/src/components/ProductList/ProductList.jsx b/src/components/ProductList/ProductList.jsx
new file mode 100644
index 000000000..b7b5134da
--- /dev/null
+++ b/src/components/ProductList/ProductList.jsx
@@ -0,0 +1,5 @@
+import { Product } from '../Product/Product';
+
+export const ProductList = ({ productList }) => (
+  productList.map(product => <Product product={product} key={product.id} />)
+);
diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
new file mode 100644
index 000000000..d5783f2cb
--- /dev/null
+++ b/src/components/Table/Table.jsx
@@ -0,0 +1,15 @@
+import { TableHead } from '../TableHead/TableHead';
+import { ProductList } from '../ProductList/ProductList';
+
+export const Table = ({ products }) => (
+  <table
+    data-cy="ProductTable"
+    className="table is-striped is-narrow is-fullwidth"
+  >
+    <TableHead />
+
+    <tbody>
+      <ProductList productList={products} />
+    </tbody>
+  </table>
+);
diff --git a/src/components/TableHead/TableHead.jsx b/src/components/TableHead/TableHead.jsx
new file mode 100644
index 000000000..f57f55bd2
--- /dev/null
+++ b/src/components/TableHead/TableHead.jsx
@@ -0,0 +1,53 @@
+export const TableHead = () => (
+  <thead>
+    <tr>
+      <th>
+        <span className="is-flex is-flex-wrap-nowrap">
+          ID
+
+          <a href="#/">
+            <span className="icon">
+              <i data-cy="SortIcon" className="fas fa-sort" />
+            </span>
+          </a>
+        </span>
+      </th>
+
+      <th>
+        <span className="is-flex is-flex-wrap-nowrap">
+          Product
+
+          <a href="#/">
+            <span className="icon">
+              <i data-cy="SortIcon" className="fas fa-sort-down" />
+            </span>
+          </a>
+        </span>
+      </th>
+
+      <th>
+        <span className="is-flex is-flex-wrap-nowrap">
+          Category
+
+          <a href="#/">
+            <span className="icon">
+              <i data-cy="SortIcon" className="fas fa-sort-up" />
+            </span>
+          </a>
+        </span>
+      </th>
+
+      <th>
+        <span className="is-flex is-flex-wrap-nowrap">
+          User
+
+          <a href="#/">
+            <span className="icon">
+              <i data-cy="SortIcon" className="fas fa-sort" />
+            </span>
+          </a>
+        </span>
+      </th>
+    </tr>
+  </thead>
+);
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 000000000..6c0ba201b
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,55 @@
+import usersFromServer from './api/users';
+import categoriesFromServer from './api/categories';
+import productsFromServer from './api/products';
+
+export const products = productsFromServer.map((product) => {
+  const category1 = categoriesFromServer
+    .find(c => c.id === product.categoryId);
+  const user = usersFromServer.find(u => u.id === category1.ownerId);
+
+  return {
+    id: product.id,
+    name: product.name,
+    category: category1,
+    owner: user,
+  };
+});
+
+// get list of owners
+export function findOwners(productsList) {
+  const listOfOwners = [];
+
+  productsList.forEach((product) => {
+    const {
+      owner,
+    } = product;
+
+    if (!listOfOwners.includes(owner.name)) {
+      listOfOwners.push(owner.name);
+    }
+  });
+
+  return listOfOwners;
+}
+
+// filter by user function
+export function filterByOwner(productList, selectedUser) {
+  if (selectedUser === 'All') {
+    return productList;
+  }
+
+  return productList.filter((product) => {
+    const {
+      owner,
+    } = product;
+
+    return owner.name === selectedUser;
+  });
+}
+
+// filter by name function
+export function filterByName(productList, name) {
+  return productList
+    .filter(product => product.name.toLowerCase()
+      .includes(name.toLowerCase().trim()));
+}