feat: working on stories

src/collection/domain/models/CollectionFeaturedItem.ts

@@ -0,0 +1,8 @@
+export interface CollectionFeaturedItem {
+  title: string
+  description: string
+  image?: {
+    url: string
+    altText: string
+  }
+}

src/collection/domain/repositories/CollectionRepository.ts

@@ -1,5 +1,6 @@
 import { Collection } from '../models/Collection'
 import { CollectionFacet } from '../models/CollectionFacet'
+import { CollectionFeaturedItem } from '../models/CollectionFeaturedItem'
 import { CollectionItemsPaginationInfo } from '../models/CollectionItemsPaginationInfo'
 import { CollectionItemSubset } from '../models/CollectionItemSubset'
 import { CollectionSearchCriteria } from '../models/CollectionSearchCriteria'
@@ -16,4 +17,5 @@ export interface CollectionRepository {
     paginationInfo: CollectionItemsPaginationInfo,
     searchCriteria?: CollectionSearchCriteria
   ): Promise<CollectionItemSubset>
+  getFeaturedItems(collectionIdOrAlias: number | string): Promise<CollectionFeaturedItem[]>
 }

src/collection/domain/useCases/getCollectionFeaturedItems.ts

@@ -0,0 +1,11 @@
+import { CollectionFeaturedItem } from '../models/CollectionFeaturedItem'
+import { CollectionRepository } from '../repositories/CollectionRepository'
+
+export async function getCollectionFeaturedItems(
+  collectionRepository: CollectionRepository,
+  collectionIdOrAlias: number | string
+): Promise<CollectionFeaturedItem[]> {
+  return collectionRepository.getFeaturedItems(collectionIdOrAlias).catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/collection/infrastructure/repositories/CollectionJSDataverseRepository.ts

@@ -15,6 +15,7 @@ import { CollectionItemsPaginationInfo } from '../../domain/models/CollectionIte
 import { CollectionItemSubset } from '../../domain/models/CollectionItemSubset'
 import { CollectionSearchCriteria } from '../../domain/models/CollectionSearchCriteria'
 import { JSCollectionItemsMapper } from '../mappers/JSCollectionItemsMapper'
+import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
 
 export class CollectionJSDataverseRepository implements CollectionRepository {
   getById(id: string): Promise<Collection> {
@@ -57,4 +58,54 @@ export class CollectionJSDataverseRepository implements CollectionRepository {
         }
       })
   }
