refactor alert

Author: ShMcK

lib/actions/progress.js

@@ -45,7 +45,7 @@ function completeTutorial(completed) {
     return function (dispatch, getState) {
         var tutorial = getState().tutorial;
         dispatch({ type: _types_1.COMPLETE_TUTORIAL, payload: { tutorial: tutorial, completed: completed } });
-        dispatch(alert_1.alertToggle({
+        dispatch('ALER'({
             message: 'Tutorial Complete',
             action: 'PASS',
         }));

lib/actions/tutorial.js

@@ -2,6 +2,7 @@
 var _types_1 = require('./_types');
 var progress_1 = require('./progress');
 var route_1 = require('./route');
+var alert_1 = require('./alert');
 function tutorialSet(name) {
     return function (dispatch, getState) {
         var dir = getState().dir;
@@ -16,10 +17,10 @@ function tutorialUpdate(name) {
         var alert = {
             message: "run `npm install --save-dev " + name + "`",
             action: 'note',
-            duration: 4000,
+            duration: 3000,
         };
         dispatch({ type: _types_1.TUTORIAL_UPDATE, payload: { name: name } });
-        dispatch({ type: _types_1.ALERT_TOGGLE, payload: { alert: alert } });
+        dispatch(alert_1.alertToggle(alert));
     };
 }
 exports.tutorialUpdate = tutorialUpdate;

lib/components/Alert/index.js

@@ -15,8 +15,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 var React = require('react');
 var react_redux_1 = require('react-redux');
-var actions_1 = require('../../actions');
 var Snackbar_1 = require('material-ui/Snackbar');
+var actions_1 = require('../../actions');
 var defaultAlert = {
     message: '',
     open: false,
@@ -28,13 +28,13 @@ var Alert = (function (_super) {
     }
     Alert.prototype.render = function () {
         var _a = this.props, alert = _a.alert, alertToggle = _a.alertToggle;
-        var action = alert.action, open = alert.open, message = alert.message, duration = alert.duration;
-        return (React.createElement(Snackbar_1.default, {className: "cr-alert " + action, open: open || false, message: message || '', action: action, autoHideDuration: duration || 2000, onActionTouchTap: alertToggle, onRequestClose: alertToggle}));
+        var action = alert.action, message = alert.message, open = alert.open, duration = alert.duration;
+        return (React.createElement(Snackbar_1.default, {className: "cr-alert " + action, open: open, message: message || '', action: action || 'NOTE', autoHideDuration: duration || 2000, onRequestClose: alertToggle}));
     };
     Alert = __decorate([
         react_redux_1.connect(null, function (dispatch) {
             return {
-                alertToggle: function () { return dispatch(actions_1.alertToggle()); },
+                alertToggle: function () { return dispatch(actions_1.alertToggle({ open: false })); }
             };
         }), 
         __metadata('design:paramtypes', [])

lib/reducers/alert/index.js

@@ -29,11 +29,7 @@ function alertReducer(alert, action) {
         case _types_1.ALERT_REPLAY:
             return setAlert(current);
         case _types_1.ALERT_TOGGLE:
-            var a = action.payload.alert;
-            if (!a) {
-                return _alert;
-            }
-            return setAlert(a);
+            return setAlert(action.payload.alert);
         default:
             return alert;
     }

lib/store/index.js

@@ -3,9 +3,8 @@ var redux_1 = require('redux');
 var redux_action_thunk_1 = require('redux-action-thunk');
 var reducers_1 = require('../reducers');
 var createLogger = require('redux-logger');
-var redux_thunk_1 = require('redux-thunk');
-var middlewares = [redux_action_thunk_1.ratMiddleware, redux_thunk_1.default];
-var devMode = false;
+var middlewares = [redux_action_thunk_1.ratMiddleware];
+var devMode = true;
 if (devMode) {
     var logger = createLogger();
     middlewares.push(logger);

package.json

@@ -46,9 +46,9 @@
     "react-redux": "4.4.5",
     "react-tap-event-plugin": "1.0.0",
     "redux": "3.5.2",
-    "redux-action-thunk": "0.1.0",
+    "redux-action-thunk": "0.3.0",
     "redux-logger": "2.6.1",
-    "redux-thunk": "^2.1.0"
+    "redux-thunk": "2.1.0"
   },
   "scripts": {
     "compile": "tsc"

src/actions/alert.ts

@@ -9,3 +9,11 @@ export function alertToggle(alert: Object): ReduxThunk.ThunkInterface {
 export function alertReplay(): Action {
   return { type: ALERT_REPLAY };
 }
+
+// import {rat} from 'redux-action-thunk';
+//
+// rat.add('ALERT_TOGGLE', (dispatch, getState) => (alert) => {
+//   dispatch({ type: 'ALERT_TOGGLE', payload: { alert } });
+// });
+//
+// rat.add('ALERT_REPLAY');

src/actions/hint.ts

@@ -1,4 +1,4 @@
-import {HINT_SHOW, HINT_POSITION_SET} from './_types';
+import {HINT_POSITION_SET} from './_types';
 
 export function hintPositionSet(hintPosition: number): Action {
   return {type: HINT_POSITION_SET, payload: { hintPosition } };

src/actions/index.ts

@@ -1,4 +1,5 @@
 export {alertToggle, alertReplay} from './alert';
+// import './alert';
 export {
   progressLoad, completePage, completeTutorial,
   progressPagePositionLoad

src/actions/progress.ts

@@ -45,7 +45,7 @@ export function completeTutorial(completed = true): ReduxThunk.ThunkInterface {
   return (dispatch, getState): void => {
     const {tutorial} = getState();
     dispatch({ type: COMPLETE_TUTORIAL, payload: { tutorial, completed } });
-    dispatch(alertToggle({
+    dispatch('ALER'({
       message: 'Tutorial Complete',
       action: 'PASS',
     }));

src/actions/tutorial.ts

@@ -1,9 +1,9 @@
 import {
-  TUTORIALS_FIND, TUTORIAL_UPDATE, TUTORIAL_SET,
-  ALERT_TOGGLE
+  TUTORIALS_FIND, TUTORIAL_UPDATE, TUTORIAL_SET
 } from './_types';
 import {progressLoad} from './progress';
 import {routeSet} from './route';
+import {alertToggle} from './alert';
 
 export function tutorialSet(name: string): ReduxThunk.ThunkInterface {
   return (dispatch, getState): void => {
@@ -19,10 +19,10 @@ export function tutorialUpdate(name: string): ReduxThunk.ThunkInterface {
     const alert = {
       message: `run \`npm install --save-dev ${name}\``,
       action: 'note',
-      duration: 4000,
+      duration: 3000,
     };
     dispatch({ type: TUTORIAL_UPDATE, payload: { name } });
-    dispatch({ type: ALERT_TOGGLE, payload: { alert } });
+    dispatch(alertToggle(alert));
   };
 }
 

src/components/Alert/index.tsx

@@ -1,32 +1,31 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import {alertToggle} from '../../actions';
 import Snackbar from 'material-ui/Snackbar';
+import {alertToggle} from '../../actions';
 
 const defaultAlert = {
   message: '',
   open: false,
 };
 
-@connect(null, (dispatch) => {
+@connect(null, dispatch => {
   return {
-    alertToggle: () => dispatch(alertToggle()),
+    alertToggle: () => dispatch(alertToggle({open: false}))
   };
 })
 export default class Alert extends React.Component<{
   alert: CR.Alert, alertToggle?: any
 }, {}> {
   render() {
     const {alert, alertToggle} = this.props;
-    const {action, open, message, duration} = alert;
+    const {action, message, open, duration} = alert;
     return (
       <Snackbar
           className={`cr-alert ${action}`}
-          open={open || false}
+          open={open}
           message={message || ''}
-          action={action}
+          action={action || 'NOTE'}
           autoHideDuration={duration || 2000}
-          onActionTouchTap={alertToggle}
           onRequestClose={alertToggle}
       />
     );

src/components/Common/RouteButton.tsx

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import {routeSet} from '../../actions';
 import RaisedButton from 'material-ui/RaisedButton';
 
-@connect(null, (dispatch) => {
+@connect(null, dispatch => {
   return {
     routeTo: (route: string) => dispatch(routeSet(route)),
   };

src/reducers/alert/index.ts

@@ -41,13 +41,7 @@ export default function alertReducer(
       return setAlert(current);
 
     case ALERT_TOGGLE:
-      const a = action.payload.alert;
-
-      if (!a) {
-        // close alert
-        return _alert;
-      }
-      return setAlert(a);
+      return setAlert(action.payload.alert);
 
     default:
       return alert;

src/reducers/tutorial-list/update.ts

@@ -1,5 +1,5 @@
 import commandLine from '../../services/command-line';
-import {alertToggle} from '../../actions';
+// import {alertToggle} from '../../actions';
 import {tutorialsFind} from '../../actions';
 
 export function tutorialUpdate(name: string): void {

src/store/index.ts

@@ -5,9 +5,9 @@ import * as createLogger from 'redux-logger';
 import thunk from 'redux-thunk';
 
 // const middlewares = [ramMiddleware];
-const middlewares = [ratMiddleware, thunk];
+const middlewares = [ratMiddleware];
 
-const devMode = false;
+const devMode = true;
 if (devMode) {
   const logger = createLogger();
   middlewares.push(logger);