Fetch an articl by its id, Fetch the body of the articl(content)
This commit is contained in:
“Salar
parent
f3c6b65b57
commit
a26faeeb02
80
src/components/fetchAnArticle/AnArticle.tsx
Normal file
80
src/components/fetchAnArticle/AnArticle.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
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";
|
||||
|
||||
const AnArticle = () => {
|
||||
const store = useArticleStore();
|
||||
const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
|
||||
|
||||
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>
|
||||
{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" />
|
||||
{article?.tags && (
|
||||
<div className="keywords my-10 flex flex-col gap-2">
|
||||
<ArticlePart.Article.Title className="text-2xl">
|
||||
Keywords
|
||||
</ArticlePart.Article.Title>
|
||||
|
||||
<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">
|
||||
<ArticlePart.Article.Title className="text-2xl">
|
||||
Abstract
|
||||
</ArticlePart.Article.Title>
|
||||
<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;
|
||||
58
src/components/fetchAnArticle/AnArticleBody.tsx
Normal file
58
src/components/fetchAnArticle/AnArticleBody.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
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";
|
||||
|
||||
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} />
|
||||
<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>
|
||||
{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">{article?.content}</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
</BaseLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnArticleBody;
|
||||
59
src/components/fetchAnArticle/AskeletonArticle.tsx
Normal file
59
src/components/fetchAnArticle/AskeletonArticle.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import "react-loading-skeleton/dist/skeleton.css";
|
||||
const AskeletonArticle = () => {
|
||||
return (
|
||||
<>
|
||||
<Skeleton count={1} />
|
||||
<div className="flex flex-col gap-4 pb-4">
|
||||
<Skeleton count={1} containerClassName="title w-3/4 text-2xl" />
|
||||
<Skeleton count={1} containerClassName="authors w-1/4" />
|
||||
<hr></hr>
|
||||
</div>
|
||||
<div className="interActions-buttons flex">
|
||||
<Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
|
||||
<Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
|
||||
<Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
|
||||
<Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
|
||||
</div>
|
||||
<div className=" my-10 flex flex-col gap-2">
|
||||
<Skeleton
|
||||
count={1}
|
||||
className="keywords-title text-2xl"
|
||||
containerClassName="w-1/4"
|
||||
/>
|
||||
<div className="flex">
|
||||
<Skeleton
|
||||
count={1}
|
||||
className="border-2 border-[#ebebeb]"
|
||||
containerClassName="w-1/6 mr-2"
|
||||
baseColor="transparent"
|
||||
/>
|
||||
<Skeleton
|
||||
count={1}
|
||||
className="border-2 border-[#ebebeb]"
|
||||
containerClassName="w-1/6 mr-2"
|
||||
baseColor="transparent"
|
||||
/>
|
||||
<Skeleton
|
||||
count={1}
|
||||
className="border-2 border-[#ebebeb]"
|
||||
containerClassName="w-1/6 mr-2"
|
||||
baseColor="transparent"
|
||||
/>
|
||||
<Skeleton
|
||||
count={1}
|
||||
className="border-2 border-[#ebebeb]"
|
||||
containerClassName="w-1/6 mr-2"
|
||||
baseColor="transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-10 flex flex-col gap-2">
|
||||
<Skeleton count={1} width={200} className="text-2xl" />
|
||||
<Skeleton count={25} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AskeletonArticle;
|
||||
33
src/components/fetchAnArticle/NotFound.tsx
Normal file
33
src/components/fetchAnArticle/NotFound.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
import Container from "components/Container";
|
||||
import { Button } from "components/Button/Button";
|
||||
import Link from "components/Link";
|
||||
|
||||
const NotFound = () => {
|
||||
return (
|
||||
<Container
|
||||
variant="straight"
|
||||
className="flex flex-col items-center justify-center
|
||||
font-serif h-screen my-auto
|
||||
"
|
||||
>
|
||||
<div
|
||||
className="bg-[url('https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif')]
|
||||
h-[450px]
|
||||
w-full text-center text-7xl "
|
||||
>
|
||||
404
|
||||
</div>
|
||||
<h3 className="font-bold text-2xl text-center">Page does not exist</h3>
|
||||
<h4 className="text-center">
|
||||
Maybe you got a broken link, or maybe you made a misprint in the address
|
||||
bar
|
||||
</h4>
|
||||
<Button className="my-4">
|
||||
<Link href="/">Go to home</Link>
|
||||
</Button>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
Loading…
x
Reference in New Issue
Block a user