moved user information into a userstore and updated code that touches it

MALUserFunctions.go

@@ -308,7 +308,16 @@ func refreshMyAnimeListAuthorizationToken() {
 
 func (a *App) GetMyAnimeListLoggedInUser() MyAnimeListUser {
 	a.MyAnimeListLogin()
+	user := createUser()
+	if user.Name == "" {
+		refreshMyAnimeListAuthorizationToken()
+		user = createUser()
+	}
 
+	return user
+}
+
+func createUser() MyAnimeListUser {
 	client := &http.Client{}
 
 	req, _ := http.NewRequest("GET", "https://api.myanimelist.net/v2/users/@me?fields=anime_statistics", nil)
@@ -335,6 +344,7 @@ func (a *App) GetMyAnimeListLoggedInUser() MyAnimeListUser {
 	}
 
 	return user
+
 }
 
 func (a *App) LogoutMyAnimeList() string {

app.go

@@ -3,9 +3,11 @@ package main
 import (
 	"context"
 	_ "embed"
+	"log"
+	"strings"
+
 	"github.com/wailsapp/wails/v2/pkg/options"
 	"github.com/wailsapp/wails/v2/pkg/runtime"
-	"strings"
 
 	"github.com/tidwall/gjson"
 )
@@ -43,3 +45,14 @@ func (a *App) onSecondInstanceLaunch(secondInstanceData options.SecondInstanceDa
 	runtime.Show(*wailsContext)
 	go runtime.EventsEmit(*wailsContext, "launchArgs", secondInstanceArgs)
 }
+
+func (a *App) ShowVersion() {
+	version := gjson.Get(wailsJSON, "info.productVersion")
+	_, err := runtime.MessageDialog(*wailsContext, runtime.MessageDialogOptions{
+		Title:   "Version",
+		Message: "AniTrack Version: " + version.String(),
+	})
+	if err != nil {
+		log.Println(err)
+	}
+}

bruno/AniTrack/AniList/GetAuthorizationToken.bru

@@ -12,7 +12,7 @@ post {
 
 headers {
   Accept: application/json
-  Content-Type: application/json
+  Content-Type: application/x-www-form-urlencoded
 }
 
 body:form-urlencoded {
@@ -20,7 +20,7 @@ body:form-urlencoded {
   client_id: {{ANILIST_APP_ID}}
   client_secret: {{ANILIST_SECRET_TOKEN}}
   redirect_uri: http://localhost:6734/callback
-  code: {{code}}
+  code: {{ANILIST_CODE}}
 }
 
 body:multipart-form {

bruno/AniTrack/environments/Dev.bru

@@ -9,7 +9,7 @@ vars {
 }
 vars:secret [
   ANILIST_ACCESS_TOKEN,
-  code,
+  ANILIST_CODE,
   SIMKL_AUTH_TOKEN,
   MAL_CODE,
   MAL_VERIFIER,

build/install_linux.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# copy desktop file
+if [ -e "~/.local/share/applications/AniTrack.desktop" ]; then
+  if [ -d "~/.local/share/applications/" ]; then
+    cp ./AniTrack.desktop ~/.local/share/applications/
+  else
+    mkdir -p ~/.local/share/applications/
+    cp ./AniTrack.desktop ~/.local/share/applications/
+  fi
+fi
+
+# copy icons to xdg folders
+for size in 32 48 64 128; do
+  xdg-icon-resource install --novendor --context apps --size $size ./icon/$size/AniTrack.png AniTrack
+done
+
+# copy AniTrack Binary to $HOME/Applications/
+if ! [ -d "~/Applications" ]; then
+  mkdir -p ~/Applications
+  cp ./bin/AniTrack ~/Applications/
+elif ! [[ -e ~/Applications/AniTrack ]]; then
+  cp ./bin/AniTrack ~/Applications/
+fi
+
+echo "AniTrack has been successfully installed."

frontend/src/App.svelte

@@ -1,44 +1,27 @@
 <script lang="ts">
-    import {
-        aniListAnime,
-        GetAnimeSingleItem,
-    } from "./helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import {onMount} from "svelte";
+    import {userStore} from "./helperFunctions/userStore"
     import Router from "svelte-spa-router"
     import Home from "./routes/Home.svelte";
     import {wrap} from "svelte-spa-router/wrap";
     import Spinner from "./helperComponents/Spinner.svelte";
     import Header from "./helperComponents/Header.svelte";
-    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()
-        await CheckIfMALLoggedInAndSetUser()
-        await CheckIfSimklLoggedInAndSetUser()
+        await userStore.checkProvider('anilist')
+        await userStore.checkProvider('mal')
+        await userStore.checkProvider('simkl')
     })
 </script>
 
+{#if $userStore.anilist.isLoggedIn}
     <Header />
     <Router routes={{
         '/': Home,
         '/anime/:id': wrap({
             asyncComponent: () => import('./routes/AnimeRoutePage.svelte'),
-        conditions: [
-            async () => await CheckIfAniListLoggedIn(),
-            async (detail) => {
-                aniListAnime.update(value => {
-                    value = AniListGetSingleAnimeDefaultData
-                    return value
-                })
-                await GetAnimeSingleItem(Number(detail.params.id), true)
-                return Object.keys($aniListAnime).length!==0
-            },
-        ],
             loadingComponent: Spinner
         }),
         // '*': "Not Found"
     }} />
+{/if}

frontend/src/anilist/types/AniListCurrentUserWatchListType.ts

@@ -1,80 +0,0 @@
-export interface AniListCurrentUserWatchList {
-    data: {
-        Page: {
-            pageInfo: {
-                total: number
-                perPage: number
-                currentPage: number
-                lastPage: number
-                hasNextPage: boolean
-            },
-            mediaList: MediaList[]
-        }
-    }
-}
-
-export interface AniListGetSingleAnime {
-    data: {
-        MediaList: MediaList
-    }
-}
-
-export interface MediaList {
-    id: number
-    mediaId: number
-    userId: number
-    media: {
-        id: number
-        idMal: number
-        title: {
-            romaji: string
-            english?: string
-            native: string
-        }
-        description: string
-        coverImage: {
-            large: string
-        }
-        season: string
-        seasonYear: number
-        status: string
-        episodes?: number
-        nextAiringEpisode?: {
-            airingAt: number
-            timeUntilAiring: number
-            episode: number
-        }
-    }
-    status: string
-    startedAt: {
-        year: number
-        month: number
-        day: number
-    }
-    completedAt: {
-        year?: number
-        month?: number
-        day?: number
-    }
-    notes?: string
-    progress: number
-    score: number
-    repeat: number
-    user: {
-        id: number
-        name: string
-        avatar: {
-            large: string
-            medium: string
-        }
-        statistics: {
-            anime: {
-                count: number
-                statuses: [{
-                    status: string
-                    count: number
-                }]
-            }
-        }
-    }
-}

frontend/src/defaults/AniListGetSingleAnime.ts

@@ -1,4 +1,4 @@
-import type {AniListGetSingleAnime} from "../anilist/types/AniListCurrentUserWatchListType";
+import type {AniListGetSingleAnime} from "../types/AniListCurrentUserWatchListType";
 
 export const AniListGetSingleAnimeDefaultData: AniListGetSingleAnime = {
     data: {
@@ -26,7 +26,18 @@ export const AniListGetSingleAnimeDefaultData: AniListGetSingleAnime =  {
                     airingAt: 0,
                     timeUntilAiring: 0,
                     episode: 0,
+                },
+                tags: [
+                    {
+                        id: 0,
+                        name: "",
+                        description: "",
+                        rank: 0,
+                        isMediaSpoiler: false,
+                        isAdult: false
                     }
+                ],
+                isAdult: false
             },
             status: "",
             startedAt: {

frontend/src/defaults/AniListWatchListDefaultData.ts

@@ -0,0 +1,89 @@
+import type {AniListCurrentUserWatchList} from "../types/AniListCurrentUserWatchListType"
+
+export const AniListWatchListDefaultData: AniListCurrentUserWatchList = {
+    data: {
+        Page: {
+            pageInfo: {
+                total: 0,
+                perPage: 0,
+                currentPage: 0,
+                lastPage: 0,
+                hasNextPage: false
+            },
+            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,
+                        },
+                        tags: [
+                            {
+                                id: 0,
+                                name: "",
+                                description: "",
+                                rank: 0,
+                                isMediaSpoiler: false,
+                                isAdult: false,
+                            },
+                        ],
+                        isAdult: false,
+                    },
+                    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,
+                                    }
+                                ]
+                            }
+                        }
+                    }
+                }
+            ]
+        }
+    }
+}

