Integrate Redux/React Router to start transitioning away from Angular router

frontend/src/admin/datamodel/containers/SegmentApp.jsx

 import React, { Component, PropTypes } from "react";
-import { connect } from "react-redux";
+
+import SegmentForm from "./SegmentForm.jsx";
 
 import { segmentEditSelectors } from "../selectors";
 import * as actions from "../actions";
 
-import SegmentForm from "./SegmentForm.jsx";
+import { connect } from "react-redux";
 
 @connect(segmentEditSelectors, actions)
 export default class SegmentApp extends Component {
-    async componentDidMount() {
-        let { tableId, segmentId } = this.props;
+    async componentWillMount() {
+        const { params } = this.props;
 
-        if (segmentId) {
+        let tableId;
+        if (params.id) {
+            const segmentId = parseInt(params.id);
             this.props.setCurrentSegmentId(segmentId);
-            let { payload: segment } = await this.props.getSegment({ segmentId });
+            const { payload: segment } = await this.props.getSegment({ segmentId });
             tableId = segment.table_id;
-        } else if (tableId) {
+        } else if (location.query.table) {
+            tableId = parseInt(location.query.table);
             this.props.setCurrentSegmentId(null);
             this.props.newSegment({ id: null, table_id: tableId, definition: { filter: [] } });
         }
 
-        if (tableId) {
+        if (tableId != null) {
             this.props.loadTableMetadata(tableId);
         }
     }
@@ -32,7 +36,8 @@ export default class SegmentApp extends Component {
         } else {
             await this.props.createSegment(segment);
         }
-        this.props.onChangeLocation("/admin/datamodel/database/" + tableMetadata.db_id + "/table/" + tableMetadata.id);
+
+        this.onLocationChange("/admin/datamodel/database/" + tableMetadata.db_id + "/table/" + tableMetadata.id);
     }
 
     render() {
@@ -45,4 +50,12 @@ export default class SegmentApp extends Component {
             </div>
         );
     }
+
+    // HACK: figure out a better way to do this that works with both redux-router and Angular's router
+    onLocationChange(path) {
+        const el = angular.element(document.querySelector("body"));
+        el.scope().$apply(function() {
+            el.injector().get("$location").path(path);
+        });
+    }
 }

frontend/src/admin/datamodel/containers/SegmentForm.jsx

 import React, { Component, PropTypes } from "react";
-import { reduxForm } from "redux-form";
-
-import { segmentFormSelectors } from "../selectors";
 
 import FormLabel from "../components/FormLabel.jsx";
 import FormInput from "../components/FormInput.jsx";
 import FormTextArea from "../components/FormTextArea.jsx";
 import Fieldset from "../components/FieldSet.jsx";
-
 import SegmentBuilder from "../components/segment/SegmentBuilder.jsx";
-
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
 
+import { segmentFormSelectors } from "../selectors";
+import { reduxForm } from "redux-form";
+
 import cx from "classnames";
 
 @reduxForm({

frontend/src/admin/datamodel/datamodel.module.js

-
-import { createStore, combineReducers } from "metabase/lib/redux";
-
-import SegmentApp from "./containers/SegmentApp.jsx";
-import * as reducers from './reducers';
-
 angular
 .module('metabase.admin.datamodel', [
     'metabase.admin.datamodel.controllers'
@@ -23,24 +17,4 @@ angular
     $routeProvider.when('/admin/datamodel/database/:databaseId', metadataRoute);
     $routeProvider.when('/admin/datamodel/database/:databaseId/:mode', metadataRoute);
     $routeProvider.when('/admin/datamodel/database/:databaseId/:mode/:tableId', metadataRoute);
-
-    var segmentRoute = {
-        template: '<div mb-redux-component class="flex flex-column flex-full" />',
-        controller: ['$scope', '$location', '$route', '$routeParams',
-            function($scope, $location, $route, $routeParams) {
-                $scope.Component = SegmentApp;
-                $scope.props = {
-                    segmentId: parseInt($routeParams.segmentId, 10),
-                    tableId: parseInt($routeParams.table, 10),
-                    onChangeLocation: function(url) {
-                        $scope.$apply(() => $location.url(url));
-                    }
-                };
-                $scope.store = createStore(combineReducers(reducers), {});
-            }
-        ]
-    }
-
-    $routeProvider.when('/admin/datamodel/segment/create', segmentRoute);
-    $routeProvider.when('/admin/datamodel/segment/:segmentId', segmentRoute);
 }]);

frontend/src/admin/datamodel/reducers.js

@@ -3,8 +3,6 @@ import { handleActions } from "redux-actions";
 
 import { momentifyTimestamps } from "metabase/lib/redux";
 
-export { reducer as form } from "redux-form";
-
 import {
     NEW_SEGMENT,
     GET_SEGMENT,
@@ -17,10 +15,10 @@ import {
 } from "./actions";
 
 export const segments = handleActions({
-    [NEW_SEGMENT]:    { next: (state, { payload }) => ({ ...state, [payload.id]: momentifyTimestamps(payload), revision_message: undefined }) },
-    [GET_SEGMENT]:    { next: (state, { payload }) => ({ ...state, [payload.id]: momentifyTimestamps(payload), revision_message: undefined }) },
-    [CREATE_SEGMENT]: { next: (state, { payload }) => ({ ...state, [payload.id]: momentifyTimestamps(payload), revision_message: undefined }) },
-    [UPDATE_SEGMENT]: { next: (state, { payload }) => ({ ...state, [payload.id]: momentifyTimestamps(payload), revision_message: undefined }) },
+    [NEW_SEGMENT]:    { next: (state, { payload }) => ({ ...state, [payload.id]: momentifyTimestamps(payload) }) },
+    [GET_SEGMENT]:    { next: (state, { payload }) => ({ ...state, [payload.id]: momentifyTimestamps(payload) }) },
+    [CREATE_SEGMENT]: { next: (state, { payload }) => ({ ...state, [payload.id]: momentifyTimestamps(payload) }) },
+    [UPDATE_SEGMENT]: { next: (state, { payload }) => ({ ...state, [payload.id]: momentifyTimestamps(payload) }) },
     [DELETE_SEGMENT]: { next: (state, { payload }) => { state = { ...state }; delete state[payload.id]; return state; }}
 }, {});
 

frontend/src/admin/datamodel/selectors.js

 
 import { createSelector } from 'reselect';
 
-const segmentsSelector         = state => state.segments;
-const currentSegmentIdSelector = state => state.currentSegmentId;
-const tableMetadataSelector    = state => state.tableMetadata;
-const resultCountSelector      = state => state.resultCount;
+const segmentsSelector         = state => state.datamodel.segments;
+const currentSegmentIdSelector = state => state.datamodel.currentSegmentId;
+const tableMetadataSelector    = state => state.datamodel.tableMetadata;
+const resultCountSelector      = state => state.datamodel.resultCount;
 
-// EDIT
 export const segmentEditSelectors = createSelector(
-    [segmentsSelector, currentSegmentIdSelector, tableMetadataSelector],
+    segmentsSelector,
+    currentSegmentIdSelector,
+    tableMetadataSelector,
     (segments, currentSegmentId, tableMetadata) => ({
         segment: segments[currentSegmentId],
         tableMetadata
@@ -16,6 +17,11 @@ export const segmentEditSelectors = createSelector(
 );
 
 export const segmentFormSelectors = createSelector(
-    [segmentEditSelectors, tableMetadataSelector, resultCountSelector],
-    ({ segment }, tableMetadata, resultCount) => ({ initialValues: segment, tableMetadata, resultCount })
+    segmentEditSelectors,
+    resultCountSelector,
+    ({ segment, tableMetadata }, resultCount) => ({
+        initialValues: segment,
+        tableMetadata,
+        resultCount
+    })
 );

frontend/src/lib/redux.js

@@ -2,18 +2,19 @@ import moment from "moment";
 import _ from "underscore";
 
 import { createStore as originalCreateStore, applyMiddleware, compose } from "redux";
-import promiseMiddleware from 'redux-promise';
-import thunkMidleware from "redux-thunk";
+import promise from 'redux-promise';
+import thunk from "redux-thunk";
+
+import { createHistory } from 'history';
+import { reduxReactRouter } from 'redux-router';
 
 // convienence
 export { combineReducers } from "redux";
 
 // common createStore with middleware applied
 export const createStore = compose(
-    applyMiddleware(
-        thunkMidleware,
-        promiseMiddleware
-    )
+  applyMiddleware(thunk, promise),
+  reduxReactRouter({ createHistory })
 )(originalCreateStore);
 
 // HACK: just use our Angular resources for now

package.json

@@ -24,6 +24,7 @@
     "d3-tip": "^0.6.7",
     "dc": "^2.0.0-beta.14",
     "fixed-data-table": "^0.4.7",
+    "history": "^1.13.1",
     "humanize-plus": "^1.5.0",
     "inflection": "^1.7.1",
     "moment": "^2.10.6",
@@ -34,12 +35,14 @@
     "react-onclickout": "^1.1.0",
     "react-redux": "^3.1.0",
     "react-retina-image": "^2.0.0",
+    "react-router": "^1.0.2",
     "redux": "^3.0.4",
     "redux-actions": "^0.8.0",
     "redux-devtools": "^2.1.5",
     "redux-form": "3.1.0",
     "redux-logger": "^2.1.1",
     "redux-promise": "^0.5.0",
+    "redux-router": "^1.0.0-beta5",
     "redux-thunk": "^1.0.0",
     "reselect": "^2.0.1",
     "tether": "^1.1.0",