fullstackopen-notes/parts/2/phoneBook/src/App.jsx

import { useState } from "react";
import PersonList from "./components/PersonList";

const SearchArea = ({ onChangeHandler }) => {
  return (
    <div>
      search name: <input onChange={onChangeHandler} />
    </div>
  );
};

const App = () => {
  const [persons, setPersons] = useState([
    { name: "Arto Hellas", number: 123 },
  ]);
  const [searchString, setSearchString] = useState("");
  const [newName, setNewName] = useState("");
  const [newNumber, setNewNumber] = useState("");

  const handleOnSubmit = (event) => {
    event.preventDefault();
    if (
      persons.some((person) => {
        return person.name === newName;
      })
    ) {
      alert(`${newName} is already in the phonebook.`);
      return;
    }
    setPersons(persons.concat({ name: newName, number: newNumber }));

    setNewName("");
    setNewNumber("");
  };

  const handleNameChange = (event) => {
    setNewName(event.target.value);
  };

  const handleNumberChange = (event) => {
    setNewNumber(event.target.value);
  };

  const handleSearchChange = (event) => {
    setSearchString(event.target.value);
  };

  return (
    <div>
      <h2>Phonebook</h2>
      <SearchArea onChangeHandler={handleSearchChange} />
      <h3>Add new</h3>
      <form onSubmit={handleOnSubmit}>
        <div>
          name: <input value={newName} onChange={handleNameChange} />
        </div>
        <div>
          number: <input value={newNumber} onChange={handleNumberChange} />
        </div>
        <div>
          <button type="submit">add</button>
        </div>
      </form>
      <h3>Numbers</h3>
      <PersonList
        persons={persons.filter((person) =>
          person.name.toUpperCase().includes(searchString.toUpperCase())
        )}
      />
    </div>
  );
};

export default App;