import CommentTitleView from "@/app/[language]/forum/components/CommentTitleView"; import useGetLatestComment from "@/app/[language]/query/useGetLatestComment"; import { useTranslations } from "next-intl"; import { ListGroup, ListGroupItemHeading } from "reactstrap"; export default function LatestCommentsView() { const t = useTranslations(); const { data: latestComment, isFetched: isLatestCommentLoaded } = useGetLatestComment(); return ( <> <ListGroupItemHeading>{t("latestCommentsView")}</ListGroupItemHeading> <ListGroup> {isLatestCommentLoaded ? latestComment.map((latestComment) => { return ( <CommentTitleView key={latestComment.commentID} forumID={latestComment.forumID} essayID={latestComment.essayID} comment={latestComment} /> ); }) : [...Array(5).keys()].map((i) => ( <CommentTitleView key={i} comment={{ commentID: 0, date: "", avatarID: "", avatarName: "", text: "Loading...", forumID: "", essayID: 0, }} /> ))} </ListGroup> </> ); }