refactor: read setting using new setting hooks

TODO.md

@@ -14,10 +14,12 @@
 - [ ] Separated server vs client settings + interface (new events?)
 - [x] Schema validation + default with valibot
 - [ ] Use invariant in state handlers + other places
+- [ ] Get rid of /writers endpoint and send that data along with relevant responses
+- [ ] Switch to node subpath imports
 
 ## Schemas
 
-- [ ] Write tests for schemas package
+- [x] Write tests for schemas package
 
 ## Backend
 
@@ -49,7 +51,7 @@
 - [ ] Use new events from BE
 - [ ] Refactor into concept of `content`
 - [ ] Render navigator's bar extra icons in controller
-- [ ] Better settings management via hooks
+- [x] Better settings management via hooks
 
 ## Electron
 

apps/frontend/package.json

@@ -29,13 +29,15 @@
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/material": "^5.16.6",
+    "@presenter/schemas": "*",
     "@presenter/swiss-knife": "*",
     "@presenter/themes": "*",
     "@sentry/browser": "^6.19.7",
     "@tanstack/react-router": "^1.49.2",
     "@tanstack/router-zod-adapter": "^1.51.6",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
+    "dequal": "^2.0.3",
     "detect-browser": "^5.3.0",
     "eventemitter3": "^5.0.1",
     "gurmukhi-utils": "^3.2.2",
@@ -66,7 +68,7 @@
     "@types/scroll-into-view": "^1.16.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/ui": "^1.6.0",
+    "@vitest/ui": "^2.1.4",
     "happy-dom": "^14.11.0",
     "jest-environment-jsdom": "^29.5.0",
     "source-map-explorer": "^2.5.2",

apps/frontend/src/app/__root.tsx

@@ -5,6 +5,7 @@ import { RecommendedSources, Writer } from '@presenter/contract'
 import { createRootRoute, Navigate, Outlet } from '@tanstack/react-router'
 import classNames from 'classnames'
 import { Provider } from 'jotai'
+import { DevTools } from 'jotai-devtools'
 import { SnackbarProvider } from 'notistack'
 import { PureComponent, Suspense } from 'react'
 
@@ -13,16 +14,9 @@ import { API_URL, isDesktop, isMobile, isTablet } from '~/helpers/consts'
 import {
   HistoryContext,
   RecommendedSourcesContext,
-  SettingsContext,
   WritersContext,
 } from '~/helpers/contexts'
-import { DEFAULT_OPTIONS } from '~/helpers/options'
-import { merge } from '~/helpers/utils'
 import { store } from '~/services/jotai'
