After list manipulation example 2024 march preparation

.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,141 @@
+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';
+
+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';
+
+  // Optional
+  // const sortField = ''; // 'name', 'sex', 'born'
+  // const sortOrder = 'asc'; // 'desc'
+
+  let visiblePeople = [...peopleFromServer];
+
+  const normalizedQuery = query.trim().toLowerCase();
+
+  if (normalizedQuery) {
+    visiblePeople = visiblePeople.filter(person => (
+      person.name.toLowerCase().includes(normalizedQuery)
+    ));
+  }
+
+  if (sex !== 'all') {
+    visiblePeople = visiblePeople.filter(person => person.sex === sex);
+  }
+
+  return (
+    <div className="box">
+      <div className="block">
+        <div className="buttons has-addons">
+          <button
+            type="button"
+            className={classNames('button', {
+              'is-info': sex === 'all',
+            })}
+            onClick={() => setSex('all')}
+          >
+            all
+          </button>
+          <button
+            type="button"
+            className={classNames('button', {
+              'is-info': sex === 'm',
+            })}
+            onClick={() => setSex('m')}
+          >
+            m
+          </button>
+          <button
+            type="button"
+            className={classNames('button', {
+              'is-info': sex === 'f',
+            })}
+            onClick={() => setSex('f')}
+          >
+            f
+          </button>
+        </div>
+
+        <input type="search" onChange={event => setQuery(event.target.value)} />
+      </div>
+
+      <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>
+          {visiblePeople.map(person => (
+            <tr
+              key={person.slug}
+              className={isSelected(person)
+                ? 'has-background-warning'
+                : ''}
+            >
+              <td>
+                {isSelected(person) ? (
+                  <button
+                    type="button"
+                    className="button is-small is-rounded is-danger"
+                    onClick={() => removePerson(person)}
+                  >
+                    <span className="icon is-small">
+                      <i className="fas fa-minus" />
+                    </span>
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    className="button is-small is-rounded is-success"
+                    onClick={() => addPerson(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>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

src/components/Button/Button.jsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+
+export function Button({
+  children,
+  type = 'button',
+  className,
+  ...restProps
+}) {
+  return (
+    <button
+      // eslint-disable-next-line react/button-has-type
+      type={type}
+      className={classNames('button', className)}
+      {...restProps}
+    >
+      {children}
+    </button>
+  );
+}

src/index.jsx

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