From 590bcf7ef1aa5278c06648c7c952cc87c6299d3b Mon Sep 17 00:00:00 2001
From: Abdullah Khan <85450222+AbdullahDaGoat@users.noreply.github.com>
Date: Thu, 20 Jun 2024 17:54:10 -0400
Subject: [PATCH] Update ModalEpisodeSelector.tsx

---
 src/components/media/ModalEpisodeSelector.tsx | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/components/media/ModalEpisodeSelector.tsx b/src/components/media/ModalEpisodeSelector.tsx
index e19b6556..fa3ce58b 100644
--- a/src/components/media/ModalEpisodeSelector.tsx
+++ b/src/components/media/ModalEpisodeSelector.tsx
@@ -9,16 +9,25 @@ interface ModalEpisodeSelectorProps {
   mediaTitle: string;
 }
 
+interface Season {
+  season_number: number;
+  id: number;
+}
+
+interface ShowDetails {
+  seasons: Season[];
+}
+
 export function EpisodeSelector({
   tmdbId,
   mediaTitle,
 }: ModalEpisodeSelectorProps) {
-  const [seasonsData, setSeasonsData] = useState<any[]>([]);
+  const [seasonsData, setSeasonsData] = useState<Season[]>([]);
   const [selectedSeason, setSelectedSeason] = useState<any>(null);
   const navigate = useNavigate();
 
   const handleSeasonSelect = useCallback(
-    async (season: any) => {
+    async (season: Season) => {
       try {
         const seasonDetails = await get<any>(
           `/tv/${tmdbId}/season/${season.season_number}`,
@@ -27,7 +36,11 @@ export function EpisodeSelector({
             language: "en-US",
           },
         );
-        setSelectedSeason(seasonDetails);
+        setSelectedSeason({
+          ...seasonDetails,
+          season_number: season.season_number,
+          id: season.id,
+        });
       } catch (err) {
         console.error(err);
       }
@@ -38,16 +51,18 @@ export function EpisodeSelector({
   useEffect(() => {
     const fetchSeasons = async () => {
       try {
-        const showDetails = await get<any>(`/tv/${tmdbId}`, {
+        const showDetails = await get<ShowDetails>(`/tv/${tmdbId}`, {
           api_key: conf().TMDB_READ_API_KEY,
           language: "en-US",
         });
         setSeasonsData(showDetails.seasons);
-        if (showDetails.seasons[0] === 0) {
-          // Default to first season
+        const regularSeasons = showDetails.seasons.filter(
+          (season: Season) => season.season_number > 0,
+        );
+        if (regularSeasons.length > 0) {
+          handleSeasonSelect(regularSeasons[0]);
+        } else if (showDetails.seasons.length > 0) {
           handleSeasonSelect(showDetails.seasons[0]);
-        } else {
-          handleSeasonSelect(showDetails.seasons[1]);
         }
       } catch (err) {
         console.error(err);
@@ -59,13 +74,12 @@ export function EpisodeSelector({
   return (
     <div className="flex flex-row">
       <div className="sm:w-96 w-96 sm:block cursor-pointer overflow-y-scroll overflow-x-hidden max-h-60 max-w-24">
-        {seasonsData.map((season) => (
+        {seasonsData.map((season: Season) => (
           <div
-            key={season.season_number}
+            key={season.id}
             onClick={() => handleSeasonSelect(season)}
             className={`cursor-pointer p-1 text-center rounded transition-transform duration-200 ${
-              selectedSeason &&
-              season.season_number === selectedSeason.season_number
+              selectedSeason && season.id === selectedSeason.id
                 ? "bg-search-background"
                 : "hover:bg-search-background hover:scale-95"
             }`}
@@ -84,24 +98,29 @@ export function EpisodeSelector({
                 episode_number: number;
                 name: string;
                 still_path: string;
-                show_id: number;
                 id: number;
               }) => (
                 <div
-                  key={episode.episode_number}
-                  onClick={() =>
-                    navigate(
-                      `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_id}/${episode.id}`,
-                    )
-                  }
+                  key={episode.id}
+                  onClick={() => {
+                    const url = `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${selectedSeason.id}/${episode.id}`;
+                    // eslint-disable-next-line no-console
+                    console.log(`Navigating to: ${url}`);
+                    // eslint-disable-next-line no-console
+                    console.log(
+                      `Season ID: ${selectedSeason.id}, Episode ID: ${episode.id}`,
+                    );
+                    navigate(url);
+                  }}
                   className="bg-mediaCard-hoverBackground rounded p-2 hover:scale-95 transition-transform transition-border-color duration-[0.28s] ease-in-out transform-origin-center"
                 >
                   <img
                     src={`https://image.tmdb.org/t/p/w500/${episode.still_path}`}
                     className="w-full h-auto rounded"
+                    alt={episode.name}
                   />
                   <p className="text-center text-[0.95em] mt-2">
-                    {episode.name}
+                    {`S${selectedSeason.season_number}E${episode.episode_number}: ${episode.name}`}
                   </p>
                 </div>
               ),