fix: data caches

Valexr · Apr 24, 2024 · 2d94b3a · 2d94b3a
1 parent 0153c53
commit 2d94b3a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    import { date, time, counters, quote, dates } from "$lib/data";
+    import { date, time, counters, quote, dates, quotes } from "$lib/data";
     import { images } from "$lib/images";
     import { t } from "$lib/utils";
 
@@ -56,7 +56,7 @@
     <title>{name}</title>
 </svelte:head>
 
-{#await images.back() then}
+{#await images.load() then}
     <main>
         {#each $counters as counter, id}
             <section use:intersection id={String(id)}>
@@ -75,14 +75,16 @@
             <DateForm />
         </section>
     </main>
-    {#await quote.load() then}
-        <Quote quote={$quote} href={repository} />
+    {#await quotes.load() then}
+        {#key $quote}
+            <Quote quote={$quote} href={repository} />
+        {/key}
     {/await}
 
     <footer>
         <button on:click={images.back}>{t("Image", "Картинка")}</button>
         <h2>{$time}</h2>
-        <button on:click={quote.load}>{t("Quote", "Цитата")}</button>
+        <button on:click={quote.random}>{t("Quote", "Цитата")}</button>
     </footer>
 {/await}
 

diff --git a/src/lib/data.ts b/src/lib/data.ts
@@ -1,6 +1,7 @@
 import { Readable, Writable, derived, readable, writable } from 'svelte/store';
 import { cacheable } from './cacheable';
 import { random, local } from './utils';
+import { getable } from './getable';
 
 
 export const dates = createDates()
@@ -63,17 +64,30 @@ export const counters = derived<[Writable<StartDate[]>, Readable<string>], Count
         }
     }, [])
 
-export const quote = createQuote()
-function createQuote() {
-    const { subscribe, set, update } = writable<[text: string, author: string]>()
+
+
+export const quotes = createQuotes()
+function createQuotes() {
+    const { subscribe, set, get, update } = getable<[text: string, author: string][]>([['', '']])
     return {
-        subscribe, set, update,
+        subscribe, set, get, update,
         async load() {
             const url = `./assets/quotes_${local()}.json`
             const res = await fetch(url);
             const json = await res.json()
-            const quote = json[random(json.length)];
-            set(quote)
+            set(json)
+            quote.random()
+        }
+    }
+}
+
+export const quote = createQuote()
+function createQuote() {
+    const { subscribe, set, get, update } = getable<[text: string, author: string]>(['', ''])
+    return {
+        subscribe, set, update,
+        random() {
+            set(quotes.get()[random(quotes.get().length)]);
         }
     }
 }

diff --git a/src/lib/images.ts b/src/lib/images.ts
@@ -34,6 +34,20 @@ function createImages() {
             const res = await fetch(url);
             set(await res.json());
         }
+        back()
+    }
+
+    function back() {
+        const [{ src, alt }] = prepare();
+        // await addImageProcess(src)
+        // const img = new Image();
+        // img.src = src
+        // await img.decode();
+        document.body.style.cssText = `
+            background: url(${src}) center no-repeat;
+            background-size: cover;
+        `;
+        document.body.title = alt
     }
 
     function prepare(limit = 1, size = { width: window.innerWidth, height: window.innerHeight }) {
@@ -71,20 +85,7 @@ function createImages() {
     }
 
     return {
-        subscribe, set, update, load, prepare,
-        async back() {
-            await load();
-            const [{ src, alt }] = prepare();
-            // await addImageProcess(src)
-            // const img = new Image();
-            // img.src = src
-            // await img.decode();
-            document.body.style.cssText = `
-                background: url(${src}) center no-repeat;
-                background-size: cover;
-            `;
-            document.body.title = alt
-        }
+        subscribe, set, update, load, prepare, back,
     }
 }