From fdbeffe78e5cd7393d28915189ec518a06b941f1 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sat, 4 Jun 2022 13:54:44 +0200
Subject: feat: !WIP start implementation of svelte-query

---
 apps/projects/src/app/pages/home.svelte | 41 ++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 16 deletions(-)

(limited to 'apps/projects/src/app/pages/home.svelte')

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>
-- 
cgit v1.3