feat: svelte query

rayriffy · Jan 5, 2024 · 06d9617 · 06d9617
1 parent c9fb9a2
commit 06d9617
Show file tree

Hide file tree

Showing 17 changed files with 148 additions and 129 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
   "type": "module",
   "dependencies": {
     "@nanostores/persistent": "0.9.1",
+    "@tanstack/svelte-query": "5.17.1",
     "@trpc/client": "10.45.0",
     "@trpc/server": "10.45.0",
     "@urami/core": "1.2.3",
@@ -45,7 +46,7 @@
     "p-queue": "7.4.1",
     "set-cookie-parser": "2.6.0",
     "sharp": "0.33.1",
-    "trpc-sveltekit": "3.5.22",
+    "trpc-svelte-query": "2.0.5",
     "zod": "3.22.4"
   },
   "devDependencies": {

diff --git a/src/core/services/getHentai.ts b/src/core/services/getHentai.ts
@@ -13,8 +13,6 @@ import type { Hentai } from '../@types/Hentai'
 import { getHentaiFromNH } from './getHentaiFromNH'
 
 export const getHentai = async (id: number | string) => {
-  await new Promise(r => setTimeout(r, 2000))
-
   // try to read local cache, if unable then fetch from scratch
   try {
     const hentai = await fs.promises.readFile(

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
diff --git a/src/modules/listing/components/Listing.svelte b/src/modules/listing/components/Listing.svelte
@@ -3,8 +3,8 @@
   import Poster from '$core/components/Poster.svelte'
 
   import { search } from '$nanostores/search'
-  import { getListing } from '../services/getListing'
   import { settings } from '$nanostores/settings'
+  import { api } from '$trpc/client'
 
   export let section: 'main' | 'listing' | 'tag'
   export let page: number
@@ -17,15 +17,22 @@
         ? `/tag/${tagKey}/`
         : '/'
 
-  $: filteredTags = $settings.filteredTags ?? []
+  const listing = api.hentai.search.query({
+    mode: section,
+    query: section === 'tag' ? tagKey : $search[section].query,
+    excludeTags: $settings.filteredTags ?? [],
+    page,
+  })
 </script>
 
-{#await getListing(page, section === 'tag' ? tagKey : $search[section].query, section, filteredTags)}
+{#if $listing.isLoading}
   <div class="flex flex-col items-center p-32">
     <progress class="progress w-56" />
     <p class="pt-2 text-sm text-base-content">Loading...</p>
   </div>
-{:then { items, maxPage }}
+{:else if $listing.isSuccess}
+  {@const { items, maxPage } = $listing.data}
+
   <section class="flex justify-center py-6">
     <Pagination max={maxPage} current={page} {prefix} />
   </section>
@@ -41,6 +48,6 @@
   <section class="flex justify-center py-6">
     <Pagination max={maxPage} current={page} {prefix} />
   </section>
-{:catch}
+{:else}
   <p>Failed</p>
-{/await}
+{/if}
diff --git a/src/modules/listing/services/getListing.ts b/src/modules/listing/services/getListing.ts
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
@@ -0,0 +1,9 @@
+import { server } from '$trpc/server'
+
+import type { LayoutServerLoad } from './$types'
+
+export const load: LayoutServerLoad = async event => {
+  return {
+    trpc: server.hydrateToClient(event),
+  }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
   import '../styles/tailwind.css'
 
+  import { QueryClientProvider } from '@tanstack/svelte-query'
+  import { api } from '$trpc/client'
+
   import Navbar from '$core/components/Navbar.svelte'
 
   import { onMount } from 'svelte'
@@ -13,6 +16,10 @@
 
   import type { ComponentType } from 'svelte'
 
+  import type { LayoutData } from './$types'
+
+  export let data: LayoutData
+
   let ReloadPrompt: ComponentType
   onMount(async () => {
     caches.delete('next-image-assets')
@@ -45,18 +52,22 @@
   })
 
   $: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : ''
+  // @ts-expect-error
+  $: client = api.hydrateFromServer(data.trpc)
 </script>
 
 <svelte:head>
   {@html webManifest}
 </svelte:head>
 
-<div class="app mx-auto max-w-lg">
-  {#if ReloadPrompt}
-    <svelte:component this={ReloadPrompt} />
-  {/if}
-  <main class="pb-16">
-    <slot />
-  </main>
-  <Navbar />
-</div>
+<QueryClientProvider client={client}>
+  <div class="app mx-auto max-w-lg">
+    {#if ReloadPrompt}
+      <svelte:component this={ReloadPrompt} />
+    {/if}
+    <main class="pb-16">
+      <slot />
+    </main>
+    <Navbar />
+  </div>
+</QueryClientProvider>
diff --git a/src/routes/api/trpc/[...trpc]/+server.ts b/src/routes/api/trpc/[...trpc]/+server.ts
@@ -0,0 +1,4 @@
+import { server } from '$trpc/server'
+
+export const GET = server.handler
+export const POST = server.handler
diff --git a/src/routes/collection/export/+page.svelte b/src/routes/collection/export/+page.svelte
@@ -5,23 +5,18 @@
 
   import { api } from '$trpc/client'
 
-  let status: 'wait' | 'process' | 'done' = 'wait'
-  let error: string | null = null
   let exportCode: string
 
-  const onExport = async () => {
-    status = 'process'
-    error = null
+  const exporter = api.collection.export.mutation({
+    onSuccess: data => {
+      exportCode = data
+    },
+  })
 
-    try {
-      exportCode = await api().collection.export.mutate({
-        ids: collection.get().map(item => item.id),
-      })
-      status = 'done'
-    } catch (e) {
-      error = 'Unable to export collection at the moment, please try again'
-      status = 'wait'
-    }
+  const handleClick = () => {
+    $exporter.mutate({
+      ids: collection.get().map(item => item.id),
+    })
   }
 </script>
 
@@ -36,15 +31,15 @@
       <p class="text-gray-500">
         Transfer collection to other deivces by using temporary key.
       </p>
-      {#if error !== null}
+      {#if $exporter.isError}
         <div class="alert alert-error my-2 text-sm shadow-lg">
           <div>
             <ErrorIcon class="h-6 w-6 flex-shrink-0" />
-            <span>{error}</span>
+            <span>Unable to export collection at the moment, please try again</span>
           </div>
         </div>
       {/if}
-      {#if status === 'wait'}
+      {#if $exporter.isIdle}
         <div class="alert alert-info my-2 text-sm shadow-lg">
           <div>
             <span
@@ -54,16 +49,14 @@
           </div>
         </div>
         <div class="card-actions justify-end pt-2">
-          <button class="btn btn-primary" on:click={() => onExport()}
-            >Export</button
-          >
+          <button class="btn btn-primary" on:click={handleClick}>Export</button>
         </div>
-      {:else if status === 'process'}
+      {:else if $exporter.isPending}
         <div class="flex flex-col items-center pb-2 pt-8">
           <progress class="progress w-56" />
           <p class="pt-2 text-sm text-base-content">Exporting...</p>
         </div>
-      {:else if status === 'done'}
+      {:else if $exporter.isSuccess}
         <div class="flex flex-col items-center">
           <p class="pt-2 text-sm text-base-content">Collection Exported! 👍🏼</p>
           <div class="my-4 rounded-xl bg-base-200 px-6 py-4 font-mono text-xl">

diff --git a/src/routes/collection/import/+page.svelte b/src/routes/collection/import/+page.svelte
@@ -3,26 +3,18 @@
   import { collection } from '$nanostores/collection'
   import { api } from '$trpc/client'
 
-  let status: 'wait' | 'process' | 'done' = 'wait'
-  let error: string | null = null
   let inputKey: string = ''
 
-  const onSubmit = async (targetKey: string) => {
-    status = 'process'
-    error = null
+  const importer = api.collection.import.mutation({
+    onSuccess: data => {
+      collection.set(data)
+    },
+  })
 
-    try {
-      const importedCollection = await api().collection.import.query({
-        code: targetKey,
-      })
-
-      collection.set(importedCollection)
-      status = 'done'
-    } catch (e) {
-      error =
-        'Unable to import collection you specified, maybe code is already expired'
-      status = 'wait'
-    }
+  const onSubmit = (targetKey: string) => {
+    $importer.mutate({
+      code: targetKey
+    })
   }
 </script>
 
@@ -37,15 +29,27 @@
       <p class="text-gray-500">
         Transfer collection from other deivces by using temporary key.
       </p>
-      {#if error !== null}
+      {#if $importer.isError}
         <div class="alert alert-error my-2 text-sm shadow-lg">
           <div>
             <ErrorIcon class="h-6 w-6 flex-shrink-0" />
-            <span>{error}</span>
+            <span>Unable to import collection you specified, maybe code is already expired</span>
           </div>
         </div>
       {/if}
-      {#if status === 'wait'}
+      {#if $importer.isPending}
+        <div class="flex flex-col items-center pb-2 pt-8">
+          <progress class="progress w-56" />
+          <p class="pt-2 text-sm text-base-content">Importing...</p>
+        </div>
+      {:else if $importer.isSuccess}
+        <div class="flex flex-col items-center pb-4 pt-6">
+          <p class="pt-2 text-base-content">Collection imported! 👍🏼</p>
+        </div>
+        <div class="card-actions justify-end pt-2">
+          <a href="/collection" class="btn btn-primary">Done</a>
+        </div>
+      {:else}
         <input
           type="text"
           placeholder="Temporary key"
@@ -63,18 +67,6 @@
             >{inputKey !== '' ? 'Import' : 'Missing input'}</button
           >
         </div>
-      {:else if status === 'process'}
-        <div class="flex flex-col items-center pb-2 pt-8">
-          <progress class="progress w-56" />
-          <p class="pt-2 text-sm text-base-content">Importing...</p>
-        </div>
-      {:else if status === 'done'}
-        <div class="flex flex-col items-center pb-4 pt-6">
-          <p class="pt-2 text-base-content">Collection imported! 👍🏼</p>
-        </div>
-        <div class="card-actions justify-end pt-2">
-          <a href="/collection" class="btn btn-primary">Done</a>
-        </div>
       {/if}
     </div>
   </div>

diff --git a/src/routes/g/[code]/+page.server.ts b/src/routes/g/[code]/+page.server.ts
@@ -1,23 +1,10 @@
-import { codes } from '$core/constants/codes'
-import { getHentai } from '$core/services/getHentai'
+import { server } from '$trpc/server'
 
 import type { PageServerLoad } from './$types'
 
 export const load: PageServerLoad = async event => {
   // get target code
   const { code } = event.params
 
-  // get hentai
-  const hentai = await getHentai(code)
-  const excludeDatabase = codes.find(
-    o => typeof o !== 'number' && o.code === Number(code)
-  )
-
-  return {
-    hentai,
-    excludes:
-      excludeDatabase === undefined
-        ? []
-        : (excludeDatabase as { code: number; exclude: number[] }).exclude,
-  }
+  await server.hentai.get.ssr({ code }, event)
 }
diff --git a/src/routes/g/[code]/+page.svelte b/src/routes/g/[code]/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { page } from '$app/stores'
+
   import BlurredImage from '$core/components/BlurredImage.svelte'
   import Favorite from '$modules/reader/Favorite.svelte'
   import PageRenderer from '$modules/reader/PageRenderer.svelte'
@@ -9,19 +11,23 @@
 
   import type { PageData } from './$types'
 
-  export let data: PageData
-  const { hentai, excludes } = data
+  import { api } from '$trpc/client'
+
+  const query = api.hentai.get.query({
+    code: $page.params.code,
+  })
 </script>
 
 <svelte:head>
-  {#if hentai}
-    <title>{hentai.title.pretty} · Riffy H</title>
+  {#if $query.isSuccess}
+    <title>{$query.data.hentai.title.pretty} · Riffy H</title>
   {:else}
     <title>Riffy H</title>
   {/if}
 </svelte:head>
 
-{#if hentai}
+{#if $query.isSuccess}
+  {@const { hentai, excludes } = $query.data}
   <section class="flex flex-col items-center space-y-6 p-4">
     <div class="overflow-hidden rounded-xl shadow-md">
       <BlurredImage
@@ -66,6 +72,13 @@
     mediaId={hentai.media_id}
     {excludes}
   />
+{:else if $query.isLoading}
+  <div class="flex flex-col items-center p-32">
+    <progress class="progress w-56" />
+    <p class="pt-2 text-sm text-base-content">Loading...</p>
+  </div>
+{:else}
+  <p>Failed</p>
 {/if}
 
 <style>