Replace global reducers with local ones

The global reducer idea would have actually been very appropriate in
this context. Have a global reducer sat in front of all the global state
to make it clear that no global state should be updated directly. As it
stands there is a referencial cycle which can't be avoided when using
typescripts `addReducer` function which reactn uses for it's own
`addReducer`: CharlesStover/reactn#174

Charles's own advice is to use local reducers instead. I still want to
get some kind of benefit like that described above, and while I don't
think it's actually as semantically clear doing it locally like this
there probably is scope to have saga's like reducers like the one I've
created here at `setNewHarpStrataReducer`. Making this pattern
ubiquitous in the way required though would be out of scope for this
feature. I'll have to raise it as techdebt.

packages/harpguru-core/src/components/harp-guru-page/harp-guru-page.tsx

@@ -6,7 +6,6 @@ import React from 'react'
 import type { ReactElement } from 'react'
 
 import { ToggleBufferFlusher } from '../toggle-buffer-flusher'
-import { SyncColumnBoundsWithActiveHarpStrata } from '../sync-column-bounds-with-active-harp-strata'
 import { NotifyOfScale } from '../notify-of-scale'
 import { NotifyOfQuizQuestion } from '../notify-of-quiz-question'
 import { MenuTabNextPage } from '../menu-tab-next-page'
