chore(version): bump version to 0.5.1

Increment version number from 0.5.0 to 0.5.1 for the upcoming release.

.gitignore

@@ -33,6 +33,3 @@ environment.go
 
 # REST (http files)
 http-client.private.env.json
-
-# Build artifacts
-build/*.tar.gz

frontend/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode"
+  ]
+}

frontend/src/App.svelte

@@ -1,70 +1,42 @@
 <script lang="ts">
-  import {
-    aniListLoggedIn,
-    malLoggedIn,
-    simklLoggedIn,
-    watchlistNeedsRefresh,
-    aniListPrimary,
-    malPrimary,
-    simklPrimary,
-    malWatchList,
-    simklWatchList,
-  } from "./helperModules/GlobalVariablesAndHelperFunctions.svelte";
-  import { onMount } from "svelte";
-  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,
-    GetMyAnimeList,
-    SimklGetUserWatchlist,
-  } from "../wailsjs/go/main/App";
-  import { loc } from "svelte-spa-router";
+    import {
+        aniListLoggedIn,
+        malLoggedIn,
+        simklLoggedIn,
+    } from "./helperModules/GlobalVariablesAndHelperFunctions.svelte";
+    import {onMount} from "svelte";
+    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";
 
-  onMount(async () => {
-    let isAniListLoggedIn: boolean;
-    let isMALLoggedIn: boolean;
-    let isSimklLoggedIn: boolean;
-    aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
-    malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
-    simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
+    onMount(async () => {
+        let isAniListLoggedIn: boolean
+        let isMALLoggedIn: boolean
+        let isSimklLoggedIn: boolean
+        aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
+        malLoggedIn.subscribe((value) => isMALLoggedIn = value)
+        simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
 
-    !isAniListLoggedIn && (await CheckIfAniListLoggedInAndLoadWatchList());
-    !isMALLoggedIn && (await CheckIfMALLoggedInAndSetUser());
-    !isSimklLoggedIn && (await CheckIfSimklLoggedInAndSetUser());
-  });
-
-  $: if ($loc?.location === "/" && $watchlistNeedsRefresh) {
-    (async () => {
-      if ($aniListLoggedIn && $aniListPrimary) {
-        await CheckIfAniListLoggedInAndLoadWatchList();
-      }
-      if ($malLoggedIn && $malPrimary) {
-        await GetMyAnimeList(1000).then((w) => malWatchList.set(w));
-      }
-      if ($simklLoggedIn && $simklPrimary) {
-        await SimklGetUserWatchlist().then((w) => simklWatchList.set(w));
-      }
-
-      watchlistNeedsRefresh.set(false);
-    })();
-  }
+        console.log(isAniListLoggedIn)
+        !isAniListLoggedIn && await CheckIfAniListLoggedInAndLoadWatchList()
+        !isMALLoggedIn && await CheckIfMALLoggedInAndSetUser()
+        !isSimklLoggedIn && await CheckIfSimklLoggedInAndSetUser()
+    })
 </script>
 
 <Header />
-<Router
-  routes={{
-    "/": Home,
-    "/anime/:id": wrap({
-      asyncComponent: () => import("./routes/AnimeRoutePage.svelte"),
-      conditions: [async () => await CheckIfAniListLoggedIn()],
-      loadingComponent: Spinner,
+<Router routes={{
+    '/': Home,
+    '/anime/:id': wrap({
+        asyncComponent: () => import('./routes/AnimeRoutePage.svelte'),
+        conditions: [async () => await CheckIfAniListLoggedIn()],
+        loadingComponent: Spinner
     }),
     // '*': "Not Found"
-  }}
-/>
+}} />

frontend/src/helperComponents/Pagination.svelte

@@ -1,224 +1,145 @@
 <script lang="ts">
-  import {
-    aniListLoggedIn,
-    aniListWatchlist,
-    animePerPage,
-    watchListPage,
-  } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+    import {
+        aniListLoggedIn,
+        aniListWatchlist,
+        animePerPage,
+        watchListPage,
+    } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
 
-  import type { AniListCurrentUserWatchList } from "../anilist/types/AniListCurrentUserWatchListType";
-  import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";
-  import { MediaListSort } from "../anilist/types/AniListTypes";
+    import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
+    import {GetAniListUserWatchingList} from "../../wailsjs/go/main/App";
+    import {MediaListSort} from "../anilist/types/AniListTypes";
 
-  let aniListWatchListLoaded: AniListCurrentUserWatchList;
-  let page: number;
-  let perPage: number;
+    let aniListWatchListLoaded: AniListCurrentUserWatchList
+    let page: number
+    let perPage: number
 
-  watchListPage.subscribe((value) => (page = value));
-  animePerPage.subscribe((value) => (perPage = value));
-  aniListWatchlist.subscribe((value) => (aniListWatchListLoaded = value));
+    watchListPage.subscribe(value => page = value)
+    animePerPage.subscribe(value => perPage = value)
+    aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
 
-  const perPageOptions = [10, 20, 50];
+    const perPageOptions = [10, 20, 50]
 
-  function ChangeWatchListPage(newPage: number) {
-    GetAniListUserWatchingList(
-      newPage,
-      perPage,
-      MediaListSort.UpdatedTimeDesc,
-    ).then((result) => {
-      watchListPage.set(newPage);
-      aniListWatchlist.set(result);
-      aniListLoggedIn.set(true);
-    });
-  }
+    function ChangeWatchListPage(newPage: number) {
+        GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
+            watchListPage.set(newPage)
+            aniListWatchlist.set(result)
+            aniListLoggedIn.set(true)
+        })
+    }
 
-  function changePage(
-    e: KeyboardEvent & { currentTarget: HTMLInputElement },
-  ): void {
-    if (
-      (e.key === "Enter" || e.key === "Tab") &&
-      Number(e.currentTarget.value) !== page
-    )
-      ChangeWatchListPage(Number(e.currentTarget.value));
-  }
+    function changePage(e): void {
+        if ((e.key === "Enter" || e.key === "Tab") && Number(e.target.value) !== page) ChangeWatchListPage(Number(e.target.value))
+    }
+
+    function changeCountPerPage(e): void {
+        GetAniListUserWatchingList(1, Number(e.target.value), MediaListSort.UpdatedTimeDesc).then((result) => {
+            animePerPage.set(Number(e.target.value))
+            watchListPage.set(1)
+            aniListWatchlist.set(result)
+            aniListLoggedIn.set(true)
+        })
+    }
 
-  function changeCountPerPage(
-    e: Event & { currentTarget: HTMLSelectElement },
-  ): void {
-    GetAniListUserWatchingList(
-      1,
-      Number(e.currentTarget.value),
-      MediaListSort.UpdatedTimeDesc,
-    ).then((result) => {
-      animePerPage.set(Number(e.currentTarget.value));
-      watchListPage.set(1);
-      aniListWatchlist.set(result);
-      aniListLoggedIn.set(true);
-    });
-  }
 </script>
 
 <div class="mb-8">
-  {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
-    <nav aria-label="Page navigation" class="hidden md:block">
-      <ul class="inline-flex -space-x-px text-base h-10">
-        {#if page === 1}
-          <li>
-            <button
-              disabled
-              class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 cursor-default"
-            >
-              Previous
-            </button>
-          </li>
-        {:else}
-          <li>
-            <button
-              on:click={() => ChangeWatchListPage(page - 1)}
-              class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
-            >
-              Previous
-            </button>
-          </li>
-        {/if}
-        {#each { length: aniListWatchListLoaded.data.Page.pageInfo.lastPage } as _, i}
-          {#if i + 1 === page}
-            <li>
-              <button
-                on:click={() => ChangeWatchListPage(i + 1)}
-                class="flex items-center justify-center px-4 h-10 leading-tight border hover:bg-gray-100 border-gray-700 bg-gray-700 text-white"
-                >{i + 1}</button
-              >
-            </li>
-          {:else}
-            <li>
-              <button
-                on:click={() => ChangeWatchListPage(i + 1)}
-                class="flex items-center justify-center px-4 h-10 leading-tight border dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
-                >{i + 1}</button
-              >
-            </li>
-          {/if}
-        {/each}
-        {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
-          <li>
-            <button
-              disabled
-              class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 cursor-default"
-            >
-              Next
-            </button>
-          </li>
-        {:else}
-          <li>
-            <button
-              on:click={() => ChangeWatchListPage(page + 1)}
-              class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
-            >
-              Next
-            </button>
-          </li>
-        {/if}
-      </ul>
-    </nav>
-  {/if}
-  <div class="flex mt-5">
-    <div class="w-20 mx-auto">
-      <select
-        bind:value={perPage}
-        on:change={(e) => changeCountPerPage(e)}
-        id="countPerPage"
-        class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
-      >
-        {#each perPageOptions as option}
-          <option value={option}>
-            {option}
-          </option>
-        {/each}
-      </select>
-    </div>
-
-    <div>
-      <div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
-      {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
-        <div class="md:hidden">
-          Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
+    {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
+        <nav aria-label="Page navigation" class="hidden md:block">
+            <ul class="inline-flex -space-x-px text-base h-10">
+                {#if page === 1}
+                    <li>
+                        <button disabled
+                                class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 cursor-default">
+                            Previous
+                        </button>
+                    </li>
+                {:else}
+                    <li>
+                        <button on:click={() => ChangeWatchListPage(page-1)}
+                                class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white">
+                            Previous
+                        </button>
+                    </li>
+                {/if}
+                {#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
+                    {#if i + 1 === page}
+                        <li>
+                            <button on:click={() => ChangeWatchListPage(i+1)}
+                                    class="flex items-center justify-center px-4 h-10 leading-tight border bg-gray-100 border-gray-700 bg-gray-700 text-white">{i + 1}</button>
+                        </li>
+                    {:else}
+                        <li>
+                            <button on:click={() => ChangeWatchListPage(i+1)}
+                                    class="flex items-center justify-center px-4 h-10 leading-tight border dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white">{i + 1}</button>
+                        </li>
+                    {/if}
+                {/each}
+                {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
+                    <li>
+                        <button disabled
+                                class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 cursor-default">
+                            Next
+                        </button>
+                    </li>
+                {:else}
+                    <li>
+                        <button on:click={() => ChangeWatchListPage(page+1)}
+                                class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white">
+                            Next
+                        </button>
+                    </li>
+                {/if}
+            </ul>
+        </nav>
+    {/if}
+    <div class="flex mt-5">
+        <div class="w-20 mx-auto">
+            <select bind:value={perPage} on:change={(e) => changeCountPerPage(e)} id="countPerPage"
+                    class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
+                {#each perPageOptions as option}
+                    <option value={option}>
+                        {option}
+                    </option>
+                {/each}
+            </select>
         </div>
-      {:else}
+
         <div>
-          Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
+            <div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
+            {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
+                <div class="md:hidden">Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
+            {:else}
+                <div>Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
+            {/if}
         </div>
-      {/if}
-    </div>
 
-    <div class="max-w-xs mx-auto">
-      <div class="relative flex items-center max-w-[11rem]">
-        <button
-          type="button"
-          id="decrement-button"
-          on:click={() => ChangeWatchListPage(page - 1)}
-          class={page <= 1
-            ? "border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
-            : "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"}
-          disabled={page <= 1}
-        >
-          <svg
-            class="w-3 h-3 text-white"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 18 2"
-          >
-            <path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M1 1h16"
-            />
-          </svg>
-        </button>
-        <input
-          type="number"
-          min="1"
-          max={aniListWatchListLoaded.data.Page.pageInfo.lastPage}
-          on:keydown={changePage}
-          id="page-counter"
-          class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none border-x-0 h-11 font-medium text-center text-sm block w-full pb-6 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
-          value={page}
-          required
-        />
-        <div
-          class="absolute bottom-1 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 flex items-center text-xs text-gray-400 space-x-1 rtl:space-x-reverse"
-        >
-          <span>Page #</span>
+        <div class="max-w-xs mx-auto">
+            <div class="relative flex items-center max-w-[11rem]">
+                <button type="button" id="decrement-button" on:click={() => ChangeWatchListPage(page-1)}
+                        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 class="w-3 h-3 text-white" aria-hidden="true"
+                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M1 1h16"/>
+                    </svg>
+                </button>
+                <input type="number" min="1" max="{aniListWatchListLoaded.data.Page.pageInfo.lastPage}"
+                       on:keydown={changePage} id="page-counter"
+                       class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none border-x-0 h-11 font-medium text-center text-sm block w-full pb-6 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+                       value={page} required/>
+                <div class="absolute bottom-1 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 flex items-center text-xs text-gray-400 space-x-1 rtl:space-x-reverse">
+                    <span>Page #</span>
+                </div>
+                <button type="button" id="increment-button" on:click={() => ChangeWatchListPage(page+1)}
+                        class="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 class="w-3 h-3 text-white" aria-hidden="true"
+                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M9 1v16M1 9h16"/>
+                    </svg>
+                </button>
+            </div>
         </div>
-        <button
-          type="button"
-          id="increment-button"
-          on:click={() => ChangeWatchListPage(page + 1)}
-          class={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage
-            ? "border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
-            : "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"}
-          disabled={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage}
-        >
-          <svg
-            class="w-3 h-3 text-white"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 18 18"
-          >
-            <path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 1v16M1 9h16"
-            />
-          </svg>
-        </button>
-      </div>
     </div>
-  </div>
 </div>

frontend/src/helperComponents/WatchList.svelte

@@ -1,99 +1,68 @@
 <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 { Rating } from "flowbite-svelte";
-  import loader from "../helperFunctions/loader";
-  import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
+    import {
+        aniListLoggedIn,
+        aniListWatchlist,
+        GetAnimeSingleItem,
+        loading,
+    } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+    import {push} from "svelte-spa-router";
+    import type {AniListCurrentUserWatchList} from "../anilist/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));
+    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"
-    >
-      <div class="flex justify-between items-center mb-4">
-        <h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
-        <button
-          type="button"
-          class="py-2 px-4 bg-gray-700 rounded-lg"
-          on:click={async () => {
-            loading.set(true);
-            await CheckIfAniListLoggedInAndLoadWatchList();
-            loading.set(false);
-          }}
-        >
-          Refresh WatchList
-        </button>
-      </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 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 w-[230px] h-[330px] object-cover"
-                  src={media.media.coverImage.large}
-                  alt={media.media.title.english === ""
-                    ? media.media.title.romaji
-                    : media.media.title.english}
-                />
-              </button>
-              <Rating
-                id="anime-rating"
-                total={5}
-                size={35}
-                rating={media.score / 2.0}
-              />
-              <button
-                class="mt-4 text-md font-semibold text-white-700"
-                on:click={() => GetAnimeSingleItem(media.media.id, true)}
-              >
-                {media.media.title.english === ""
-                  ? media.media.title.romaji
-                  : media.media.title.english}
-              </button>
-              <p class="mt-1 text-lg font-medium text-white-900">
-                {media.progress}
-                / {media.media.nextAiringEpisode.episode !== 0
-                  ? media.media.nextAiringEpisode.episode - 1
-                  : media.media.episodes}
-              </p>
-              {#if media.media.episodes > 0}
-                <p class="mt-1 text-lg font-medium text-white-900">
-                  Total Episodes: {media.media.episodes}
-                </p>
-              {/if}
+            <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 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={
+                                media.media.title.english === "" ?
+                                    media.media.title.romaji :
+                                    media.media.title.english
+                            }/>
+                            </button>
+                            <Rating id="anime-rating" total={5} size={35} rating={media.score/2.0}/>
+                            <button class="mt-4 text-md font-semibold text-white-700"
+                                    on:click={() => GetAnimeSingleItem(media.media.id, true)}>
+                                {
+                                    media.media.title.english === "" ?
+                                        media.media.title.romaji :
+                                        media.media.title.english
+                                }
+                            </button>
+                            <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
+                                / {media.media.nextAiringEpisode.episode !== 0 ?
+                                    media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
+                            {#if media.media.episodes > 0}
+                                <p class="mt-1 text-lg font-medium text-white-900">Total
+                                    Episodes: {media.media.episodes}</p>
+                            {/if}
+                        </div>
+                    </div>
+                {/each}
             </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
+        </div>
+    {/if}
 </div>

frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte

@@ -1,187 +1,162 @@
 <script lang="ts" context="module">
-  import {
-    GetAniListItem,
-    GetAniListLoggedInUser,
-    GetAniListUserWatchingList,
-    GetMyAnimeListAnime,
-    GetMyAnimeListLoggedInUser,
-    GetSimklLoggedInUser,
-    LogoutAniList,
-    LogoutMyAnimeList,
-    LogoutSimkl,
-    SimklGetUserWatchlist,
-    SimklSearch,
-  } from "../../wailsjs/go/main/App";
-  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";
+    import {
+        GetAniListItem,
+        GetAniListLoggedInUser,
+        GetAniListUserWatchingList,
+        GetMyAnimeListAnime,
+        GetMyAnimeListLoggedInUser,
+        GetSimklLoggedInUser,
+        LogoutAniList,
+        LogoutMyAnimeList,
+        LogoutSimkl,
+        SimklGetUserWatchlist,
+        SimklSearch
+    } from "../../wailsjs/go/main/App";
+    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";
 
-  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 malWatchList = writable({} as MALWatchlist);
-  export let malAnime = writable({} as MALAnime);
-  export let simklAnime = writable({} as SimklAnime);
-  export let loading = writable(false);
-  export let tableItems = writable([] as TableItems);
-  export let watchlistNeedsRefresh = writable(false);
+    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 malWatchList = writable({} as MALWatchlist)
+    export let malAnime = writable({} as MALAnime)
+    export let simklAnime = writable({} as SimklAnime)
+    export let loading = writable(false)
+    export let tableItems = writable([] as TableItems)
 
-  export let watchListPage = writable(1);
-  export let animePerPage = writable(20);
+    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 isAniListPrimary: boolean
+    let page: number
+    let perPage: number
+    let aniWatchlist: AniListCurrentUserWatchList
+    let currentAniListAnime: AniListGetSingleAnime
 
-  let isMalLoggedIn: boolean;
-  let isSimklLoggedIn: boolean;
+    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));
+    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<""> {
-    await GetAniListItem(aniId, login).then((aniListResult) => {
-      let finalResult: AniListGetSingleAnime;
-      finalResult = aniListResult;
-      if (login === false) {
-        finalResult.data.MediaList.status = "";
-        finalResult.data.MediaList.score = 0;
-        finalResult.data.MediaList.progress = 0;
-        finalResult.data.MediaList.notes = "";
-        finalResult.data.MediaList.repeat = 0;
-        finalResult.data.MediaList.startedAt.day = 0;
-        finalResult.data.MediaList.startedAt.month = 0;
-        finalResult.data.MediaList.startedAt.year = 0;
-        finalResult.data.MediaList.completedAt.day = 0;
-        finalResult.data.MediaList.completedAt.month = 0;
-        finalResult.data.MediaList.completedAt.year = 0;
-      }
-      aniListAnime.set(finalResult);
-      title.set(
-        currentAniListAnime.data.MediaList.media.title.english === ""
-          ? currentAniListAnime.data.MediaList.media.title.romaji
-          : currentAniListAnime.data.MediaList.media.title.english,
-      );
-    });
-    if (isMalLoggedIn) {
-      await GetMyAnimeListAnime(
-        currentAniListAnime.data.MediaList.media.idMal,
-      ).then((malResult) => {
-        malAnime.set(malResult);
-      });
+
+    export async function GetAnimeSingleItem(aniId: number, login: boolean): Promise<""> {
+        await GetAniListItem(aniId, login).then(aniListResult => {
+            let finalResult: AniListGetSingleAnime
+            finalResult = aniListResult
+            if (login === false) {
+                finalResult.data.MediaList.status = ""
+                finalResult.data.MediaList.score = 0
+                finalResult.data.MediaList.progress = 0
+                finalResult.data.MediaList.notes = ""
+                finalResult.data.MediaList.repeat = 0
+                finalResult.data.MediaList.startedAt.day = 0
+                finalResult.data.MediaList.startedAt.month = 0
+                finalResult.data.MediaList.startedAt.year = 0
+                finalResult.data.MediaList.completedAt.day = 0
+                finalResult.data.MediaList.completedAt.month = 0
+                finalResult.data.MediaList.completedAt.year = 0
+            }
+            aniListAnime.set(finalResult)
+            title.set(currentAniListAnime.data.MediaList.media.title.english === "" ?
+                currentAniListAnime.data.MediaList.media.title.romaji :
+                currentAniListAnime.data.MediaList.media.title.english)
+        })
+        if (isMalLoggedIn) {
+            await GetMyAnimeListAnime(currentAniListAnime.data.MediaList.media.idMal).then(malResult => {
+                malAnime.set(malResult)
+            })
+        }
+        if (isSimklLoggedIn) {
+            await SimklSearch(currentAniListAnime.data.MediaList).then((value: SimklAnime) => {
+                simklAnime.set(value)
+            })
+        }
+        return ""
     }
-    if (isSimklLoggedIn) {
-      await SimklSearch(currentAniListAnime.data.MediaList).then(
-        (value: SimklAnime) => {
-          simklAnime.set(value);
-        },
-      );
+
+    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)
+                })
+            }
+        })
     }
-    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 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 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 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 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);
-    });
-  }
+    export function logoutOfSimkl(): void {
+        LogoutSimkl().then(result => {
+            console.log(result)
+            simklUser.set({} as SimklUser)
+            simklLoggedIn.set(false)
+        })
+    }
 </script>
-

wails.json

@@ -12,6 +12,6 @@
   },
   "info": {
     "productName": "AniTrack",
-    "productVersion": "0.6.5"
+    "productVersion": "0.5.1"
   }
 }