feat(strapi/section-page): Implement the section page (#7)

apps/trackflix/package.json

@@ -70,6 +70,7 @@
   "devDependencies": {
     "@types/luxon": "^1.27.1",
     "@types/react-helmet": "^6.1.1",
+    "@types/react-lines-ellipsis": "^0.15.2",
     "@types/react-slick": "^0.23.5",
     "@types/styled-components": "^5.1.9",
     "@types/video.js": "^7.3.17",

apps/trackflix/src/api/IApi.ts

@@ -6,7 +6,10 @@ import {
 
 export interface IApi {
     fetchHighlightedVideos(): Promise<VideoOnDemand[]>
-    fetchVodFiles(nextToken: string | null): Promise<FetchVideoFilesResponse>
+    fetchVodFiles(
+        nextToken: string | null,
+        fetchVodFiles?: boolean
+    ): Promise<FetchVideoFilesResponse>
     fetchVodAsset(id: string): Promise<VideoOnDemand | null>
     fetchThumbnail(id: string): Promise<Thumbnail>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

apps/trackflix/src/api/StrapiApi.ts

@@ -38,6 +38,21 @@ export class StrapiApi implements IApi {
         } as VideoOnDemand
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private strapiMediaToThumbnail(response: any): Thumbnail {
+        const thumbnailObj = response.attributes?.Thumbnails?.data[0]
+        const { createdAt, updatedAt } = thumbnailObj.attributes
+        const { thumbnail } = thumbnailObj?.attributes?.formats
+
+        return {
+            id: thumbnailObj.id,
+            ext: thumbnail.ext,
+            src: `${this.baseUrl}${thumbnail.url}`,
+            createdAt,
+            updatedAt,
+        }
+    }
+
     async fetchHighlightedVideos(): Promise<VideoOnDemand[]> {
         const response = await fetch(
             `${this.baseUrl}/api/vods?filters[highlighted][$eq]=true`,
@@ -57,21 +72,28 @@ export class StrapiApi implements IApi {
     }
 
     async fetchVodFiles(
-        nextToken: string | null
+        nextToken: string | null,
+        fechThumbnails = false
     ): Promise<FetchVideoFilesResponse> {
         const response = await fetch(
             `${this.baseUrl}/api/vods/?pagination[page]=${
                 nextToken ? parseInt(nextToken) : 1
-            }`,
+            }&populate=Thumbnails`,
             {
                 headers: {
                     Authorization: `Bearer ${this.token}`,
                 },
             }
         ).then((res) => res.json())
 
-        const videos: VideoOnDemand[] = response.data.map(
-            (video: StrapiMedia) => this.strapiMediaToVideoOnDemand(video)
+        const videos: VideoOnDemand[] = await Promise.all(
+            response.data.map((video: StrapiMedia) => {
+                const result = this.strapiMediaToVideoOnDemand(video)
+                if (fechThumbnails)
+                    result.media.thumbnail = this.strapiMediaToThumbnail(video)
+
+                return result
+            })
         )
         const { pageCount, page } = response.meta.pagination
 
@@ -90,17 +112,8 @@ export class StrapiApi implements IApi {
                 },
             }
         ).then((res) => res.json())
-        const thumbnailObj = response.data.attributes?.Thumbnails?.data[0]
-        const { createdAt, updatedAt } = thumbnailObj.attributes
-        const { thumbnail } = thumbnailObj?.attributes?.formats
 
-        return {
-            id: thumbnailObj.id,
-            ext: thumbnail.ext,
-            src: `${this.baseUrl}${thumbnail.url}`,
-            createdAt,
-            updatedAt,
-        }
+        return this.strapiMediaToThumbnail(response.data)
     }
 
     async fetchVodAsset(id: string): Promise<VideoOnDemand | null> {

apps/trackflix/src/api/api.interface.ts

@@ -28,7 +28,7 @@ export interface Media {
 
 export interface VideoOnDemand {
     id: string
-    media?: Media
+    media: Media
     src?: string
     createdAt?: string
     updatedAt?: string

apps/trackflix/src/pages/section/[id].tsx

@@ -1,20 +1,20 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import styled from 'styled-components'
 import { PageProps } from 'gatsby'
 import Layout from '../../shared/components/Layout'
 import Loader from '../../shared/components/Loader'
-import { fetchSection, fetchVodFiles, fetchThumbnail } from '../../shared/api'
-import { VideoOnDemand, Section, Thumbnail } from '../../models'
 import moment from 'moment'
 import TrackitLogo from '../../assets/logo/trackit-colored.svg'
 import LinesEllipsis from 'react-lines-ellipsis'
 import SectionVideosSorted, {
     KEY_SORT_BY_MOST_RECENT,
     KEY_SORT_BY_MOST_VIEWED,
 } from '../../shared/components/Section/SectionVideosSorted'
-import VideoCard from '../../shared/components/Card/VideoCard'
+import VideoCard, { VideoElement } from '../../shared/components/Card/VideoCard'
 import { useWindowDimensions } from '../../shared/hooks'
 import { screenSizes } from '../../shared/constants'
+import { CMSContext } from '../../context/CMSContext'
+import { VideoOnDemand, Thumbnail } from '../../api/api.interface'
 
 const Container = styled.div`
     display: flex;
@@ -137,7 +137,7 @@ const ChannelLogo = styled.div`
 
 const SectionPage = (props: PageProps) => {
     const id = props.params.id
-    const [section, setSection] = useState<Section | null>(null)
+    const [section, setSection] = useState<string | null>(null)
     const [vodAssets, setVodAssets] = useState<Array<VideoOnDemand>>([])
     const [cardProperties, setCardProperties] = useState({
         infos: 'show',
@@ -151,47 +151,48 @@ const SectionPage = (props: PageProps) => {
         }>
     >([])
     const { width } = useWindowDimensions()
+    const { api } = useContext(CMSContext)
 
     useEffect(() => {
         ;(async () => {
-            const { data } = await fetchSection(id)
-            setSection(data?.getSection as Section)
+            setSection(id) // FETCH FROM API
         })()
     }, [id])
 
     useEffect(() => {
         ;(async () => {
             try {
-                const { data } = await fetchVodFiles(null)
-                const fetchedVodAssets = data?.listVideoOnDemands
-                    ?.items as Array<VideoOnDemand>
+                const data = await api.fetchVodFiles(null, true)
+                const fetchedVodAssets = data?.data
                 const assets = fetchedVodAssets.filter((asset) => {
                     let returnValue = false
                     // eslint-disable-next-line
-                    asset.media?.sections?.items.forEach((item) => {
-                        if (item?.section.id === section.id) {
+                    asset.media?.sections?.forEach((item) => {
+                        if (item === section) {
                             returnValue = true
                         }
                     })
                     return returnValue
                 })
+                console.log('==>', assets[0])
                 setVodAssets(assets)
                 const thumbnailArr: Array<{
                     obj: Thumbnail | undefined
                     url: string
                 }> = []
                 await Promise.all(
                     assets.map(async (asset) => {
-                        if (asset.media?.thumbnail?.src != null) {
+                        if (asset.media?.thumbnail?.src) {
                             thumbnailArr.push({
                                 obj: asset.media.thumbnail,
                                 url: asset.media.thumbnail.src,
                             })
                         } else {
-                            const data = await fetchThumbnail(asset.media)
+                            const data = await api.fetchThumbnail(asset.id)
+                            console.log(data)
                             thumbnailArr.push({
-                                obj: asset.media?.thumbnail,
-                                url: data as string,
+                                obj: data,
+                                url: data.src || '',
                             })
                         }
                     })
@@ -226,9 +227,9 @@ const SectionPage = (props: PageProps) => {
             {section ? (
                 <Container>
                     <Header>
-                        <Title>{section.label}</Title>
+                        <Title>{section}</Title>
                         <Separator />
-                        <Description>{section.description}</Description>
+                        {/* <Description>{section}</Description> */}
                     </Header>
                     <SplitScreenContainer>
                         <SplitScreen>
@@ -246,7 +247,7 @@ const SectionPage = (props: PageProps) => {
                                     return (
                                         <VideoCardContainer key={vod.id}>
                                             <VideoCard
-                                                video={video}
+                                                video={video as VideoElement}
                                                 videoInfos={
                                                     cardProperties.infos
                                                 }

apps/trackflix/src/shared/components/Card/VideoCard.tsx

@@ -123,14 +123,16 @@ const CardItemContentContainer = styled.div<{
     transition: background-color 200ms ease-out;
 `
 
-interface VideoCardProps {
-    video: {
-        vod: VideoOnDemand
-        thumbnail?: {
-            obj: IThumbnail
-            url: string
-        }
+export interface VideoElement {
+    vod: VideoOnDemand
+    thumbnail: {
+        obj: IThumbnail
+        url: string
     }
+}
+
+interface VideoCardProps {
+    video: VideoElement
     haveSubtitle?: boolean
     children?: React.ReactNode
     redirectTo?: string | null