After lifting state up example 2024 march

.eslintrc.js

@@ -1,12 +1,19 @@
 module.exports = {
-  extends: ['@mate-academy/eslint-config-react-typescript', 'plugin:cypress/recommended'],
+  extends: ['@mate-academy/eslint-config-react', 'plugin:cypress/recommended'],
   rules: {
+    'import/no-extraneous-dependencies': ['error', {
+      devDependencies: true,
+      optionalDependencies: false,
+      peerDependencies: false,
+    }],
+    'react/prop-types': 0,
     'max-len': ['error', {
       ignoreTemplateLiterals: true,
       ignoreComments: true,
     }],
-    'jsx-a11y/label-has-associated-control': ["error", {
-      assert: "either",
+    'jsx-a11y/label-has-associated-control': ['error', {
+      assert: 'either',
     }],
+    'jsx-a11y/control-has-associated-label': 'off',
   },
 };

package.json

@@ -6,25 +6,25 @@
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.1.2",
+    "@cypress/react": "^5.12.4",
+    "@fortawesome/fontawesome-free": "^6.2.0",
     "bulma": "^0.9.4",
-    "classnames": "^2.3.1",
-    "postcss": "^8.4.16",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
+    "classnames": "^2.3.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3"
   },
   "devDependencies": {
-    "@cypress/react": "^5.12.4",
     "@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.8",
+    "@mate-academy/eslint-config-react": "^0.0.11",
+    "@mate-academy/eslint-config-react-typescript": "^1.0.12",
+    "@mate-academy/scripts": "^1.7.3",
     "@mate-academy/students-ts-config": "*",
-    "@mate-academy/stylelint-config": "*",
-    "@types/node": "^17.0.45",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@mate-academy/stylelint-config": "^0.0.11",
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
     "cypress": "^9.5.3",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.11.2",
@@ -33,7 +33,8 @@
     "mochawesome-merge": "^4.2.0",
     "mochawesome-report-generator": "^6.2.0",
     "node-sass": "^6.0.1",
-    "stylelint": "^13.13.1",
+    "postcss": "^8.4.12",
+    "stylelint": "^15.11.0",
     "typescript": "^4.6.3"
   },
   "scripts": {
@@ -61,6 +62,11 @@
     ]
   },
   "mateAcademy": {
-    "projectType": "reactTypescript"
+    "_comment": "Replace 'react' with 'reactTypescript' if you want use React with Typescript",
+    "projectType": "react",
+    "tests": {
+      "_comment": "Add `cypressComponents: true` to enable component tests",
+      "cypress": true
+    }
   }
 }

src/App.jsx

@@ -0,0 +1,133 @@
+/* eslint-disable no-console */
+import React, { 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 { Button } from './components/Button/Button';
+import { PeopleList } from './components/PeopleList/PeopleList';
+
+function getPreparedPeople(people, option) {
+  const {
+    query = '',
+    sex = 'all',
+  } = option;
+
+  let preparedPeople = [...people];
+
+  const normalizedQuery = query.trim().toLowerCase();
+
+  if (normalizedQuery) {
+    preparedPeople = preparedPeople.filter(person => (
+      person.name.toLowerCase().includes(normalizedQuery)
+    ));
+  }
+
+  if (sex !== 'all') {
+    preparedPeople = preparedPeople.filter(person => person.sex === sex);
+  }
+
+  return preparedPeople;
+}
+
+export function App() {
+  // #region People Selection Logic
+  const [selectedPeople, setSelectedPerson] = useState([]);
+
+  const isSelected = ({ slug }) => selectedPeople.some(p => p.slug === slug);
+
+  const addPerson = (person) => {
+    setSelectedPerson([...selectedPeople, person]);
+  };
+
+  const removePerson = (person) => {
+    setSelectedPerson(
+      selectedPeople.filter(p => p.slug !== person.slug),
+    );
+  };
+  // #endregion
+
+  const [query, setQuery] = useState('');
+  const [sex, setSex] = useState('all'); // 'm', 'f';
+
+  console.log(`App component -> query: "${query}"`);
+
+  const resetFilters = () => {
+    setQuery('');
+    console.log(`resetFilters -> query: "${query}"`);
+
+    setSex('all');
+  };
+
+  return (
+    <div className="box">
+      <div className="block">
+        <div className="buttons has-addons">
+          <Button
+            className={classNames({
+              'is-info': sex === 'all',
+            })}
+            onClick={() => setSex('all')}
+          >
+            all
+          </Button>
+          <Button
+            className={classNames({
+              'is-info': sex === 'm',
+            })}
+            onClick={() => setSex('m')}
+          >
+            m
+          </Button>
+          <Button
+            className={classNames({
+              'is-info': sex === 'f',
+            })}
+            onClick={() => setSex('f')}
+          >
+            f
+          </Button>
+        </div>
+
+        <input
+          type="search"
+          onChange={event => setQuery(event.target.value)}
+          value={query}
+        />
+      </div>
+
+      <Button onClick={resetFilters}>
+        Reset
+      </Button>
+
+      <table className="table is-striped is-narrow">
+        <caption>
+          {selectedPeople.map(person => person.name)
+            .join(', ') || 'No one selected'
+          }
+        </caption>
+
+        <thead>
+          <tr>
+            <th> </th>
+            <th>name</th>
+            <th>sex</th>
+            <th>born</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <PeopleList
+            people={getPreparedPeople(peopleFromServer, { query, sex })}
+            onAddPerson={addPerson}
+            onRemovePerson={removePerson}
+            isSelected={isSelected}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+}

src/components/Button/Button.jsx

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+
+export function Button({
+  type = 'button',
+  className = '',
+  children,
+  ...props
+}) {
+  // eslint-disable-next-line no-console
+  console.log('🚀 ~ children:', children);
+
+  return (
+    <button
+      // eslint-disable-next-line react/button-has-type
+      type={type}
+      className={classNames('button', className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

src/components/PeopleList/PeopleList.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button } from '../Button/Button';
+
+export const PeopleList = ({
+  people = [],
+  onRemovePerson = () => { },
+  onAddPerson = () => { },
+  isSelected = () => { },
+}) => (
+  <>
+    {people.map(person => (
+      <tr
+        key={person.slug}
+        className={isSelected(person)
+          ? 'has-background-warning'
+          : ''}
+      >
+        <td>
+          {isSelected(person) ? (
+            <Button
+              className="is-small is-rounded is-danger"
+              onClick={() => onRemovePerson(person)}
+            >
+              <span className="icon is-small">
+                <i className="fas fa-minus" />
+              </span>
+            </Button>
+          ) : (
+            <Button
+              className="is-small is-rounded is-success"
+              onClick={() => onAddPerson(person)}
+            >
+              <span className="icon is-small">
+                <i className="fas fa-plus" />
+              </span>
+            </Button>
+          )}
+        </td>
+        <td>{person.name}</td>
+        <td>{person.sex}</td>
+        <td>{person.born}</td>
+      </tr>
+    ))}
+  </>
+);

src/index.jsx

@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom';
+import { App } from './App';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root'),
+);