refactor: split monolithic state into context-based modules

Extract image, desktop, mobile, and config state into separate context
providers to improve modularity and reduce unnecessary re-renders.

Signed-off-by: Sped0n <hi@sped0n.com>

assets/ts/desktop/nav.tsx

@@ -1,66 +1,68 @@
-import { createEffect } from 'solid-js'
+import { createEffect, onCleanup, onMount } from 'solid-js'
 
-import { useState } from '../state'
+import { useConfigState } from '../configState'
+import { useImageState } from '../imageState'
 import { expand } from '../utils'
 
-/**
- * constants
- */
-
-// threshold div
-const thresholdDiv = document.getElementsByClassName('threshold')[0] as HTMLDivElement
-// threshold nums span
-const thresholdDispNums = Array.from(
-  thresholdDiv.getElementsByClassName('num')
-) as HTMLSpanElement[]
-// threshold buttons
-const decButton = thresholdDiv
-  .getElementsByClassName('dec')
-  .item(0) as HTMLButtonElement
-const incButton = thresholdDiv
-  .getElementsByClassName('inc')
-  .item(0) as HTMLButtonElement
-// index div
-const indexDiv = document.getElementsByClassName('index').item(0) as HTMLDivElement
-// index nums span
-const indexDispNums = Array.from(
-  indexDiv.getElementsByClassName('num')
-) as HTMLSpanElement[]
-
-/**
- * helper functions
- */
-
-function updateThresholdText(thresholdValue: string): void {
-  thresholdDispNums.forEach((e: HTMLSpanElement, i: number) => {
-    e.innerText = thresholdValue[i]
-  })
-}
-
-function updateIndexText(indexValue: string, indexLength: string): void {
-  indexDispNums.forEach((e: HTMLSpanElement, i: number) => {
-    if (i < 4) {
-      e.innerText = indexValue[i]
-    } else {
-      e.innerText = indexLength[i - 4]
-    }
-  })
-}
-
-/**
- * Nav component
- */
+import { useDesktopState } from './state'
 
 export default function Nav(): null {
-  const [state, { incThreshold, decThreshold }] = useState()
+  let thresholdNums: HTMLSpanElement[] = []
+  let indexNums: HTMLSpanElement[] = []
+  let decButton: HTMLButtonElement | undefined
+  let incButton: HTMLButtonElement | undefined
+  let controller: AbortController | undefined
 
-  createEffect(() => {
-    updateIndexText(expand(state().index + 1), expand(state().length))
-    updateThresholdText(expand(state().threshold))
+  const imageState = useImageState()
+  const [config, { incThreshold, decThreshold }] = useConfigState()
+  const [desktop] = useDesktopState()
+
+  const updateThresholdText = (thresholdValue: string): void => {
+    thresholdNums.forEach((element, i) => {
+      element.innerText = thresholdValue[i]
+    })
+  }
+
+  const updateIndexText = (indexValue: string, indexLength: string): void => {
+    indexNums.forEach((element, i) => {
+      if (i < 4) {
+        element.innerText = indexValue[i]
+      } else {
+        element.innerText = indexLength[i - 4]
+      }
+    })
+  }
+
+  onMount(() => {
+    const thresholdDiv = document.getElementsByClassName(
+      'threshold'
+    )[0] as HTMLDivElement
+    const indexDiv = document.getElementsByClassName('index').item(0) as HTMLDivElement
+
+    thresholdNums = Array.from(
+      thresholdDiv.getElementsByClassName('num')
+    ) as HTMLSpanElement[]
+    indexNums = Array.from(indexDiv.getElementsByClassName('num')) as HTMLSpanElement[]
+    decButton = thresholdDiv.getElementsByClassName('dec').item(0) as HTMLButtonElement
+    incButton = thresholdDiv.getElementsByClassName('inc').item(0) as HTMLButtonElement
+
+    controller = new AbortController()
+    const signal = controller.signal
+
+    decButton.addEventListener('click', decThreshold, { signal })
+    incButton.addEventListener('click', incThreshold, { signal })
   })
 
-  decButton.onclick = decThreshold
-  incButton.onclick = incThreshold
+  createEffect(() => {
+    if (thresholdNums.length === 0 || indexNums.length === 0) return
+
+    updateIndexText(expand(desktop.index() + 1), expand(imageState().length))
+    updateThresholdText(expand(config().threshold))
+  })
+
+  onCleanup(() => {
+    controller?.abort()
+  })
 
   return null
 }