Switch to redux

Author: vkbansal

CHANGELOG.md

@@ -9,6 +9,16 @@ All the changes can be found below. Order used:
 - Fixed
 - Security
 
+## master
+
+### Changed
+- Replace `webpack-dev-server` with `react-hmre`.
+- Revert to use `createClass`.
+- Switch to Redux from Flummox.
+
+### Fixed
+ - Menu goes outside when closer to edges
+
 ## v0.3.0
 
 ### Added

examples.config.js

@@ -26,6 +26,11 @@ module.exports = {
             compressor: {
                 warnings: false
             }
+        }),
+        new webpack.DefinePlugin({
+            "process.env": {
+                "NODE_ENV": JSON.stringify("production")
+            }
         })
     ]
 };

package.json

@@ -31,10 +31,10 @@
   "dependencies": {
     "autobind-decorator": "^1.3.3",
     "classnames": "^2.2.3",
-    "flummox": "^3.6.8",
     "invariant": "^2.2.0",
     "lodash.isobject": "^3.0.2",
-    "object-assign": "^4.0.1"
+    "object-assign": "^4.0.1",
+    "redux": "^3.3.1"
   },
   "peerDependencies": {
     "react": "^0.14.0",

server.js

@@ -9,10 +9,16 @@ var express = require("express"),
 config.module.loaders[0].query = {presets: ["react-hmre"]};
 config.entry.unshift("webpack-hot-middleware/client");
 
-config.plugins.push(
+config.plugins = [
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+        compressor: {
+            warnings: false
+        }
+    }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
-);
+];
 
 var app = express();
 

src/context-menu.js

@@ -1,8 +1,7 @@
 "use strict";
 
 import React from "react";
-import FluxComponent from "flummox/component";
-import flux from "./flux";
+import store from "./redux/store";
 import ContextMenuContainer from "./menu-container";
 
 let { PropTypes } = React;
@@ -12,11 +11,29 @@ const ContextMenu = React.createClass({
     propTypes: {
         identifier: PropTypes.string.isRequired
     },
+    childContextTypes: {
+        store: PropTypes.object
+    },
+    getInitialState() {
+        return store.getState();
+    },
+    getChildContext() {
+        return {
+            store
+        };
+    },
+    componentDidMount() {
+        this.unsubscribe = store.subscribe(this.handleUpdate);
+    },
+    componentWillUnmount() {
+        if (this.unsubscribe) this.unsubscribe();
+    },
+    handleUpdate() {
+        this.setState(this.getInitialState());
+    },
     render() {
         return (
-            <FluxComponent flux={flux} connectToStores={["menu"]}>
-                <ContextMenuContainer {...this.props}/>
-            </FluxComponent>
+            <ContextMenuContainer {...this.props} {...this.state}/>
         );
     }
 });

src/contextmenu-layer.js

@@ -5,7 +5,7 @@ import ReactDOM from "react-dom";
 import invariant from "invariant";
 import _isObject from "lodash.isobject";
 
-import flux from "./flux";
+import store from "./redux/store";
 
 let { Component } = React;
 
@@ -54,13 +54,14 @@ export default function(identifier, configure) {
 
                     event.preventDefault();
 
-                    const actions = flux.getActions("menu");
-
-                    actions.setParams({
-                        x: event.clientX,
-                        y: event.clientY,
-                        currentItem,
-                        isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
+                    store.dispatch({
+                        type: "SET_PARAMS",
+                        data: {
+                            x: event.clientX,
+                            y: event.clientY,
+                            currentItem,
+                            isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
+                        }
                     });
                 }
             },

src/flux/actions.js

@@ -6,6 +6,9 @@ import classnames from "classnames";
 
 const MenuContainer = React.createClass({
     displayName: "MenuContainer",
+    contextTypes: {
+        store: React.PropTypes.object.isRequired
+    },
     getInitialState() {
         return {
             position: "fixed",
@@ -77,9 +80,12 @@ const MenuContainer = React.createClass({
         }
     },
     _hideMenu() {
-        this.props.flux.getActions("menu").setParams({
-            isVisible: false,
-            currentItem: {}
+        this.context.store.dispatch({
+            type: "SET_PARAMS",
+            data: {
+                isVisible: false,
+                currentItem: {}
+            }
         });
     },
     _bindHandlers() {