kryamk

export default function App() {
  const [originalItems, setOriginalItems] = React.useState([
    { name: "Valerka", id: 1 },
    { name: "Vasya", id: 2 },
  ]);
  const [items, setItems] = React.useState(originalItems);

  const [search, setSearch] = React.useState("");
  const [name, setName] = React.useState("");

  const createNewItem = () => {
    const user = {
      name,
      id: Date.now(),
    };
    setOriginalItems([...originalItems, user]);
    setItems([...originalItems, user]);
    setName("");
  };

  const deleteItem = (id) => {
    setOriginalItems(originalItems.filter((item) => item.id !== id));
    setItems(items.filter((item) => item.id !== id));
  };

  const searchItems = (searchText, users) => {
    if (!searchText) {
      return users;
    }
    return users.filter(({ name }) =>
      name.toLowerCase().includes(searchText.toLowerCase())
    );
  };

  React.useEffect(() => {
    const debouncedSearch = setTimeout(() => {
      const filteredItems = searchItems(search, originalItems);
      setItems(filteredItems);
    }, 500);
    return () => {
      clearTimeout(debouncedSearch);
    };
  }, [search, originalItems]);

  return (
    <div className="App">
      <input
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        type="text"
        placeholder="Find item by name"
      ></input>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        type="text"
        placeholder="Enter your name"
      ></input>

      <button onClick={createNewItem}>Submit</button>
      {items.map((item) => (
        <div key={`${item.id} + ${item.name}`} className="block">
          <div className="information">
            <div>{item.name}</div>
            <div>{item.id}</div>
          </div>
          <button onClick={() => deleteItem(item.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}