+
+  getFeaturedItems(_collectionIdOrAlias: number | string): Promise<CollectionFeaturedItem[]> {
+    // TODO:ME Mocked data for now
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve([
+          {
+            title: 'Featured item 1',
+            description:
+              'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.'
+          },
+          {
+            title: 'Featured item 2',
+            description:
+              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem assumenda nam repellendus adipisci doloremque fugit maiores. Repudiandae sequi illo eum quod id quisquam vero enim ipsa distinctio, quia, consequatur harum dolor non voluptatibus ipsum, rem vel quo voluptates magni eveniet velit hic! Repellendus, provident? Dolore maxime ullam ut est, delectus itaque beatae alias corporis doloremque architecto magni officiis tenetur reprehenderit.',
+            image: {
+              url: 'https://via.placeholder.com/150x80',
+              altText: 'Placeholder image item 2'
+            }
+          },
+          {
+            title: 'Featured item 3',
+            description:
+              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem assumenda nam repellendus adipisci doloremque fugit maiores. Repudiandae sequi illo eum quod id quisquam vero enim ipsa distinctio, quia, consequatur harum dolor non voluptatibus ipsum, rem vel quo voluptates magni eveniet velit hic! Repellendus, provident? Dolore maxime ullam ut est, delectus itaque beatae alias corporis doloremque architecto magni officiis tenetur reprehenderit.',
+            image: {
+              url: 'https://via.placeholder.com/400x400',
+              altText: 'Placeholder image item 2'
+            }
+          },
+          {
+            title: 'Featured item 4',
+            description:
+              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem assumenda nam repellendus adipisci doloremque fugit maiores. Repudiandae sequi illo eum quod id quisquam vero enim ipsa distinctio, quia, consequatur harum dolor non voluptatibus ipsum, rem vel quo voluptates magni eveniet velit hic! Repellendus, provident? Dolore maxime ullam ut est, delectus itaque beatae alias corporis doloremque architecto magni officiis tenetur reprehenderit.',
+            image: {
+              url: 'https://via.placeholder.com/800x400',
+              altText: 'Placeholder image item 2'
+            }
+          },
+          {
+            title: 'Featured item 5',
+            description:
+              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere enim alias quibusdam debitis quaerat, consectetur velit aliquid ipsum! Iusto obcaecati quibusdam hic nam voluptate. Consequuntur laborum officia aliquid recusandae ut, numquam sequi explicabo voluptatum reprehenderit, minima nulla repudiandae at magni fugit quis. Numquam architecto voluptas repudiandae vel totam officia ut? Nobis ex natus optio. Laborum veniam inventore suscipit architecto consectetur minima commodi dolore ducimus ipsam sint vitae doloremque, dolorem ullam! Iusto corporis commodi, pariatur vel magni, dolorum vero non, exercitationem cumque in deserunt? Iste quia dolor aut ullam dolorem eum quidem id accusamus officiis dolore. Quia placeat sapiente aperiam vero distinctio quidem, fugiat recusandae quisquam saepe ut, nesciunt laborum. Aspernatur ea, quasi, facilis impedit optio repellendus quo dolorum velit officia nihil mollitia provident commodi, delectus vero sint porro modi dolores? Ipsam doloribus impedit iure nemo architecto minima explicabo, eligendi dolorem voluptatem sequi aperiam, quisquam placeat ullam facere ut, minus at sit inventore enim eveniet cum. Repellendus eius quam architecto vel cum quod, tenetur neque deserunt, hic a perferendis adipisci fuga quibusdam dignissimos accusantium autem. Quisquam, ipsum harum fugit voluptatum aperiam minus corrupti hic qui impedit eveniet facere ut iure omnis error dicta nobis eum. Repellendus quia, laboriosam laudantium voluptates expedita fuga nulla? Quia nobis labore possimus debitis temporibus minus neque molestiae quam! Repellat reiciendis culpa similique odit doloribus quas praesentium quasi. Voluptatem amet iusto dolore, id, ut eligendi soluta assumenda excepturi perferendis, reiciendis odit explicabo ipsam maiores. Aut corporis eveniet quia repudiandae dolorem nam, excepturi ipsam veniam amet perferendis ullam eaque suscipit unde consequuntur asperiores maiores vel. Adipisci, asperiores. Iure quasi natus repudiandae quod, placeat blanditiis earum tenetur at dolores? Laudantium nam aperiam architecto consequatur, quos molestiae, amet sit itaque debitis neque quo? Iste repellendus vero illo deleniti eum impedit perferendis odit earum, iusto in porro id itaque quasi voluptate.'
+          }
+        ])
+
+        // resolve([])
+      }, 1_000)
+    })
+  }
 }

