Manualy merge from fix/article-interaction-buttons

Resolve interaction button link issue

src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx

@@ -11,14 +11,44 @@ import {
   SVGFolder,
 } from "components/icons";
 import classNames from "classnames";
-import { Transition } from "@headlessui/react";
 
-const interactionButtonsStore = [
+import { useArticleViewModel } from "article/controller/articleViewModel";
+import { useArticleStore } from "article/data/articleStoreImplementation";
+import { useParams } from "react-router";
+import Link from "components/typography/Link";
+import { getArticle } from "article/data/articleAPIService";
+
+type ArticleButtonProps = {
+  children?: React.ReactNode;
+  className?: string;
+  emphasis?: "high" | "low";
+} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
+
+export function ArticleInteractionButtons({
+  children,
+  className,
+  emphasis, //to change displaying of component
+  ...props
+}: ArticleButtonProps) {
+  const abstractButton = (
+    <Button emphasis="medium" className="text-sm leading-4 items-center px-3">
+      <Button.Icon>
+        <SVGArrowDown className="w-4 fill-blue-700 stroke-blue-700" />
+      </Button.Icon>
+      <Typography fontWeightVariant="bold" className="pr-2">
+        Abstract
+      </Typography>
+    </Button>
+  );
+  const { id } = useParams();
+  const newId = `${id}`;
+  const interactionButtonsStore = [
     {
       icon: <SVGFiletext />,
       title: "Read file",
       buttonEmphasis: "high",
       iconClassName: "h-6 fill-white stroke-white",
+      dist: `${newId}/anarticlebody`,
     },
     {
       icon: <SVGDownload />,
@@ -38,50 +68,28 @@ const interactionButtonsStore = [
       buttonEmphasis: "low",
       iconClassName: "w-6 fill-gray-900 stroke-gray-900",
     },
-];
+  ];
-
+  //
-type ArticleButtonProps = {
-  isAbstractOpen: boolean;
-  openAbstract: () => void;
-  children?: React.ReactNode;
-  className?: string;
-  emphasis?: "high" | "low";
-} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
-
-export function ArticleInteractionButtons({
-  isAbstractOpen = false,
-  children,
-  openAbstract = () => { },
-  className,
-  emphasis = "high", //to change displaying of component
-  ...props
-}: ArticleButtonProps) {
-  const abstractButton = (
-    <Button
-      emphasis="medium"
-      className="text-sm leading-4 items-center px-3 mr-2 focus:outline-none active:outline-none"
-      onClick={openAbstract}
-    >
-      <Typography fontWeightVariant="bold" className="pr-2">
-        Abstract
-      </Typography>
-      <Button.Icon>
-        {!isAbstractOpen ? <SVGArrowDown className="w-4 fill-blue-700 stroke-blue-700" /> : <SVGArrowUp className="w-4 fill-blue-700 stroke-blue-700" />}
-      </Button.Icon>
-    </Button>
-  );
-
   const fileInteractionButtons = interactionButtonsStore.map((button) => {
     return (
+      <Link
+        onClick={
+          button.title == "Read file" ? () => getArticle(newId) : () => { }
+        }
+        to={button.dist}
+      >
         <Button
           emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
           className="h-max px-2 mr-2"
         >
           <Button.Icon>
-          {React.cloneElement(button.icon, { className: button.iconClassName })}
+            {React.cloneElement(button.icon, {
+              className: button.iconClassName,
+            })}
           </Button.Icon>
           {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
         </Button>
+      </Link>
     );
   });