From db331df9de6203ac5b9fe0a36cc9b050934c8b97 Mon Sep 17 00:00:00 2001 From: Nathan de Balthasar Date: Thu, 28 Sep 2023 10:46:16 +0200 Subject: [PATCH] feat(strapi-implementation): add new types --- apps/trackflix/.gitignore | 4 +++ apps/trackflix/src/api/IApi.ts | 2 +- apps/trackflix/src/api/StrapiApi.ts | 34 ++++++++++++++++++---- apps/trackflix/src/api/api.interface.ts | 14 +++++++++ apps/trackflix/src/api/strapi.interface.ts | 14 +++++++++ apps/trackflix/src/context/CMSContext.tsx | 12 ++++++++ apps/trackflix/src/pages/index.tsx | 11 +++++-- apps/trackflix/src/shared/home/Landing.tsx | 28 +++++++----------- 8 files changed, 92 insertions(+), 27 deletions(-) create mode 100644 apps/trackflix/src/api/api.interface.ts create mode 100644 apps/trackflix/src/api/strapi.interface.ts create mode 100644 apps/trackflix/src/context/CMSContext.tsx diff --git a/apps/trackflix/.gitignore b/apps/trackflix/.gitignore index 59cd40e..8c59fea 100644 --- a/apps/trackflix/.gitignore +++ b/apps/trackflix/.gitignore @@ -28,3 +28,7 @@ amplifytools.xcconfig .secret-* **.sample #amplify-do-not-edit-end + +.env +.env.development +.env.production diff --git a/apps/trackflix/src/api/IApi.ts b/apps/trackflix/src/api/IApi.ts index 6b6ae44..723dc29 100644 --- a/apps/trackflix/src/api/IApi.ts +++ b/apps/trackflix/src/api/IApi.ts @@ -1,4 +1,4 @@ -import { VideoOnDemand } from '../models' +import { VideoOnDemand } from './api.interface' export interface IApi { fetchHighlightedVideos(): Promise diff --git a/apps/trackflix/src/api/StrapiApi.ts b/apps/trackflix/src/api/StrapiApi.ts index 19e1b6e..21ceb04 100644 --- a/apps/trackflix/src/api/StrapiApi.ts +++ b/apps/trackflix/src/api/StrapiApi.ts @@ -1,17 +1,41 @@ -import { VideoOnDemand } from '../models' +import { VideoOnDemand } from './api.interface' import { IApi } from './IApi' +import { StrapiMedia } from './strapi.interface' export class StrapiApi implements IApi { - private readonly endpoint: string + private readonly baseUrl: string private readonly token: string - constructor(endpoint: string, token: string) { - this.endpoint = endpoint + constructor({ baseUrl, token }: { baseUrl?: string; token?: string }) { + if (!baseUrl || !token) + throw new Error('StrapiApi: baseUrl and token are required') + + this.baseUrl = baseUrl this.token = token } async fetchHighlightedVideos(): Promise { - return [] + const response = await fetch( + `${this.baseUrl}/api/vods?filters[highlighted][$eq]=true`, + { + headers: { + Authorization: `Bearer ${this.token}`, + }, + } + ) + + const videos: StrapiMedia[] = await response + .json() + .then((res) => res.data) + return videos.map((video: StrapiMedia) => ({ + id: video.id, + title: video.attributes.Name, + description: video.attributes.description, + highlighted: video.attributes.highlighted, + createdAt: video.attributes.createdAt, + updatedAt: video.attributes.updatedAt, + src: video.attributes.media_url, + })) } } diff --git a/apps/trackflix/src/api/api.interface.ts b/apps/trackflix/src/api/api.interface.ts new file mode 100644 index 0000000..9b5446c --- /dev/null +++ b/apps/trackflix/src/api/api.interface.ts @@ -0,0 +1,14 @@ +export interface Thumbnail { + src: string +} + +export interface VideoOnDemand { + id: string + title: string + description: string + highlighted: boolean + thumbnail?: Thumbnail + createdAt: string + updatedAt: string + src: string +} diff --git a/apps/trackflix/src/api/strapi.interface.ts b/apps/trackflix/src/api/strapi.interface.ts new file mode 100644 index 0000000..9ca0dab --- /dev/null +++ b/apps/trackflix/src/api/strapi.interface.ts @@ -0,0 +1,14 @@ +export interface StrapiMedia { + id: string + attributes: { + Name: string + createdAt: string + updatedAt: string + rotation_start?: number + rotation_end?: number + description: string + type?: string + media_url: string + highlighted: boolean + } +} diff --git a/apps/trackflix/src/context/CMSContext.tsx b/apps/trackflix/src/context/CMSContext.tsx new file mode 100644 index 0000000..06866d2 --- /dev/null +++ b/apps/trackflix/src/context/CMSContext.tsx @@ -0,0 +1,12 @@ +import { IApi } from '../api/IApi' +import { StrapiApi } from '../api/StrapiApi' +import { createContext } from 'react' + +export const CMSContext = createContext<{ + api: IApi +}>({ + api: new StrapiApi({ + baseUrl: process.env.REACT_APP_CMS_BASE_URL, + token: process.env.REACT_APP_CMS_TOKEN, + }), +}) diff --git a/apps/trackflix/src/pages/index.tsx b/apps/trackflix/src/pages/index.tsx index 618abbc..51a1665 100644 --- a/apps/trackflix/src/pages/index.tsx +++ b/apps/trackflix/src/pages/index.tsx @@ -1,8 +1,9 @@ -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect, useContext } from 'react' import Layout from '../shared/components/Layout' import Landing from '../shared/home/Landing' import Videos from '../shared/videos' import defaultTheme, { NavbarTheme, defaultNavbar } from '../shared/theme' +import { CMSContext } from '../context/CMSContext' const noScrollNavBarTheme: NavbarTheme = { type: 'noScroll', @@ -27,6 +28,8 @@ const HomePage = () => { navbar: noScrollNavBarTheme, }, }) + const apiContext = useContext(CMSContext) + const handleScroll = () => { if (window.pageYOffset > 20 && theme.palette.navbar.type !== 'scroll') { setTheme({ @@ -61,8 +64,10 @@ const HomePage = () => { return ( - - + + + + ) } diff --git a/apps/trackflix/src/shared/home/Landing.tsx b/apps/trackflix/src/shared/home/Landing.tsx index 7a4e910..dfa0376 100644 --- a/apps/trackflix/src/shared/home/Landing.tsx +++ b/apps/trackflix/src/shared/home/Landing.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useContext, useEffect, useState } from 'react' import styled from 'styled-components' import { fetchHighlightedVideos } from '../api' import ReactPlayer from 'react-player' @@ -7,6 +7,8 @@ import intro from '../../videos/introduction-video.mp4' import PlayLogo from '../../assets/logo/logo-play-without-circle.svg' import { screenSizes } from '../constants' import { useWindowDimensions } from '../hooks' +import { CMSContext } from '../../context/CMSContext' +import { VideoOnDemand } from '../../api/api.interface' const LandingContainer = styled.div` width: 100%; @@ -95,29 +97,19 @@ const StyledPlayLogo = styled(PlayLogo)` const Landing = () => { const [source, setSource] = useState(null) - const [video, setVideo] = useState(null) + const [video, setVideo] = useState(null) const { width } = useWindowDimensions() + const { api } = useContext(CMSContext) useEffect(() => { const fetchHighlited = async () => { - const highlightedVideos = await fetchHighlightedVideos() - if ( - highlightedVideos && - highlightedVideos.data && - highlightedVideos.data.listMedia && - highlightedVideos.data.listMedia.items && - highlightedVideos.data.listMedia.items.length > 0 - ) { - const media = highlightedVideos.data.listMedia.items[0] + const highlightedVideos = await api.fetchHighlightedVideos() + if (highlightedVideos && highlightedVideos.length > 0) { + const media = highlightedVideos[0] setVideo(media) - setSource(media.source) + setSource(media.src) } else { - // test purpose, to replace later - setSource( - 'https://dzmkyt5xmjxxq.cloudfront.net/public/fdcbf258-ee64-466e-aa08-4ac06cf69117/fdcbf258-ee64-466e-aa08-4ac06cf69117.m3u8' - ) - // - // setSource(intro) + setSource(intro) } } fetchHighlited()