fixed app to work with global variables

frontend/src/App.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-    import {anilistModal, GetAniListSingleItemAndOpenModal, title} from "./GetAniListSingleItemAndOpenModal.svelte";
+    import {
+        anilistModal,
+        GetAniListSingleItemAndOpenModal,
+        title,
+        simklWatchList,
+        aniListLoggedIn,
+        simklLoggedIn
+    } from "./GlobalVariablesAndHelperFunctions.svelte";
     import {
         CheckIfAniListLoggedIn,
         CheckIfSimklLoggedIn,
@@ -15,16 +22,18 @@
     import {default as Modal} from "./modal/Modal.svelte"
     import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
     import {onMount} from "svelte";
-    import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
-    import {writable} from "svelte/store";
+    import type {SimklUser} from "./simkl/types/simklTypes";
 
-    let aniListLoggedIn = false
     let aniListPrimary = true
     let simklUser: SimklUser
-    let simklLoggedIn = false
     let aniListUser: AniListUser
     let aniListWatchlist: AniListCurrentUserWatchList
-    export let simklWatchList = writable({} as SimklWatchList)
+    let isAniListLoggedIn: boolean
+    let isSimklLoggedIn: boolean
+
+    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
+    simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
+
     let page = 1
     let perPage = 20
     const size = "xl"
@@ -37,10 +46,10 @@
                     if (aniListPrimary) {
                         GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
                             aniListWatchlist = result
-                            aniListLoggedIn = true
+                            aniListLoggedIn.set(true)
                         })
                     } else {
-                        aniListLoggedIn = result
+                        aniListLoggedIn.set(result)
                     }
                 })
             }
@@ -52,7 +61,7 @@
                     simklUser = result
                     SimklGetUserWatchlist().then(result => {
                         simklWatchList.set(result)
-                        simklLoggedIn = result
+                        simklLoggedIn.set(result)
                     })
                 })
             }
@@ -62,14 +71,14 @@
     function loginToSimkl(): void {
         GetSimklLoggedInUser().then(result => {
             simklUser = result
-            simklLoggedIn = true
+            simklLoggedIn.set(true)
         })
     }
 
     function loginToAniList(): void {
         GetAniListLoggedInUser().then(result => {
             aniListUser = result
-            aniListLoggedIn = true
+            aniListLoggedIn.set(true)
             if (aniListPrimary) {
                 GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then(result => aniListWatchlist = result)
             }
@@ -79,7 +88,7 @@
     // function anilistGetUserWatchlist(): void {
     //     GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
     //         aniListWatchlist = result
-    //         aniListLoggedIn = true
+    //         aniListLoggedIn.set(true)
     //     })
     // }
     //
@@ -101,19 +110,19 @@
 <Header/>
 
 <main>
-    {#if aniListLoggedIn}
-        <div>You are logged into AniList, {aniListWatchlist.data.Page.mediaList[0].user.name}!</div>
+    {#if isAniListLoggedIn}
+        <div>You are logged into AniList, {aniListUser.data.Viewer.name}!</div>
     {:else}
         <button class="btn" on:click={loginToAniList}>Login to AniList</button>
     {/if}
 
-    {#if simklLoggedIn}
+    {#if isSimklLoggedIn}
         <div>You are logged into Simkl, {simklUser.user.name}</div>
     {:else}
         <Button class="btn" on:click={loginToSimkl}>Login to Simkl</Button>
     {/if}
 
-    {#if aniListLoggedIn}
+    {#if isAniListLoggedIn}
         <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
             <h1 class="text-left text-xl font-bold mb-4">Your Watching List</h1>