87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { useArticleViewModel } from "article/controller/articleViewModel";
|
|
import { useArticleStore } from "article/data/articleStoreImplementation";
|
|
import { useEffect } from "react";
|
|
import * as ArticlePart from "../../components/Article/Article";
|
|
import { useParams } from "react-router";
|
|
import AskeletonArticle from "./AskeletonArticle";
|
|
import Container from "components/Container";
|
|
import NotFound from "./NotFound";
|
|
import { SVGSearch } from "components/icons";
|
|
import BaseLayout from "components/BaseLayout";
|
|
import Typography from "components/typography/Typography";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const AnArticle = () => {
|
|
const store = useArticleStore();
|
|
const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
|
|
const { i18n, t } = useTranslation();
|
|
|
|
const { id } = useParams();
|
|
const newId = `${id}`;
|
|
|
|
useEffect(() => {
|
|
store.getArticle(newId);
|
|
}, [id]);
|
|
|
|
if (hasError) {
|
|
return <NotFound />;
|
|
}
|
|
return (
|
|
<BaseLayout>
|
|
<Container variant="straight">
|
|
{shouldShowLoading ? (
|
|
<AskeletonArticle />
|
|
) : (
|
|
<>
|
|
<ArticlePart.Article.Breadcumbs className="py-4">
|
|
{article?.topic}
|
|
</ArticlePart.Article.Breadcumbs>
|
|
<div className="flex flex-col gap-4 pb-4">
|
|
<ArticlePart.Article.Title className="text-3xl ">
|
|
{article?.title}
|
|
</ArticlePart.Article.Title>
|
|
<ArticlePart.Article.Authors>
|
|
{article?.authors !== undefined ? article?.authors : "Unknown"}
|
|
</ArticlePart.Article.Authors>
|
|
<hr></hr>
|
|
</div>
|
|
|
|
<ArticlePart.Article.InteractionButtons
|
|
emphasis="high"
|
|
articleID={article?.id}
|
|
/>
|
|
{article?.tags && (
|
|
<div className="keywords my-10 flex flex-col gap-2">
|
|
<Typography className="text-2xl" fontWeightVariant="semibold">
|
|
{t("articlePage.keywords")}
|
|
</Typography>
|
|
|
|
<ArticlePart.Article.Keywords className="transition ease-in-out delay-50">
|
|
{article?.tags}
|
|
</ArticlePart.Article.Keywords>
|
|
</div>
|
|
)}
|
|
<div className="abstract my-10 flex flex-col gap-2">
|
|
<Typography className="text-2xl" fontWeightVariant="semibold">
|
|
{t("articlePage.abstract")}
|
|
</Typography>
|
|
<ArticlePart.Article.Description>
|
|
{article?.summary !== undefined ? (
|
|
article?.summary
|
|
) : (
|
|
<div className=" bg-gray-100 w-full stroke-gray-800 text-xl flex justify-center py-1">
|
|
<SVGSearch className="w-14" />
|
|
</div>
|
|
)}
|
|
</ArticlePart.Article.Description>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Container>
|
|
</BaseLayout>
|
|
);
|
|
};
|
|
|
|
// \n
|
|
export default AnArticle;
|