refactor(random): better use of executeAction

42Zavattas · Oct 9, 2015 · 688c10b · 688c10b
1 parent 6df43dd
commit 688c10b
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 76 deletions.
diff --git a/actions/game.js b/actions/game.js
@@ -2,6 +2,7 @@
 
 import moment from 'moment';
 import superagent from 'superagent';
+import { navigateAction } from 'fluxible-router';
 
 export function updateWord (context, payload) {
   context.dispatch('UPDATE_WORD', payload);
@@ -23,19 +24,22 @@ export function reset (context) {
   context.dispatch('RESET_GAME');
 }
 
+export function destroyGame (context) {
+  context.dispatch('DESTROY_GAME');
+}
+
 export function tick (context) {
   context.dispatch('GAME_TICK');
 }
 
-export function loadRandom (context, done) {
-
-  context.dispatch('RANDOM_TEXT_LOAD');
+export function loadRandom (context, payload, done) {
 
   superagent.get(`${context.api._getUrl()}/texts/rand`)
     .accept('json')
     .end((err, res) => {
       if (err) { throw err; }
       context.dispatch('RANDOM_TEXT_LOADED', res.body);
+      context.executeAction(navigateAction, { url: `/game/${res.body.id}` });
       done();
     });
 

diff --git a/components/Header.js b/components/Header.js
@@ -6,6 +6,7 @@ import { NavLink } from 'fluxible-router';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import AuthStore from '../stores/AuthStore';
 import { logout } from '../actions/auth';
+import { loadRandom } from '../actions/game';
 
 import { GithubButton } from './ui';
 import ProfileBox from './ProfileBox';
@@ -16,6 +17,10 @@ class Header extends React.Component {
     super(props);
   }
 
+  randomGame () {
+    this.props.context.executeAction(loadRandom);
+  }
+
   logout () {
     this.props.context.executeAction(logout);
   }
@@ -37,15 +42,15 @@ class Header extends React.Component {
               src='assets/images/logo-1.svg' />
           </NavLink>
 
-          <NavLink
+          <button
+            onClick={this.randomGame.bind(this)}
             className='ZavButton clear'
-            routeName='random'
             style={{ padding: '0.5em 1em', marginRight: '0.5rem' }}>
             <i
               className='ion-ios-play'
               style={{ fontSize: '1.5rem', marginRight: '0.5rem' }} />
             {'Random game'}
-          </NavLink>
+          </button>
 
           <NavLink
             className='ZavButton clear'

diff --git a/components/game/index.js b/components/game/index.js
@@ -14,6 +14,7 @@ import GameStats from './GameStats';
 
 // actions
 import {
+  destroyGame,
   tick,
   beginTest,
   updateWord,
@@ -66,6 +67,7 @@ class Game extends React.Component {
     if (this._hasGameTick) {
       clearInterval(this._gameTick);
     }
+    this.props.context.executeAction(destroyGame);
   }
 
   updateStats () {

diff --git a/components/pages/Home.js b/components/pages/Home.js
@@ -3,27 +3,34 @@
 import React from 'react';
 
 import { NavLink } from 'fluxible-router';
+import { loadRandom } from '../../actions/game';
 
 export default class Home extends React.Component {
 
   componentDidMount () {
     React.findDOMNode(this.refs.startbtn).focus();
   }
 
+  randomGame () {
+    this.props.context.executeAction(loadRandom);
+  }
+
   render () {
     return (
       <div style={{ padding: '8rem 0', textAlign: 'center' }}>
 
         <div
           className='f fjc fai'
           style={{ marginBottom: '2em' }}>
-          <NavLink
+          <div
+            style={{ cursor: 'pointer' }}
+            onClick={this.randomGame.bind(this)}
             routeName='random'>
             <img
               style={{ display: 'block' }}
               height='200'
               src='assets/images/logo-1.svg' />
-          </NavLink>
+          </div>
         </div>
 
         <p className='light'>
@@ -37,15 +44,15 @@ export default class Home extends React.Component {
         <div
           className='f fjc'
           style={{ marginBottom: '1em' }}>
-          <NavLink
-            routeName='random'
+          <button
+            onClick={this.randomGame.bind(this)}
             className='ZavButton high'
             ref='startbtn'>
             <i
               className='ion-ios-play'
               style={{ fontSize: '1.5rem', marginRight: '0.5rem' }} />
             {'Play a random game'}
-          </NavLink>
+          </button>
         </div>
         <p className='dark'>
           {'or '}

diff --git a/components/pages/Random.js b/components/pages/Random.js
diff --git a/routes.js b/routes.js
@@ -15,13 +15,6 @@ export default {
     title: 'Profile',
     handler: require('./components/pages/Profile')
   },
-  random: {
-    path: '/random',
-    method: 'get',
-    page: 'random',
-    title: 'Random game',
-    handler: require('./components/pages/Random')
-  },
   languages: {
     path: '/languages',
     method: 'get',

diff --git a/stores/GameStore.js b/stores/GameStore.js
@@ -26,15 +26,12 @@ class GameStore extends BaseStore {
   }
 
   init (text) {
-    if (!text) {
-      throw new Error('No text');
-    }
     _.assign(this, {
 
       // source from server
-      _source: text,
+      _source: text || null,
 
-      _isReady: true,
+      _isReady: !!text,
 
       // stats on the current game
       _stats: {
@@ -52,7 +49,7 @@ class GameStore extends BaseStore {
       _typedWord: '',
 
       // the text used
-      text: Parser.parseText(text.data),
+      text: text ? Parser.parseText(text.data) : null,
 
       // used to see if a test is in progress
       _isPlaying: false,
@@ -61,7 +58,7 @@ class GameStore extends BaseStore {
       _isFinished: false,
 
       // input is focused ?
-      _isFocused: false,
+      _isFocused: !!text,
 
       // begin/end timestamps
       _startDate: null
@@ -144,17 +141,16 @@ class GameStore extends BaseStore {
 
   handleReset () {
     this.init(this._source);
-    this._isFocused = true;
     this.emitChange();
   }
 
-  handleGameTick () {
-    this.calcStats();
+  handleDestroyGame () {
+    this.init();
     this.emitChange();
   }
 
-  handleRandomTextLoaded (text) {
-    this.init(text);
+  handleGameTick () {
+    this.calcStats();
     this.emitChange();
   }
 
@@ -163,11 +159,17 @@ class GameStore extends BaseStore {
     this.emitChange();
   }
 
+  handleRandomTextLoaded (text) {
+    this.init(text);
+    this.emitChange();
+  }
+
 }
 
 GameStore.storeName = 'GameStore';
 
 GameStore.handlers = {
+  DESTROY_GAME: 'handleDestroyGame',
   RANDOM_TEXT_LOAD: 'handleRandomTextLoad',
   RANDOM_TEXT_LOADED: 'handleRandomTextLoaded',
   GAME_TICK: 'handleGameTick',