import { useState, useEffect } from 'react';

import BlogPosts from './components/BlogPosts';
import NewPost from './components/NewPost';

function App() {
  const [loadedPosts, setLoadedPosts] = useState([]);
  // Do zrobienia: pobieranie artykułów z bloga z adresu https://jsonplaceholder.typicode.com/posts 
  // (zobacz dokumentację na stronie https://jsonplaceholder.typicode.com/guide/).
  // Przekazywanie pobranych artykułów do komponentu <BlogPost /> za pomocą propów i 
  // wyświetlanie artykułów w tym komponencie.
  
  useEffect(function () {
    async function loadPosts() {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/posts'
      );

      const blogPosts = await response.json();
      setLoadedPosts(blogPosts);
    }

    loadPosts();
  }, []);

  return (
    <>
      <NewPost />
      <BlogPosts posts={loadedPosts} />
    </>
  );
}

export default App;
