// src/App.jsx
import { useEffect, useState } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [status, setStatus] = useState("idle");

  useEffect(() => {
    let ignore = false;
    setStatus("loading");

    async function loadData() {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error("Request failed");
        const result = await response.json();
        if (!ignore) {
          setData(result);
          setStatus("success");
        }
      } catch (err) {
        if (!ignore) setStatus("error");
      }
    }

    loadData();
    return () => {
      ignore = true;
    };
  }, [url]);

  return { data, status };
}

function JokeWidget() {
  const { data, status } = useFetch("https://official-joke-api.appspot.com/random_joke");

  if (status === "loading") return <p>Loading joke...</p>;
  if (status === "error") return <p>Failed to load joke.</p>;
  return <p>{data?.setup}</p>;
}

function UserWidget() {
  const { data, status } = useFetch("https://jsonplaceholder.typicode.com/users/1");

  if (status === "loading") return <p>Loading user...</p>;
  if (status === "error") return <p>Failed to load user.</p>;
  return <p>{data?.name}</p>;
}

function App() {
  return (
    <div>
      <JokeWidget />
      <UserWidget />
    </div>
  );
}

export default App;

/*
  Notes:
  - JokeWidget and UserWidget each call useFetch with their own URL —
    every piece of state useFetch manages internally is completely
    independent between the two calls.
  - Neither component contains any fetch, try/catch, or status logic
    itself anymore — that's the whole benefit of the extraction.
*/