import { useCallback, useEffect, useState } from 'react';

import BlogPosts from './components/BlogPosts';

function App() {
  const [fetchedPosts, setFetchedPosts] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  // Używanie useCallback(), aby zapobiegać pętli nieskończonej w funkcji useEffect().
  const fetchPosts = useCallback(async function fetchPosts() {
    setIsLoading(fetchedPosts ? false : true); // Nie ustawia stanu "Wczytywanie", jeśli dane zostały już pobrane.
    setError(null);

    try {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/posts'
      );

      if (!response.ok) {
        throw new Error('Nieudana próba pobrania artykułów.');
      }

      const posts = await response.json();

      setIsLoading(false);
      setError(null);
      setFetchedPosts(posts);
    } catch (error) {
      setIsLoading(false);
      setError(error.message);
      setFetchedPosts(null);
    }
  }, []);

  useEffect(
    function () {
      fetchPosts();
    },
    [fetchPosts]
  );

  return (
    <>
      <header>
        <h1>Blog ze złożonym stanem</h1>
        <button onClick={fetchPosts}>Wczytaj artykuły</button>
      </header>
      {isLoading && <p>Wczytywanie w toku...</p>}
      {error && <p>{error}</p>}
      {fetchedPosts && <BlogPosts posts={fetchedPosts} />}
    </>
  );
}

export default App;
