refactor: move store update functions into stores (#51)

src/lib/components/FileUpload.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { getImage } from '$lib/stores/image'
     import { listen } from '@tauri-apps/api/event'
     import { invoke, convertFileSrc } from '@tauri-apps/api/tauri'
 
-    const image = getImage()
+    import { updateImage } from '$lib/stores/image'
 
     async function handleFile() {
         await optimizeImage()
@@ -21,7 +20,7 @@
         const src = decodeURIComponent(convertFileSrc(filePath as string))
 
         // TODO: use actual filename!!
-        image.set({ src, name: 'screenshot', aspect: Number(aspect.toPrecision(3)) })
+        updateImage({ src, name: 'screenshot', aspect: Number(aspect.toPrecision(3)) })
     }
 
     onMount(async () => {

src/lib/components/Modal.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
     import { onMount } from 'svelte'
+
     import { getView } from '$lib/stores/view'
-    import { getModal } from '$lib/stores/modal'
     import { getImage } from '$lib/stores/image'
-    import { updateAspectRatio } from '$lib/utils/aspect'
+    import { getModal, updateModal } from '$lib/stores/modal'
 
     import ImageSlider from './ImageSlider.svelte'
     import ImagePreview from './ImagePreview.svelte'
     import ViewActionButtons from './ViewActionButtons.svelte'
 
+    import { updateAspectRatio } from '$lib/utils/aspect'
+
     const view = getView()
     const modal = getModal()
     const image = getImage()
@@ -17,7 +19,7 @@
         if (!$modal.visible) return
         if (!['Esc', 'Escape'].includes(evt.key)) return
 
-        modal.update((prevState) => ({ ...prevState, effect: 'none', visible: false }))
+        updateModal({ effect: 'none', visible: false })
     }
 
     $: effect = $modal.effect

src/lib/components/Settings.svelte

@@ -1,24 +1,15 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { getView } from '$lib/stores/view'
-    import type { View } from '$lib/stores/view'
 
-    import { getEffect } from '$lib/stores/effect'
-    import { getImage, INIT_IMAGE } from '$lib/stores/image'
+    import { resetImage } from '$lib/stores/image'
+    import { updateEffect } from '$lib/stores/effect'
+    import { updateView, type View } from '$lib/stores/view'
 
     export let vertical: boolean = false
 
-    const view = getView()
-    const image = getImage()
-    const effect = getEffect()
-
     function clearFile() {
-        image.set(INIT_IMAGE)
-        effect.set('none')
-    }
-
-    function updateView(newView: View) {
-        view.set(newView)
+        resetImage()
+        updateEffect('none')
     }
 
     function handleKeys(event: KeyboardEvent) {
@@ -47,7 +38,7 @@
     })
 </script>
 
-<div class="absolute left-1 lg:left-3 xl:left-4">
+<div class="absolute md:left-1 lg:left-2 xl:left-4">
     <div class="fixed top-6 flex flex-{dir}" class:setting-h={!vertical} class:setting-v={vertical}>
         <button on:click|preventDefault={clearFile} class="inline-flex place-content-center">
             <svg

src/lib/components/Sidebar.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
     import { onMount } from 'svelte'
+
     import { effectsList } from '$lib/effects'
     import { getView } from '$lib/stores/view'
-    import { getEffect, type Effect } from '$lib/stores/effect'
+    import { getEffect, type Effect, updateEffect } from '$lib/stores/effect'
 
     const view = getView()
     const effect = getEffect()
     $: selection = $effect
 
     function handleEffect(e: MouseEvent) {
         const button = e.target as HTMLButtonElement
-        const chosenEffect = button.getAttribute('aria-label') ?? 'none'
-        effect.set(chosenEffect as Effect)
+        const chosenEffect = button.getAttribute('aria-label') ?? ('none' as Effect)
+        updateEffect(chosenEffect)
 
         $view == 'gallery' && scrollToEffect()
     }
@@ -45,7 +46,7 @@
             ? Math.max(0, indexOfCurrentEffect - 1)
             : Math.min(effectsList.length - 1, indexOfCurrentEffect + 1)
 
-        effect.set(effectsList[newEffectIndex])
+        updateEffect(effectsList[newEffectIndex])
 
         timeoutId = setTimeout(scrollToEffect, 200)
     }

