Namespace modern app state

modern/src/MakiSelectors.ts

@@ -1,9 +1,10 @@
 import * as Utils from "./utils";
+import { ModernAppState } from "./types";
 
 function findNodeByUid(uid) {
   // TODO: Do some clever caching here.
-  return state => {
-    return Utils.findInTree(state.xmlTree, node => {
+  return (state: ModernAppState) => {
+    return Utils.findInTree(state.modernSkin.xmlTree, node => {
       return node.uid === uid;
     });
   };
@@ -11,21 +12,24 @@ function findNodeByUid(uid) {
 
 export function getTop(uid) {
   const findNodeInState = findNodeByUid(uid);
-  return state => {
+  return (state: ModernAppState) => {
     const node = findNodeInState(state);
     return Number(node.attributes.y) || 0;
   };
 }
 
 export function getPathToUid(uid: number) {
-  return state => {
-    return Utils.findPathToNode(state.xmlTree, node => node.uid === uid);
+  return (state: ModernAppState) => {
+    return Utils.findPathToNode(
+      state.modernSkin.xmlTree,
+      node => node.uid === uid
+    );
   };
 }
 
 export function getNodeAtPath(path: number[]) {
-  return state => {
-    let node = state.xmlTree;
+  return (state: ModernAppState) => {
+    let node = state.modernSkin.xmlTree;
     path.forEach(offset => {
       if (node == null) {
         return null;

modern/src/Selectors.ts

@@ -1,17 +1,17 @@
 import { ModernAppState, MakiTree } from "./types";
 
 export function getMakiTree(state: ModernAppState): MakiTree | null {
-  return state.makiTree;
+  return state.modernSkin.makiTree;
 }
 
 export function getVolume(state: ModernAppState): number {
-  return state.volume;
+  return state.modernSkin.volume;
 }
 
 export function getRightVUMeter(state: ModernAppState): number {
-  return state.rightVUMeter;
+  return state.modernSkin.rightVUMeter;
 }
 
 export function getLeftVUMeter(state: ModernAppState): number {
-  return state.leftVUMeter;
+  return state.modernSkin.leftVUMeter;
 }

modern/src/store.ts

@@ -1,5 +1,5 @@
-import { ModernAppState, ModernAction } from "./types";
-import { createStore, applyMiddleware } from "redux";
+import { ModernSkinState, ModernAction } from "./types";
+import { createStore, applyMiddleware, combineReducers } from "redux";
 import { composeWithDevTools } from "redux-devtools-extension";
 import thunk from "redux-thunk";
 
@@ -12,10 +12,10 @@ const defaultState = {
   skinLoaded: false,
 };
 
-function reducer(
-  state: ModernAppState = defaultState,
+function modernSkinReducer(
+  state: ModernSkinState = defaultState,
   action: ModernAction
-): ModernAppState {
+): ModernSkinState {
   switch (action.type) {
     case "SET_MAKI_TREE":
       return { ...state, makiTree: action.makiTree, skinLoaded: true };
@@ -23,12 +23,15 @@ function reducer(
       return { ...state, xmlTree: action.xmlTree };
     case "SET_VOLUME":
       return { ...state, volume: action.volume };
-
     default:
       return state;
   }
 }
 
+const reducer = combineReducers({
+  modernSkin: modernSkinReducer,
+});
+
 export function create() {
   return createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
 }

modern/src/types.ts

@@ -14,7 +14,7 @@ export interface ResolvedXmlNode extends XmlNode {
 // What is a tree, but a single root node?
 export type XmlTree = XmlNode;
 
-export type ModernAppState = {
+export type ModernSkinState = {
   makiTree: MakiTree | null;
   xmlTree: XmlTree | null;
   volume: number;
@@ -22,6 +22,11 @@ export type ModernAppState = {
   leftVUMeter: number;
   skinLoaded: boolean;
 };
+
+export type ModernAppState = {
+  modernSkin: ModernSkinState;
+};
+
 export type ModernAction =
   | { type: "SET_MAKI_TREE"; makiTree: MakiTree }
   | { type: "SET_XML_TREE"; xmlTree: XmlTree }