import ReactDOM from "react-dom/client"
import { useState } from "react"
import { updateNameInDB } from "./api"

function App() {
  const [name, setName] = useState(
    () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
  )
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  
  async function formAction(formData) {
    setLoading(true)
    setError(null)
    try {
      const newName = await updateNameInDB(formData.get("name"))
      setName(newName)
    } catch (error) {
      console.error(error.message)
      setError(error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <>
      <p className="username">
        Current user: <span>{name}</span>
      </p>
      <form action={formAction}>
        <input
          type="text"
          name="name"
          required
        />
        <button type="submit">Update</button>
      </form>
    </>
  )
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />)