65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { useArticleViewModel } from "article/controller/articleViewModel";
|
|
import { useArticleStore } from "article/data/articleStoreImplementation";
|
|
import "react-loading-skeleton/dist/skeleton.css";
|
|
import Skeleton from "react-loading-skeleton";
|
|
import { useParams } from "react-router";
|
|
import { useEffect } from "react";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Components */
|
|
/* -------------------------------------------------------------------------- */
|
|
import * as ArticlePart from "../../components/Article/Article";
|
|
import BaseLayout from "components/BaseLayout";
|
|
import Container from "components/Container";
|
|
import NotFound from "./NotFound";
|
|
import Markdown from "components/Markdown";
|
|
|
|
const AnArticleBody = () => {
|
|
const store = useArticleStore();
|
|
const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
|
|
const { id } = useParams();
|
|
const newId = `${id}`;
|
|
useEffect(() => {
|
|
store.getArticle(newId);
|
|
}, [id]);
|
|
if (hasError) <NotFound />;
|
|
return (
|
|
<BaseLayout>
|
|
<Container variant="straight">
|
|
{shouldShowLoading ? (
|
|
<>
|
|
<Skeleton count={1} className="my-4" />
|
|
<div className="gap-4 py-12 px-20">
|
|
<Skeleton
|
|
count={1}
|
|
containerClassName=" text-3xl"
|
|
className="mb-6"
|
|
/>
|
|
<Skeleton count={15} containerClassName="" />
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<ArticlePart.Article.Breadcumbs className="py-4">
|
|
{article?.topic}
|
|
</ArticlePart.Article.Breadcumbs>
|
|
<div className="gap-4 py-12 px-20">
|
|
<ArticlePart.Article.Title className="text-3xl">
|
|
{article?.title}
|
|
</ArticlePart.Article.Title>
|
|
|
|
<div className="py-6">
|
|
<Markdown
|
|
markdown={article?.content ?? ''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Container>
|
|
</BaseLayout>
|
|
);
|
|
};
|
|
|
|
export default AnArticleBody;
|