made a bunch of frontend variables global

frontend/src/App.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
     import {
         anilistModal,
-        GetAniListSingleItemAndOpenModal,
         title,
         simklWatchList,
         aniListLoggedIn,
-        simklLoggedIn
+        simklLoggedIn,
+        simklUser,
+        aniListUser,
+        aniListPrimary,
+        aniListWatchlist,
+        loginToAniList,
+        GetAniListSingleItemAndOpenModal,
+        loginToSimkl
     } from "./GlobalVariablesAndHelperFunctions.svelte";
     import {
         CheckIfAniListLoggedIn,
@@ -24,15 +30,22 @@
     import {onMount} from "svelte";
     import type {SimklUser} from "./simkl/types/simklTypes";
 
-    let aniListPrimary = true
-    let simklUser: SimklUser
-    let aniListUser: AniListUser
-    let aniListWatchlist: AniListCurrentUserWatchList
+
+
     let isAniListLoggedIn: boolean
     let isSimklLoggedIn: boolean
+    let currentSimklUser: SimklUser
+    let currentAniListUser: AniListUser
+    let isAniListPrimary: boolean
+    let aniListWatchListLoaded: AniListCurrentUserWatchList
 
     aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
     simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
+    simklUser.subscribe((value) => currentSimklUser = value)
+    aniListUser.subscribe((value) => currentAniListUser = value)
+    aniListPrimary.subscribe((value) => isAniListPrimary = value)
+    aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
+
 
     let page = 1
     let perPage = 20
@@ -42,10 +55,10 @@
         await CheckIfAniListLoggedIn().then(result => {
             if (result) {
                 GetAniListLoggedInUser().then(result => {
-                    aniListUser = result
-                    if (aniListPrimary) {
+                    aniListUser.set(result)
+                    if (isAniListPrimary) {
                         GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
-                            aniListWatchlist = result
+                            aniListWatchlist.set(result)
                             aniListLoggedIn.set(true)
                         })
                     } else {
@@ -58,7 +71,7 @@
         await CheckIfSimklLoggedIn().then(result => {
             if (result) {
                 GetSimklLoggedInUser().then(result => {
-                    simklUser = result
+                    simklUser.set(result)
                     SimklGetUserWatchlist().then(result => {
                         simklWatchList.set(result)
                         simklLoggedIn.set(result)
@@ -67,57 +80,19 @@
             }
         })
     })
-
-    function loginToSimkl(): void {
-        GetSimklLoggedInUser().then(result => {
-            simklUser = result
-            simklLoggedIn.set(true)
-        })
-    }
-
-    function loginToAniList(): void {
-        GetAniListLoggedInUser().then(result => {
-            aniListUser = result
-            aniListLoggedIn.set(true)
-            if (aniListPrimary) {
-                GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then(result => aniListWatchlist = result)
-            }
-        })
-    }
-
-    // function anilistGetUserWatchlist(): void {
-    //     GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
-    //         aniListWatchlist = result
-    //         aniListLoggedIn.set(true)
-    //     })
-    // }
-    //
-    // let count = 1;
-    //
-    // const decrement = () => {
-    //     if (count > 0) {
-    //         count--
-    //     }
-    // }
-    //
-    // const increment = () => {
-    //     count++
-    // }
-
-
 </script>
 
 <Header/>
 
 <main>
     {#if isAniListLoggedIn}
-        <div>You are logged into AniList, {aniListUser.data.Viewer.name}!</div>
+        <div>You are logged into AniList, {currentAniListUser.data.Viewer.name}!</div>
     {:else}
         <button class="btn" on:click={loginToAniList}>Login to AniList</button>
     {/if}
 
     {#if isSimklLoggedIn}
-        <div>You are logged into Simkl, {simklUser.user.name}</div>
+        <div>You are logged into Simkl, {currentSimklUser.user.name}</div>
     {:else}
         <Button class="btn" on:click={loginToSimkl}>Login to Simkl</Button>
     {/if}
@@ -127,7 +102,7 @@
             <h1 class="text-left text-xl font-bold mb-4">Your Watching List</h1>
 
             <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-                {#each aniListWatchlist.data.Page.mediaList as media}
+                {#each aniListWatchListLoaded.data.Page.mediaList as media}
                     <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
                         <div class="flex flex-col items-center group">
                             <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>