Blorg-Frontend/src/pages/Home.tsx

45 lines
1.2 KiB
TypeScript

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>
</>
);
}