@@ -96,7 +95,6 @@ export const HarpGuruPage = ({
         stashPosition={MenuStashPosition.Seventh}
         getNextPage={() => pageOnDisplay.setValue(nextPageNumberMap[thisPage])}
       />
-      <SyncColumnBoundsWithActiveHarpStrata />
       <ToggleBufferFlusher />
       <NotifyOfQuizQuestion isScreenFree={menuState === MenuStates.NoMenu} />
       <NotifyOfScale isScalesMenu={menuState === MenuStates.ScalesMenu} />

packages/harpguru-core/src/components/harp-guru/harp-guru.tsx

@@ -1,46 +1,22 @@
 import 'react-native-gesture-handler'
 
 import { useWindowDimensions } from 'use-dimensions'
-import type { Dispatch } from 'reactn/default'
 import { createProvider } from 'reactn'
 import { withTimingTransition, useValue } from 'react-native-redash'
 import Animated, { Easing, interpolate } from 'react-native-reanimated'
 import { StyleSheet } from 'react-native'
 import React from 'react'
 import type { ReactElement } from 'react'
-import type { HarpStrata } from 'harpstrata'
 
 import { HarpGuruPage } from '../harp-guru-page'
-import type { GlobalState, PageNumber } from '../../types'
+import type { PageNumber } from '../../types'
 import { getWindowDimensions } from '../../packages/get-window-dimensions'
 
 import { getInitialGlobalState } from './utils'
 
-const nextColumnBounds = (): Pick<GlobalState, 'columnBounds'> => {
-  return {
-    columnBounds: [0, 6],
-  }
-}
-const newHarpStrata = (
-  _global: GlobalState,
-  dispatch: Dispatch,
-  harpStrata: HarpStrata
-): Pick<GlobalState, 'activeHarpStrata'> => {
-  dispatch.nextColumnBounds()
-  return {
-    activeHarpStrata: harpStrata,
-  }
-}
-
 const Provider1 = createProvider(getInitialGlobalState(1))
 const Provider2 = createProvider(getInitialGlobalState(2))
 const Provider3 = createProvider(getInitialGlobalState(3))
-Provider1.addReducer('newHarpStrata', newHarpStrata)
-Provider1.addReducer('newHarpStrata', nextColumnBounds)
-Provider2.addReducer('newHarpStrata', newHarpStrata)
-Provider2.addReducer('newHarpStrata', nextColumnBounds)
-Provider3.addReducer('newHarpStrata', newHarpStrata)
-Provider3.addReducer('newHarpStrata', nextColumnBounds)
 
 export const HarpGuru = (): ReactElement => {
   useWindowDimensions()

packages/harpguru-core/src/components/menu-of-covariants/utils/get-new-harpstrata-by-covariants-for-dispatcher/get-new-harpstrata-by-covariants-for-dispatcher.test.ts

@@ -1,3 +1,4 @@
+import type { Dispatch } from 'reactn/default'
 import { getHarpStrata } from 'harpstrata'
 import { TuningIds, PitchIds, PozitionIds, ValvingIds } from 'harpparts'
 
@@ -30,8 +31,9 @@ const dHarpSecondPozition = getHarpStrata(dHarpSecondPozitionProps)
 test('provides HarpStrata with different Pozition', () => {
   const inputGlobal = {
     activeHarpStrata: cHarpFirstPozition,
+    columnBounds: 'FIT',
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
 
   const partialHarpStrataProps = {
     harpKeyId: PitchIds.C,
@@ -52,8 +54,9 @@ test('provides HarpStrata with different Pozition', () => {
 test('provides HarpStrata with different HarpKey & Pozition', () => {
   const inputGlobal = {
     activeHarpStrata: cHarpFirstPozition,
+    columnBounds: 'FIT',
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
 
   const partialHarpStrataProps = {
     harpKeyId: PitchIds.D,

packages/harpguru-core/src/components/menu-of-covariants/utils/get-new-harpstrata-by-covariants-for-dispatcher/get-new-harpstrata-by-covariants-for-dispatcher.ts

@@ -1,17 +1,16 @@
-//import type { Dispatch } from 'reactn/default'
-import Dispatcher from 'reactn/types/dispatcher'
+import type { Dispatch } from 'reactn/default'
 import { getHarpStrata, getPropsForHarpStrata } from 'harpstrata'
 import type { HarpStrataProps } from 'harpstrata'
 
+import { setNewHarpStrataReducer } from '../../../../utils'
 import type { GlobalState } from '../../../../types'
 import { DisplayModes } from '../../../../types'
 
 export const getNewHarpStrataByCovariantsForDispatcher = (
   global: GlobalState,
-  //_dispatch: Dispatch,
-  _dispatch: Dispatcher,
+  _dispatch: Dispatch,
   partialHarpStrata: Pick<HarpStrataProps, 'harpKeyId' | 'pozitionId'>
-): Pick<GlobalState, 'activeHarpStrata'> => {
+): Pick<GlobalState, 'activeHarpStrata' | 'columnBounds'> => {
   const { activeHarpStrata, activeDisplayMode } = global
 
   const newHarpStrataProps: HarpStrataProps = {
@@ -22,8 +21,8 @@ export const getNewHarpStrataByCovariantsForDispatcher = (
     harpKeyId: partialHarpStrata.harpKeyId,
     pozitionId: partialHarpStrata.pozitionId,
   }
-  //dispatch.newHarpStrata(getHarpStrata(newHarpStrataProps))
-  return {
-    activeHarpStrata: getHarpStrata(newHarpStrataProps),
-  }
+
+  const newHarpStrata = getHarpStrata(newHarpStrataProps)
+
+  return setNewHarpStrataReducer(global, _dispatch, newHarpStrata)
 }

packages/harpguru-core/src/global.d.ts

@@ -5,18 +5,6 @@ import type { DegreeIds } from 'harpparts'
 import type { DisplayModes, ExperienceModes, FlushChannels } from './types'
 
 declare module 'reactn/default' {
-  export interface Reducers {
-    newHarpStrata: (
-      global: State,
-      dispatch: unknown,
-      newHarpStrata: HarpStrata
-    ) => Pick<GlobalState, 'activeHarpStrata'>
-    nextColumnBounds: (
-      global: State,
-      dispatch: unknown
-    ) => Pick<GlobalState, 'columnBounds'>
-  }
-
   export interface State {
     readonly activeHarpStrata: HarpStrata
     readonly activeExperienceMode: ExperienceModes

packages/harpguru-core/src/utils/get-new-column-bounds-for-dispatcher/get-new-column-bounds-for-dispatcher.test.ts

@@ -1,3 +1,4 @@
+import type { Dispatch } from 'reactn/default'
 import { getHarpStrata } from 'harpstrata'
 import {
   TuningIds,
@@ -36,7 +37,7 @@ test('when no zoom level is selected and columnBounds is already FIT, the column
     activeHarpStrata: majorDiatonicHarp,
     columnBounds: 'FIT',
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
   const { columnBounds } = getNewColumnBoundsForDispatcher(
     inputGlobal,
     unusedDispatcher
@@ -50,7 +51,7 @@ test('when fit zoom level is selected the columnBounds is set to FIT', () => {
     activeHarpStrata: majorDiatonicHarp,
     columnBounds: [0, 1] as const,
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
   const { columnBounds: newColumnBounds } = getNewColumnBoundsForDispatcher(
     inputGlobal,
     unusedDispatcher,
@@ -74,7 +75,7 @@ test('when 7 hole zoom is selected and columnBounds is already 7 holes wide, the
     activeHarpStrata: majorDiatonicHarp,
     columnBounds: columnBounds1,
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
   const { columnBounds: sameColumnBounds1 } = getNewColumnBoundsForDispatcher(
     inputGlobal,
     unusedDispatcher,
@@ -102,7 +103,7 @@ test('when columnBounds is already 7 holes wide and new activeHarpStrata can han
     activeHarpStrata: majorDiatonicHarp,
     columnBounds: columnBounds,
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
   const { columnBounds: sameColumnBounds1 } = getNewColumnBoundsForDispatcher(
     inputGlobal,
     unusedDispatcher
@@ -116,7 +117,7 @@ test('when 7 hole zoom is selected from existing FIT columnBounds, 0 index is us
     activeHarpStrata: majorDiatonicHarp,
     columnBounds: 'FIT',
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
   const { columnBounds: newColumnBounds } = getNewColumnBoundsForDispatcher(
     inputGlobal,
     unusedDispatcher,
@@ -138,7 +139,7 @@ test('when 7 hole zoom is selected on activeHarpStrata which is less than 7 hole
     },
     columnBounds: [1, 7] as const,
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
   const { columnBounds: newColumnBounds } = getNewColumnBoundsForDispatcher(
     inputGlobal,
     unusedDispatcher,
@@ -160,7 +161,7 @@ test('when new activeHarpStrata which is less than 7 holes wide is selected when
     },
     columnBounds: [1, 7] as const,
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
   const { columnBounds: newColumnBounds } = getNewColumnBoundsForDispatcher(
     inputGlobal,
     unusedDispatcher
@@ -174,7 +175,7 @@ test('when 7 hole zoom is selected and columnBounds is set above the end bounds
     activeHarpStrata: majorDiatonicHarp,
     columnBounds: columnBounds,
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
   const {
     columnBounds: rolledBackColumnBounds,
   } = getNewColumnBoundsForDispatcher(
@@ -192,7 +193,7 @@ test('when activeHarpStrata is selected which can handle the columnBounds range,
     activeHarpStrata: majorDiatonicHarp,
     columnBounds: columnBounds,
   } as GlobalState
-  const unusedDispatcher = jest.fn()
+  const unusedDispatcher = (jest.fn() as unknown) as Dispatch
   const {
     columnBounds: rolledBackColumnBounds,
   } = getNewColumnBoundsForDispatcher(inputGlobal, unusedDispatcher)

packages/harpguru-core/src/utils/get-new-column-bounds-for-dispatcher/get-new-column-bounds-for-dispatcher.ts

@@ -1,4 +1,4 @@
-import Dispatcher from 'reactn/types/dispatcher'
+import type { Dispatch } from 'reactn/default'
 
 import { ZoomIds } from '../../types'
 import type { GlobalState } from '../../types'
@@ -8,7 +8,7 @@ import { determineNextColumnBounds } from './determine-next-column-bounds'
 
 export const getNewColumnBoundsForDispatcher = (
   global: GlobalState,
-  _dipatch: Dispatcher,
+  _dipatch: Dispatch,
   zoomId: ZoomIds = determineZoomId(global.columnBounds)
 ): Pick<GlobalState, 'columnBounds'> => {
   const {

packages/harpguru-core/src/utils/index.ts

@@ -4,3 +4,4 @@ export { getInputRange } from './get-input-range'
 export { getOutputRange } from './get-output-range'
 export { getColors } from './get-colors'
 export { getNewColumnBoundsForDispatcher } from './get-new-column-bounds-for-dispatcher'
+export { setNewHarpStrataReducer } from './set-new-harp-strata-reducer'

packages/harpguru-core/src/utils/set-new-harp-strata-reducer/index.ts

@@ -0,0 +1 @@
+export { setNewHarpStrataReducer } from './set-new-harp-strata-reducer'

packages/harpguru-core/src/utils/set-new-harp-strata-reducer/set-new-harp-strata-reducer.ts

@@ -0,0 +1,21 @@
+import type { Dispatch } from 'reactn/default'
+import type { HarpStrata } from 'harpstrata'
+
+import { getNewColumnBoundsForDispatcher } from '../get-new-column-bounds-for-dispatcher'
+import type { GlobalState } from '../../types'
+
+export const setNewHarpStrataReducer = (
+  global: GlobalState,
+  _dispatch: Dispatch,
+  newHarpStrata: HarpStrata
+): Pick<GlobalState, 'activeHarpStrata' | 'columnBounds'> => {
+  const newGlobal = {
+    ...global,
+    activeHarpStrata: newHarpStrata,
+  }
+
+  return {
+    ...newGlobal,
+    ...getNewColumnBoundsForDispatcher(newGlobal, _dispatch),
+  }
+}