All files / web/src/components AbacusSettingsSync.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useAbacusDisplay } from '@soroban/abacus-react'
import { useEffect, useRef } from 'react'
import { useAbacusSettings, useUpdateAbacusSettings } from '@/hooks/useAbacusSettings'

/**
 * Syncs abacus settings between API and localStorage
 *
 * On mount: loads settings from API into localStorage
 * On localStorage change: saves changes to API
 *
 * This component should be rendered once at the app root level.
 */
export function AbacusSettingsSync() {
  const { config, updateConfig } = useAbacusDisplay()
  const { data: apiSettings, isLoading } = useAbacusSettings()
  const { mutate: updateApiSettings } = useUpdateAbacusSettings()
  const isInitializedRef = useRef(false)
  const lastSyncedConfigRef = useRef<string | null>(null)

  // On mount: load settings from API into context (which will trigger localStorage save)
  useEffect(() => {
    if (!isLoading && apiSettings && !isInitializedRef.current) {
      // Only update if API settings differ from current config
      const apiConfigJson = JSON.stringify(apiSettings)
      const currentConfigJson = JSON.stringify(config)

      if (apiConfigJson !== currentConfigJson) {
        console.log('💾 Loading abacus settings from API')
        updateConfig(apiSettings)
        lastSyncedConfigRef.current = apiConfigJson
      }

      isInitializedRef.current = true
    }
  }, [apiSettings, isLoading, config, updateConfig])

  // On config change: save to API (but skip the initial load to avoid race conditions)
  useEffect(() => {
    if (!isInitializedRef.current) return

    const configJson = JSON.stringify(config)

    // Only sync if config has changed since last sync
    if (configJson !== lastSyncedConfigRef.current) {
      console.log('🔄 Syncing abacus settings to API')

      // Only sync abacus-react config fields, not app-specific fields like nativeAbacusNumbers
      const abacusReactFields = {
        colorScheme: config.colorScheme,
        beadShape: config.beadShape as 'diamond' | 'circle' | 'square',
        colorPalette: config.colorPalette,
        hideInactiveBeads: config.hideInactiveBeads,
        coloredNumerals: config.coloredNumerals,
        scaleFactor: config.scaleFactor,
        showNumbers: config.showNumbers,
        animated: config.animated,
        interactive: config.interactive,
        gestures: config.gestures,
        soundEnabled: config.soundEnabled,
        soundVolume: config.soundVolume,
      }

      updateApiSettings(abacusReactFields)
      lastSyncedConfigRef.current = configJson
    }
  }, [config, updateApiSettings])

  return null
}