Client config

admin/code/CampaignAdmin.php

@@ -35,8 +35,12 @@ class CampaignAdmin extends LeftAndMain implements PermissionProvider {
 		Requirements::javascript(FRAMEWORK_ADMIN_DIR . '/javascript/dist/campaign-admin.js');
 	}
 
-	public function getEditForm($id = null, $fields = null) {
-		return '';
+	public function getClientConfig() {
+		return array_merge(parent::getClientConfig(), [
+			'forms' => [
+				'editForm' => $this->schema->getSchema($this->getEditForm())
+			]
+		]);
 	}
 
 	/**

admin/javascript/src/boot/campaign-admin.js

@@ -2,6 +2,7 @@ import reducerRegister from 'reducer-register';
 import $ from 'jQuery';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 import CampaignAdmin from '../sections/campaign-admin/controller';
 import campaignsReducer from '../state/campaigns/reducer';
 
@@ -12,7 +13,11 @@ $.entwine('ss', function ($) {
 
     $('.cms-content.CampaignAdmin').entwine({
         onadd: function () {
-            ReactDOM.render(<CampaignAdmin />, this[0]);
+            ReactDOM.render(
+                <Provider store={window.store}>
+                    <CampaignAdmin sectionConfigKey='CampaignAdmin' />
+                </Provider>
+            , this[0]);
         },
 
         onremove: function () {

admin/javascript/src/boot/index.js

@@ -1,15 +1,26 @@
+import $ from 'jQuery';
 import { combineReducers, createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import createLogger from 'redux-logger';
 import reducerRegister from 'reducer-register';
 
+import * as configActions from '../state/config/actions';
+import ConfigReducer from '../state/config/reducer';
+
 function appBoot() {
+    reducerRegister.add('config', ConfigReducer);
+
     const initialState = {};
     const rootReducer = combineReducers(reducerRegister.getAll());
     const createStoreWithMiddleware = applyMiddleware(thunkMiddleware, createLogger())(createStore);
-    const store = createStoreWithMiddleware(rootReducer, initialState);
 
-    console.log(store.getState()); 
+    // TODO: The store needs to be passed into route callbacks on the route context.
+    window.store = createStoreWithMiddleware(rootReducer, initialState);
+
+    // Set the initial config state.
+    configActions.setConfig(window.ss.config)(window.store.dispatch);
 }
 
-window.onload = appBoot;
+// TODO: This should be using `window.onload` but isn't because Entwine hooks are being used to set up the <Provider>.
+// `window.onload` happens AFTER these Entwine hooks which means the store is undefined when the <Provider> is constructed.
+$('body').entwine({ onadd: function () { appBoot(); } });

admin/javascript/src/sections/campaign-admin/controller.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import SilverStripeComponent from 'silverstripe-component';
 import NorthHeader from '../../components/north-header';
 import GridField from '../grid-field';
@@ -16,4 +17,23 @@ class CampaignAdminContainer extends SilverStripeComponent {
 
 }
 
-export default CampaignAdminContainer;
+CampaignAdminContainer.propTypes = {
+    config: React.PropTypes.shape({
+        data: React.PropTypes.shape({
+            forms: React.PropTypes.shape({
+                editForm: React.PropTypes.shape({
+                    schemaUrl: React.PropTypes.string
+                })
+            })
+        })
+    }),
+    sectionConfigKey: React.PropTypes.string.isRequired
+};
+
+function mapStateToProps(state, ownProps) {
+    return {
+        config: state.config.sections[ownProps.sectionConfigKey]
+    }
+}
+
+export default connect(mapStateToProps)(CampaignAdminContainer);

admin/javascript/src/state/config/action-types.js

@@ -0,0 +1,3 @@
+export default {
+    SET_CONFIG: 'SET_CONFIG'
+}

admin/javascript/src/state/config/actions.js

@@ -0,0 +1,15 @@
+import ACTION_TYPES from './action-types';
+
+/**
+ * Sets global config for the application.
+ *
+ * @param object config
+ */
+export function setConfig(config) {
+    return (dispatch, getState) => {
+        return dispatch({
+            type: ACTION_TYPES.SET_CONFIG,
+            payload: { config }
+        });
+    }
+}

admin/javascript/src/state/config/reducer.js

@@ -0,0 +1,18 @@
+import deepFreeze from 'deep-freeze';
+import ACTION_TYPES from './action-types';
+
+function configReducer(state = {}, action) {
+
+    switch (action.type) {
+
+        case ACTION_TYPES.SET_CONFIG:
+            return deepFreeze(Object.assign({}, state, action.payload.config));
+
+        default:
+            return state;
+
+    }
+
+}
+
+export default configReducer;

gulpfile.js

@@ -254,6 +254,7 @@ gulp.task('bundle-boot', function bundleBoot() {
             ignore: /(node_modules)/
         }))
         .external('reducer-register')
+        .external('jQuery')
         .bundle()
         .on('error', notify.onError({ message: bundleFileName + ': <%= error.message %>' }))
         .pipe(source(bundleFileName))

package.json

@@ -34,6 +34,25 @@
     "url": "https://github.com/silverstripe/silverstripe-framework/issues"
   },
   "homepage": "https://github.com/silverstripe/silverstripe-framework#readme",
+  "dependencies": {
+    "blueimp-file-upload": "^6.0.3",
+    "blueimp-load-image": "^1.1.3",
+    "blueimp-tmpl": "^1.0.2",
+    "bootstrap": "^4.0.0-alpha.2",
+    "deep-freeze": "0.0.1",
+    "isomorphic-fetch": "^2.2.1",
+    "jquery-sizes": "^0.33.0",
+    "npm-shrinkwrap": "^5.4.1",
+    "page.js": "^4.13.3",
+    "react": "^0.14.7",
+    "react-addons-css-transition-group": "^0.14.7",
+    "react-addons-test-utils": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-redux": "^4.0.6",
+    "redux": "^3.3.1",
+    "redux-thunk": "^1.0.3",
+    "tinymce": "^4.3.3"
+  },
   "devDependencies": {
     "autoprefixer": "^6.3.1",
     "babel-core": "^6.4.0",