-// import controller from '~/services/controller'
-
-// const loadSettings = () => merge( { local: controller.readSettings() }, DEFAULT_OPTIONS )
-const loadSettings = () => DEFAULT_OPTIONS
 
 class App extends PureComponent {
   state = {
@@ -31,25 +25,16 @@ class App extends PureComponent {
     latestLines: {},
     recommendedSources: {} as RecommendedSources['recommendedSources'],
     writers: {},
-    settings: loadSettings(),
   }
 
   componentDidMount() {
-    // Register controller event
-    // controller.on( 'history:viewed-lines', this.onViewedLines )
-    // controller.on( 'history:transitions', this.onTransitionHistory )
-    // controller.on( 'history:latest-lines', this.onLatestLineHistory )
-    // controller.on( 'banis:list', this.onBanis )
-    // controller.on( 'settings', this.onSettings )
-
-    // Get recommended sources and set as settings, if there are none
     void fetch( `${API_URL}/sources` )
       .then( ( res ) => res.json() )
       .then( ( { recommendedSources }: { recommendedSources: RecommendedSources['recommendedSources'] } ) => {
         //* Update default options and settings with fetched recommended sources
-        DEFAULT_OPTIONS.local.sources = recommendedSources
+        // DEFAULT_OPTIONS.local.sources = recommendedSources
         //! Re-load settings since we've modified DEFAULT_OPTIONS directly
-        this.setState( { recommendedSources, settings: loadSettings() } )
+        this.setState( { recommendedSources } )
       } )
 
     // Get writers
@@ -58,66 +43,29 @@ class App extends PureComponent {
       .then( ( { writers }: { writers: Writer[] } ) => this.setState( { writers } ) )
   }
 
-  componentWillUnmount() {
-    // Deregister event listeners from controller
-    // controller.off( 'shabads:current', this.onShabad )
-    // controller.off( 'lines:current', this.onLine )
-    // controller.off( 'history:transitions', this.onTransitionHistory )
-    // controller.off( 'history:latest-lines', this.onLatestLineHistory )
-    // controller.off( 'lines:main', this.onMainLine )
-    // controller.off( 'lines:next', this.onNextLine )
-    // controller.off( 'lines:viewed', this.onViewedLines )
-    // controller.off( 'banis:list', this.onBanis )
-    // controller.off( 'banis:current', this.onBani )
-    // controller.off( 'settings', this.onSettings )
-  }
-
-  onBanis = ( banis: any[] ) => this.setState( { banis } )
-
-  onSettings = ( { global = {}, local = {}, ...settings } ) => {
-    // controller.saveLocalSettings( local, false )
-
-    this.setState( ( state: typeof this.state ) => ( {
-      settings: {
-        ...Object
-          .entries( settings )
-          .filter( ( [ , config ] ) => config )
-          .reduce( ( deviceSettings, [ host, config ] ) => ( {
-            ...deviceSettings,
-            [ host ]: merge( DEFAULT_OPTIONS.local, config ),
-          } ), {} ),
-        // local: controller.readSettings(),
-        global: merge( state.settings.global, global ),
-      },
-    } ) )
-  }
-
   render() {
     const {
       recommendedSources,
       writers,
       viewedLines,
       transitionHistory,
       latestLines,
-      settings,
     } = this.state
 
     return (
       <div className={classNames( { mobile: isMobile, tablet: isTablet, desktop: isDesktop }, 'app' )}>
         <Provider store={store}>
           <DevTools store={store} />
           <Suspense fallback={<Loader />}>
-            <SettingsContext.Provider value={settings}>
-              <HistoryContext.Provider value={{ viewedLines, transitionHistory, latestLines }}>
-                <WritersContext.Provider value={writers}>
-                  <RecommendedSourcesContext.Provider value={recommendedSources}>
-                    <SnackbarProvider>
-                      <Outlet />
-                    </SnackbarProvider>
-                  </RecommendedSourcesContext.Provider>
-                </WritersContext.Provider>
-              </HistoryContext.Provider>
-            </SettingsContext.Provider>
+            <HistoryContext.Provider value={{ viewedLines, transitionHistory, latestLines }}>
+              <WritersContext.Provider value={writers}>
+                <RecommendedSourcesContext.Provider value={recommendedSources}>
+                  <SnackbarProvider>
+                    <Outlet />
+                  </SnackbarProvider>
+                </RecommendedSourcesContext.Provider>
+              </WritersContext.Provider>
+            </HistoryContext.Provider>
           </Suspense>
         </Provider>
       </div>

apps/frontend/src/app/overlay/index.lazy.tsx

@@ -1,44 +1,40 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
 import classNames from 'classnames'
-import { mapValues } from 'radashi'
-import { useContext } from 'react'
+import { mapValues, sift } from 'radashi'
 
-import { SettingsContext } from '~/helpers/contexts'
 import { LANGUAGES } from '~/helpers/data'
 import { customiseLine, getTransliterators } from '~/helpers/line'
-import { filterFalsyValues } from '~/helpers/utils'
-import { useCurrentLine, useTranslations } from '~/hooks'
+import { useTranslations } from '~/hooks'
+import { useContent } from '~/services/content'
+import { useGlobalSettings } from '~/services/settings'
 import { useStatus } from '~/services/status'
 
 import Line from './-components/Line'
 import ThemeLoader from './-components/ThemeLoader'
 
 const Overlay = () => {
-  const settings = useContext( SettingsContext )
   const { connected } = useStatus()
 
-  const { global: globalSettings } = settings || {}
-  const { overlay: { overlayName, ...overlay } } = globalSettings || {}
+  const [ { overlay: { name, ...overlay, lineEnding } } ] = useGlobalSettings()
 
-  const [ line ] = useCurrentLine()
+  const { line } = useContent()
   const { typeId } = line
-  const { lineEnding } = overlay
 
   const translations = mapValues(
-    useTranslations( filterFalsyValues( [
+    useTranslations( sift( [
       overlay.englishTranslation && LANGUAGES.english,
       overlay.punjabiTranslation && LANGUAGES.punjabi,
       overlay.spanishTranslation && LANGUAGES.spanish,
-    ] ) as number[] ),
+    ] ) ),
     ( line ) => customiseLine( line, { lineEnding, typeId } )
   )
 
   const transliterators = mapValues(
-    getTransliterators( filterFalsyValues( [
+    getTransliterators( sift( [
       overlay.englishTransliteration && LANGUAGES.english,
       overlay.hindiTransliteration && LANGUAGES.hindi,
       overlay.urduTransliteration && LANGUAGES.urdu,
-    ] ) as number[] ),
+    ] ) ),
     ( transliterate ) => ( text: string ) => transliterate(
       customiseLine( text, { lineEnding, typeId } )
     ),
@@ -48,7 +44,7 @@ const Overlay = () => {
 
   return (
     <div className={classNames( { empty: !line }, 'overlay' )}>
-      <ThemeLoader name={overlayName} />
+      <ThemeLoader name={name} />
 
       <Line
         {...overlay}

apps/frontend/src/app/presenter/-components/Display/index.tsx

@@ -1,61 +1,55 @@
 import './index.css'
 
 import classNames from 'classnames'
-import { mapValues } from 'radashi'
+import { mapValues, sift } from 'radashi'
 
 import { LANGUAGES } from '~/helpers/data'
 import { customiseLine, getTransliterators } from '~/helpers/line'
-import { ClientSettings } from '~/helpers/options'
-import { filterFalsyValues } from '~/helpers/utils'
 import { useTranslations } from '~/hooks'
 import { useContent } from '~/services/content'
+import { useLocalSettings } from '~/services/settings'
 
 import Line from '../Line'
 
-type DisplayProps = {
-  settings: Pick<ClientSettings, 'layout' | 'display' | 'vishraams' | 'theme'>,
-}
-
-const Display = ( { settings }: DisplayProps ) => {
-  const {
-    layout,
-    display,
-    vishraams,
-    theme: {
-      simpleGraphics: simple,
-      backgroundImage: background,
-      highlightCurrentLine: highlight,
-      dimNextAndPrevLines: dim,
+const Display = () => {
+  const [ {
+    accessibility: {
+      reducedMotion: simple,
     },
-  } = settings
-
-  const { lineEnding } = display
+    dimNextAndPrevLines: dim,
+    backgroundImage: background,
+    highlightCurrentLine: highlight,
+    lineEnding,
+    nextLines: nextLineCount,
+    previousLines: previousLineCount,
+    translations: translationSettings,
+    transliterations,
+  } ] = useLocalSettings()
 
   // Find the correct line in the Shabad
   const { line, lineIndex, lines } = useContent()
 
   // Get the next lines
-  const { nextLines: nextLineCount, previousLines: previousLineCount } = display
   const previousLines = previousLineCount && lineIndex
     ? lines.slice( Math.max( lineIndex - previousLineCount, 0 ), lineIndex )
     : []
   const nextLines = line ? lines.slice( lineIndex + 1, lineIndex + nextLineCount + 1 ) : []
 
   const translations = mapValues(
-    useTranslations( filterFalsyValues( [
-      display.englishTranslation && LANGUAGES.english,
-      display.punjabiTranslation && LANGUAGES.punjabi,
-      display.spanishTranslation && LANGUAGES.spanish,
-    ] ) as number[] ),
+    useTranslations( sift( [
+      translationSettings.english && LANGUAGES.english,
+      translationSettings.punjabi && LANGUAGES.punjabi,
+      translationSettings.spanish && LANGUAGES.spanish,
+    ] ) ),
     ( line ) => customiseLine( line, { lineEnding, typeId: line.typeId } ),
   )
 
   const transliterators = mapValues(
-    getTransliterators( filterFalsyValues( [
-      display.englishTransliteration && LANGUAGES.english,
-      display.hindiTransliteration && LANGUAGES.hindi,
-      display.urduTransliteration && LANGUAGES.urdu,
-    ] ) as number[] ),
+    getTransliterators( sift( [
+      transliterations.english && LANGUAGES.english,
+      transliterations.hindi && LANGUAGES.hindi,
+      transliterations.urdu && LANGUAGES.urdu,
+    ] ) ),
     ( transliterate ) => ( text: string ) => transliterate(
       customiseLine( text, { lineEnding, typeId: line?.typeId } ),
     ),
@@ -70,10 +64,6 @@ const Display = ( { settings }: DisplayProps ) => {
           <Line
             key={id}
             className="previous-line"
-            simpleGraphics={simple}
-            {...layout}
-            {...display}
-            {...vishraams}
             gurmukhi={gurmukhi}
           />
         ) )}
@@ -82,13 +72,9 @@ const Display = ( { settings }: DisplayProps ) => {
       {line && (
         <Line
           className={classNames( { highlight }, 'current-line' )}
-          {...layout}
-          {...display}
-          {...vishraams}
           gurmukhi={line.gurmukhi}
           translations={translations}
           transliterators={transliterators}
-          simpleGraphics={simple}
         />
       )}
 
@@ -97,10 +83,6 @@ const Display = ( { settings }: DisplayProps ) => {
           <Line
             key={id}
             className="next-line"
-            simpleGraphics={simple}
-            {...layout}
-            {...display}
-            {...vishraams}
             gurmukhi={gurmukhi}
           />
         ) )}