users

package.json

@@ -7,7 +7,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.1.0",
-    "react-content-loader": "^6.2.0",
+    "react-content-loader": "^6.2.1",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
     "sass": "^1.52.3",

src/App.js

@@ -1,15 +1,61 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import './index.scss';
 import { Success } from './components/Success';
 import { Users } from './components/Users';
 
 // Тут список пользователей: https://reqres.in/api/users
 
 function App() {
+  const [users, setUsers] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [invites, setInvites] = useState([]);
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    fetch('https://reqres.in/api/users')
+      .then((res) => res.json())
+      .then((res) => {
+        setUsers(res.data);
+      })
+      .catch((err) => {
+        console.warn(err);
+        alert('Error users fetching');
+      })
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const onChangeSearchQuery = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
+  const onClickInvite = (id) => {
+    if (invites.includes(id)) {
+      setInvites((prev) => prev.filter((_id) => _id !== id));
+    } else {
+      setInvites((prev) => [...prev, id]);
+    }
+  };
+
+  const onClickSendInvites = () => {
+    setSuccess(true);
+  };
+
   return (
     <div className="App">
-      <Users />
-      {/* <Success /> */}
+      {success ? (
+        <Success count={invites.length} />
+      ) : (
+        <Users
+          items={users}
+          invites={invites}
+          isLoading={isLoading}
+          searchQuery={searchQuery}
+          onChangeSearch={onChangeSearchQuery}
+          onClickInvite={onClickInvite}
+          onClickSendInvites={onClickSendInvites}
+        />
+      )}
     </div>
   );
 }

src/components/Success.jsx

@@ -6,7 +6,7 @@ export const Success = ({ count }) => {
       <img src="/assets/success.svg" alt="Success" />
       <h3>Успешно!</h3>
       <p>Всем {count} пользователям отправлено приглашение.</p>
-      <button className="send-invite-btn">Назад</button>
+      <button onClick={() => window.location.reload()} className="send-invite-btn">Назад</button>
     </div>
   );
 };

src/components/Users/User.jsx

@@ -1,19 +1,24 @@
 import React from 'react';
 
-export const User = () => (
-  <li>
+export const User = ({ data, onClickInvite, isInvited }) => (
+  <li key={data.id}>
     <div>
-      <img className="avatar" src="https://reqres.in/img/faces/1-image.jpg" alt="User" />
+      <img className="avatar" src={data.avatar} alt="User" />
       <div>
-        <h3>Amon Bower</h3>
+        <h3>{`${data.first_name} ${data.last_name}`}</h3>
         <p>
           <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
             <path d="M48,0a48,48,0,0,0,0,96,6,6,0,0,0,0-12A36,36,0,1,1,84,48V66a6,6,0,0,1-12,0V48A24,24,0,1,0,48,72a23.7365,23.7365,0,0,0,12.2549-3.4783A17.9586,17.9586,0,0,0,96,66V48A48.0474,48.0474,0,0,0,48,0Zm0,60A12,12,0,1,1,60,48,12.0081,12.0081,0,0,1,48,60Z" />
           </svg>
-          george.bluth@reqres.in
+          {data.email}
         </p>
       </div>
     </div>
-    <img className="action" src="/assets/plus.svg" alt="Action" />
+    <img
+    onClick={() => onClickInvite(data.id)}
+      className="action"
+      src={`/assets/${isInvited ? 'minus' : 'plus'}.svg`}
+      alt="Action"
+    />
   </li>
 );

src/components/Users/index.jsx

@@ -2,14 +2,27 @@ import React from 'react';
 import { Skeleton } from './Skeleton';
 import { User } from './User';
 
-export const Users = ({ items, isLoading }) => {
+export const Users = ({
+  items,
+  isLoading,
+  searchQuery,
+  onChangeSearch,
+  invites,
+  onClickInvite,
+  onClickSendInvites,
+}) => {
   return (
     <>
       <div className="search">
         <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
           <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
         </svg>
-        <input type="text" placeholder="Найти пользователя..." />
+        <input
+          value={searchQuery}
+          onChange={onChangeSearch}
+          type="text"
+          placeholder="Найти пользователя..."
+        />
       </div>
       {isLoading ? (
         <div className="skeleton-list">
@@ -19,10 +32,31 @@ export const Users = ({ items, isLoading }) => {
         </div>
       ) : (
         <ul className="users-list">
-          <User />
+          {items
+            .filter((user) => {
+              const fullName =
+                `${user.first_name} ${user.last_name}`.toLocaleLowerCase();
+              const email = user.email.toLocaleLowerCase();
+
+              return (
+                fullName.includes(searchQuery.toLocaleLowerCase()) ||
+                email.includes(searchQuery.toLocaleLowerCase())
+              );
+            })
+            .map((user) => (
+              <User
+                isInvited={invites.includes(user.id)}
+                data={user}
+                onClickInvite={onClickInvite}
+              />
+            ))}
         </ul>
       )}
-      <button className="send-invite-btn">Отправить приглашение</button>
+      {invites.length > 0 && (
+        <button onClick={onClickSendInvites} className="send-invite-btn">
+          Отправить приглашение
+        </button>
+      )}
     </>
   );
 };