From f5ebeead9e1d1381d9e91b950d9b814c1a6dcbc9 Mon Sep 17 00:00:00 2001
From: Sped0n <realsped0n@outlook.com>
Date: Thu, 2 Nov 2023 12:30:13 +0800
Subject: [PATCH] fix(nav.ts): fix circular dependency in desktop view

---
 assets/ts/nav.ts   | 18 +++++++++++-------
 assets/ts/state.ts |  5 -----
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/assets/ts/nav.ts b/assets/ts/nav.ts
index f3a6051..13caa42 100644
--- a/assets/ts/nav.ts
+++ b/assets/ts/nav.ts
@@ -57,10 +57,17 @@ for (const [index, link] of links.entries()) {
  */
 
 export function initNav(): void {
+  const s = state.get()
   // init threshold text
-  updateThresholdText()
+  updateThresholdText(expand(s.threshold))
   // init index text
-  updateIndexText()
+  updateIndexText(expand(s.index + 1), expand(s.length))
+  // add watcher for updating nav text
+  state.addWatcher((o) => {
+    updateIndexText(expand(o.index + 1), expand(o.length))
+    updateThresholdText(expand(o.threshold))
+  })
+
   // event listeners
   decButton.addEventListener(
     'click',
@@ -80,16 +87,13 @@ export function initNav(): void {
 
 // helper
 
-export function updateThresholdText(): void {
-  const thresholdValue: string = expand(state.get().threshold)
+export function updateThresholdText(thresholdValue: string): void {
   thresholdDispNums.forEach((e: HTMLSpanElement, i: number) => {
     e.innerText = thresholdValue[i]
   })
 }
 
-export function updateIndexText(): void {
-  const indexValue: string = expand(state.get().index + 1)
-  const indexLength: string = expand(state.get().length)
+export function updateIndexText(indexValue: string, indexLength: string): void {
   indexDispNums.forEach((e: HTMLSpanElement, i: number) => {
     if (i < 4) {
       e.innerText = indexValue[i]
diff --git a/assets/ts/state.ts b/assets/ts/state.ts
index d4e96aa..1a4e3eb 100644
--- a/assets/ts/state.ts
+++ b/assets/ts/state.ts
@@ -1,4 +1,3 @@
-import { updateIndexText, updateThresholdText } from './nav'
 import { Watchable, decrement, increment } from './utils'
 
 /**
@@ -36,10 +35,6 @@ export function initState(length: number): void {
   const s = state.get()
   s.length = length
   state.set(s)
-  state.addWatcher(() => {
-    updateIndexText()
-    updateThresholdText()
-  })
 }
 
 export function setIndex(index: number): void {