66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { useState } from "react";
|
|
import { Article } from "components/Article/Article";
|
|
import { Article as ArticleTypes } from "article/domain/articleEntity";
|
|
import classNames from "classnames";
|
|
import { debounce } from "lodash";
|
|
import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
|
|
import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel";
|
|
import { Loader } from "./Loader/Loader";
|
|
|
|
type Props = {
|
|
searchItem: ArticleTypes;
|
|
};
|
|
|
|
export const ArticleSearchResult = ({ searchItem }: Props) => {
|
|
const store = useSearchStoreImplementation();
|
|
const { isLoading } = useSearchViewModel(store);
|
|
|
|
const [openAbstract, setOpenAbstract] = useState(false);
|
|
|
|
const debouncedTask = debounce((task) => Promise.resolve(task()), 200);
|
|
|
|
function open() {
|
|
debouncedTask(() => setOpenAbstract(!openAbstract));
|
|
}
|
|
|
|
return (
|
|
<Article className=" pt-6 pb-3 ">
|
|
<div className="flex flex-row justify-between">
|
|
<Article.Breadcumbs emphasis="low" className="flex flex-wrap flex-row">
|
|
{[
|
|
`${searchItem.topic}`,
|
|
`${searchItem.topic}`,
|
|
`${searchItem.topic}`,
|
|
`${searchItem.topic}`,
|
|
]}
|
|
</Article.Breadcumbs>
|
|
<Article.SubscriptionsButtons />
|
|
</div>
|
|
|
|
<Article.Title linkTo={`/article/info/${searchItem.id}`} className="text-2xl">
|
|
{searchItem.title}
|
|
</Article.Title>
|
|
<Article.Authors emphasis="low" className="flex flex-wrap flex-row">
|
|
{searchItem.authors}
|
|
</Article.Authors>
|
|
<Article.Keywords emphasis="low" className="flex flex-wrap flex-row py-2">
|
|
{searchItem.tags}
|
|
</Article.Keywords>
|
|
<Article.InteractionButtons
|
|
className="py-2"
|
|
emphasis="low"
|
|
openAbstract={open}
|
|
isAbstractOpen={openAbstract}
|
|
articleID={searchItem.id}
|
|
/>
|
|
<Article.Description
|
|
emphasis="low"
|
|
isShowing={openAbstract}
|
|
className={classNames("my-2")}
|
|
>
|
|
{searchItem.summary}
|
|
</Article.Description>
|
|
</Article>
|
|
);
|
|
};
|