frontend/src/defaults/UserTypes.ts

@@ -0,0 +1,67 @@
+import type {AniListUser} from "../types/AniListTypes";
+import type {MyAnimeListUser} from "../types/MALTypes";
+import type {SimklUser} from "../types/simklTypes";
+
+export const AniListUserDefaultData: AniListUser = {
+    "data": {
+        "Viewer": {
+            id: 0,
+            name: "",
+            avatar: {
+                large: "",
+                medium: "",
+            },
+            bannerImage: "",
+            siteUrl: ""
+        }
+    }
+}
+
+export const MALUserDefaultData: MyAnimeListUser = {
+    id: 0,
+    name: "",
+    picture: "",
+    gender: "",
+    birthday: "",
+    location: "",
+    joinedAt: "",
+    AnimeStatistics: {
+        numItemsWatching: 0,
+        numItemsCompleted: 0,
+        numItemsOnHold: 0,
+        numItemsDropped: 0,
+        numItemsPlanToWatch: 0,
+        numItems: 0,
+        numDaysWatched: 0,
+        numDaysWatching: 0,
+        numDaysCompleted: 0,
+        numDaysOnHold: 0,
+        numDaysDropped: 0,
+        numDays: 0,
+        numEpisodes: 0,
+        numTimesRewatched: 0,
+        meanScore: 0
+    },
+    timeZone: "",
+    isSupporter: false
+}
+
+export const SimklUserDefaultData: SimklUser = {
+    user: {
+        name: "",
+        joined_at: "",
+        gender: "",
+        avatar: "",
+        bio: "",
+        loc: "",
+        age: "",
+    },
+    account: {
+        id: 0,
+        timezone: "",
+        type: "",
+    },
+    connections: {
+        facebook: false
+    }
+}

frontend/src/helperComponents/Anime.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
     import {
         aniListAnime,
-        aniListLoggedIn,
         malAnime,
-        malLoggedIn,
         simklAnime,
-        simklLoggedIn,
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+    import {userStore} from "../helperFunctions/userStore"
     import { push } from "svelte-spa-router";
-    import { Button } from "flowbite-svelte";
-    import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
+    import type { AniListGetSingleAnime } from "../types/AniListCurrentUserWatchListType";
     import Rating from "./Rating.svelte";
     import {
         convertAniListDateToString,
@@ -20,18 +17,15 @@
         MALAnime,
         MalListStatus,
         MALUploadStatus,
-    } from "../mal/types/MALTypes";
-    import type { SimklAnime } from "../simkl/types/simklTypes";
+    } from "../types/MALTypes";
+    import type { SimklAnime } from "../types/simklTypes";
     import { writable } from "svelte/store";
     import type {
         StatusOption,
         StatusOptions,
-    } from "../helperTypes/StatusTypes";
-    import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
-    import {
-        convertDateStringToAniList,
-        convertDateToAniList,
-    } from "../helperFunctions/convertDateToAniList";
+    } from "../types/StatusTypes";
+    import type { AniListUpdateVariables } from "../types/AniListTypes";
+    import { convertDateToAniList } from "../helperFunctions/convertDateToAniList";
     import {
         AniListDeleteEntry,
         AniListUpdateEntry,
@@ -43,13 +37,10 @@
         SimklSyncStatus,
     } from "../../wailsjs/go/main/App";
     import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
-    import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
     import Datepicker from "./Datepicker.svelte";
+    import {Badge, Tooltip} from "flowbite-svelte";
     const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
 
-    let isAniListLoggedIn: boolean;
-    let isMalLoggedIn: boolean;
-    let isSimklLoggedIn: boolean;
     let currentAniListAnime: AniListGetSingleAnime;
     let currentMalAnime: MALAnime;
     let currentSimklAnime: SimklAnime;
@@ -57,9 +48,6 @@
     let isSubmitting: boolean;
     let submitSuccess = writable(false);
 
-    aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
-    malLoggedIn.subscribe((value) => (isMalLoggedIn = value));
-    simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
     aniListAnime.subscribe((value) => (currentAniListAnime = value));
     malAnime.subscribe((value) => (currentMalAnime = value));
     simklAnime.subscribe((value) => (currentSimklAnime = value));
@@ -93,7 +81,7 @@
         currentAniListAnime.data.MediaList.completedAt,
     );
 
-    if (isAniListLoggedIn)
+    if ($userStore.anilist.isLoggedIn)
         AddAnimeServiceToTable({
             id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
             title,
@@ -111,7 +99,7 @@
             notes: currentAniListAnime.data.MediaList.notes,
         });
 
-    if (isMalLoggedIn) {
+    if ($userStore.mal.isLoggedIn) {
         let startDate = "";
         let finishDate = "";
         if (currentMalAnime.my_list_status.start_date !== "") {
@@ -140,7 +128,7 @@
         });
     }
 
