From ef683c960eb0ea8c553f1182a162e3a9ff54881f Mon Sep 17 00:00:00 2001
From: Alex Perathoner <alex.perathoner@gmail.com>
Date: Wed, 23 Oct 2024 03:55:12 +0200
Subject: [PATCH] Sort items in people view

---
 src/lib/DropDown.svelte                   |   3 +-
 src/lib/poster/Poster.svelte              |  10 +-
 src/routes/(app)/person/[id]/+page.svelte | 112 +++++++++++++++++-----
 3 files changed, 94 insertions(+), 31 deletions(-)

diff --git a/src/lib/DropDown.svelte b/src/lib/DropDown.svelte
index 9987dd8e..5d5e61b3 100644
--- a/src/lib/DropDown.svelte
+++ b/src/lib/DropDown.svelte
@@ -11,6 +11,7 @@
   export let blendIn: boolean = false;
   export let disabled = false;
   export let onChange: () => void = () => {};
+  export let showActiveElementsInOptions: boolean = false;
 
   let activeValue: string;
   let open = false;
@@ -77,7 +78,7 @@
     <Icon i="chevron" facing={open ? "up" : "down"} />
   </button>
   <ul bind:this={ulElement}>
-    {#each options.filter((o) => (typeof o === "string" ? o !== active : o.id !== active)) as o}
+    {#each options.filter( (o) => (typeof o === "string" ? showActiveElementsInOptions || o !== active : showActiveElementsInOptions || o.id !== active) ) as o}
       <li>
         <button
           class="plain"
diff --git a/src/lib/poster/Poster.svelte b/src/lib/poster/Poster.svelte
index 3aba958b..731095da 100644
--- a/src/lib/poster/Poster.svelte
+++ b/src/lib/poster/Poster.svelte
@@ -38,16 +38,16 @@
 
   let containerEl: HTMLDivElement;
 
-  const title = media.title || media.name;
+  $: title = media.title || media.name;
   // For now, if the content is on watched list, we can assume we have a local
   // cached image. Could be improved, since we could have a cached image for
   // show not on someone elses watched list.
-  const poster = id
+  $: poster = id
     ? `${baseURL}/img${media.poster_path}`
     : `https://image.tmdb.org/t/p/w500${media.poster_path}`;
-  const link = media.id ? `/${media.media_type}/${media.id}` : undefined;
-  const dateStr = media.release_date || media.first_air_date;
-  const year = dateStr ? new Date(dateStr).getFullYear() : undefined;
+  $: link = media.id ? `/${media.media_type}/${media.id}` : undefined;
+  $: dateStr = media.release_date || media.first_air_date;
+  $: year = dateStr ? new Date(dateStr).getFullYear() : undefined;
 
   function handleStarClick(r: number) {
     if (r == rating) return;
diff --git a/src/routes/(app)/person/[id]/+page.svelte b/src/routes/(app)/person/[id]/+page.svelte
index 5af2a9e7..cd01250f 100644
--- a/src/routes/(app)/person/[id]/+page.svelte
+++ b/src/routes/(app)/person/[id]/+page.svelte
@@ -5,7 +5,7 @@
   import Poster from "@/lib/poster/Poster.svelte";
   import PosterList from "@/lib/poster/PosterList.svelte";
   import Spinner from "@/lib/Spinner.svelte";
-  import { removeWatched, updateWatched } from "@/lib/util/api";
+  import DropDown from "@/lib/DropDown.svelte";
   import { getWatchedDependedProps } from "@/lib/util/helpers";
   import { watchedList } from "@/store";
   import type { TMDBPersonCombinedCredits, TMDBPersonDetails } from "@/types";
@@ -19,6 +19,9 @@
   let personId: number | undefined;
   let person: TMDBPersonDetails | undefined;
   let pageError: Error | undefined;
+  let sortOption = "Vote count";
+  let cachedCredits: TMDBPersonCombinedCredits | undefined;
+  let sortedCredits: TMDBPersonCombinedCredits | undefined;
 
   onMount(() => {
     const unsubscribe = page.subscribe((value) => {
@@ -30,22 +33,37 @@
 
     return unsubscribe;
   });
-
+  
   $: {
-    (async () => {
-      try {
-        person = undefined;
-        pageError = undefined;
-        if (!personId) {
-          return;
-        }
-        const data = await getPerson(personId);
-        person = data;
-      } catch (err: any) {
-        person = undefined;
-        pageError = err;
+    fetchPersonData();
+  }
+
+  $: if (personId) {
+    fetchPersonData();
+  }
+
+  $: if (cachedCredits) {
+    sortedCredits = getSortedCredits(cachedCredits, sortOption);
+  }
+
+  $: if (sortOption && cachedCredits) {
+    sortedCredits = getSortedCredits(cachedCredits, sortOption);
+  }
+
+  async function fetchPersonData() {
+    try {
+      person = undefined;
+      pageError = undefined;
+      if (!personId) {
+        return;
       }
-    })();
+      person = await getPerson(personId);
+      cachedCredits = await getPersonCredits();
+      sortedCredits = getSortedCredits(cachedCredits, sortOption);
+    } catch (err: any) {
+      person = undefined;
+      pageError = err;
+    }
   }
 
   async function getPerson(id: number) {
@@ -53,11 +71,35 @@
   }
 
   async function getPersonCredits() {
-    const credits = (await axios.get(`/content/person/${data.personId}/credits`))
+    let credits = (await axios.get(`/content/person/${data.personId}/credits`))
       .data as TMDBPersonCombinedCredits;
-    credits.cast = credits.cast?.sort((a, b) => b.vote_count - a.vote_count);
     return credits;
   }
+
+  function getSortedCredits(credits: TMDBPersonCombinedCredits, sortOption: string) {
+    if (!credits || !credits.cast) return;
+    let sorted = [...credits.cast];
+    switch (sortOption) {
+      case "Vote count":
+        sorted.sort((a, b) => b.vote_count - a.vote_count);
+        break;
+      case "Newest":
+        sorted.sort(
+          (a, b) =>
+            new Date(b.release_date || b.first_air_date).valueOf() -
+            new Date(a.release_date || a.first_air_date).valueOf()
+        );
+        break;
+      case "Oldest":
+        sorted.sort(
+          (a, b) =>
+            new Date(a.release_date || a.first_air_date).valueOf() -
+            new Date(b.release_date || b.first_air_date).valueOf()
+        );
+        break;
+    }
+    return { ...credits, cast: sorted };
+  }
 </script>
 
 <svelte:head>
@@ -127,20 +169,26 @@
           </div>
         </div>
       </div>
-
-      {#await getPersonCredits()}
-        <Spinner />
-      {:then credits}
+      {#if sortedCredits}
+        <div class="filters container">
+          <DropDown
+            bind:active={sortOption}
+            placeholder="Vote count"
+            options={["Vote count", "Newest", "Oldest"]}
+            isDropDownItem={false}
+            showActiveElementsInOptions={true}
+          />
+        </div>
         <div class="page">
           <PosterList>
-            {#each credits?.cast as c}
+            {#each sortedCredits.cast as c}
               <Poster media={c} {...getWatchedDependedProps(c.id, c.media_type, wList)} fluidSize />
             {/each}
           </PosterList>
         </div>
-      {:catch err}
-        <Error pretty="Failed to load credits!" error={err} />
-      {/await}
+      {:else}
+        <Spinner />
+      {/if}
     {:else}
       person not found
     {/if}
@@ -150,6 +198,20 @@
 </div>
 
 <style lang="scss">
+  .filters {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: -55px;
+    margin-top: 35px;
+  }
+  .container {
+    margin: 0 auto;
+    min-width: 320px;
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 100%;
+  }
   .content {
     position: relative;
     color: white;