From a36fabb424ed5c8d4b607b8ece38598e7241c538 Mon Sep 17 00:00:00 2001
From: Brendon Walsh <brendonwalsh@niamu.com>
Date: Wed, 29 Nov 2023 09:32:08 -0500
Subject: [PATCH] Season order fix and episode React keys are now unique (#585)

* Season order fix and episode React keys are now unique

* Move season sorting to backend rather than frontend
---
 dim-database/src/season.rs      | 5 ++++-
 ui/src/Pages/Media/Episodes.jsx | 4 ++--
 ui/src/Pages/Media/Seasons.jsx  | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/dim-database/src/season.rs b/dim-database/src/season.rs
index 6fb8a4e84..210e82588 100644
--- a/dim-database/src/season.rs
+++ b/dim-database/src/season.rs
@@ -29,7 +29,10 @@ impl Season {
     ) -> Result<Vec<Self>, DatabaseError> {
         Ok(sqlx::query_as!(
             Self,
-            r#"SELECT id as "id!", season_number, tvshowid, added, poster as "poster?" FROM season WHERE tvshowid = ?"#,
+            r#"SELECT id as "id!", season_number, tvshowid, added, poster as "poster?"
+            FROM season
+            WHERE tvshowid = ?
+            ORDER BY season_number ASC"#,
             tv_id
         )
         .fetch_all(&mut *conn)
diff --git a/ui/src/Pages/Media/Episodes.jsx b/ui/src/Pages/Media/Episodes.jsx
index 01004fa56..eb01ca293 100644
--- a/ui/src/Pages/Media/Episodes.jsx
+++ b/ui/src/Pages/Media/Episodes.jsx
@@ -27,9 +27,9 @@ function MediaEpisodes(props) {
       {episodes.length === 0 && <p className="desc">Empty</p>}
       {episodes.length > 0 && (
         <div className="episodes" ref={episodesDiv}>
-          {episodes.map((ep, i) => (
+          {episodes.map((ep) => (
             <SelectMediaFile
-              key={i}
+              key={ep.id}
               title={`Episode ${ep.episode}`}
               mediaID={ep.id}
             >
diff --git a/ui/src/Pages/Media/Seasons.jsx b/ui/src/Pages/Media/Seasons.jsx
index b99dc9369..55bf69a17 100644
--- a/ui/src/Pages/Media/Seasons.jsx
+++ b/ui/src/Pages/Media/Seasons.jsx
@@ -32,10 +32,10 @@ function MediaSeasons(props) {
         <section>
           <h2>Seasons</h2>
           <div className={`seasons ${season && "selected"}`}>
-            {seasons.map(({ id, season_number, poster }, i) => (
+            {seasons.map(({ id, season_number, poster }) => (
               <div
                 className={`season ${id === season && "active"}`}
-                key={i}
+                key={id}
                 onClick={() => setSeason(id)}
               >
                 <CardImage src={poster} />