From cbcb07d2f1cfb5331c528f5db02fb125bba12c97 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Thu, 5 Sep 2024 20:42:20 -0400
Subject: [PATCH] switched tanstack query

---
 .../AddAnimeServiceToTable.svelte             |  38 ++--
 .../src/helperComponents/AnimeTable.svelte    | 199 +++++++++++++-----
 frontend/src/helperComponents/Header.svelte   |   1 -
 frontend/src/routes/Anime.svelte              | 108 +++++-----
 4 files changed, 215 insertions(+), 131 deletions(-)

diff --git a/frontend/src/helperComponents/AddAnimeServiceToTable.svelte b/frontend/src/helperComponents/AddAnimeServiceToTable.svelte
index 9197fac..3e4e433 100644
--- a/frontend/src/helperComponents/AddAnimeServiceToTable.svelte
+++ b/frontend/src/helperComponents/AddAnimeServiceToTable.svelte
@@ -2,32 +2,20 @@
     import type {TableItem} from "../helperTypes/TableTypes";
     import { tableItems } from "./GlobalVariablesAndHelperFunctions.svelte"
 
-    export function AddAnimeServiceToTable(tableItem: TableItem) {
-        let tableLoaded: TableItem[]
-        tableItems.subscribe(value => tableLoaded = value)
-        console.log(tableLoaded.length)
-        if(tableLoaded.length === 0) {
-            tableItems.update(table => {
-                table.push(tableItem)
-                return table
-            })
-            return
-        }
-
-        for (const [index, entry] of tableLoaded.entries()) {
-            console.log(entry)
-            if (entry.service === tableItem.service) {
-                tableItems.update(value => {
-                    value[index] = tableItem
-                    return value
-                })
+    export function AddAnimeServiceToTable(animeItem: TableItem) {
+        tableItems.update((table) => {
+            if (table.length === 0) {
+                table.push(animeItem)
             } else {
-                tableItems.update(table => {
-                    table.push(tableItem)
-                    return table
-                })
+                for (const [index, tableItem] of table.entries()) {
+                    if(tableItem.service === animeItem.service) {
+                        table[index] = animeItem
+                        return table
+                    }
+                }
+                table.push(animeItem)
             }
-        }
-        return
+            return table
+        })
     }
 </script>
\ No newline at end of file
diff --git a/frontend/src/helperComponents/AnimeTable.svelte b/frontend/src/helperComponents/AnimeTable.svelte
index ee22c9b..f0fa3e2 100644
--- a/frontend/src/helperComponents/AnimeTable.svelte
+++ b/frontend/src/helperComponents/AnimeTable.svelte
@@ -1,68 +1,151 @@
 <script lang="ts">
-    import {Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell} from "flowbite-svelte";
-    import {writable} from "svelte/store";
-    import type {TableItems} from "../helperTypes/TableTypes";
+    import {writable} from 'svelte/store'
+    import type {ColumnDef, TableOptions} from '@tanstack/svelte-table'
+    import {
+        createSvelteTable,
+        flexRender,
+        getCoreRowModel,
+        getSortedRowModel,
+        type OnChangeFn,
+        type SortingState,
+    } from '@tanstack/svelte-table'
+    import {tableItems} from "./GlobalVariablesAndHelperFunctions.svelte"
+    import type {TableItem, TableItems} from "../helperTypes/TableTypes";
 
-    export let items: TableItems
-    // tableItems.subscribe(value => items = value)
+    let tableItemsView: TableItems
+    tableItems.subscribe(value => tableItemsView = value)
 
-    const sortKey = writable('service'); // default sort key
-    const sortDirection = writable(1); // default sort direction (ascending)
-    const sortItems = writable(items.slice()); // make a copy of the items array
+    const defaultColumns: ColumnDef<TableItem>[] = [
+        {
+            accessorKey: 'id',
+            header: () => "Service Id",
+            cell: info => info.getValue(),
+        },
+        {
+            accessorKey: 'service',
+            header: () => 'Service',
+            cell: info => info.getValue(),
+        },
+        {
+            accessorKey: 'progress',
+            header: () => 'Episode Progress',
+            cell: info => info.getValue(),
+        },
+        {
+            accessorKey: 'status',
+            header: () => 'Status',
+            cell: info => info.getValue(),
+        },
+        {
+            accessorKey: 'startedAt',
+            header: () => 'Started At',
+            cell: info => info.getValue(),
+        },
+        {
+            accessorKey: 'completedAt',
+            header: () => 'Completed At',
+            cell: info => info.getValue(),
+        },
+        {
+            accessorKey: 'score',
+            header: () => 'Rating',
+            cell: info => info.getValue(),
+        },
+        {
+            accessorKey: 'repeat',
+            header: () => 'Repeat',
+            cell: info => info.getValue(),
+        },
+        {
+            accessorKey: 'notes',
+            header: () => 'Notes',
+            cell: info => info.getValue(),
+        },
+    ]
 
-    // Define a function to sort the items
-    const sortTable = (key: any) => {
-        // If the same key is clicked, reverse the sort direction
-        if ($sortKey === key) {
-            sortDirection.update((val) => -val);
+    let sorting: SortingState = []
+
+    const setSorting: OnChangeFn<SortingState> = updater => {
+        if (updater instanceof Function) {
+            sorting = updater(sorting)
         } else {
-            sortKey.set(key);
-            sortDirection.set(1);
+            sorting = updater
         }
-    };
-
-    $: {
-        const key = $sortKey;
-        const direction = $sortDirection;
-        const sorted = [...$sortItems].sort((a, b) => {
-            const aVal = a[key];
-            const bVal = b[key];
-            if (aVal < bVal) {
-                return -direction;
-            } else if (aVal > bVal) {
-                return direction;
-            }
-            return 0;
-        });
-        sortItems.set(sorted);
+        options.update(old => ({
+            ...old,
+            state: {
+                ...old.state,
+                sorting,
+            },
+        }))
     }
+
+    const options = writable<TableOptions<TableItem>>({
+        data: tableItemsView,
+        columns: defaultColumns,
+        state: {
+            sorting,
+        },
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+    })
+
+    const rerender = () => {
+        console.log(tableItemsView)
+        options.update(options => ({
+            ...options,
+            data: tableItemsView,
+        }))
+    }
+
+    const table = createSvelteTable(options)
 </script>
 
-<Table hoverable={true}>
-    <TableHead>
-        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('id')}>ID</TableHeadCell>
-        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('service')}>Service</TableHeadCell>
-        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('progress')}>Episode Progress</TableHeadCell>
-        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('status')}>Status</TableHeadCell>
-        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('startedAt')}>Date Started</TableHeadCell>
-        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('completedAt')}>Date Completed</TableHeadCell>
-        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('score')}>Rating</TableHeadCell>
-        <TableHeadCell class="cursor-pointer" on:click={() => sortTable('repeat')}>Rewatches</TableHeadCell>
-        <TableHeadCell>Notes</TableHeadCell>
-    </TableHead>
-    <TableBody tableBodyClass="divide-y">
-        {#each $sortItems as item}
-            <TableBodyRow>
-                <TableBodyCell class="overflow-x-auto">{item.id}</TableBodyCell>
-                <TableBodyCell class="overflow-x-auto">{item.service}</TableBodyCell>
-                <TableBodyCell class="overflow-x-auto">{item.progress}</TableBodyCell>
-                <TableBodyCell class="overflow-x-auto">{item.status}</TableBodyCell>
-                <TableBodyCell class="overflow-x-auto">{item.startedAt}</TableBodyCell>
-                <TableBodyCell class="overflow-x-auto">{item.completedAt}</TableBodyCell>
-                <TableBodyCell class="overflow-x-auto">{item.score}</TableBodyCell>
-                <TableBodyCell class="overflow-x-auto">{item.repeat}</TableBodyCell>
-                <TableBodyCell class="overflow-x-auto">{item.notes}</TableBodyCell>
-            </TableBodyRow>
+<div class="relative overflow-x-auto rounded-lg mb-5">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        {#each $table.getHeaderGroups() as headerGroup}
+            <tr>
+                {#each headerGroup.headers as header}
+                    <th class="px-6 py-3">
+                        {#if !header.isPlaceholder}
+                            <button
+                                class:cursor-pointer={header.column.getCanSort()}
+                                class:select-none={header.column.getCanSort()}
+                                on:click={header.column.getToggleSortingHandler()}
+                            >
+                                <svelte:component
+                                        this={flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext()
+                                        )}
+                                />
+                                {#if header.column.getIsSorted().toString() === 'asc'}
+                                    🔼
+                                {:else if header.column.getIsSorted().toString() === 'desc'}
+                                    🔽
+                                {/if}
+                            </button>
+                        {/if}
+                    </th>
+                {/each}
+            </tr>
         {/each}
-    </TableBody>
-</Table>
\ No newline at end of file
+        </thead>
+        <tbody>
+        {#each $table.getRowModel().rows as row}
+            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                {#each row.getVisibleCells() as cell}
+                    <td class="px-6 py-4">
+                        <svelte:component
+                                this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        />
+                    </td>
+                {/each}
+            </tr>
+        {/each}
+        </tbody>
+    </table>
+    <button on:click={() => rerender()} class="border p-2 mb-3"> Rerender</button>
+</div>
diff --git a/frontend/src/helperComponents/Header.svelte b/frontend/src/helperComponents/Header.svelte
index d0a738a..53d309d 100644
--- a/frontend/src/helperComponents/Header.svelte
+++ b/frontend/src/helperComponents/Header.svelte
@@ -34,7 +34,6 @@
 
     let currentLocation: any
     location.subscribe(value => currentLocation = value)
-    console.log(currentLocation)
 </script>
 
 <nav class="bg-white border-gray-200 dark:bg-gray-900">
diff --git a/frontend/src/routes/Anime.svelte b/frontend/src/routes/Anime.svelte
index 444f185..cf019b4 100644
--- a/frontend/src/routes/Anime.svelte
+++ b/frontend/src/routes/Anime.svelte
@@ -26,7 +26,7 @@
         SimklSyncRating,
         SimklSyncStatus
     } from "../../wailsjs/go/main/App";
-    import type {TableItems} from "../helperTypes/TableTypes";
+    import {AddAnimeServiceToTable} from "../helperComponents/AddAnimeServiceToTable.svelte";
 
     let isAniListLoggedIn: boolean
     let isMalLoggedIn: boolean
@@ -60,9 +60,8 @@
     let startingAnilistStatusOption: StatusOption = statusOptions.filter(option => currentAniListAnime.data.MediaList.status === option.aniList)[0]
     const startedAtDate = convertAniListDateToString(currentAniListAnime.data.MediaList.startedAt)
     const completedAtDate = convertAniListDateToString(currentAniListAnime.data.MediaList.completedAt)
-    let tableItems: TableItems = []
 
-    if (isAniListLoggedIn) tableItems.push({
+    if (isAniListLoggedIn) AddAnimeServiceToTable({
         id: currentAniListAnime.data.MediaList.id,
         service: "AniList",
         progress: currentAniListAnime.data.MediaList.progress,
@@ -75,7 +74,7 @@
     })
 
 
-    if (isMalLoggedIn) tableItems.push({
+    if (isMalLoggedIn) AddAnimeServiceToTable({
         id: currentMalAnime.id,
         service: "MyAnimeList",
         progress: currentMalAnime.my_list_status.num_episodes_watched,
@@ -87,7 +86,7 @@
         notes: currentMalAnime.my_list_status.comments
     })
 
-    if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0) tableItems.push({
+    if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0) AddAnimeServiceToTable({
         id: currentSimklAnime.show.ids.simkl,
         service: "Simkl",
         progress: currentSimklAnime.watched_episodes_count,
@@ -99,7 +98,6 @@
         notes: ""
     })
 
-
     const handleSubmit = async (e: any) => {
         submitting.set(true)
         let submitData: {
@@ -165,19 +163,17 @@
                     newValue = value
                     return newValue
                 })
-                for (const [index, tableItem] of tableItems.entries()) {
-                    if (tableItem.service === "AniList") {
-                        tableItems[index].id = currentAniListAnime.data.MediaList.id
-                        tableItems[index].service = "AniList"
-                        tableItems[index].progress = currentAniListAnime.data.MediaList.progress
-                        tableItems[index].status = currentAniListAnime.data.MediaList.status
-                        tableItems[index].startedAt = convertAniListDateToString(currentAniListAnime.data.MediaList.startedAt)
-                        tableItems[index].completedAt = convertAniListDateToString(currentAniListAnime.data.MediaList.completedAt)
-                        tableItems[index].score = currentAniListAnime.data.MediaList.score
-                        tableItems[index].repeat = currentAniListAnime.data.MediaList.repeat
-                        tableItems[index].notes = currentAniListAnime.data.MediaList.notes
-                    }
-                }
+                AddAnimeServiceToTable({
+                    id: currentAniListAnime.data.MediaList.id,
+                    service: "AniList",
+                    progress: currentAniListAnime.data.MediaList.progress,
+                    status: currentAniListAnime.data.MediaList.status,
+                    startedAt: convertAniListDateToString(currentAniListAnime.data.MediaList.startedAt),
+                    completedAt: convertAniListDateToString(currentAniListAnime.data.MediaList.completedAt),
+                    score: currentAniListAnime.data.MediaList.score,
+                    repeat: currentAniListAnime.data.MediaList.repeat,
+                    notes: currentAniListAnime.data.MediaList.notes,
+                })
             })
         }
 
@@ -201,47 +197,54 @@
                     value.my_list_status.comments = malAnimeReturn.comments
                     return value
                 })
-                for (const [index, tableItem] of tableItems.entries()) {
-                    if (tableItem.service === "MyAnimeList") {
-                        tableItems[index].id = currentMalAnime.id
-                        tableItems[index].service = "MyAnimeList"
-                        tableItems[index].progress = currentMalAnime.my_list_status.num_episodes_watched
-                        tableItems[index].status = currentMalAnime.my_list_status.status
-                        tableItems[index].startedAt = currentMalAnime.my_list_status.start_date
-                        tableItems[index].completedAt = currentMalAnime.my_list_status.finish_date
-                        tableItems[index].score = currentMalAnime.my_list_status.score
-                        tableItems[index].repeat = currentMalAnime.my_list_status.num_times_rewatched
-                        tableItems[index].notes = currentMalAnime.my_list_status.comments
-                    }
-                }
+                AddAnimeServiceToTable({
+                    id: currentMalAnime.id,
+                    service: "MyAnimeList",
+                    progress: currentMalAnime.my_list_status.num_episodes_watched,
+                    status: currentMalAnime.my_list_status.status,
+                    startedAt: currentMalAnime.my_list_status.start_date,
+                    completedAt: currentMalAnime.my_list_status.finish_date,
+                    score: currentMalAnime.my_list_status.score,
+                    repeat: currentMalAnime.my_list_status.num_times_rewatched,
+                    notes: currentMalAnime.my_list_status.comments,
+                })
             })
         }
 
         if (simklLoggedIn) {
             if (currentSimklAnime.watched_episodes_count !== submitData.episodes) {
-                await SimklSyncEpisodes(currentSimklAnime, submitData.episodes).then(value => {
+                await SimklSyncEpisodes(currentSimklAnime, submitData.episodes).then((value: SimklAnime) => {
+                    AddAnimeServiceToTable({
+                        id: value.show.ids.simkl,
+                        service: "Simkl",
+                        progress: value.watched_episodes_count,
+                        status: value.status,
+                        startedAt: "",
+                        completedAt: "",
+                        score: value.user_rating,
+                        repeat: 0,
+                        notes: ""
+                    })
                     simklAnime.update(newValue => {
                         newValue = value
                         return newValue
                     })
-                    for (const [index, tableItem] of tableItems.entries()) {
-                        if (tableItem.service === "MyAnimeList") {
-                            tableItems[index].id = currentSimklAnime.show.ids.simkl
-                            tableItems[index].service = "Simkl"
-                            tableItems[index].progress = currentSimklAnime.watched_episodes_count
-                            tableItems[index].status = currentSimklAnime.status
-                            tableItems[index].startedAt = ""
-                            tableItems[index].completedAt = ""
-                            tableItems[index].score = currentSimklAnime.user_rating
-                            tableItems[index].repeat = 0
-                            tableItems[index].notes = ""
-                        }
-                    }
                 })
             }
 
             if (currentSimklAnime.user_rating !== submitData.rating) {
                 await SimklSyncRating(currentSimklAnime, submitData.rating).then(value => {
+                    AddAnimeServiceToTable({
+                        id: value.show.ids.simkl,
+                        service: "Simkl",
+                        progress: value.watched_episodes_count,
+                        status: value.status,
+                        startedAt: "",
+                        completedAt: "",
+                        score: value.user_rating,
+                        repeat: 0,
+                        notes: ""
+                    })
                     simklAnime.update(newValue => {
                         newValue = value
                         return newValue
@@ -251,6 +254,17 @@
 
             if (currentSimklAnime.status !== submitData.status.simkl) {
                 await SimklSyncStatus(currentSimklAnime, submitData.status.simkl).then(value => {
+                    AddAnimeServiceToTable({
+                        id: value.show.ids.simkl,
+                        service: "Simkl",
+                        progress: value.watched_episodes_count,
+                        status: value.status,
+                        startedAt: "",
+                        completedAt: "",
+                        score: value.user_rating,
+                        repeat: 0,
+                        notes: ""
+                    })
                     simklAnime.update(newValue => {
                         newValue = value
                         return newValue
@@ -394,7 +408,7 @@
         </div>
     </div>
 
-    <AnimeTable items={tableItems}/>
+    <AnimeTable/>
 
     <div class="bg-white rounded-lg shadow max-w-4-4 dark:bg-gray-800">
         <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end">