import { For, Accessor, createResource } from "solid-js"
import { useRouteData } from "solid-start";
import Post from "~/components/Post"


export type Article = {
    content_type: string;
    title: string;
    date: string;
    url: string;
};


export function routeData() {
    const [blogPosts] = createResource(async () => {
        const response = await fetch("http://127.0.0.1:9696/dennis/blog")
        return await response.json() as Article[];
    });

    return { blogPosts };
};


export default function Home() {
    const { blogPosts } = useRouteData<typeof routeData>();

    return (
        <>
            <ul>
                <For each={blogPosts()}>
                    {(post) => <li><Post article={post} /></li>}
                </For>
            </ul>
        </>
    )
};