Merge pull request #282 from kse-publications/feature/task_similar_pu…

…blications

similar publications section add

client/src/components/publications/publication-section.tsx

@@ -7,15 +7,18 @@ import { ChevronRightIcon } from '@radix-ui/react-icons'
 import GoBackButton from '../layout/go-back-button'
 import type { PaginatedCollection } from '@/types/common/paginated-collection'
 import type { PublicationSummary } from '@/types/publication-summary/publication-summary'
+
 import RelatedAuthorsContextProvider from '../related-by-authors-results/authors-context'
 import RelatedAuthorsResults from '../related-by-authors-results/authors-results'
+import SimilarPublicationsResults from './similar-publications'
 
 interface PublicationPageProps {
   data: Publication
   relatedPublications: PaginatedCollection<PublicationSummary>
+  similarPublications: PublicationSummary[]
 }
 
-function PublicationPage({ data, relatedPublications }: PublicationPageProps) {
+function PublicationPage({ data, relatedPublications, similarPublications }: PublicationPageProps) {
   return (
     <>
       <RelatedAuthorsContextProvider
@@ -77,6 +80,9 @@ function PublicationPage({ data, relatedPublications }: PublicationPageProps) {
             </div>
           )}
         </div>
+        {similarPublications?.length > 0 && (
+          <SimilarPublicationsResults similarResults={similarPublications} />
+        )}
         {relatedPublications?.totalCount > 0 && <RelatedAuthorsResults />}
       </RelatedAuthorsContextProvider>
     </>

client/src/components/publications/similar-publications.tsx

@@ -0,0 +1,33 @@
+import Masonry from 'react-masonry-css'
+import { SearchResultItem } from '../search-results/search-result-item'
+import type { PublicationSummary } from '@/types/publication-summary/publication-summary'
+
+const breakpointColumnsObj = {
+  default: 2,
+  1100: 2,
+  600: 1,
+}
+
+interface SimilarPublicationsProps {
+  similarResults: PublicationSummary[]
+}
+
+export default function SimilarPublicationsResults({ similarResults }: SimilarPublicationsProps) {
+  return (
+    <div className="more-publications mb-10">
+      <div className="mb-5 flex content-center gap-5">
+        <h3 className="w-fit text-center text-2xl font-bold">Similar publications</h3>
+        <p className="flex items-center pl-1 pt-1 opacity-70">
+          {similarResults.length} publications found
+        </p>
+      </div>
+      {
+        <Masonry breakpointCols={breakpointColumnsObj} className="masonry-grid">
+          {similarResults.map((publication) => (
+            <SearchResultItem key={publication.slug} publication={publication} />
+          ))}
+        </Masonry>
+      }
+    </div>
+  )
+}

client/src/pages/publications/[id].astro

@@ -4,34 +4,49 @@ import { DEFAULT_PAGE } from '@/config/search-params'
 import type { PaginatedCollection } from '@/types/common/paginated-collection'
 import type { PublicationSummary } from '@/types/publication-summary/publication-summary'
 
-import { getPublication } from '@/services/search/get-publications'
+import Layout from '@/layouts/Layout.astro'
 import PublicationPage from '@/components/publications/publication-section'
+
+import { getPublication } from '@/services/search/get-publications'
 import { getRelatedByAuthors } from '../../services/search/get-publications'
-import Layout from '@/layouts/Layout.astro'
+import { getSimilarPublications } from '../../services/search/get-publications'
 
 const { id } = Astro.params as { id: string }
 let relatedPublications: PaginatedCollection<PublicationSummary>
+let similarPublications: PublicationSummary[]
 
 const clientUuid = Astro.cookies.get('client-uuid')
 
 const data = await getPublication(id, clientUuid?.value).catch((error) => {
   console.log(error)
 })
 
-const authorsIds = data.authors.map((author: any) => author.id)
+interface AuthorData {
+  id: number,
+  name: string
+}
+
+const authorsIds = data.authors.map((author: AuthorData) => author.id)
 
 const fetchRelatedPublications = async () => {
   let publications = await getRelatedByAuthors(data.id, DEFAULT_PAGE, authorsIds.join('-'))
   return publications
 }
 
+const fetchSimilarPublications = async () => {
+  let similar = await getSimilarPublications(data.id)
+  return similar
+}
+
 relatedPublications = await fetchRelatedPublications()
+similarPublications = await fetchSimilarPublications()
 ---
 
 <Layout title=`KSE Publications | ${data.title}`>
   <PublicationPage
     data={data}
     relatedPublications={relatedPublications}
+    similarPublications={similarPublications}
     transition:persist
     client:load
   />

client/src/services/search/get-publications.ts

@@ -67,3 +67,8 @@ export const getRelatedByAuthors = async (
     `${BASE_URL}/publications/${id}/related-by-authors?Page=${page}&PageSize=${DEFAULT_PAGE_SIZE}&Authors=${authors}`
   ).then((response) => response.json())
 }
+
+export const getSimilarPublications = async (id: string): Promise<PublicationSummary[]> => {
+  const BASE_URL = getBaseUrl()
+  return fetch(`${BASE_URL}/publications/${id}/similar`).then((response) => response.json())
+}

client/src/types/common/query-params.ts

@@ -14,3 +14,8 @@ export interface RelatedPublicationsQueryParams {
   authors: string
   page?: number
 }
+
+export interface SimilarPublicationsQueryParams {
+  id: string
+  page?: number
+}