diff --git a/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx b/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx index f2435e8..b8fd218 100755 --- a/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx +++ b/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx @@ -11,77 +11,85 @@ import { SVGFolder, } from "components/icons"; import classNames from "classnames"; -import { Transition } from "@headlessui/react"; -const interactionButtonsStore = [ - { - icon: <SVGFiletext />, - title: "Read file", - buttonEmphasis: "high", - iconClassName: "h-6 fill-white stroke-white", - }, - { - icon: <SVGDownload />, - title: "Download", - buttonEmphasis: "low", - iconClassName: "w-6 fill-gray-900 stroke-gray-900", - }, - { - icon: <SVGCite />, - title: "Cite", - buttonEmphasis: "low", - iconClassName: "w-6 fill-gray-900 stroke-gray-900", - }, - { - icon: <SVGShare />, - title: "Share", - buttonEmphasis: "low", - iconClassName: "w-6 fill-gray-900 stroke-gray-900", - }, -]; +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 = { - 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 + emphasis, //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} - > + <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.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 { 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 />, + title: "Download", + buttonEmphasis: "low", + iconClassName: "w-6 fill-gray-900 stroke-gray-900", + }, + { + icon: <SVGCite />, + title: "Cite", + buttonEmphasis: "low", + iconClassName: "w-6 fill-gray-900 stroke-gray-900", + }, + { + icon: <SVGShare />, + title: "Share", + buttonEmphasis: "low", + iconClassName: "w-6 fill-gray-900 stroke-gray-900", + }, + ]; + // const fileInteractionButtons = interactionButtonsStore.map((button) => { return ( - <Button - emphasis={button.buttonEmphasis === "high" ? "high" : "low"} - className="h-max px-2 mr-2" + <Link + onClick={ + button.title == "Read file" ? () => getArticle(newId) : () => { } + } + to={button.dist} > - <Button.Icon> - {React.cloneElement(button.icon, { className: button.iconClassName })} - </Button.Icon> - {emphasis === "high" ? <Typography>{button.title}</Typography> : null} - </Button> + <Button + emphasis={button.buttonEmphasis === "high" ? "high" : "low"} + className="h-max px-2 mr-2" + > + <Button.Icon> + {React.cloneElement(button.icon, { + className: button.iconClassName, + })} + </Button.Icon> + {emphasis === "high" ? <Typography>{button.title}</Typography> : null} + </Button> + </Link> ); });