21hw

src/App/App.jsx

@@ -7,17 +7,18 @@ function App() {
   
   const [isOpenPopup, setOpenPopup] = useState(false);
 
+  
   const handleSwitchPopup = () => {
     setOpenPopup(!isOpenPopup);
   }
-
+  const [usersArr, setUsers] = useState([])
   const [userPopup, setUserPopup] = useState({});
   
   
   return (
     <div className="wrapper">
-      <Main setUserPopup={setUserPopup} handleSwitchPopup={handleSwitchPopup} />
-      {isOpenPopup && <Popup userPopup={userPopup} handleSwitchPopup={handleSwitchPopup} />}
+      <Main setUserPopup={setUserPopup} setUsers={setUsers} handleSwitchPopup={handleSwitchPopup} />
+    {isOpenPopup && <Popup usersArr={usersArr} setUsers={setUsers} userPopup={userPopup} handleSwitchPopup={handleSwitchPopup} />}
     </div>
   );
 }

src/components/Button/Button.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import './button.css';
 
-const Button = ({ type, buttonName }) => {
+const Button = ({ type, buttonName, onClick }) => {
+  const changeClick = () => {
+    onClick && onClick();
+  }
   return (
-    <button className="btn" type={type}>{buttonName}</button>
+    <button className="btn" type={type} onClick={changeClick}>{buttonName}</button>
   )
 }
 

src/components/Input/Input.jsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import './input.css';
 
-const Input = (props) => {
+const Input = ({ type, name, placeholder, onChange, value}) => {
+
+  const handleUpdate = (e) => {
+    onChange && onChange(e.target.value)
+  }
+
   return (
     <input
-      type={props.type}
-      name={props.name}
-      placeholder={props.placeholder}
-      value={props.value}
-      onChange={props.onChange}
+      type={type}
+      name={name}
+      placeholder={placeholder}
+      value={value}
+      onChange={handleUpdate}
     />
   )
 }

src/components/Search/Search.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Input from '../Input';
+import './search.css';
+
+const Search = ({ usersArr, setUsers}) => {
+    const searchUs = (value) => {
+        const res = usersArr.filter(user => user.name.toLocaleLowerCase().includes(value.toLocaleLowerCase()));
+        setUsers(res);
+    }
+   return (
+       <form className='search'>
+           <Input
+                type='search'
+                name='search' 
+                onChange={searchUs} 
+                placeholder={'Enter name'}/>
+        </form>
+   ) 
+}
+
+export default Search;

src/components/Search/index.js

@@ -0,0 +1,2 @@
+import Search from './Search';
+export default Search;

src/components/Search/search.css

@@ -0,0 +1,4 @@
+.search {
+    margin-left: 15px;
+    margin-bottom: 20px;
+}

src/containers/CreateNewUser/CreateNewUser.jsx

@@ -2,10 +2,12 @@ import React from 'react';
 import Input from '../../components/Input';
 import Button from '../../components/Button';
 import Label from '../../components/Label';
+
 import './createNewUser.css';
 
-const CreateNewUser = ({ users, setUsers }) => {
+const CreateNewUser = ({usersArr, setUsers }) => {
   let id = new Date().getTime();
+  
   const createUser = (target) => {
     const name = target.elements['name'].value;
     const surname = target.elements['surname'].value;
@@ -17,8 +19,9 @@ const CreateNewUser = ({ users, setUsers }) => {
         name, surname, address
       }
 
-      users.push(newUser);
-      setUsers([...users]);
+      usersArr.push(newUser);
+      
+      setUsers([...usersArr])
       target.reset();
     } 
 

src/containers/Footer/Footer.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import './footer.css';
 
 const Footer = (props) => {
+   
   return (
     
       <p className="footer_count">

src/containers/Main/Main.jsx

@@ -1,26 +1,45 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import UsersComponent from '../UsersComponent';
 import CreateNewUser from '../CreateNewUser';
 import './main.css';
 import Footer from '../Footer';
 
 
+let usersArr = JSON.parse(localStorage.getItem('users')) || [];
+
+const Actions = () => {
+  const [users, setUsers] = useState(usersArr);
+  useEffect(() => {
+    localStorage.setItem('users', JSON.stringify(usersArr));
+  }, [users])
+
+  const deleteUser = (id) => {
+    usersArr = usersArr.filter(us => us.id !== id);
+    setUsers(usersArr);
+    
+  }
+  return { users, setUsers, deleteUser }
+}
+
+
+
+
 const Main = ({ setUserPopup, handleSwitchPopup }) => {
   
    
-  const [users, setUsers] = useState([]);
+  const {users, setUsers, deleteUser} = Actions();
+
   
-  const deleteUser = (id) => {
-    setUsers(users.filter(u => u.id !== id));
-  }
 
   return (
     <main>
       <div className="container">
         <div className="users_wrapper">
-          <CreateNewUser users={users} setUsers={setUsers} />
+          <CreateNewUser usersArr={usersArr} setUsers={setUsers} />
           <UsersComponent
             users={users}
+            usersArr={usersArr}
+            setUsers={setUsers} 
             deleteUser={deleteUser}
             setUserPopup={setUserPopup}
             handleSwitchPopup={handleSwitchPopup}

src/containers/Popup/Popup.jsx

@@ -3,7 +3,7 @@ import Input from '../../components/Input'
 import Button from '../../components/Button'
 import './popup.css';
 
-const Popup = ({ userPopup, handleSwitchPopup }) => {
+const Popup = ({ userPopup, handleSwitchPopup, usersArr, setUsers }) => {
   const [name, setName] = useState(userPopup.name);
   const [surname, setSurname] = useState(userPopup.surname);
   const [address, setAddress] = useState(userPopup.address);
@@ -21,9 +21,15 @@ const Popup = ({ userPopup, handleSwitchPopup }) => {
     const address = target.elements['address'].value;
 
     if (name && surname && address) {
-      userPopup.name = name;
-      userPopup.surname = surname;
-      userPopup.address = address;
+      usersArr.forEach(user => {
+        if (user.id === userPopup.id) {
+          user.name = name;
+          user.surname = surname;
+          user.address = address;
+        }
+      })
+      setUsers(usersArr);
+      localStorage.setItem('users', JSON.stringify(usersArr));
     }
 
     handleSwitchPopup();
@@ -43,19 +49,19 @@ const Popup = ({ userPopup, handleSwitchPopup }) => {
             type={'text'} 
             name={'name'}
             value={name}
-            onChange={(e) => setName(e.target.value)}
+            onChange={(value) => setName(value)}
           />
           <Input
             type={'text'}
             name={'surname'}
             value={surname}
-            onChange={(e) => setSurname(e.target.value)}
+            onChange={(value) => setSurname(value)}
           />
           <Input
             type={'text'}
             name={'address'}
             value={address}
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(value) => setAddress(value)}
           />
 
           <Button buttonName={'Save'} />

src/containers/UsersComponent/UsersComponent.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import UserCard from '../../components/UserCard';
+import Search from '../../components/Search'
 import './usersComponent.css';
 
-const UsersComponent = ({ users, deleteUser, setUserPopup, handleSwitchPopup }) => {
-
+const UsersComponent = ({ usersArr, users, setUsers, deleteUser, setUserPopup, handleSwitchPopup }) => {
+  
+  
+ 
   let listOfUsers = users.map(user =>
     <UserCard
       key={user.id}
@@ -15,6 +18,7 @@ const UsersComponent = ({ users, deleteUser, setUserPopup, handleSwitchPopup })
 
   return (
     <section className="users_box">
+      <Search usersArr={usersArr} setUsers={setUsers}/>
       <div className="users_component">
         {listOfUsers}
       </div>