feat: !WIP start implementation of svelte-query

2 files changed, 37 insertions, 22 deletions

diff --git a/apps/projects/src/app/index.svelte b/apps/projects/src/app/index.svelte
index 9dd2bf8..c217797 100644
--- a/apps/projects/src/app/index.svelte
+++ b/apps/projects/src/app/index.svelte
@@ -5,6 +5,7 @@
 	import {logout_user} from "$app/lib/services/user-service";
 	import Router from "svelte-spa-router";
 	import {wrap} from "svelte-spa-router/wrap";
+	import {QueryClient, QueryClientProvider} from "@sveltestack/svelte-query";
 	import {is_active} from "$shared/lib/session";
 	import UiWorkbench from "$app/pages/ui-workbench.svelte";
 	import NotFound from "$app/pages/not-found.svelte";
@@ -22,6 +23,9 @@
 		return true;
 	}
 
+	const queryClient = new QueryClient();
+
+	
 	const routes = {
 		"/home": wrap({
 			component: Home,
@@ -44,13 +48,15 @@
 	};
 </script>
 <PreHeader show="{!online}">You seem to be offline, please check your internet connection.</PreHeader>
-<Router
-        {routes}
-        restoreScrollState={true}
-        on:routeLoading={() => {
+<QueryClientProvider client={queryClient}>
+    <Router
+            {routes}
+            restoreScrollState={true}
+            on:routeLoading={() => {
             document.getElementById("loader").style.display = "inline-block";
         }}
-        on:routeLoaded={() => {
+            on:routeLoaded={() => {
             document.getElementById("loader").style.display = "none";
         }}
-/>
+    />
+</QueryClientProvider>
diff --git a/apps/projects/src/app/pages/home.svelte b/apps/projects/src/app/pages/home.svelte
index c3e7af4..84d6728 100644
--- a/apps/projects/src/app/pages/home.svelte
+++ b/apps/projects/src/app/pages/home.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-    import {IconNames} from "$shared/lib/configuration";
+    import {delete_time_entry, get_time_entries, get_time_entry, update_time_entry} from "$shared/lib/api/time-entry";
+    import {IconNames, QueryKeys} from "$shared/lib/configuration";
     import {TimeEntryDto} from "$shared/lib/models/TimeEntryDto";
     import {Temporal} from "@js-temporal/polyfill";
+    import {useMutation, useQuery, useQueryClient} from "@sveltestack/svelte-query";
     import {onMount} from "svelte";
     import Tile from "$shared/components/tile.svelte";
     import Button from "$shared/components/button.svelte";
@@ -11,7 +13,6 @@
     import EntryFrom from "$app/pages/views/entry-form/index.svelte";
     import {seconds_to_hour_minute_string, unwrap_date_time_from_entry} from "$shared/lib/helpers";
     import {TimeEntryQueryDuration} from "$shared/lib/models/TimeEntryQuery";
-    import entries, {delete_entry_async, get_time_entry, reload_entries} from "$app/lib/stores/entries";
 
     let currentTime = "";
     let isLoading = false;
@@ -19,31 +20,40 @@
     let timeEntries = [] as Array<TimeEntryDto>;
     let timeLoggedTodayString = "0h0m";
 
+    const queryClient = useQueryClient();
+    const queryResult = useQuery(QueryKeys.entries, async () => await get_time_entries({
+            duration: TimeEntryQueryDuration.TODAY,
+            page: 1,
+            pageSize: 100,
+        })?.data ?? []
+    );
+
     function set_current_time() {
         currentTime = Temporal.Now.plainTimeISO().toLocaleString(undefined, {
             timeStyle: "short",
         });
     }
 
+    const delete_entry_mutation = useMutation(delete_time_entry, {
+        onSuccess: (data) => {
+            queryClient.invalidateQueries([QueryKeys.entries, data.data.id]);
+        },
+    });
+
     async function on_edit_entry_button_click(event, entryId: string) {
-        const response = get_time_entry(entryId);
+        const response = useQuery([QueryKeys.entries, entryId], () => {
+            return get_time_entry(entryId);
+        });
+
         EditEntryForm.set_values(response);
     }
 
     async function on_delete_entry_button_click(event, entryId: string) {
         if (confirm("Are you sure you want to delete this entry?")) {
-            await delete_entry_async(entryId);
+            $delete_entry_mutation.mutate(entryId);
         }
     }
 
-    async function load_todays_entries() {
-        await reload_entries({
-            duration: TimeEntryQueryDuration.TODAY,
-            page: 1,
-            pageSize: 100,
-        });
-    }
-
     function on_create_from_stopwatch(event) {
         EditEntryForm.set_time({to: event.detail.to, from: event.detail.from});
         if (event.detail.description) {
@@ -56,11 +66,10 @@
         setInterval(() => {
             set_current_time();
         }, 1e4);
-        await load_todays_entries();
-        entries.subscribe((val) => {
+        queryResult.subscribe((result) => {
             const newEntries = [];
             let loggedSecondsToday = 0;
-            for (const entry of val) {
+            for (const entry of result.data?.results ?? []) {
                 const date_time = unwrap_date_time_from_entry(entry);
                 newEntries.push({
                     id: entry.id,
@@ -115,7 +124,7 @@
                                     icon_width="1.2rem"
                                     icon_height="1.2rem"
                                     title="Refresh today's entries"
-                                    on:click={load_todays_entries}/>
+                                    on:click={() => queryClient.invalidateQueries(QueryKeys.entries)}/>
                         </TCell>
                         </THead>
                         <TBody>