add the current view to the app state

client/src/actions/actions.ts

@@ -5,6 +5,13 @@ module rpgcards {
     export class ActionReset implements Action {
         constructor() {}
     }
+    
+    /* View actions */
+   export class ActionSetView implements Action {
+        constructor(private _view: ViewState, private _params: EntityId[]) {}
+        get view(): ViewState {return this._view}
+        get params(): EntityId[] {return this._params}
+    }
 
     /* Deck actions */
     export class ActionNewDeck implements Action {
@@ -86,6 +93,9 @@ module rpgcards {
         public reset(): void {
             this._dispatcher.dispatch(new ActionReset());
         }
+        public setView(view:ViewState, params:EntityId[]): void {
+            this._dispatcher.dispatch(new ActionSetView(view, params));
+        }
         public newDeck(): void {
             this._dispatcher.dispatch(new ActionNewDeck());
         }

client/src/app.ts

@@ -1,10 +1,11 @@
 /// <reference path="./dispatcher/dispatcher.ts"/>
 /// <reference path="./stores/store.ts"/>
 /// <reference path="./actions/actions.ts"/>
-/// <reference path="./views/header.ts"/>
 /// <reference path="./views/view.ts"/>
+/// <reference path="./views/ui.ts"/>
 /// <reference path="./external/page/page.d.ts"/>
 
+/// <reference path="./routes.ts"/>
 /// <reference path="./mock.ts"/>
 
 module rpgcards {
@@ -33,16 +34,14 @@ module rpgcards {
             this.dispatcher = new Dispatcher();
             this.actions = new Actions(this.dispatcher);
             this.store = new Store(this.dispatcher);
+            this.view = renderUI;
             this.container = ()=>document.body;
-            
-            // Map URLs to views
-            this.setupRoutes();
-    
+
             // Each state change triggers a re-render
             this.store.addChangeListener(() => this.refresh());
-            
-            // Trigger an initial action
-            this.actions.reset();
+             
+            // Map URLs to views (triggers an initial action)
+            setupRoutes(this.actions);
         }
         
         // Refresh
@@ -51,21 +50,6 @@ module rpgcards {
             // the application state (Store) to React elements
             React.render(this.view(this.store), this.container());
         }
-        
-        // Routing
-        setupRoutes() {
-            page('/', () => {
-                this.view = renderDecks;
-            });
-            page('/decks', () => {
-                this.view = renderDecks;
-            });
-            page('*', () => {
-                this.view = renderDecks;
-            });
-            
-            page();
-        }
     }
     
 

client/src/routes.ts

@@ -0,0 +1,20 @@
+
+/// <reference path="./views/view.ts"/>
+/// <reference path="./external/page/page.d.ts"/>
+
+module rpgcards {
+    
+    export function setupRoutes(actions: Actions) {
+        page('/', () => {
+            actions.setView(ViewState.MainMenu, []);
+        });
+        page('/decks', () => {
+            actions.setView(ViewState.DeckList, []);
+        });
+        page('*', () => {
+            actions.setView(ViewState.MainMenu, []);
+        });
+        
+        page();
+    }
+}

client/src/stores/store.ts

@@ -1,5 +1,6 @@
 /// <reference path="./card.ts"/>
 /// <reference path="./deck.ts"/>
+/// <reference path="./viewState.ts"/>
 /// <reference path="./eventEmitter.ts"/>
 /// <reference path="./asyncT.ts"/>
 /// <reference path="../dispatcher/dispatcher.ts"/>
@@ -21,19 +22,22 @@ module rpgcards {
         private _datasets: CardDataSet[];
         private _records: CardData[];
         private _templates: CardTemplate[];
+        private _view: ViewState;
+        private _viewParams: EntityId[];
 
         constructor(dispatcher: Dispatcher) {
             super();
-            this._decks = [];
-            this._datasets = [];
-            this._records = [];
-            this._templates = [];
+            this._reset();
 
             dispatcher.register((action) => {
                 /* Generic */
                 if(action instanceof ActionReset) {
                     this._reset()
                 }
+                else if(action instanceof ActionSetView) {
+                    this._view = action.view;
+                    this._viewParams = action.params;
+                }
                 /* Deck */
                 else if(action instanceof ActionNewDeck) {
                     this._newDeck()
@@ -102,6 +106,14 @@ module rpgcards {
         // ---------------------------------------------------------------------
         // Accessing data
         // ---------------------------------------------------------------------
+        
+        getViewState(): ViewState {
+            return this._view;
+        }
+        
+        getViewParams(): EntityId[] {
+            return this._viewParams;
+        }
 
         getDatasetList(): AsyncT<string[]> {
             return AsyncT.just(
@@ -145,6 +157,8 @@ module rpgcards {
             this._datasets = [];
             this._records = [];
             this._templates = [];
+            this._view = ViewState.MainMenu;
+            this._viewParams = [];
         }
         
         private _newDeck(): void {

client/src/stores/viewState.ts

@@ -0,0 +1,17 @@
+module rpgcards {
+	
+	/**
+	 * List of states the UI can be in
+	 */
+	export const enum ViewState {
+		MainMenu,
+		DeckList,
+		DeckEdit,
+		DeckAddDataset,
+		TemplateList,
+		TemplateEdit,
+		DatasetList,
+		DatasetEdit,
+		DatasetEditRecord
+	}
+}

client/src/views/components/deck.ts

@@ -1,3 +1,5 @@
+/// <reference path="../../external/react/react.d.ts"/>
+
 module rpgcards {
 
     export interface DeckTileProps extends React.Props<any> {

client/src/views/decks.ts

@@ -1,4 +1,5 @@
 /// <reference path="../external/react/react.d.ts"/>
+/// <reference path="./header.ts"/>
 
 module rpgcards {
 
@@ -69,9 +70,11 @@ module rpgcards {
             pending: () => [React.DOM.div({}, "loading...")]
         });
 
-        return React.DOM.div({ className: 'decks' },
-            decks,
-            newDeckTile()
-        );
+        return React.DOM.div({}
+            , renderHeader(store)
+            , React.DOM.div({ className: 'decks' }
+                , decks
+                , newDeckTile()
+            ));
     }
 }

client/src/views/ui.ts

@@ -0,0 +1,12 @@
+/// <reference path="./view.ts"/>
+/// <reference path="./decks.ts"/>
+
+module rpgcards {
+	
+	export function renderUI(store: Store): React.ReactElement<any> {
+		switch(store.getViewState()) {
+			case ViewState.MainMenu: return renderDecks(store);
+			case ViewState.DeckEdit: return renderDecks(store);
+		}
+	}
+}

client/tsconfig.json

@@ -18,6 +18,7 @@
     "files": [
         "./src/app.ts",
         "./src/mock.ts",
+        "./src/routes.ts",
         "./src/actions/actions.ts",
         "./src/dispatcher/dispatcher.ts",
         "./src/dispatcher/invariant.ts",
@@ -33,9 +34,11 @@
         "./src/stores/id.ts",
         "./src/stores/store.ts",
         "./src/stores/template.ts",
+        "./src/stores/viewState.ts",
         "./src/views/components/deck.ts",
+        "./src/views/view.ts",
         "./src/views/decks.ts",
         "./src/views/header.ts",
-        "./src/views/view.ts"
+        "./src/views/ui.ts"
     ]
 }