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

import { useState, useEffect } from "react";
import axios from "axios";

import PersonList from "./components/PersonList";

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

const AddPersonForm = ({
  onSubmitHandler,
  onNameChangeHandler,
  nameValue,
  onNumberChangeHandler,
  numberValue,
}) => {
  return (
    <>
      <form onSubmit={onSubmitHandler}>
        <div>
          name: <input value={nameValue} onChange={onNameChangeHandler} />
        </div>
        <div>
          number: <input value={numberValue} onChange={onNumberChangeHandler} />
        </div>
        <div>
          <button type="submit">add</button>
        </div>
      </form>
    </>
  );
};

const App = () => {
  const [persons, setPersons] = useState([]);
  const [searchString, setSearchString] = useState("");
  const [newName, setNewName] = useState("");
  const [newNumber, setNewNumber] = useState("");

  const getPersons = () => {
    return axios.get("http://localhost:3001/persons");
  };
  const addPerson = () => {
    return axios.post("http://localhost:3001/persons", {
      name: newName,
      number: newNumber,
      id: newName,
    });
  };

  useEffect(() => {
    getPersons().then((response) => {
      console.log(response.data);
      setPersons(response.data);
    });
  }, []);

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

    addPerson().then((response) => {
      setPersons(persons.concat(response.data));
    });
    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>
      <AddPersonForm
        onSubmitHandler={handleOnSubmit}
        onNameChangeHandler={handleNameChange}
        nameValue={newName}
        onNumberChangeHandler={handleNumberChange}
        numberValue={newNumber}
      />
      <h3>Numbers</h3>
      <PersonList
        persons={persons.filter((person) =>
          person.name.toUpperCase().includes(searchString.toUpperCase())
        )}
      />
    </div>
  );
};

export default App;