fix: remove invalid data to avoid rendering empty html nodes

[linj121]

Description

The Videos.jsx component renders all the data fetched from youtube-v3 API, even if some of the properties are null. This caused react to render HTML nodes like <div></div>. Although there is no data for these nodes, css is still applied to them, causing visual gap in the video grid on pages like Feed.

Examples

Here is an example:

By further investigating the API endpoint for getting videos, it turns out that not only videoId and channelId are returned, but also playlistId.

Here is a code snippet for viewing the "invalid" response data:

await fetch("https://youtube-v31.p.rapidapi.com/search?part=snippet&q=JS%20Mastery&maxResults=50", {
    "credentials": "omit",
    "headers": {
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0",
        "Accept": "application/json, text/plain, */*",
        "Accept-Language": "en-US,en;q=0.5",
        "X-RapidAPI-Key": "your-key-here",
        "X-RapidAPI-Host": "youtube-v31.p.rapidapi.com",
        "Sec-Fetch-Dest": "empty",
        "Sec-Fetch-Mode": "cors",
        "Sec-Fetch-Site": "cross-site",
        "Pragma": "no-cache",
        "Cache-Control": "no-cache"
    },
    "referrer": "http://localhost:3001/",
    "method": "GET",
    "mode": "cors"
})
.then(res => res.json())
.then(data => {
	let invalidEntry = data.items.filter(item => !(item.id.videoId || item.id.channelId))
    console.log(`There ${invalidEntry.length} invalid entries:`)
    console.log(invalidEntry);
});

For me it returns:

[
  {
    "kind": "youtube#searchResult",
    "id": {
      "kind": "youtube#playlist",
      "playlistId": "PL6QREj8te1P6wX9m5KnicnDVEucbOPsqR"
    },
    "snippet": {
      "publishedAt": "2020-04-07T10:56:39Z",
      "channelId": "UCmXmlB4-HJytD7wek0Uo97A",
      "title": "Master React JS by Building Real Projects",
      "description": "Series of real-world projects that you can learn React with. Learn React hooks, React API data fetching, React Hooks, proper ...",
      "thumbnails": {
        "default": {
          "url": "https://i.ytimg.com/vi/0fYi8SGA20k/default.jpg",
          "width": 120,
          "height": 90
        },
        "medium": {
          "url": "https://i.ytimg.com/vi/0fYi8SGA20k/mqdefault.jpg",
          "width": 320,
          "height": 180
        },
        "high": {
          "url": "https://i.ytimg.com/vi/0fYi8SGA20k/hqdefault.jpg",
          "width": 480,
          "height": 360
        }
      },
      "channelTitle": "JavaScript Mastery",
      "liveBroadcastContent": "none",
      "publishTime": "2020-04-07T10:56:39Z"
    }
  },
  {
    "kind": "youtube#searchResult",
    "id": {
      "kind": "youtube#playlist",
      "playlistId": "PL6QREj8te1P6CkO_4OIK1-nwG5OxCD5tR"
    },
    "snippet": {
      "publishedAt": "2022-03-14T13:18:06Z",
      "channelId": "UCmXmlB4-HJytD7wek0Uo97A",
      "title": "Build Modern UI/UX Websites",
      "description": "This playlist will teach you how to transform a Figma design into a fully functioning website, improve your CSS skills, and create ...",
      "thumbnails": {
        "default": {
          "url": "https://i.ytimg.com/vi/LMagNcngvcU/default.jpg",
          "width": 120,
          "height": 90
        },
        "medium": {
          "url": "https://i.ytimg.com/vi/LMagNcngvcU/mqdefault.jpg",
          "width": 320,
          "height": 180
        },
        "high": {
          "url": "https://i.ytimg.com/vi/LMagNcngvcU/hqdefault.jpg",
          "width": 480,
          "height": 360
        }
      },
      "channelTitle": "JavaScript Mastery",
      "liveBroadcastContent": "none",
      "publishTime": "2022-03-14T13:18:06Z"
    }
  },
  {
    "kind": "youtube#searchResult",
    "id": {
      "kind": "youtube#playlist",
      "playlistId": "PLuUkZ8QGhDSUqfkOa1TjGF0X-UG2uY4aQ"
    },
    "snippet": {
      "publishedAt": "2022-07-19T05:19:46Z",
      "channelId": "UC2Omy9pB9ieguEFCsHFqBPw",
      "title": "Complete Next.js Developer in 2022: Zero to Mastery",
      "description": "Just released with all the latest Next.js features for 2022! Using the latest version of Next.js, this course is focused on efficiency.",
      "thumbnails": {
        "default": {
          "url": "https://i.ytimg.com/vi/OqrUVsaf_y8/default.jpg",
          "width": 120,
          "height": 90
        },
        "medium": {
          "url": "https://i.ytimg.com/vi/OqrUVsaf_y8/mqdefault.jpg",
          "width": 320,
          "height": 180
        },
        "high": {
          "url": "https://i.ytimg.com/vi/OqrUVsaf_y8/hqdefault.jpg",
          "width": 480,
          "height": 360
        }
      },
      "channelTitle": "Free Udemy Courses (Programming)",
      "liveBroadcastContent": "none",
      "publishTime": "2022-07-19T05:19:46Z"
    }
  }
]

As you can see, there is a field named playlistId under the field id. Therefore I added a line of code to filter out those objects so that no empty nodes are rendered to produce visual gap.