From f767adc8cae9185f75902f7c740dd310805117c6 Mon Sep 17 00:00:00 2001
From: Dipam Sen <funplanet.m4f@gmail.com>
Date: Sun, 23 Jul 2023 08:36:39 +0000
Subject: [PATCH 1/2] group track videos into chapters

---
 src/components/PassengerShowcaseForm.js | 47 ++++++++++++++++---------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/PassengerShowcaseForm.js b/src/components/PassengerShowcaseForm.js
index c4436b4f4..5816d423e 100644
--- a/src/components/PassengerShowcaseForm.js
+++ b/src/components/PassengerShowcaseForm.js
@@ -87,25 +87,23 @@ const useVideosWithShowcase = function () {
 
   return useMemo(() => {
     const tracks = data.tracks.nodes
-      .map((track) => {
-        // gather all videos from chapters (main track)
-        if (!track.videos && track.chapters) {
-          track.videos = track.chapters.flatMap((chapter) => chapter.videos);
-        }
-        delete track.chapters;
-        return track;
-      })
       .map((track) => {
         // keep only videos that can be contributed to
         // keep only videos that belong to this track
-        track.videos = track.videos.filter(
-          (video) =>
-            video.canContribute && video.canonicalTrack?.slug === track.slug
-        );
+        const videoFilter = (video) =>
+          video.canContribute && video.canonicalTrack?.slug === track.slug;
+
+        track.videos = track.videos?.filter(videoFilter);
+        track.chapters = track.chapters
+          ?.map((chapter) => {
+            chapter.videos = chapter.videos.filter(videoFilter);
+            return chapter;
+          })
+          .filter((chapter) => chapter.videos.length);
 
         return track;
       })
-      .filter((track) => track.videos.length > 0);
+      .filter((track) => track.videos?.length || track.chapters?.length);
 
     // create a "challenges track"
     const challengesTrack = {
@@ -211,6 +209,8 @@ const PassengerShowcaseForm = () => {
     };
   };
 
+  const selectedTrack = data.find((track) => track.slug === state.track);
+
   return (
     <div className={css.root}>
       <form onSubmit={onSubmit} className={css.form}>
@@ -238,9 +238,24 @@ const PassengerShowcaseForm = () => {
           Video
           <select name="video" value={state.video} onChange={onChange}>
             <option value="">Select a video</option>
-            {(
-              data.find((track) => track.slug === state.track)?.videos || []
-            ).map((node) => {
+
+            {(selectedTrack?.chapters || []).map((node) => (
+              <optgroup label={node.title}>
+                {node.videos.map((video) => {
+                  let label = video.title;
+                  if (label.length > 50) {
+                    label = label.substring(0, 50) + '...';
+                  }
+                  return (
+                    <option value={video.slug} key={video.slug}>
+                      {label}
+                    </option>
+                  );
+                })}
+              </optgroup>
+            ))}
+
+            {(selectedTrack?.videos || []).map((node) => {
               let label = node.title;
               if (label.length > 50) {
                 label = label.substring(0, 50) + '...';

From 1210b6a872985113958c6a4cb21871340a8c4808 Mon Sep 17 00:00:00 2001
From: Dipam Sen <funplanet.m4f@gmail.com>
Date: Sun, 23 Jul 2023 12:09:00 +0000
Subject: [PATCH 2/2] use optional chaining

---
 src/components/PassengerShowcaseForm.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PassengerShowcaseForm.js b/src/components/PassengerShowcaseForm.js
index 5816d423e..e8c619a6d 100644
--- a/src/components/PassengerShowcaseForm.js
+++ b/src/components/PassengerShowcaseForm.js
@@ -239,7 +239,7 @@ const PassengerShowcaseForm = () => {
           <select name="video" value={state.video} onChange={onChange}>
             <option value="">Select a video</option>
 
-            {(selectedTrack?.chapters || []).map((node) => (
+            {selectedTrack?.chapters?.map((node) => (
               <optgroup label={node.title}>
                 {node.videos.map((video) => {
                   let label = video.title;
@@ -255,7 +255,7 @@ const PassengerShowcaseForm = () => {
               </optgroup>
             ))}
 
-            {(selectedTrack?.videos || []).map((node) => {
+            {selectedTrack?.videos?.map((node) => {
               let label = node.title;
               if (label.length > 50) {
                 label = label.substring(0, 50) + '...';