From 60a38ff569cbf851011194ae809c924e351ab821 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Mon, 9 Sep 2024 12:03:46 -0400
Subject: [PATCH] improved loading for change individual anime from search

---
 frontend/src/App.svelte                       | 12 +++-
 .../{routes => helperComponents}/Anime.svelte | 19 ++++--
 .../src/helperComponents/AnimeTable.svelte    |  4 ++
 frontend/src/helperComponents/Header.svelte   | 10 +--
 .../helperDefaults/AniListGetSingleAnime.ts   | 65 +++++++++++++++++++
 ...ckIfAniListLoggedInAndLoadWatchList.svelte | 33 +++++-----
 .../GlobalVariablesAndHelperFunctions.svelte  |  3 +-
 frontend/src/helperTypes/TableTypes.ts        |  1 +
 frontend/src/routes/AnimeRoutePage.svelte     |  9 +++
 9 files changed, 123 insertions(+), 33 deletions(-)
 rename frontend/src/{routes => helperComponents}/Anime.svelte (97%)
 create mode 100644 frontend/src/helperDefaults/AniListGetSingleAnime.ts
 create mode 100644 frontend/src/routes/AnimeRoutePage.svelte

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index b5311d3..bfb4e80 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import {
-        aniListLoggedIn,
         aniListAnime,
         GetAniListSingleItem,
     } from "./helperModules/GlobalVariablesAndHelperFunctions.svelte";
@@ -13,6 +12,8 @@
     import {CheckIfAniListLoggedInAndLoadWatchList} from "./helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
     import { CheckIfMALLoggedInAndSetUser } from "./helperModules/CheckIfMyAnimeListLoggedIn.svelte";
     import {CheckIfSimklLoggedInAndSetUser} from "./helperModules/CheckIsSimklLoggedIn.svelte"