src/lib/components/ViewActionButtons.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getModal } from '$lib/stores/modal'
+    import { getModal, openModal, closeModal } from '$lib/stores/modal'
     import { downloadImage } from '$lib/utils/download'
     import type { Effect } from '$lib/stores/effect'
 
@@ -14,14 +14,6 @@
         await downloadImage({ visible: $modal.visible, effect })
     }
 
-    function openModal(full: boolean) {
-        modal.set({ effect, visible: true, full })
-    }
-
-    function closeModal() {
-        modal.update((prevState) => ({ ...prevState, effect: 'none', visible: false }))
-    }
-
     $: visible = $modal.visible
     $: full = $modal.full
 </script>

src/lib/stores/effect.ts

@@ -9,11 +9,16 @@ type Context = Writable<Effect>
 const STORE = 'effect'
 const INIT_EFFECT: Effect = 'none'
 
+const effect = writable<Effect>(INIT_EFFECT)
+
 export function initEffect() {
-    const effect = writable<Effect>(INIT_EFFECT)
     setContext(STORE, effect)
 }
 
 export function getEffect() {
     return getContext<Context>(STORE)
 }
+
+export function updateEffect(state) {
+    effect.set(state)
+}

src/lib/stores/image.ts

@@ -10,11 +10,20 @@ export const INIT_IMAGE: Image = {}
 
 type Context = Writable<Image>
 
+const image = writable<Image>(INIT_IMAGE)
+
 export function initImage() {
-    const image = writable<Image>(INIT_IMAGE)
     setContext(STORE, image)
 }
 
 export function getImage() {
     return getContext<Context>(STORE)
 }
+
+export function resetImage() {
+    image.set(INIT_IMAGE)
+}
+
+export function updateImage(state: Image) {
+    image.set(state)
+}

src/lib/stores/modal.ts

@@ -10,11 +10,24 @@ type Context = Writable<Modal>
 
 export const INIT_MODAL: Modal = { effect: 'none', visible: false, full: false }
 
+const modal = writable(INIT_MODAL)
+
 export function initModal() {
-    const modal = writable(INIT_MODAL)
     setContext(STORE, modal)
 }
 
 export function getModal() {
     return getContext<Context>(STORE)
 }
+
+export function openModal(full: boolean) {
+    modal.update((prevState: Modal) => ({ ...prevState, visible: true, full }))
+}
+
+export function closeModal() {
+    modal.update((prevState: Modal) => ({ ...prevState, effect: 'none', visible: false }))
+}
+
+export function updateModal(state: Modal) {
+    modal.update((prevState: Modal) => ({ ...prevState, ...state }))
+}

src/lib/stores/view.ts

@@ -9,11 +9,16 @@ const INIT_STATE: View = 'preview'
 
 type Context = Writable<View>
 
+const view = writable<View>(INIT_STATE)
+
 export function initView() {
-    const view = writable<View>(INIT_STATE)
     setContext(STORE, view)
 }
 
 export function getView() {
     return getContext<Context>(STORE)
 }
+
+export function updateView(state: View) {
+    view.set(state)
+}

src/routes/+page.svelte

@@ -3,9 +3,9 @@
 
     import { onMount } from 'svelte'
     import { initView, getView } from '$lib/stores/view'
-    import { initModal, getModal } from '$lib/stores/modal'
     import { initImage, getImage } from '$lib/stores/image'
     import { initEffect, getEffect } from '$lib/stores/effect'
+    import { initModal, getModal, updateModal } from '$lib/stores/modal'
 
     import { downloadImage } from '$lib/utils/download'
     import { updateAspectRatio } from '$lib/utils/aspect'
@@ -43,7 +43,7 @@
 
         if (mKey || fKey) {
             const shouldHide = visible && ((mKey && !full) || (fKey && full))
-            modal.set({ full: fKey, effect: $effect, visible: !shouldHide })
+            updateModal({ full: fKey, effect: $effect, visible: !shouldHide })
             fKey && updateAspectRatio($image.aspect)
         }
     }