made it so we login and grab user watchlist on startup

frontend/src/App.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
     import {anilistModal, GetAniListSingleItemAndOpenModal, title} from "./GetAniListSingleItemAndOpenModal.svelte";
-    import {GetAniListUserWatchingList, SimklLogin} from "../wailsjs/go/main/App";
-    import {MediaListSort} from "./anilist/types/AniListTypes";
+    import {
+        CheckIfAniListLoggedIn,
+        CheckIfSimklLoggedIn,
+        GetAniListLoggedInUser,
+        GetAniListUserWatchingList,
+        GetSimklLoggedInUser, SimklGetUserWatchlist,
+    } from "../wailsjs/go/main/App";
+    import {type AniListUser, MediaListSort} from "./anilist/types/AniListTypes";
     import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
     import Header from "./Header.svelte";
     import StarRatting from '@ernane/svelte-star-rating'
-    import {Modal} from "flowbite-svelte";
+    import {Button, Modal} from "flowbite-svelte";
 
     import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
+    import {onMount} from "svelte";
+    import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
+    import {writable} from "svelte/store";
 
     const config = {
         readOnly: false,
@@ -19,7 +28,9 @@
         },
         score: 0.0,
         showScore: true,
-        scoreFormat: function(){ return `(${this.score.toFixed(1)}/${this.countStars})` },
+        scoreFormat: function () {
+            return `(${this.score.toFixed(1)}/${this.countStars})`
+        },
         name: "",
         starConfig: {
             size: 20,
@@ -31,11 +42,63 @@
     }
 
     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 page = 1
     let perPage = 20
     const size = "xl"
 
+    onMount(async () => {
+        await CheckIfAniListLoggedIn().then(result => {
+            if (result) {
+                GetAniListLoggedInUser().then(result => {
+                    aniListUser = result
+                    if (aniListPrimary) {
+                        GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
+                            aniListWatchlist = result
+                            aniListLoggedIn = true
+                        })
+                    } else {
+                        aniListLoggedIn = result
+                    }
+                })
+            }
+        })
+
+        await CheckIfSimklLoggedIn().then(result => {
+            if (result) {
+                GetSimklLoggedInUser().then(result => {
+                    simklUser = result
+                    SimklGetUserWatchlist().then(result => {
+                        simklWatchList.set(result)
+                        simklLoggedIn = result
+                    })
+                })
+            }
+        })
+    })
+
+    function loginToSimkl(): void {
+        GetSimklLoggedInUser().then(result => {
+            simklUser = result
+            simklLoggedIn = true
+        })
+    }
+
+    function loginToAniList(): void {
+        GetAniListLoggedInUser().then(result => {
+            aniListUser = result
+            aniListLoggedIn = true
+            if (aniListPrimary) {
+                GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then(result => aniListWatchlist = result)
+            }
+        })
+    }
+
     function anilistGetUserWatchlist(): void {
         GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
             aniListWatchlist = result
@@ -61,12 +124,16 @@
 <Header/>
 
 <main>
-
-
-    <button class="btn" on:click={anilistGetUserWatchlist}>Login to AniList</button>
-    <button class="btn" on:click={SimklLogin}>Login to Simkl</button>
     {#if aniListLoggedIn}
-        <div>You are logged in {aniListWatchlist.data.Page.mediaList[0].user.name}!</div>
+        <div>You are logged into AniList, {aniListWatchlist.data.Page.mediaList[0].user.name}!</div>
+    {:else}
+        <button class="btn" on:click={loginToAniList}>Login to AniList</button>
+    {/if}
+
+    {#if simklLoggedIn}
+        <div>You are logged into Simkl, {simklUser.user.name}</div>
+    {:else}
+        <Button class="btn" on:click={loginToSimkl}>Login to Simkl</Button>
     {/if}
 
     {#if aniListLoggedIn}
@@ -112,7 +179,7 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
             </svg>
         </button>
-        <input bind:value={count} class="text-2xl font-bold mx-4" />
+        <input bind:value={count} class="text-2xl font-bold mx-4"/>
         <button on:click={increment}
                 class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -120,25 +187,25 @@
             </svg>
         </button>
     </div>
-<!--    <div class="relative max-w-sm">-->
-<!--        <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">-->
-<!--            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">-->
-<!--                <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>-->
-<!--            </svg>-->
-<!--        </div>-->
-<!--        <input-->
-<!--                datepicker-->
-<!--                datepicker-buttons-->
-<!--                datepicker-autoselect-today-->
-<!--                datepicker-autohide-->
-<!--                datepicker-title="Started At"-->
-<!--                id="startedAt"-->
-<!--                type="text"-->
-<!--                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500-->
-<!--                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600-->
-<!--                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"-->
-<!--                placeholder="Select date">-->
-<!--    </div>-->
+    <!--    <div class="relative max-w-sm">-->
+    <!--        <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">-->
+    <!--            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">-->
+    <!--                <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>-->
+    <!--            </svg>-->
+    <!--        </div>-->
+    <!--        <input-->
+    <!--                datepicker-->
+    <!--                datepicker-buttons-->
+    <!--                datepicker-autoselect-today-->
+    <!--                datepicker-autohide-->
+    <!--                datepicker-title="Started At"-->
+    <!--                id="startedAt"-->
+    <!--                type="text"-->
+    <!--                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500-->
+    <!--                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600-->
+    <!--                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"-->
+    <!--                placeholder="Select date">-->
+    <!--    </div>-->
     <Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
         <ChangeDataDialogue/>
     </Modal>