+    import {CheckIfAniListLoggedIn} from "../wailsjs/go/main/App";
+    import {AniListGetSingleAnimeDefaultData} from "./helperDefaults/AniListGetSingleAnime";
 
     onMount(async () => {
         await CheckIfAniListLoggedInAndLoadWatchList()
@@ -25,10 +26,15 @@
 <Router routes={{
     '/': Home,
     '/anime/:id': wrap({
-        asyncComponent: () => import('./routes/Anime.svelte'),
+        asyncComponent: () => import('./routes/AnimeRoutePage.svelte'),
         conditions: [
-            () => $aniListLoggedIn,
+            async () => await CheckIfAniListLoggedIn(),
             async (detail) => {
+                console.log("reached condition")
+                aniListAnime.update(value => {
+                    value = AniListGetSingleAnimeDefaultData
+                    return value
+                })
                 await GetAniListSingleItem(Number(detail.params.id), true)
                 return Object.keys($aniListAnime).length!==0
             },
diff --git a/frontend/src/routes/Anime.svelte b/frontend/src/helperComponents/Anime.svelte
similarity index 97%
rename from frontend/src/routes/Anime.svelte
rename to frontend/src/helperComponents/Anime.svelte
index d3cb7fb..4b06636 100644
--- a/frontend/src/routes/Anime.svelte
+++ b/frontend/src/helperComponents/Anime.svelte
@@ -7,12 +7,12 @@
         simklAnime,
         simklLoggedIn,
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
-    import {pop} from "svelte-spa-router";
+    import {push} from "svelte-spa-router";
     import {Button} from "flowbite-svelte";
     import type {AniListGetSingleAnime} from "../anilist/types/AniListCurrentUserWatchListType";
-    import Rating from "../helperComponents/Rating.svelte";
+    import Rating from "./Rating.svelte";
     import convertAniListDateToString from "../helperFunctions/convertAniListDateToString";
-    import AnimeTable from "../helperComponents/AnimeTable.svelte";
+    import AnimeTable from "./AnimeTable.svelte";
     import type {MALAnime, MalListStatus, MALUploadStatus} from "../mal/types/MALTypes";
     import type {SimklAnime} from "../simkl/types/simklTypes";
     import {writable} from "svelte/store";
@@ -64,6 +64,7 @@
 
     if (isAniListLoggedIn) AddAnimeServiceToTable({
         id: currentAniListAnime.data.MediaList.id,
+        title,
         service: "AniList",
         progress: currentAniListAnime.data.MediaList.progress,
         status: currentAniListAnime.data.MediaList.status,
@@ -77,6 +78,7 @@
 
     if (isMalLoggedIn) AddAnimeServiceToTable({
         id: currentMalAnime.id,
+        title: currentMalAnime.title,
         service: "MyAnimeList",
         progress: currentMalAnime.my_list_status.num_episodes_watched,
         status: currentMalAnime.my_list_status.status,
@@ -89,6 +91,7 @@
 
     if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0) AddAnimeServiceToTable({
         id: currentSimklAnime.show.ids.simkl,
+        title: currentSimklAnime.show.title,
         service: "Simkl",
         progress: currentSimklAnime.watched_episodes_count,
         status: currentSimklAnime.status,
@@ -166,6 +169,7 @@
                 })
                 AddAnimeServiceToTable({
                     id: currentAniListAnime.data.MediaList.id,
+                    title,
                     service: "AniList",
                     progress: currentAniListAnime.data.MediaList.progress,
                     status: currentAniListAnime.data.MediaList.status,
@@ -200,6 +204,7 @@
                 })
                 AddAnimeServiceToTable({
                     id: currentMalAnime.id,
+                    title: currentMalAnime.title,
                     service: "MyAnimeList",
                     progress: currentMalAnime.my_list_status.num_episodes_watched,
                     status: currentMalAnime.my_list_status.status,
@@ -217,6 +222,7 @@
                 await SimklSyncEpisodes(currentSimklAnime, submitData.episodes).then((value: SimklAnime) => {
                     AddAnimeServiceToTable({
                         id: value.show.ids.simkl,
+                        title: value.show.title,
                         service: "Simkl",
                         progress: value.watched_episodes_count,
                         status: value.status,
@@ -237,6 +243,7 @@
                 await SimklSyncRating(currentSimklAnime, submitData.rating).then(value => {
                     AddAnimeServiceToTable({
                         id: value.show.ids.simkl,
+                        title: value.show.title,
                         service: "Simkl",
                         progress: value.watched_episodes_count,
                         status: value.status,
@@ -257,6 +264,7 @@
                 await SimklSyncStatus(currentSimklAnime, submitData.status.simkl).then(value => {
                     AddAnimeServiceToTable({
                         id: value.show.ids.simkl,
+                        title: value.show.title,
                         service: "Simkl",
                         progress: value.watched_episodes_count,
                         status: value.status,
@@ -280,6 +288,7 @@
     }
 </script>
 <form on:submit|preventDefault={handleSubmit} class="container py-10">
+
     <div class="grid grid-cols-1 md:grid-cols-10 grid-flow-col gap-4">
         <div class="md:col-span-2 space-y-3">
             <img class="rounded-lg" src={currentAniListAnime.data.MediaList.media.coverImage.large}
@@ -437,9 +446,9 @@
                     dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
                     on:click={async () => {
                         await CheckIfAniListLoggedInAndLoadWatchList()
-                        return pop()
+                        return push('/')
                     }}>
-                Back
+                Go Home
             </Button>
         </div>
     </div>
diff --git a/frontend/src/helperComponents/AnimeTable.svelte b/frontend/src/helperComponents/AnimeTable.svelte
index 819ca2f..6cb756c 100644
--- a/frontend/src/helperComponents/AnimeTable.svelte
+++ b/frontend/src/helperComponents/AnimeTable.svelte
@@ -12,6 +12,10 @@
             header: "Service Id",
             accessor: 'id',
         }),
+        table.column({
+            header: "Anime Title",
+            accessor: "title",
+        }),
         table.column({
             header: 'Service',
             accessor: 'service',
diff --git a/frontend/src/helperComponents/Header.svelte b/frontend/src/helperComponents/Header.svelte
index 834d072..a52083f 100644
--- a/frontend/src/helperComponents/Header.svelte
+++ b/frontend/src/helperComponents/Header.svelte
@@ -16,8 +16,7 @@
     import type {MyAnimeListUser} from "../mal/types/MALTypes";
     import AvatarMenu from "./AvatarMenu.svelte";
     import logo from "../assets/images/AniTrackLogo.svg"
-    import {location, pop} from "svelte-spa-router";
-    import {CheckIfAniListLoggedInAndLoadWatchList} from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
+    import {location} from "svelte-spa-router";
 
     let isAniListLoggedIn: boolean
     let isSimklLoggedIn: boolean
@@ -40,14 +39,7 @@
 <nav class="bg-white border-gray-200 dark:bg-gray-900">
     <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
         <div class="flex items-center space-x-3 rtl:space-x-reverse">
-            {#if currentLocation === "/"}
                 <a href="/"><img src={logo} class="h-8" alt="AniTrack Logo"/></a>
-            {:else}
-                <button on:click={async () => {
-                    await CheckIfAniListLoggedInAndLoadWatchList()
-                    return pop()
-                }}><img src={logo} class="h-8" alt="AniTrack Logo"/></button>
-            {/if}
         </div>
         <div class="flex items-center min-[950px]:order-2 space-x-3 min-[950px]:space-x-0 rtl:space-x-reverse">
             <div class="min-[950px]:block min-[950px]:mr-4">
diff --git a/frontend/src/helperDefaults/AniListGetSingleAnime.ts b/frontend/src/helperDefaults/AniListGetSingleAnime.ts
new file mode 100644
index 0000000..5fd955d
--- /dev/null
+++ b/frontend/src/helperDefaults/AniListGetSingleAnime.ts
@@ -0,0 +1,65 @@
+import type {AniListGetSingleAnime} from "../anilist/types/AniListCurrentUserWatchListType";
+
+export const AniListGetSingleAnimeDefaultData: AniListGetSingleAnime =  {
+    data: {
+        MediaList: {
+            id: 0,
+            mediaId: 0,
+            userId: 0,
+            media: {
+                id: 0,
+                idMal: 0,
+                title: {
+                    romaji: "",
+                    english: "",
+                    native: "",
+                },
+                description: "",
+                coverImage: {
+                    large: "",
+                },
+                season: "",
+                seasonYear: 0,
+                status: "",
+                episodes: 0,
+                nextAiringEpisode: {
+                    airingAt: 0,
+                    timeUntilAiring: 0,
+                    episode: 0,
+                }
+            },
+            status: "",
+            startedAt: {
+                year: 0,
+                month: 0,
+                day: 0,
+            },
+            completedAt: {
+                year: 0,
+                month: 0,
+                day: 0,
+            },
+            notes: "",
+            progress: 0,
+            score: 0,
+            repeat: 0,
+            user: {
+                id: 0,
+                name: "",
+                avatar: {
+                    large: "",
+                    medium: "",
+                },
+                statistics: {
+                    anime: {
+                        count: 0,
+                        statuses: [{
+                            status: "",
+                            count: 0,
+                        }]
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte b/frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte
index 81b35f6..f278c28 100644
--- a/frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte
+++ b/frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte
@@ -11,21 +11,24 @@
     watchListPage.subscribe(value => page = value)
     animePerPage.subscribe(value => perPage = value)
 
-    export const CheckIfAniListLoggedInAndLoadWatchList = async () => {
-        await CheckIfAniListLoggedIn().then(loggedIn => {
-            if (loggedIn) {
-                GetAniListLoggedInUser().then(user => {
-                    aniListUser.set(user)
-                    if (isAniListPrimary) {
-                        GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((watchList) => {
-                            aniListWatchlist.set(watchList)
-                            aniListLoggedIn.set(loggedIn)
-                        })
-                    } else {
-                        aniListLoggedIn.set(loggedIn)
-                    }
-                })
-            }
+    export const LoadAniListUser = async () => {
+        await GetAniListLoggedInUser().then(user => {
+            aniListUser.set(user)
         })
     }
+
+    export const LoadAniListWatchList = async () => {
+        await GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((watchList) => {
+            aniListWatchlist.set(watchList)
+        })
+    }
+
+    export const CheckIfAniListLoggedInAndLoadWatchList = async () => {
+        const loggedIn = await CheckIfAniListLoggedIn()
+        if (loggedIn) {
+            await LoadAniListUser()
+            if (isAniListPrimary) await LoadAniListWatchList()
+        }
+        aniListLoggedIn.set(loggedIn)
+    }
 </script>
\ No newline at end of file
diff --git a/frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte b/frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte
index ff10b01..d5f8a8e 100644
--- a/frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte
+++ b/frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte
@@ -21,8 +21,9 @@
     import {type AniListUser, MediaListSort} from "../anilist/types/AniListTypes";
     import type {MALAnime, MALWatchlist, MyAnimeListUser} from "../mal/types/MALTypes";
     import type {TableItems} from "../helperTypes/TableTypes";
+    import {AniListGetSingleAnimeDefaultData} from "../helperDefaults/AniListGetSingleAnime";
 
-    export let aniListAnime = writable({} as AniListGetSingleAnime)
+    export let aniListAnime = writable(AniListGetSingleAnimeDefaultData)
     export let title = writable("")
     export let aniListLoggedIn = writable(false)
     export let simklLoggedIn = writable(false)
diff --git a/frontend/src/helperTypes/TableTypes.ts b/frontend/src/helperTypes/TableTypes.ts
index 67052ff..d2d5f35 100644
--- a/frontend/src/helperTypes/TableTypes.ts
+++ b/frontend/src/helperTypes/TableTypes.ts
@@ -2,6 +2,7 @@ export type TableItems = TableItem[]
 
 export type TableItem = {
     id: number
+    title: string
     service: string
     progress: number
     status: string
diff --git a/frontend/src/routes/AnimeRoutePage.svelte b/frontend/src/routes/AnimeRoutePage.svelte
new file mode 100644
index 0000000..e0bc000
--- /dev/null
+++ b/frontend/src/routes/AnimeRoutePage.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import Anime from "../helperComponents/Anime.svelte"
+
+    export let params: Record<string, string>
+</script>
+
+{#key params.id}
+    <Anime />
+{/key}
\ No newline at end of file