src/sections/collection/Collection.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
 import {
   Button,
   ButtonGroup,
@@ -9,6 +10,7 @@ import {
   DropdownSeparator,
   Row
 } from '@iqss/dataverse-design-system'
+import { PencilFill } from 'react-bootstrap-icons'
 import { CollectionRepository } from '../../collection/domain/repositories/CollectionRepository'
 import { useCollection } from './useCollection'
 import { useScrollTop } from '../../shared/hooks/useScrollTop'
@@ -22,12 +24,10 @@ import { CollectionInfo } from './CollectionInfo'
 import { CollectionSkeleton } from './CollectionSkeleton'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import { CreatedAlert } from './CreatedAlert'
-// import { CollectionInfo2 } from './collection-info/CollectionInfo2'
-import styles from './Collection.module.scss'
 import FeaturedItems from './featured-items/FeaturedItems'
-import { PencilFill } from 'react-bootstrap-icons'
-import { useNavigate } from 'react-router-dom'
 import { RouteWithParams } from '../Route.enum'
+import { useGetCollectionFeaturedItems } from './useGetCollectionFeaturedItems'
+import styles from './Collection.module.scss'
 
 interface CollectionProps {
   collectionRepository: CollectionRepository
@@ -37,23 +37,6 @@ interface CollectionProps {
   infiniteScrollEnabled?: boolean
 }
 
-// detailed info could be determined if the collection has this configured (banner, featured items)
-const hasDetailedInfo = true
-
-export type CollectionDetailedInfo = null | {
-  banner: string
-  featuredItems: FeaturedItem[]
-}
-
-interface FeaturedItem {
-  title: string
-  description: string // could be markdown ??
-  image?: {
-    url: string
-    altText: string
-  }
-}
-
 export function Collection({
   collectionId,
   collectionRepository,
@@ -64,24 +47,37 @@ export function Collection({
   useTranslation('collection')
   useScrollTop()
   const { user } = useSession()
-  const [showCollectionItemsPanel, setShowCollectionItemsPanel] = useState(
-    hasDetailedInfo ? false : true
-  )
+  const [dataShown, setDataShown] = useState(false)
 
-  const { collection, isLoading } = useCollection(collectionRepository, collectionId)
+  const { collection, isLoading: isLoadingCollection } = useCollection(
+    collectionRepository,
+    collectionId
+  )
   const { collectionUserPermissions } = useGetCollectionUserPermissions({
     collectionIdOrAlias: collectionId,
     collectionRepository
   })
 
+  const { collectionFeaturedItems, isLoading: isLoadingCollectionFeaturedItems } =
+    useGetCollectionFeaturedItems({
+      collectionIdOrAlias: collectionId,
+      collectionRepository
+    })
+
+  const hasFeaturedItems = collectionFeaturedItems.length > 0
+
+  console.log({ collectionFeaturedItems, isLoadingCollectionFeaturedItems, hasFeaturedItems })
+
   const canUserAddCollection = Boolean(collectionUserPermissions?.canAddCollection)
   const canUserAddDataset = Boolean(collectionUserPermissions?.canAddDataset)
 
   const showAddDataActions = Boolean(user && (canUserAddCollection || canUserAddDataset))
 
-  const handleShowCollectionItemsPanel = () => setShowCollectionItemsPanel(true)
+  if (isLoadingCollection || isLoadingCollectionFeaturedItems) {
+    return <CollectionSkeleton />
+  }
 
-  if (!isLoading && !collection) {
+  if (!isLoadingCollection && !collection) {
     return <PageNotFound />
   }
 
@@ -94,23 +90,27 @@ export function Collection({
           <>
             <BreadcrumbsGenerator hierarchy={collection.hierarchy} />
 
-            <CollectionInfo collection={collection} />
+            <CollectionInfo collection={collection} showDescription={!hasFeaturedItems} />
 
             {created && <CreatedAlert />}
-            <div style={{ marginBottom: '1rem' }}>
-              <FeaturedItems collection={collection} />
-            </div>
+
+            {hasFeaturedItems && (
+              <div style={{ marginBottom: '1rem' }}>
+                <FeaturedItems
+                  featuredItems={collectionFeaturedItems}
+                  collectionDescription={collection?.description}
+                />
+              </div>
+            )}
 
             {/* TODO:ME When showing the data we could focus the scroll to the collection items panel */}
-            {!showCollectionItemsPanel && (
+            {hasFeaturedItems && !dataShown && (
               <div className={styles['show-me-data-wrapper']}>
-                <Button onClick={handleShowCollectionItemsPanel}>Show me the data</Button>
+                <Button onClick={() => setDataShown(true)}>Show me the data</Button>
               </div>
             )}
 
-            {/* <CollectionInfo2 collection={collection} /> */}
-
-            {showCollectionItemsPanel && (
+            {(!hasFeaturedItems || dataShown) && (
               <>
                 <div className={styles['action-buttons']}>
                   <ButtonGroup>

src/sections/collection/CollectionInfo.tsx

@@ -6,9 +6,10 @@ import { DatasetLabelSemanticMeaning } from '../../dataset/domain/models/Dataset
 
 interface CollectionInfoProps {
   collection: Collection
+  showDescription: boolean
 }
 
-export function CollectionInfo({ collection }: CollectionInfoProps) {
+export function CollectionInfo({ collection, showDescription = true }: CollectionInfoProps) {
   return (
     <>
       <header className={styles.header}>
@@ -24,7 +25,7 @@ export function CollectionInfo({ collection }: CollectionInfoProps) {
           )}
         </div>
       </header>
-      {collection.description && (
+      {collection.description && showDescription && (
         <div>
           <MarkdownComponent markdown={collection.description} />
         </div>