added pagination

frontend/src/App.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
     import {
-        anilistModal,
-        title,
-        simklWatchList,
         aniListLoggedIn,
-        simklLoggedIn,
+        anilistModal,
-        simklUser,
-        aniListUser,
         aniListPrimary,
+        aniListUser,
         aniListWatchlist,
         GetAniListSingleItemAndOpenModal,
+        simklLoggedIn,
+        simklUser,
+        simklWatchList,
+        title,
     } from "./GlobalVariablesAndHelperFunctions.svelte";
     import {
         CheckIfAniListLoggedIn,
@@ -28,7 +28,6 @@
     import {onMount} from "svelte";
 
 
-
     let isAniListLoggedIn: boolean
     let isAniListPrimary: boolean
     let aniListWatchListLoaded: AniListCurrentUserWatchList
@@ -71,6 +70,14 @@
             }
         })
     })
+
+    function ChangeWathcListPage(newPage: number) {
+        GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
+            page = newPage
+            aniListWatchlist.set(result)
+            aniListLoggedIn.set(true)
+        })
+    }
 </script>
 
 <Header/>
@@ -80,6 +87,51 @@
         <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
             <h1 class="text-left text-xl font-bold mb-4">Your WatchList</h1>
 
+            <div class="mb-8">
+                <nav aria-label="Page navigation example">
+                    <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 text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Previous</button>
+                            </li>
+                        {:else}
+                            <li>
+                                <button on:click={() => ChangeWathcListPage(page-1)}
+                                   class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</button>
+                            </li>
+                        {/if}
+                        {#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
+                            {#if i+1 === page}
+                                <li>
+                                    <button on:click={() => ChangeWathcListPage(i+1)}
+                                            class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i+1}</button>
+                                </li>
+                            {:else}
+                                <li>
+                                    <button on:click={() => ChangeWathcListPage(i+1)}
+                                       class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark: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 text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Next</button>
+                            </li>
+                        {:else}
+                            <li>
+                                <button on:click={() => ChangeWathcListPage(page+1)}
+                                   class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</button>
+                            </li>
+                        {/if}
+                    </ul>
+                </nav>
+            </div>
+
+
             <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 class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
@@ -91,13 +143,13 @@
                                     media.media.title.english
                             }/>
                             </button>
-                            <Rating id="anime-rating" total={5} size={35} rating={media.score/2.0} />
+                            <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={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
                                 {
                                     media.media.title.english === "" ?
-                                    media.media.title.romaji :
+                                        media.media.title.romaji :
-                                    media.media.title.english
+                                        media.media.title.english
                                 }
                             </button>
                             <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
@@ -111,6 +163,50 @@
                     </div>
                 {/each}
             </div>
+
+            <div class="mt-8">
+                <nav aria-label="Page navigation example">
+                    <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 text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Previous</button>
+                            </li>
+                        {:else}
+                            <li>
+                                <button on:click={() => ChangeWathcListPage(page-1)}
+                                        class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</button>
+                            </li>
+                        {/if}
+                        {#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
+                            {#if i+1 === page}
+                                <li>
+                                    <button on:click={() => ChangeWathcListPage(i+1)}
+                                            class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i+1}</button>
+                                </li>
+                            {:else}
+                                <li>
+                                    <button on:click={() => ChangeWathcListPage(i+1)}
+                                            class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark: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 text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Next</button>
+                            </li>
+                        {:else}
+                            <li>
+                                <button on:click={() => ChangeWathcListPage(page+1)}
+                                        class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</button>
+                            </li>
+                        {/if}
+                    </ul>
+                </nav>
+            </div>
         </div>
     {/if}