-    if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0)
+    if ($userStore.simkl.isLoggedIn && Object.keys(currentSimklAnime).length > 0)
         AddAnimeServiceToTable({
             id: `s-${currentSimklAnime.show.ids.simkl}`,
             title: currentSimklAnime.show.title,
@@ -201,7 +189,7 @@
         }
 
         if (
-            isAniListLoggedIn &&
+            $userStore.anilist.isLoggedIn &&
             currentAniListAnime.data.MediaList.mediaId !== 0
         ) {
             let body: AniListUpdateVariables = {
@@ -216,9 +204,8 @@
             };
             await AniListUpdateEntry(body).then(
                 (value: AniListGetSingleAnime) => {
-                    /* TODO in future when you inevitably add tags to typescript, until Anilist fixes the api bug
-                    where tags break the SaveMediaListEntry return, you'll want to use this delete line
-                    delete value.data.MediaList.media.tags */
+                    value.data.MediaList.media.tags =
+                        currentAniListAnime.data.MediaList.media.tags;
                     aniListAnime.update((newValue) => {
                         newValue = value;
                         return newValue;
@@ -243,7 +230,7 @@
             );
         }
 
-        if (malLoggedIn && currentMalAnime.id !== 0) {
+        if ($userStore.mal.isLoggedIn && currentMalAnime.id !== 0) {
             let body: MALUploadStatus = {
                 status: submitData.status.mal,
                 is_rewatching: submitData.repeat > 0,
@@ -299,7 +286,7 @@
             );
         }
 
-        if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
+        if ($userStore.simkl.isLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
             if (
                 currentSimklAnime.watched_episodes_count !== submitData.episodes
             ) {
@@ -383,7 +370,7 @@
     const deleteEntries = async () => {
         submitting.set(true);
         if (
-            isAniListLoggedIn &&
+            $userStore.anilist.isLoggedIn &&
             currentAniListAnime.data.MediaList.mediaId !== 0
         ) {
             await AniListDeleteEntry(currentAniListAnime.data.MediaList.id);
@@ -400,7 +387,7 @@
                 notes: "",
             });
         }
-        if (malLoggedIn && currentMalAnime.id !== 0) {
+        if ($userStore.mal.isLoggedIn && currentMalAnime.id !== 0) {
             await DeleteMyAnimeListEntry(currentMalAnime.id);
             AddAnimeServiceToTable({
                 id: `m-${currentMalAnime.id}`,
@@ -415,7 +402,7 @@
                 notes: "",
             });
         }
-        if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
+        if ($userStore.simkl.isLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
             await SimklSyncRemove(currentSimklAnime);
             AddAnimeServiceToTable({
                 id: `s-${currentSimklAnime.show.ids.simkl}`,
@@ -448,6 +435,7 @@
             currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode -
             1;
     }
+
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
@@ -479,8 +467,23 @@
                             type="button"
                             id="decrement-button"
                             data-input-counter-decrement="quantity-input"
-                            on:click={() =>
-                                (currentAniListAnime.data.MediaList.progress -= 1)}
+                            on:click={() => {
+                                currentAniListAnime.data.MediaList.progress -= 1;
+                                if (
+                                    currentAniListAnime.data.MediaList
+                                        .progress <
+                                    currentAniListAnime.data.MediaList.media
+                                        .episodes
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[0];
+                                    if (
+                                        currentAniListAnime.data.MediaList
+                                            .repeat === 0
+                                    )
+                                        completedAtDate = null;
+                                }
+                            }}
                             class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
                         >
                             <svg
@@ -519,7 +522,7 @@
                                         .nextAiringEpisode.episode -
                                         1)
                                 ? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
-                                : 'bg-gray-700 hover:bg-gray-600 border-gray-600 text-white focus:ring-blue-500 focus:border-blue-500'} w-24"
+                                : 'bg-gray-700 hover:bg-gray-600 border-gray-600 text-white focus:ring-blue-500 focus:border-blue-500'}"
                             bind:value={
                                 currentAniListAnime.data.MediaList.progress
                             }
@@ -529,8 +532,29 @@
                             type="button"
                             id="increment-button"
                             data-input-counter-increment="quantity-input"
-                            on:click={() =>
-                                (currentAniListAnime.data.MediaList.progress += 1)}
+                            on:click={() => {
+                                currentAniListAnime.data.MediaList.progress += 1;
+                                if (
+                                    currentAniListAnime.data.MediaList.media
+                                        .episodes ===
+                                    currentAniListAnime.data.MediaList.progress
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[2];
+                                    completedAtDate = new Date();
+                                }
+                                if (
+                                    currentAniListAnime.data.MediaList
+                                        .progress -
+                                        1 ===
+                                    0
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[0];
+                                    if (startedAtDate === null)
+                                        startedAtDate = new Date();
+                                }
+                            }}
                             class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
                         >
                             <svg
@@ -564,8 +588,25 @@
                         </div>
                     {/if}
                 </div>
-
-
+                <div>
+                    <label
+                        for="status"
+                        class="text-left block mb-2 text-sm font-medium text-white"
+                        >Status</label
+                    >
+                    <select
+                        id="status"
+                        name="status"
+                        class="border text-sm rounded-lg
+                            block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400
+                            text-white focus:ring-blue-500 focus:border-blue-500"
+                        bind:value={startingAnilistStatusOption}
+                    >
+                        {#each statusOptions as option}
+                            <option value={option}>{option.aniList}</option>
+                        {/each}
+                    </select>
+                </div>
             </div>
             <div
                 class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36"
@@ -618,7 +659,7 @@
                         class="border {currentAniListAnime.data.MediaList
                             .repeat < 0
                             ? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
-                            : 'border-gray-500 text-white focus:ring-blue-500 focus:border-blue-500'} text-sm rounded-lg block w-24 p-2.5 bg-gray-600 placeholder-gray-400 text-white"
+                            : 'border-gray-500 focus:ring-blue-500 focus:border-blue-500'} text-sm rounded-lg block w-24 p-2.5 bg-gray-600 placeholder-gray-400 text-white"
                         bind:value={currentAniListAnime.data.MediaList.repeat}
                         required
                     />
@@ -649,12 +690,12 @@
         <div
             class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end"
         >
-            <Button
+            <button
                 disabled={isSubmitting}
                 id="sync-button"
-                class="text-white {$submitSuccess
-                    ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
-                    : 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                class="text-white focus:ring-4 {$submitSuccess
+                    ? 'bg-green-600 hover:bg-green-700  focus:ring-green-800'
+                    : 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 type="submit"
             >
                 <svg
@@ -678,18 +719,17 @@
                     />
                 </svg>
                 Sync Changes
-            </Button>
-            <Button
+            </button>
+            <button
                 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
                     focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
                     hover:border-gray-600"
                 on:click={async () => {
-                    await CheckIfAniListLoggedInAndLoadWatchList();
                     return push("/");
                 }}
             >
                 Go Home
-            </Button>
+            </button>
         </div>
     </div>
     <AnimeTable />
@@ -698,12 +738,12 @@
         <div
             class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-start"
         >
-            <Button
+            <button
                 disabled={isSubmitting}
                 id="delete-button"
-                class="text-white bg-red-700 {$submitSuccess
-                    ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
-                    : 'bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                class="text-white focus:ring-4 {$submitSuccess
+                    ? 'bg-green-600 hover:bg-green-700 focus:ring-green-800'
+                    : 'bg-red-600 hover:bg-red-700 focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 on:click={deleteEntries}
             >
                 <svg
@@ -727,17 +767,17 @@
                     />
                 </svg>
                 Delete Entries
-            </Button>
+            </button>
         </div>
         <div
             class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end"
         >
-            <Button
+            <button
                 disabled={isSubmitting}
                 id="sync-button"
-                class="text-white {$submitSuccess
-                    ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
-                    : 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                class="text-white focus:ring-4 {$submitSuccess
+                    ? 'bg-green-600 hover:bg-green-700 focus:ring-green-800'
+                    : 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 type="submit"
             >
                 <svg
@@ -761,23 +801,43 @@
                     />
                 </svg>
                 Sync Changes
-            </Button>
-            <Button
+            </button>
+            <button
                 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
                     focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
                     hover:border-gray-600"
                 on:click={async () => {
-                    await CheckIfAniListLoggedInAndLoadWatchList();
                     return push("/");
                 }}
             >
                 Go Home
-            </Button>
+            </button>
         </div>
     </div>
 
+    <div class="flex m-5">
         <div>
+            <h3 class="text-2xl">Tags</h3>
+            <div class="mt-2">
+                {#each currentAniListAnime.data.MediaList.media.tags as tag}
+                    <div>
+                        <Badge large border color="blue" class="m-1 w-52">
+                                <div>
+                                    {tag.name} -
+                                    <span class="text-xs">{tag.rank}%</span>
+                                </div>
+                        </Badge>
+                        <Tooltip>{tag.description}</Tooltip>
+                    </div>
+                {/each}
+            </div>
+        </div>
+
+        <div class="ml-5">
             <h3 class="text-2xl">Summary</h3>
-        <p>{@html currentAniListAnime.data.MediaList.media.description}</p>
+            <p class="rounded border border-gray-700 p-2 mt-2">
+                {@html currentAniListAnime.data.MediaList.media.description}
+            </p>
+        </div>
     </div>
 </form>

frontend/src/helperComponents/AvatarMenu.svelte

@@ -1,49 +1,34 @@
 <script lang="ts">
     import { Avatar } from "flowbite-svelte";
-    import type { AniListUser } from "../anilist/types/AniListTypes";
-    import {
-        aniListLoggedIn,
-        aniListUser,
-        malUser,
-        simklUser,
-        malLoggedIn,
-        simklLoggedIn,
-        loginToAniList,
-        loginToMAL,
-        loginToSimkl,
-        logoutOfAniList,
-        logoutOfMAL,
-        logoutOfSimkl,
-    } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+    import {userStore} from "../helperFunctions/userStore"
     import * as runtime from "../../wailsjs/runtime";
-    import type {MyAnimeListUser} from "../mal/types/MALTypes";
-    import type {SimklUser} from "../simkl/types/simklTypes";
-
-    let currentAniListUser: AniListUser;
-    let currentMALUser: MyAnimeListUser;
-    let currentSimklUser: SimklUser;
-    let isAniListLoggedIn: boolean;
-    let isSimklLoggedIn: boolean;
-    let isMALLoggedIn: boolean;
-
-    aniListUser.subscribe((value) => (currentAniListUser = value));
-    malUser.subscribe((value) => (currentMALUser = value))
-    simklUser.subscribe(value => currentSimklUser = value)
-    aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
-    simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
-    malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
+    import { ShowVersion } from "../../wailsjs/go/main/App";
 
     function dropdownUser(): void {
         let dropdown = document.querySelector("#userDropdown");
         dropdown.classList.toggle("hidden");
+
+        if (!dropdown.classList.contains("hidden")) {
+            document.addEventListener("click", clickOutside)
+        }
+    }
+
+    function clickOutside(event: Event): void {
+        let dropdown = document.querySelector("#userDropdown")
+        let toggleBtn = document.querySelector("#userDropdownButton")
+
+        if (!dropdown.contains(event.target as Node) && !toggleBtn.contains(event.target as Node)) {
+            dropdown.classList.add("hidden")
+            document.removeEventListener("click", clickOutside)
+        }
     }
 </script>
 
 <div class="relative">
     <button id="userDropdownButton" on:click={dropdownUser}>
-        {#if isAniListLoggedIn}
+        {#if $userStore.anilist.isLoggedIn}
             <Avatar
-                src={currentAniListUser.data.Viewer.avatar.medium}
+                src={$userStore.anilist.user.data.Viewer.avatar.medium}
                 class="cursor-pointer"
                 dot={{ color: "green" }}
             />
@@ -56,8 +41,8 @@
         class="absolute hidden right-0 2xl:left-1/2 2xl:-translate-x-1/2 z-10 divide-y rounded-lg shadow w-44 bg-gray-700 divide-gray-600"
     >
         <div class="px-4 py-3 text-sm text-white">
-            {#if isAniListLoggedIn}
-                <div>{currentAniListUser.data.Viewer.name}</div>
+            {#if $userStore.anilist.isLoggedIn}
+                <div>{$userStore.anilist.user.data.Viewer.name}</div>
             {:else}
                 <div>You are not logged into AniList</div>
             {/if}
@@ -66,52 +51,61 @@
             class="py-2 text-sm text-gray-200"
             aria-labelledby="dropdownUserAvatarButton"
         >
-            {#if isAniListLoggedIn}
+            {#if $userStore.anilist.isLoggedIn}
                 <li>
                     <button
-                        on:click={logoutOfAniList}
+                        on:click={() => userStore.logout("anilist")}
                         class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
                     >
-                        <span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {currentAniListUser.data.Viewer.name}
+                        <span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {$userStore.anilist.user.data.Viewer.name}
                     </button>
                 </li>
                 {:else}
                 <li>
-                    <button on:click={loginToAniList}
+                    <button on:click={() => {
+                        dropdownUser()
+                        userStore.checkProvider("anilist")
+                    }}
                             class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
                         <span class="maple-font text-lg mr-4">A</span>Login to AniList
                     </button>
                 </li>
             {/if}
-            {#if isMALLoggedIn}
+            {#if $userStore.mal.isLoggedIn}
                 <li>
                     <button
-                        on:click={logoutOfMAL}
+                        on:click={() => userStore.logout("mal")}
                         class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
                     >
-                        <span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
+                        <span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {$userStore.mal.user.name}
                     </button>
                 </li>
             {:else}
                 <li>
-                    <button on:click={loginToMAL}
+                    <button on:click={() => {
+                        dropdownUser()
+                        userStore.checkProvider("mal")
+                    }}
                             class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
                         <span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
                     </button>
                 </li>
             {/if}
-            {#if isSimklLoggedIn}
+            {#if $userStore.simkl.isLoggedIn}
                 <li>
                     <button
-                        on:click={logoutOfSimkl}
+                        on:click={() => userStore.logout("simkl")}
                         class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
                     >
-                        <span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser.user.name}
+                        <span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {$userStore.simkl.user.user.name}
                     </button>
                 </li>
             {:else}
                 <li>
-                    <button on:click={loginToSimkl}
+                    <button on:click={() => {
+                        dropdownUser()
+                        userStore.checkProvider("simkl")
+                    }}
                             class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
                         <span class="maple-font text-lg mr-4">S</span>Login to Simkl
                     </button>
@@ -119,6 +113,15 @@
             {/if}
         </ul>
         <div class="py-2">
+            <button
+                    on:click={() => {
+                        dropdownUser()
+                        ShowVersion()
+                    }}
+                    class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
+            >
+               Version
+            </button>
             <button
                 on:click={() => runtime.Quit()}
                 class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"

frontend/src/helperComponents/Header.svelte

@@ -1,23 +1,10 @@
 <script lang="ts">
     import Search from "./Search.svelte"
-    import {
-        aniListLoggedIn,
-        loginToAniList,
-        loginToMAL,
-        loginToSimkl,
-        malLoggedIn,
-        simklLoggedIn,
-    } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
     import AvatarMenu from "./AvatarMenu.svelte";
     import logo from "../assets/images/AniTrackLogo.svg"
+    import {userStore} from "../helperFunctions/userStore"
 
-    let isAniListLoggedIn: boolean
-    let isSimklLoggedIn: boolean
-    let isMALLoggedIn: boolean
 
-    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
-    simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
-    malLoggedIn.subscribe((value) => isMALLoggedIn = value)
 </script>
 
 <nav class="border-gray-200 bg-gray-900">
@@ -47,22 +34,22 @@
         <div class="hidden items-center justify-between w-full pb-4 min-[950px]:pb-0 min-[950px]:flex min-[950px]:w-auto min-[950px]:order-1 border border-gray-700 min-[950px]:border-0 bg-gray-800 min-[950px]:bg-transparent rounded-lg" id="navbar-user">
             <ul class="flex flex-col font-medium pb-6 min-[950px]:p-0 mt-4 min-[950px]:space-x-8 rtl:space-x-reverse min-[950px]:flex-row min-[950px]:mt-0">
                 <li>
-                    {#if !isAniListLoggedIn}
-                        <button on:click={loginToAniList}>
+                    {#if !$userStore.anilist.isLoggedIn}
+                        <button on:click={() => userStore.checkProvider("anilist")}>
 <!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
                             AniList Login
                         </button>
                     {/if}
-                    {#if !isMALLoggedIn}
-                        <button on:click={loginToMAL}>
+                    {#if !$userStore.mal.isLoggedIn}
+                        <button on:click={() => userStore.checkProvider("mal")}>
 <!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
                             MyAnimeList Login
                         </button>
                     {/if}
                 </li>
                 <li>
-                    {#if !isSimklLoggedIn}
-                        <button on:click={loginToSimkl}>
+                    {#if !$userStore.simkl.isLoggedIn}
+                        <button on:click={() => userStore.checkProvider("simkl")}>
 <!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
                             Simkl Login
                         </button>

frontend/src/helperComponents/Pagination.svelte

@@ -6,9 +6,9 @@
         watchListPage,
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
 
-    import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
+    import type {AniListCurrentUserWatchList} from "../types/AniListCurrentUserWatchListType"
     import {GetAniListUserWatchingList} from "../../wailsjs/go/main/App";
-    import {MediaListSort} from "../anilist/types/AniListTypes";
+    import {MediaListSort} from "../types/AniListTypes";
 
     let aniListWatchListLoaded: AniListCurrentUserWatchList
     let page: number

frontend/src/helperComponents/Search.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 
     import {AniListSearch} from "../../wailsjs/go/main/App";
-    import type {AniSearchList} from "../anilist/types/AniListTypes";
+    import type {AniSearchList} from "../types/AniListTypes";
     import {push} from "svelte-spa-router";
 
     let aniSearch = ""

frontend/src/helperComponents/WatchList.svelte

@@ -1,40 +1,32 @@
 <script lang="ts">
     import {
-        aniListLoggedIn,
         aniListWatchlist,
         GetAnimeSingleItem,
         loading,
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import {push} from "svelte-spa-router";
-    import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
+    import type {AniListCurrentUserWatchList} from "../types/AniListCurrentUserWatchListType"
     import {Rating} from "flowbite-svelte";
     import loader from '../helperFunctions/loader'
 
 
-    let isAniListLoggedIn: boolean
     let aniListWatchListLoaded: AniListCurrentUserWatchList
 
-    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
     aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
 
 </script>
 
 <div>
-    {#if isAniListLoggedIn}
     <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8 relative items-center">
         <h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</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 aniListWatchListLoaded.data.Page.mediaList as media}
-                    <div use:loader={loading} class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
+                <div use:loader={loading}
+                     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={() => {
                                 push(`#/anime/${media.media.id}`)
-                                // loading.set(true)
-                                // GetAniListSingleItem(media.media.id, true).then(() => {
-                                //     loading.set(false)
-                                //
-                                // })
                             }}
                         >
                             <img class="rounded-lg" src={media.media.coverImage.large} alt={
@@ -64,5 +56,4 @@
             {/each}
         </div>
     </div>
-    {/if}
 </div>

frontend/src/helperFunctions/userStore.ts

@@ -0,0 +1,121 @@
+// stores/user.ts
+import {get, writable} from 'svelte/store';
+import type {SimklUser, SimklWatchList} from "../types/simklTypes";
+import type {AniListUser} from "../types/AniListTypes";
+import type {MALWatchlist, MyAnimeListUser} from "../types/MALTypes";
+import {
+    GetAniListLoggedInUser,
+    GetMyAnimeList,
+    GetMyAnimeListLoggedInUser,
+    GetSimklLoggedInUser,
+    LogoutAniList,
+    LogoutMyAnimeList,
+    LogoutSimkl,
+    SimklGetUserWatchlist
+} from "../../wailsjs/go/main/App";
+import {LoadAniListWatchList} from "../helperModules/LoadAniListWatchList.svelte";
+import {aniListWatchlist, malWatchList, simklWatchList} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
+import type {AniListCurrentUserWatchList} from "../types/AniListCurrentUserWatchListType";
+import {AniListUserDefaultData, MALUserDefaultData, SimklUserDefaultData} from "../defaults/UserTypes";
+
+let aniWatchlist: AniListCurrentUserWatchList
+aniListWatchlist.subscribe(value => aniWatchlist = value)
+
+interface UserState {
+    simkl: { user: SimklUser; isLoggedIn: boolean; isPrimary: boolean };
+    anilist: { user: AniListUser; isLoggedIn: boolean; isPrimary: boolean };
+    mal: { user: MyAnimeListUser; isLoggedIn: boolean; isPrimary: boolean };
+}
+
+const createUserStore = () => {
+    const {subscribe, update} = writable<UserState>({
+        anilist: {user: AniListUserDefaultData, isLoggedIn: false, isPrimary: true},
+        mal: {user: MALUserDefaultData, isLoggedIn: false, isPrimary: false},
+        simkl: {user: SimklUserDefaultData, isLoggedIn: false, isPrimary: false}
+    });
+
+    return {
+        subscribe,
+        setAniListUser: (user: AniListUser, isPrimary = true) =>
+            update(s => ({
+                ...s,
+                anilist: {user, isLoggedIn: true, isPrimary}
+            })),
+        setMalUser: (user: MyAnimeListUser, isPrimary = false) =>
+            update(s => ({
+                ...s,
+                mal: {user, isLoggedIn: true, isPrimary}
+            })),
+        setSimklUser: (user: SimklUser, isPrimary = false) =>
+            update(s => ({
+                ...s,
+                simkl: {user, isLoggedIn: true, isPrimary}
+            })),
+        setPrimary: (provider: 'simkl' | 'anilist' | 'mal') =>
+            update(s => ({
+                ...s,
+                simkl: {...s.simkl, isPrimary: provider === 'simkl'},
+                anilist: {...s.anilist, isPrimary: provider === 'anilist'},
+                mal: {...s.mal, isPrimary: provider === 'mal'}
+            })),
+        checkProvider: async (provider: 'simkl' | 'anilist' | 'mal') => {
+            const state = get(userStore);
+            if (state[provider].isLoggedIn) return;
+
+            if (provider === 'anilist') {
+                const user: AniListUser = await GetAniListLoggedInUser();
+                console.log(user)
+                userStore.setAniListUser(user, state.anilist.isPrimary);
+                console.log(state.anilist.isPrimary)
+                if (state.anilist.isPrimary) await LoadAniListWatchList();
+            } else if (provider === 'mal') {
+                const user: MyAnimeListUser = await GetMyAnimeListLoggedInUser();
+                userStore.setMalUser(user, state.mal.isPrimary);
+                if (state.mal.isPrimary) {
+                    const watchList = await GetMyAnimeList(1000);
+                    malWatchList.set(watchList);
+                }
+            } else if (provider === 'simkl') {
+                const user: SimklUser = await GetSimklLoggedInUser();
+                userStore.setSimklUser(user, state.simkl.isPrimary);
+                if (state.simkl.isPrimary) {
+                    const watchList = await SimklGetUserWatchlist();
+                    simklWatchList.set(watchList)
+                }
+            }
+        },
+        logout: async (provider: 'simkl' | 'anilist' | 'mal') => {
+            update(s => {
+                s[provider].user = {} as SimklUser | AniListUser | MyAnimeListUser
+                s[provider].isLoggedIn = false;
+                if (s[provider].isPrimary) {
+                    s[provider].isPrimary = false;
+                    const others = ['simkl', 'anilist', 'mal'] as const;
+                    const newPrimary = others.find(p => p !== provider && s[p].isLoggedIn);
+                    if (newPrimary) s[newPrimary].isPrimary = true;
+                }
+                return s;
+            });
+
+            // Clear provider-specific watchlist
+            if (provider === 'anilist') {
+                if (Object.keys(aniWatchlist).length !== 0) {
+                    aniListWatchlist.set({} as AniListCurrentUserWatchList)
+                }
+                await LogoutAniList();
+            } else if (provider === 'mal') {
+                if (Object.keys(aniWatchlist).length !== 0) {
+                    malWatchList.set({} as MALWatchlist);
+                }
+                await LogoutMyAnimeList();
+            } else if (provider === 'simkl') {
+                if (Object.keys(aniWatchlist).length !== 0) {
+                    simklWatchList.set({} as SimklWatchList);
+                }
+                await LogoutSimkl();
+            }
+        }
+    }
+};
+
+export const userStore = createUserStore();

frontend/src/helperModules/AddAnimeServiceToTable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    import type {TableItem} from "../helperTypes/TableTypes";
+    import type {TableItem} from "../types/TableTypes";
     import { tableItems } from "./GlobalVariablesAndHelperFunctions.svelte"
 
     export function AddAnimeServiceToTable(animeItem: TableItem) {

frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte

@@ -1,34 +0,0 @@
-<script lang="ts" context="module">
-    import {CheckIfAniListLoggedIn, GetAniListLoggedInUser, GetAniListUserWatchingList} from "../../wailsjs/go/main/App";
-    import {MediaListSort} from "../anilist/types/AniListTypes";
-    import { aniListUser, watchListPage, animePerPage, aniListPrimary, aniListLoggedIn, aniListWatchlist } from "./GlobalVariablesAndHelperFunctions.svelte"
-
-    let isAniListPrimary: boolean
-    let page: number
-    let perPage: number
-
-    aniListPrimary.subscribe(value => isAniListPrimary = value)
-    watchListPage.subscribe(value => page = value)
-    animePerPage.subscribe(value => perPage = value)
-
-    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>

frontend/src/helperModules/CheckIfMyAnimeListLoggedIn.svelte

@@ -1,25 +0,0 @@
-<script lang="ts" context="module">
-    import {CheckIfMyAnimeListLoggedIn, GetMyAnimeList, GetMyAnimeListLoggedInUser} from "../../wailsjs/go/main/App";
-    import {malUser, malPrimary, malWatchList, malLoggedIn} from "./GlobalVariablesAndHelperFunctions.svelte"
-
-    let isMalPrimary: boolean
-    malPrimary.subscribe(value => isMalPrimary = value)
-
-    export const CheckIfMALLoggedInAndSetUser = async () => {
-        await CheckIfMyAnimeListLoggedIn().then(loggedIn => {
-            if (loggedIn) {
-                GetMyAnimeListLoggedInUser().then(user => {
-                    malUser.set(user)
-                    if (isMalPrimary) {
-                        GetMyAnimeList(1000).then(watchList => {
-                            malWatchList.set(watchList)
-                            malLoggedIn.set(loggedIn)
-                        })
-                    } else {
-                        malLoggedIn.set(loggedIn)
-                    }
-                })
-            }
-        })
-    }
-</script>

frontend/src/helperModules/CheckIsSimklLoggedIn.svelte

@@ -1,29 +0,0 @@
-<script lang="ts" context="module">
-    import {CheckIfSimklLoggedIn, GetSimklLoggedInUser, SimklGetUserWatchlist} from "../../wailsjs/go/main/App";
-    import { simklLoggedIn, simklUser, simklPrimary, simklWatchList } from "./GlobalVariablesAndHelperFunctions.svelte";
-
-    let isSimklPrimary: boolean
-    simklPrimary.subscribe(value => isSimklPrimary = value)
-
-    export const CheckIfSimklLoggedInAndSetUser = async () => {
-        await CheckIfSimklLoggedIn().then(loggedIn => {
-            if (loggedIn) {
-                GetSimklLoggedInUser().then(user => {
-                    if (Object.keys(user).length === 0) {
-                        simklLoggedIn.set(false)
-                    } else {
-                        simklUser.set(user)
-                        if (isSimklPrimary) {
-                            SimklGetUserWatchlist().then(result => {
-                                simklWatchList.set(result)
-                                simklLoggedIn.set(loggedIn)
-                            })
-                        } else {
-                            simklLoggedIn.set(loggedIn)
-                        }
-                    }
-                })
-            }
-        })
-    }
-</script>

frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte

@@ -1,41 +1,25 @@
 <script lang="ts" context="module">
     import {
         GetAniListItem,
-        GetAniListLoggedInUser,
-        GetAniListUserWatchingList,
         GetMyAnimeListAnime,
-        GetMyAnimeListLoggedInUser,
-        GetSimklLoggedInUser,
-        LogoutAniList,
-        LogoutMyAnimeList,
-        LogoutSimkl,
-        SimklGetUserWatchlist,
         SimklSearch
     } from "../../wailsjs/go/main/App";
+    import {userStore} from "../helperFunctions/userStore";
     import type {
-        AniListCurrentUserWatchList,
         AniListGetSingleAnime
-    } from "../anilist/types/AniListCurrentUserWatchListType.js";
-    import {writable} from 'svelte/store'
-    import type {SimklAnime, SimklUser, SimklWatchList} from "../simkl/types/simklTypes";
-    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";
+    } from "../types/AniListCurrentUserWatchListType.js";
+    import {get, writable} from 'svelte/store'
+    import type {SimklAnime, SimklWatchList} from "../types/simklTypes";
+    import type {MALAnime, MALWatchlist} from "../types/MALTypes";
+    import type {TableItems} from "../types/TableTypes";
+    import {AniListGetSingleAnimeDefaultData} from "../defaults/AniListGetSingleAnime";
+    import {AniListWatchListDefaultData} from "../defaults/AniListWatchListDefaultData";
 
     export let aniListAnime = writable(AniListGetSingleAnimeDefaultData)
     export let title = writable("")
     export let aniListLoggedIn = writable(false)
-    export let simklLoggedIn = writable(false)
-    export let malLoggedIn = writable(false)
     export let simklWatchList = writable({} as SimklWatchList)
-    export let aniListPrimary = writable(true)
-    export let simklPrimary = writable(false)
-    export let malPrimary = writable(false)
-    export let simklUser = writable({} as SimklUser)
-    export let aniListUser = writable({} as AniListUser)
-    export let malUser = writable({} as MyAnimeListUser)
-    export let aniListWatchlist = writable({} as AniListCurrentUserWatchList)
+    export let aniListWatchlist = writable(AniListWatchListDefaultData)
     export let malWatchList = writable({} as MALWatchlist)
     export let malAnime = writable({} as MALAnime)
     export let simklAnime = writable({} as SimklAnime)
@@ -45,25 +29,14 @@
     export let watchListPage = writable(1)
     export let animePerPage = writable(20)
 
-    let isAniListPrimary: boolean
-    let page: number
-    let perPage: number
-    let aniWatchlist: AniListCurrentUserWatchList
     let currentAniListAnime: AniListGetSingleAnime
 
-    let isMalLoggedIn: boolean
-    let isSimklLoggedIn: boolean
-
-    aniListPrimary.subscribe(value => isAniListPrimary = value)
-    watchListPage.subscribe(value => page = value)
-    animePerPage.subscribe(value => perPage = value)
-    aniListWatchlist.subscribe(value => aniWatchlist = value)
-    malLoggedIn.subscribe(value => isMalLoggedIn = value)
-    simklLoggedIn.subscribe(value => isSimklLoggedIn = value)
     aniListAnime.subscribe(value => currentAniListAnime = value)
 
 
     export async function GetAnimeSingleItem(aniId: number, login: boolean): Promise<""> {
+        const store = get(userStore)
+        if (store.anilist.isLoggedIn)
         await GetAniListItem(aniId, login).then(aniListResult => {
             let finalResult: AniListGetSingleAnime
             finalResult = aniListResult
@@ -85,78 +58,16 @@
                 currentAniListAnime.data.MediaList.media.title.romaji :
                 currentAniListAnime.data.MediaList.media.title.english)
         })
-        if (isMalLoggedIn) {
+        if (store.mal.isLoggedIn) {
             await GetMyAnimeListAnime(currentAniListAnime.data.MediaList.media.idMal).then(malResult => {
                 malAnime.set(malResult)
             })
         }
-        if (isSimklLoggedIn) {
+        if (store.simkl.isLoggedIn) {
             await SimklSearch(currentAniListAnime.data.MediaList).then((value: SimklAnime) => {
                 simklAnime.set(value)
             })
         }
         return ""
     }
-
-    export function loginToSimkl(): void {
-        GetSimklLoggedInUser().then(user => {
-            if (Object.keys(user).length === 0) {
-                simklLoggedIn.set(false)
-            } else {
-                simklUser.set(user)
-                SimklGetUserWatchlist().then(result => {
-                    simklWatchList.set(result)
-                    simklLoggedIn.set(true)
-                })
-            }
-        })
-    }
-
-    export function loginToAniList(): void {
-        GetAniListLoggedInUser().then(result => {
-            aniListUser.set(result)
-            if (isAniListPrimary) {
-                GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
-                    aniListWatchlist.set(result)
-                    aniListLoggedIn.set(true)
-                })
-            } else {
-                aniListLoggedIn.set(true)
-            }
-        })
-    }
-
-    export function loginToMAL(): void {
-        GetMyAnimeListLoggedInUser().then(result => {
-            malUser.set(result)
-            malLoggedIn.set(true)
-        })
-    }
-
-    export function logoutOfAniList(): void {
-        LogoutAniList().then(result => {
-            console.log(result)
-            if (Object.keys(aniWatchlist).length !== 0) {
-                aniListWatchlist.set({} as AniListCurrentUserWatchList)
-            }
-            aniListUser.set({} as AniListUser)
-            aniListLoggedIn.set(false)
-        })
-    }
-
-    export function logoutOfMAL(): void {
-        LogoutMyAnimeList().then(result => {
-            console.log(result)
-            malUser.set({} as MyAnimeListUser)
-            malLoggedIn.set(false)
-        })
-    }
-
-    export function logoutOfSimkl(): void {
-        LogoutSimkl().then(result => {
-            console.log(result)
-            simklUser.set({} as SimklUser)
-            simklLoggedIn.set(false)
-        })
-    }
 </script>

frontend/src/helperModules/LoadAniListWatchList.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" context="module">
+    import {GetAniListUserWatchingList} from "../../wailsjs/go/main/App";
+    import {MediaListSort} from "../types/AniListTypes";
+    import { watchListPage, animePerPage, aniListWatchlist } from "./GlobalVariablesAndHelperFunctions.svelte"
+
+    let page: number
+    let perPage: number
+
+    watchListPage.subscribe(value => page = value)
+    animePerPage.subscribe(value => perPage = value)
+
+    export const LoadAniListWatchList = async () => {
+        await GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((watchList) => {
+            aniListWatchlist.set(watchList)
+        })
+    }
+</script>

frontend/src/routes/AnimeRoutePage.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
+    import { aniListAnime, GetAnimeSingleItem } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import Anime from "../helperComponents/Anime.svelte"
+    import { AniListGetSingleAnimeDefaultData } from "../defaults/AniListGetSingleAnime";
+    import Spinner from "../helperComponents/Spinner.svelte";
 
     export let params: Record<string, string>
+    let loadPromise = load(params.id)
+    $: loadPromise = load(params.id)
+
+    async function load(id: string) {
+        aniListAnime.update(() => AniListGetSingleAnimeDefaultData)
+        await GetAnimeSingleItem(Number(id), true)
+    }
 </script>
 
 {#key params.id}
+    {#await loadPromise}
+        <Spinner />
+    {:then _}
         <Anime />
+    {/await}
 {/key}

frontend/src/routes/Home.svelte

@@ -2,19 +2,13 @@
 import Pagination from "../helperComponents/Pagination.svelte";
 import WatchList from "../helperComponents/WatchList.svelte";
 import {
-    aniListLoggedIn,
-    aniListPrimary,
     loading,
 } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
 import loader from '../helperFunctions/loader'
+import {userStore} from "../helperFunctions/userStore";
 
-let isAniListPrimary: boolean
-let isAniListLoggedIn: boolean
-
-aniListPrimary.subscribe((value) => isAniListPrimary = value)
-aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
 </script>
-{#if isAniListLoggedIn && isAniListPrimary}
+{#if $userStore.anilist.isLoggedIn && $userStore.anilist.isPrimary}
 <div class="container py-10">
     <Pagination />
     <WatchList />

frontend/src/types/AniListCurrentUserWatchListType.ts

@@ -0,0 +1,93 @@
+export interface AniListCurrentUserWatchList {
+  data: {
+    Page: {
+      pageInfo: {
+        total: number;
+        perPage: number;
+        currentPage: number;
+        lastPage: number;
+        hasNextPage: boolean;
+      };
+      mediaList: MediaList[];
+    };
+  };
+}
+
+export interface AniListGetSingleAnime {
+  data: {
+    MediaList: MediaList;
+  };
+}
+
+export interface MediaList {
+  id: number;
+  mediaId: number;
+  userId: number;
+  media: {
+    id: number;
+    idMal: number;
+    title: {
+      romaji: string;
+      english?: string;
+      native: string;
+    };
+    description: string;
+    coverImage: {
+      large: string;
+    };
+    season: string;
+    seasonYear: number;
+    status: string;
+    episodes?: number;
+    nextAiringEpisode?: {
+      airingAt: number;
+      timeUntilAiring: number;
+      episode: number;
+    };
+    tags: [
+      {
+        id: number;
+        name: string;
+        description: string;
+        rank: number;
+        isMediaSpoiler: boolean;
+        isAdult: boolean;
+      },
+    ];
+    isAdult: boolean;
+  };
+  status: string;
+  startedAt: {
+    year: number;
+    month: number;
+    day: number;
+  };
+  completedAt: {
+    year?: number;
+    month?: number;
+    day?: number;
+  };
+  notes?: string;
+  progress: number;
+  score: number;
+  repeat: number;
+  user: {
+    id: number;
+    name: string;
+    avatar: {
+      large: string;
+      medium: string;
+    };
+    statistics: {
+      anime: {
+        count: number;
+        statuses: [
+          {
+            status: string;
+            count: number;
+          },
+        ];
+      };
+    };
+  };
+}

frontend/wailsjs/go/main/App.d.ts

@@ -42,6 +42,8 @@ export function MyAnimeListLogin():Promise<void>;
 
 export function MyAnimeListUpdate(arg1:main.MALAnime,arg2:main.MALUploadStatus):Promise<main.MalListStatus>;
 
+export function ShowVersion():Promise<void>;
+
 export function SimklGetUserWatchlist():Promise<main.SimklWatchListType>;
 
 export function SimklLogin():Promise<void>;

frontend/wailsjs/go/main/App.js

@@ -82,6 +82,10 @@ export function MyAnimeListUpdate(arg1, arg2) {
   return window['go']['main']['App']['MyAnimeListUpdate'](arg1, arg2);
 }
 
+export function ShowVersion() {
+  return window['go']['main']['App']['ShowVersion']();
+}
+
 export function SimklGetUserWatchlist() {
   return window['go']['main']['App']['SimklGetUserWatchlist']();
 }

go.mod

@@ -39,11 +39,11 @@ require (
 	github.com/valyala/fasttemplate v1.2.2 // indirect
 	github.com/wailsapp/go-webview2 v1.0.19 // indirect
 	github.com/wailsapp/mimetype v1.4.1 // indirect
-	golang.org/x/crypto v0.35.0 // indirect
-	golang.org/x/net v0.35.0 // indirect
-	golang.org/x/sys v0.30.0 // indirect
-	golang.org/x/term v0.29.0 // indirect
-	golang.org/x/text v0.22.0 // indirect
+	golang.org/x/crypto v0.45.0 // indirect
+	golang.org/x/net v0.47.0 // indirect
+	golang.org/x/sys v0.38.0 // indirect
+	golang.org/x/term v0.37.0 // indirect
+	golang.org/x/text v0.31.0 // indirect
 )
 
 // replace github.com/wailsapp/wails/v2 v2.9.1 => /home/nymusicman/go/pkg/mod

go.sum

@@ -85,24 +85,24 @@ github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhw
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
 github.com/wailsapp/wails/v2 v2.10.1 h1:QWHvWMXII2nI/nXz77gpPG8P3ehl6zKe+u4su5BWIns=
 github.com/wailsapp/wails/v2 v2.10.1/go.mod h1:zrebnFV6MQf9kx8HI4iAv63vsR5v67oS7GTEZ7Pz1TY=
-golang.org/x/crypto v0.35.0 h1:b15kiHdrGCHrP6LvwaQ3c03kgNhhiMgvlhxHQhmg2Xs=
-golang.org/x/crypto v0.35.0/go.mod h1:dy7dXNW32cAb/6/PRuTNsix8T+vJAqvuIy5Bli/x0YQ=
+golang.org/x/crypto v0.45.0 h1:jMBrvKuj23MTlT0bQEOBcAE0mjg8mK9RXFhRH6nyF3Q=
+golang.org/x/crypto v0.45.0/go.mod h1:XTGrrkGJve7CYK7J8PEww4aY7gM3qMCElcJQ8n8JdX4=
 golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.35.0 h1:T5GQRQb2y08kTAByq9L4/bz8cipCdA8FbRTXewonqY8=
-golang.org/x/net v0.35.0/go.mod h1:EglIi67kWsHKlRzzVMUD93VMSWGFOMSZgxFjparz1Qk=
+golang.org/x/net v0.47.0 h1:Mx+4dIFzqraBXUugkia1OOvlD6LemFo1ALMHjrXDOhY=
+golang.org/x/net v0.47.0/go.mod h1:/jNxtkgq5yWUGYkaZGqo27cfGZ1c5Nen03aYrrKpVRU=
 golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.30.0 h1:QjkSwP/36a20jFYWkSue1YwXzLmsV5Gfq7Eiy72C1uc=
-golang.org/x/sys v0.30.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.38.0 h1:3yZWxaJjBmCWXqhN1qh02AkOnCQ1poK6oF+a7xWL6Gc=
+golang.org/x/sys v0.38.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
-golang.org/x/term v0.29.0 h1:L6pJp37ocefwRRtYPKSWOWzOtWSxVajvz2ldH/xi3iU=
-golang.org/x/term v0.29.0/go.mod h1:6bl4lRlvVuDgSf3179VpIxBF0o10JUpXWOnI7nErv7s=
+golang.org/x/term v0.37.0 h1:8EGAD0qCmHYZg6J17DvsMy9/wJ7/D/4pV/wfnld5lTU=
+golang.org/x/term v0.37.0/go.mod h1:5pB4lxRNYYVZuTLmy8oR2BH8dflOR+IbTYFD8fi3254=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.22.0 h1:bofq7m3/HAFvbF51jz3Q9wLg3jkvSPuiZu/pD1XwgtM=
-golang.org/x/text v0.22.0/go.mod h1:YRoo4H8PVmsu+E3Ou7cqLVH8oXWIHVoX0jqUWALQhfY=
+golang.org/x/text v0.31.0 h1:aC8ghyu4JhP8VojJ2lEHBnochRno1sgL6nEi9WGFGMM=
+golang.org/x/text v0.31.0/go.mod h1:tKRAlv61yKIjGGHX/4tP1LTbc13YSec1pxVEWXzfoeM=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 gopkg.in/check.v1 v1.0.0-20200902074654-038fdea0a05b h1:QRR6H1YWRnHb4Y/HeNFCTJLFVxaq6wH4YuVdsUOr75U=
 gopkg.in/check.v1 v1.0.0-20200902074654-038fdea0a05b/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=

wails.json

@@ -12,6 +12,6 @@
   },
   "info": {
     "productName": "AniTrack",
-    "productVersion": "0.1.7"
+    "productVersion": "0.6.0"
   }
 }