refactor(web): fetch query data on page change

web/src/pages/resource/Resource.svelte

@@ -8,14 +8,13 @@
   import { queries, resourceData, type QueryData } from '../../store';
   import { debugData } from '../../utils/debugData';
   import { onDestroy } from 'svelte';
+  import { tablePage } from '../../store';
 
-  const route = meta();
-
-  let page = 0;
   let maxPage = 0;
 
   onDestroy(() => {
     $queries = [];
+    $tablePage = 0;
   });
 
   interface ResourceData {
@@ -54,14 +53,12 @@
       resourceTime: data.resourceTime,
     };
   });
-
-  $: fetchNui('fetchResource', { resource: route.params.resource, pageIndex: page });
 </script>
 
 <div class="flex flex-col w-full justify-between">
   <div>
     <ResourceHeader />
     <QueryTable />
   </div>
-  <Pagination {page} {maxPage} />
+  <Pagination {maxPage} />
 </div>

web/src/pages/resource/components/Pagination.svelte

@@ -1,36 +1,39 @@
 <script lang="ts">
   import { IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight } from '@tabler/icons-svelte';
+  import { onDestroy } from 'svelte';
+  import { tablePage } from '../../../store';
 
-  export let page: number;
   export let maxPage: number;
+
+  onDestroy(() => (maxPage = 0));
 </script>
 
 <div class="flex justify-center items-center gap-6 pb-5">
   <button
-    disabled={page === 0}
-    on:click={() => (page = 0)}
+    disabled={$tablePage === 0}
+    on:click={() => ($tablePage = 0)}
     class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 disabled:cursor-not-allowed text-dark-100 hover:text-white focus-visible:text-white rounded-md hover:bg-dark-500 p-2 active:translate-y-[3px] outline-none border-[1px] border-transparent focus-visible:border-cyan-600"
   >
     <IconChevronsLeft />
   </button>
   <button
-    disabled={page === 0}
-    on:click={() => page--}
+    disabled={$tablePage === 0}
+    on:click={() => $tablePage--}
     class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 disabled:cursor-not-allowed text-dark-100 hover:text-white focus-visible:text-white rounded-md hover:bg-dark-500 p-2 active:translate-y-[3px] outline-none border-[1px] border-transparent focus-visible:border-cyan-600"
   >
     <IconChevronLeft />
   </button>
-  <p>Page {page + 1} of {maxPage}</p>
+  <p>Page {$tablePage + 1} of {maxPage}</p>
   <button
-    disabled={page >= maxPage}
-    on:click={() => page++}
+    disabled={$tablePage >= maxPage - 1}
+    on:click={() => $tablePage++}
     class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 disabled:cursor-not-allowed text-dark-100 hover:text-white focus-visible:text-white rounded-md hover:bg-dark-500 p-2 active:translate-y-[3px] outline-none border-[1px] border-transparent focus-visible:border-cyan-600"
   >
     <IconChevronRight />
   </button>
   <button
-    disabled={page === maxPage}
-    on:click={() => (page = maxPage)}
+    disabled={$tablePage === maxPage - 1}
+    on:click={() => ($tablePage = maxPage - 1)}
     class="bg-dark-600 disabled:bg-dark-300 disabled:text-dark-400 disabled:cursor-not-allowed text-dark-100 hover:text-white focus-visible:text-white rounded-md hover:bg-dark-500 p-2 active:translate-y-[3px] outline-none border-[1px] border-transparent focus-visible:border-cyan-600"
   >
     <IconChevronsRight />

web/src/pages/resource/components/QueryTable.svelte

@@ -12,6 +12,7 @@
   import { writable } from 'svelte/store';
   import { meta } from 'tinro';
   import { fetchNui } from '../../../utils/fetchNui';
+  import { tablePage } from '../../../store';
 
   const route = meta();
 
@@ -67,7 +68,7 @@
   $: {
     fetchNui('fetchResource', {
       resource: route.params.resource,
-      pageIndex: 0,
+      pageIndex: $tablePage,
       sortBy: sorting,
     });
   }

web/src/store/resource.ts

@@ -18,3 +18,5 @@ export const resourceData = writable<{
   resourceSlowQueries: 0,
   resourceTime: 0,
 });
+
+export const tablePage = writable(0);