import React from 'react';
import { Outlet, useLoaderData, defer, Await } from 'react-router-dom';

import PostsList from '../components/PostsList';
import { wait } from '../util/time-util';

function PostsLayout() {
  const data = useLoaderData();

  return (
    <div id="posts-layout">
      <nav>
        <React.Suspense fallback={<p>Wczytywanie artykułów...</p>}>
          <Await resolve={data.posts}>
            {(loadedPosts) => <PostsList posts={loadedPosts} />}
          </Await>
        </React.Suspense>
      </nav>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

export default PostsLayout;

async function getPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  await wait(3); // Funkcja narzędziowa, symuluje długie zwracanie odpowiedzi
  if (!response.ok) {
    throw new Error('Nie można pobrać artykułów');
  }
  const data = await response.json();
  return data;
}

export async function loader() {
  return defer({
    posts: getPosts(),
  });
}
