add: image/quote refresh

src/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    import { date, time, start } from "$lib/data";
+    import { date, time, start, quote } from "$lib/data";
     import { getPhotos } from "$lib/images";
 
     import DateInput from "$lib/components/DateInput.svelte";
@@ -17,11 +17,6 @@
             background-size: cover;
         `;
     }
-
-    async function getQuote() {
-        const res = await fetch("https://dummyjson.com/quotes/random");
-        return res.json();
-    }
 </script>
 
 <svelte:head>
@@ -44,15 +39,17 @@
             <h2>Set start date</h2>
             <DateInput bind:value={$start} />
         {/if}
-        {#await getQuote() then { quote, author }}
-            <Quote {quote} {author} />
+        {#await quote.load() then}
+            {#if $quote}
+                <Quote quote={$quote} />
+            {/if}
         {/await}
     </main>
 
     <footer>
         <button on:click={setBack}>Image</button>
         <h2>{$time}</h2>
-        <button>Settings</button>
+        <button on:click={quote.load}>Quote</button>
     </footer>
 {/await}
 

src/lib/components/Quote.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-    export let quote = "";
-    export let author = "";
+    export let quote = {
+        content: "",
+        author: "",
+    };
 </script>
 
 <blockquote>
-    <p>{quote}</p>
-    <cite>~ {author}</cite>
+    <p>{quote.content}</p>
+    <cite>~ {quote.author}</cite>
 </blockquote>
 
 <style>

src/lib/data.ts

@@ -1,4 +1,4 @@
-import { derived, readable } from 'svelte/store';
+import { derived, readable, writable } from 'svelte/store';
 import { cacheable } from './cacheable';
 
 export const start = cacheable('startDate', '', true)
@@ -31,3 +31,19 @@ export const time = readable(new Date().toLocaleTimeString('ru'), (set) => {
 
 export const date = readable(new Date().toLocaleDateString("ru"))
 
+export const quote = createQuote()
+function createQuote() {
+    const { subscribe, set, update } = writable({ content: "", author: "" })
+    return {
+        subscribe, set, update,
+        async load() {
+            const url = "https://api.quotable.io/quotes/random";
+            // "https://dummyjson.com/quotes/random"
+            const res = await fetch(url);
+            const [{ content, author }] = await res.json()
+
+            set({ content, author })
+        }
+    }
+}
+