feat: Implement generic YouTube block

Author: hola-soy-milk

src/components/section/ContentBlock.spec.tsx

@@ -14,6 +14,7 @@ describe('Blocks', () => {
     blocks = [
       factory.getBlockTitleNode({ text: 'My Title' }),
       factory.getBlockTextNode({ text: 'My text.' }),
+      factory.getBlockYoutubeNode({ title: 'My video.' }),
     ]
   })
 
@@ -25,11 +26,13 @@ describe('Blocks', () => {
 
     const text = getByText('My text.')
     expect(text).toBeTruthy()
+
+    const youTubeTitle = getByText('My video.')
+    expect(youTubeTitle).toBeTruthy()
   })
 
   it('gracefully drops unimplemented block types', () => {
     blocks = blocks.concat([
-      factory.getBlockYoutubeNode(),
       factory.getBlockTimelineNode(),
       factory.getBlockImageNode(),
       factory.getBlockCardNode(),
@@ -42,9 +45,6 @@ describe('Blocks', () => {
     const text = getByText('My text.')
     expect(text).toBeTruthy()
 
-    const youtube = queryByText('youtube')
-    expect(youtube).toBeFalsy()
-
     const timelineEntry = queryByText('2020')
     expect(timelineEntry).toBeFalsy()
 
@@ -84,7 +84,13 @@ describe('Block', () => {
     expect(text).toBeTruthy()
   })
 
-  test.todo('can render a youtube block')
+  it('can render a youtube block', () => {
+    const block = factory.getBlockYoutubeNode({ title: 'My video.' })
+    const { getByText } = render(<Block block={block} />)
+    const text = getByText('My video.')
+    expect(text).toBeTruthy()
+  })
+
   test.todo('can render a timeline block')
   test.todo('can render a links list block')
   test.todo('can render an updates list block')

src/components/section/ContentBlock.tsx

@@ -5,11 +5,13 @@ import {
   BlockText as BlockTextType,
   BlockTitle as BlockTitleType,
   BlockUpdatesList as BlockUpdatesListType,
+  BlockYoutube as BlockYoutubeType,
 } from '../../types/generic-page.d'
 import { BlockLinksList } from './blocks/BlockLinksList'
 import { BlockText } from './blocks/BlockText'
 import { BlockTitle } from './blocks/BlockTitle'
 import { BlockUpdatesList } from './blocks/BlockUpdatesList'
+import { BlockYouTube } from './blocks/BlockYouTube'
 
 type BlocksProps = {
   blocks: BlockNode[]
@@ -35,10 +37,10 @@ export const Block: FC<BlockProps> = ({ block }) => {
       return <BlockLinksList block={block as BlockLinksListType} />
     case 'DABlockUpdatesList':
       return <BlockUpdatesList block={block as BlockUpdatesListType} />
+    case 'DABlockYoutube':
+      return <BlockYouTube block={block as BlockYoutubeType} />
 
     // wishlist
-    case 'DABlockYoutube':
-      return null
     case 'DABlockTimeline':
       return null
     case 'DABlockImage':

src/components/section/Section.spec.tsx

@@ -42,7 +42,6 @@ describe('Sections', () => {
 
     sections[1] = factory.getSectionGridNode({
       blocks: [
-        factory.getBlockYoutubeNode(),
         factory.getBlockTimelineNode(),
         factory.getBlockImageNode(),
         factory.getBlockCardNode(),
@@ -56,9 +55,6 @@ describe('Sections', () => {
     const text = getByText('My text.')
     expect(text).toBeTruthy()
 
-    const youtube = queryByText('youtube')
-    expect(youtube).toBeFalsy()
-
     const timelineEntry = queryByText('2020')
     expect(timelineEntry).toBeFalsy()
 

src/components/section/blocks/BlockYouTube.spec.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+import { BlockYoutubeNode } from '../../../types/generic-page.d'
+import { BlockYouTube } from './BlockYouTube'
+
+describe('BlockYouTube', () => {
+  it('renders the title', () => {
+    const block = {
+      embedUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      title: 'My video',
+    } as BlockYoutubeNode
+    const { getByText } = render(<BlockYouTube block={block} />)
+    const title = getByText('My video')
+    expect(title).toBeTruthy()
+  })
+})

src/components/section/blocks/BlockYouTube.tsx

@@ -0,0 +1,11 @@
+import { YouTubeEmbed } from '@components/youtube-embed/YouTubeEmbed'
+import { FC } from 'react'
+import { BlockYoutube as BlockYoutubeType } from '../../../types/generic-page.d'
+
+type BlockYouTubeProps = {
+  block: BlockYoutubeType
+}
+
+export const BlockYouTube: FC<BlockYouTubeProps> = ({ block }) => {
+  return <YouTubeEmbed videoUrl={block.embedUrl} videoTitle={block.title} />
+}

src/components/youtube-embed/YouTubeEmbed.tsx

@@ -3,7 +3,7 @@ import { FC, PropsWithChildren } from 'react'
 export const YouTubeEmbed: FC<
   PropsWithChildren<{
     videoUrl: string
-    videoTitle?: string
+    videoTitle?: string | undefined
   }>
 > = ({ videoUrl, videoTitle }) => (
   <figure>