Fixed article entity bug

src/article/data/articleAPIService.ts

@@ -17,7 +17,7 @@ async function getArticle(id: string): Promise<Article> {
     const dto = response.data;
     return create({
       id: dto.id,
-      topic: dto.topic,
+      topic: [dto.topic],
       title: dto.title,
       authors: dto.authors,
       tags: dto.tags,

src/article/data/articleReducer.ts

@@ -1,5 +1,4 @@
 import { AnyAction } from "@reduxjs/toolkit";
-import { Article } from "article/domain/articleEntity";
 import type { ArticleStore } from "../domain/articleStore";
 import * as actionTypes from "./articleActionTypes";
 

src/article/domain/ArticleEntity.ts

@@ -1,10 +0,0 @@
-export interface Article {
-  id?: string;
-  title?: string;
-  authors?: string[];
-  topic?: string[];
-  summary?: string;
-  tags?: string[];
-  content?: string;
-  publisher?: string;
-}

src/article/domain/articleEntity.ts

@@ -1,9 +1,9 @@
 export interface Article {
   id: string;
-  topic: string;
   title: string;
-  authors: string[];
-  tags: string[];
-  summary: string;
   content: string;
+  topic?: string[];
+  authors?: string[];
+  tags?: string[];
+  summary?: string;
 }

src/article/domain/articleStore.ts

@@ -1,5 +1,4 @@
-import type { Article } from "./articleEntity";
-
+import { Article } from './articleEntity';
 interface ArticleStore {
   // State
   article: Article | undefined;

src/article/useCases/params/create_article_params.ts

@@ -1,6 +1,6 @@
 export interface CreateArticleParams {
   id: string;
-  topic: string;
+  topic: string[];
   title: string;
   authors: string[];
   tags: string[];

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

@@ -11,85 +11,77 @@ import {
   SVGFolder,
 } from "components/icons";
 import classNames from "classnames";
+import { Transition } from "@headlessui/react";
 
-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";
+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",
+  },
+];
 
 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, //to change displaying of component
+  emphasis = "high", //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>
+    <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 { 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 (
-      <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
-          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>
+        <Button.Icon>
+          {React.cloneElement(button.icon, { className: button.iconClassName })}
+        </Button.Icon>
+        {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
+      </Button>
     );
   });
 

src/components/ArticleSearchResult.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Article } from "components/Article/Article";
-import { Article as ArticleTypes } from "article/domain/ArticleEntity";
+import { Article as ArticleTypes } from "article/domain/articleEntity";
 import classNames from "classnames";
 import { debounce } from "lodash";
 import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";

src/components/SearchResultsSection.tsx

@@ -38,7 +38,7 @@ export const SearchResultSection = () => {
         </Typography>
       </div>
       <hr className="w-full border-gray-100" />
-      <div className="divide divide-y divide-gray-100">{ getResults()}</div>
+      <div className="divide divide-y divide-gray-100">{getResults()}</div>
     </div>
   );
 };

src/components/fetchAnArticle/NotFound.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Container from "components/Container";
 import { Button } from "components/Button/Button";
-import Link from "components/Link";
+import Link from "components/typography/Link";
 
 const NotFound = () => {
   return (
@@ -24,7 +24,7 @@ const NotFound = () => {
         bar
       </h4>
       <Button className="my-4">
-        <Link href="/">Go to home</Link>
+        <Link to="/">Go to home</Link>
       </Button>
     </Container>
   );

src/searchResults/data/dto/searchResultsDTO.ts

@@ -1,18 +1,20 @@
+import { Article } from "article/domain/articleEntity";
+
 export type SearchResultsDTO = {
   data: ArticleDTO[];
-meta: SearchResultsMeta;
+  meta: SearchResultsMeta;
 };
 
 export type ArticleDTO = {
-  id?: string;
-  title?: string;
-  authors?: string[];
-  topic?: string[];
-  summary?: string;
-  tags?: string[];
-  content?: string;
+  id: string;
+  title: string;
+  authors: string[];
+  topic: string[];
+  summary: string;
+  tags: string[];
+  content: string;
 };
 
 export type SearchResultsMeta = {
-  total:  string;
-}
+  total: string;
+}

src/searchResults/data/searchService.ts

@@ -10,11 +10,23 @@ const searchEndpoint = "/papers/search";
 async function search(request: string): Promise<SearchResults> {
   try {
     const response = await integratorApiClient.get<SearchResultsDTO>(
-      searchEndpoint + `?query=` + request + `&limit=10&offset=0`
-      // "https://run.mocky.io/v3/ea705665-2479-4039-8b81-412e011fc145"
+      // searchEndpoint + `?query=` + request + `&limit=10&offset=0`
+      "https://run.mocky.io/v3/ea705665-2479-4039-8b81-412e011fc145"
     );
     const dto = response.data;
-    return create({ data: dto.data, meta: dto.meta });
+    return create({
+      data: dto.data.map((e) => {
+        return {
+          authors: e.authors,
+          content: e.content,
+          id: e.id,
+          summary: e.summary,
+          tags: e.tags,
+          title: e.title,
+          topic: e.topic,
+        }
+      }), meta: dto.meta
+    });
   } catch (reason) {
     if (axios.isAxiosError(reason)) {
       throw Failure.fromReason(reason, "failures.services.load");

src/searchResults/domain/searchResultsEntity.ts

@@ -1,8 +1,8 @@
-import { Article } from "article/domain/ArticleEntity";
+import { Article } from "article/domain/articleEntity";
 
 export interface SearchResults {
   data: Article[];
-  meta:SearchResultsMeta ;
+  meta: SearchResultsMeta;
 }
 
 export interface SearchResultsMeta {

src/store/store.ts

@@ -1,10 +1,12 @@
 import { configureStore } from "@reduxjs/toolkit";
+import { articleReducer } from "article/data/articleReducer";
 import thunk from "redux-thunk";
 import { searchResultReducer } from "searchResults/data/searchReducer";
 
 const store = configureStore({
   reducer: {
     searchResults: searchResultReducer,
+    article: articleReducer,
   },
   middleware: [thunk],
 });