import React, { useState, useEffect } from 'react';
import Post from "../../models/Posts";
import { Link } from 'react-router-dom';
import {fetchPosts} from "../../services/api/jsonplaceholder/posts";

const HomePage: React.FC = () => {
    const [posts, setPosts] = useState<Post[]>([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const data = await fetchPosts();
                setPosts(data);
            } catch (error) {
                console.error(error);
            }
        };

        fetchData().then(r => console.log(r));
    }, []);

    return (
        <div>
            <h2>HomePage</h2>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>
                        <Link to={`posts/${post.id}/detail`}>{post.title}</Link>
                    </li>
                ))}
            </ul>
        </div>
    );
};


export default HomePage;
