From a26faeeb0286d3c7b140b47dfe6799075cb2d398 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Wed, 12 Oct 2022 16:23:48 +0300
Subject: [PATCH] Fetch an articl by its id, Fetch the body of the
 articl(content)

---
 src/components/fetchAnArticle/AnArticle.tsx   | 80 +++++++++++++++++++
 .../fetchAnArticle/AnArticleBody.tsx          | 58 ++++++++++++++
 .../fetchAnArticle/AskeletonArticle.tsx       | 59 ++++++++++++++
 src/components/fetchAnArticle/NotFound.tsx    | 33 ++++++++
 4 files changed, 230 insertions(+)
 create mode 100644 src/components/fetchAnArticle/AnArticle.tsx
 create mode 100644 src/components/fetchAnArticle/AnArticleBody.tsx
 create mode 100644 src/components/fetchAnArticle/AskeletonArticle.tsx
 create mode 100644 src/components/fetchAnArticle/NotFound.tsx

diff --git a/src/components/fetchAnArticle/AnArticle.tsx b/src/components/fetchAnArticle/AnArticle.tsx
new file mode 100644
index 0000000..54d35d8
--- /dev/null
+++ b/src/components/fetchAnArticle/AnArticle.tsx
@@ -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;
diff --git a/src/components/fetchAnArticle/AnArticleBody.tsx b/src/components/fetchAnArticle/AnArticleBody.tsx
new file mode 100644
index 0000000..55d7f95
--- /dev/null
+++ b/src/components/fetchAnArticle/AnArticleBody.tsx
@@ -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;
diff --git a/src/components/fetchAnArticle/AskeletonArticle.tsx b/src/components/fetchAnArticle/AskeletonArticle.tsx
new file mode 100644
index 0000000..f0b9702
--- /dev/null
+++ b/src/components/fetchAnArticle/AskeletonArticle.tsx
@@ -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;
diff --git a/src/components/fetchAnArticle/NotFound.tsx b/src/components/fetchAnArticle/NotFound.tsx
new file mode 100644
index 0000000..5db7e0d
--- /dev/null
+++ b/src/components/fetchAnArticle/NotFound.tsx
@@ -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;