import * as React from "react";

import BlogEntryCard from "./../components/BlogEntryCard.tsx";

export default function Home() {
  const [blogEntries, setBlogEntries] = React.useState({});

  React.useEffect(() => {
    fetch(
      "http://127.0.0.1:8000/api/user/blog/cardInfo/?rangeStart=1&rangeEnd=25&sortByLatest=true",
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      },
    )
      .then((response) => response.json())
      .then((responseParsed: Object) => {
        if (responseParsed["0"].success) {
          delete responseParsed["0"];
          setBlogEntries(responseParsed);
        }
      });
  }, []);

  return (
    <>
      <div className="blogEntryGrid">
        {Object.entries(blogEntries).map((item, index) => (
          <BlogEntryCard
            key={index}
            blogID={item["1"]["blogID"]}
            blogImage={item["1"]["image"]}
            blogTitle={item["1"]["title"]}
            blogDatePosted={item["1"]["datePosted"]}
            blogAuthor={item["1"]["authorInfo"]["username"]}
            blogDescription={item["1"]["description"]}
          ></BlogEntryCard>
        ))}
      </div>
    </>
  );
}