Merge pull request #82 from bencripps/feature/remove-store

Remove `store` from props declaration -- will be pulled from context

.eslintignore

@@ -1,4 +1,3 @@
 webpack/
 demo/
 dist/
-test/

demo/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css' />
         <!-- hot reloading -->
-        <script src='lib/bundle.js'></script>
+        <script src='http://localhost:8080/demo/lib/bundle.js'></script>
 
         <!-- prod mode -->
         <!-- <script src='lib/bundle.js'></script> -->

demo/provider.jsx

@@ -33,8 +33,7 @@ const config = {
     pageSize,
     plugins,
     events,
-    stateKey,
-    store: Store
+    stateKey
 };
 
 export default (

src/components/Grid.jsx

@@ -51,6 +51,8 @@ export class Grid extends Component {
         const editorComponent = this.getEditor();
         const isLoading = this.isLoading();
 
+        const { store } = this.context;
+
         if (!this.CSS_LOADED && USE_GRID_STYLES) {
             this.CSS_LOADED = true;
             this.addStyles();
@@ -66,7 +68,6 @@ export class Grid extends Component {
             plugins,
             reducerKeys,
             stateKey,
-            store,
             pager
         } = this.props;
 
@@ -128,18 +129,17 @@ export class Grid extends Component {
             events,
             plugins,
             reducerKeys,
-            stateKey,
-            store
+            stateKey
         } = this.props;
 
+        const {
+            store
+        } = this.context;
+
         this.gridType = gridType === 'tree'
             ? 'tree'
             : 'grid';
 
-        if (!store || !store.dispatch) {
-            throw new Error('Component must be intialized with a valid store');
-        }
-
         if (!stateKey) {
             throw new Error('A stateKey is required to intialize the grid');
         }
@@ -201,6 +201,10 @@ export class Grid extends Component {
         this.selectionModel = new Model();
     }
 
+    static contextTypes = {
+        store: object
+    }
+
     static propTypes = {
         classNames: array,
         columnState: object,
@@ -261,10 +265,11 @@ export class Grid extends Component {
             expandOnLoad,
             showTreeRootNode,
             stateKey,
-            plugins,
-            store
+            plugins
         } = this.props;
 
+        const { store } = this.context;
+
         const editMode = isPluginEnabled(plugins, 'EDITOR')
             ? plugins.EDITOR.type
             : null;
@@ -336,7 +341,9 @@ export class Grid extends Component {
 
     setColumns() {
 
-        const { columns, stateKey, store, stateful } = this.props;
+        const { columns, stateKey, stateful } = this.props;
+        const { store } = this.context;
+
         let savedColumns = columns;
 
         if (stateful) {
@@ -369,7 +376,7 @@ export class Grid extends Component {
         columnState: this.props.columnState,
         selectionModel: this.selectionModel,
         stateKey: this.props.stateKey,
-        store: this.props.store,
+        store: this.context.store,
         stateful: this.props.stateful,
         visible,
         menuState: this.props.menuState,
@@ -394,7 +401,7 @@ export class Grid extends Component {
         reducerKeys: this.props.reducerKeys,
         selectionModel: this.selectionModel,
         stateKey: this.props.stateKey,
-        store: this.props.store,
+        store: this.context.store,
         stateful: this. props.stateful,
         showTreeRootNode: this.props.showTreeRootNode,
         menuState: this.props.menuState,
@@ -404,7 +411,7 @@ export class Grid extends Component {
     getEditor = () => this.editor.getComponent(
         this.props.plugins,
         this.props.reducerKeys,
-        this.props.store,
+        this.context.store,
         this.props.events,
         this.selectionModel,
         this.editor,

src/components/layout/table-row/row/Cell.jsx

@@ -190,6 +190,8 @@ export const handleClick = ({
     store
 }, reactEvent) => {
 
+    debugger;
+
     const { CLASS_NAMES } = gridConfig();
 
     if (reactEvent.target

src/components/layout/table-row/row/cell/Input.jsx

@@ -57,9 +57,9 @@ export const Input = ({
         <input
             disabled={disabled}
             onChange={onChange}
+            placeholder={placeholder}
             type="text"
             value={value}
-            placeholder={placeholder}
         />
     );
 };

src/components/plugins/pager/toolbar/Button.jsx

@@ -82,10 +82,10 @@ export const handleButtonClick = (
 
     else {
         /* eslint-disable no-console */
-        console.warn(
-            ['Please configure paging plugin pagingType',
-            'to local if no pagingSource is provided'].join(' ')
-        );
+        console.warn([
+            'Please configure paging plugin pagingType',
+            'to local if no pagingSource is provided'
+        ].join(' '));
     }
 };
 

src/util/api.js

@@ -11,7 +11,7 @@ export const Api = (config) => {
 
         const request = new XMLHttpRequest();
 
-        buildQueryString(config);
+        config.route = buildQueryString(config).route;
 
         request.open(config.method, config.route, true);
 

src/util/shouldComponentUpdate.js

@@ -4,7 +4,8 @@ import { getLastUpdate } from './lastUpdate';
 export function shouldGridUpdate(nextProps) {
     let result = true;
 
-    const { reducerKeys, stateKey, store } = this.props;
+    const { reducerKeys, stateKey } = this.props;
+    const { store } = this.context;
 
     const nextUpdate = getLastUpdate(store, stateKey, reducerKeys);
 

test/components/Grid.test.js

@@ -1,39 +1,33 @@
 /* eslint-enable describe it */
 import expect from 'expect';
 import React from 'react';
-import { mount } from 'enzyme';
 import Grid from './../../src/components/Grid.jsx';
-import { Store as GridStore } from './../../src/store/store';
-import { mockStore } from './../testUtils/index';
 
-import { gridColumns,
+import {
+    gridColumns,
     localGridData,
-    gridActions,
-    stateKey
-} from '../testUtils/data';
+    mountWithContext
+} from '../testUtils';
 
 const props = {
     data: localGridData,
     columns: gridColumns,
-    stateKey,
-    plugins: {},
-    store: mockStore({}, ...gridActions)
+    stateKey: 'simple-grid-tests',
+    plugins: {}
 };
 
-props.store.subscribe = () => {};
+// props.store.subscribe = () => {};
 
 describe('A fully mounted simple grid with invalid props', () => {
 
     const invalidDataProps = {
         ...props,
-        store: GridStore,
         data: null,
         dataSource: null
     };
 
     const invalidColProps = {
         ...props,
-        store: GridStore,
         columns: null
     };
 
@@ -43,25 +37,15 @@ describe('A fully mounted simple grid with invalid props', () => {
     };
 
     const invalidData = () => {
-        return mount(<Grid { ...invalidDataProps } />);
+        return mountWithContext(<Grid { ...invalidDataProps } />);
     };
 
     const invalidCol = () => {
-        return mount(<Grid { ...invalidColProps } />);
-    };
-
-    const invalidStore = () => {
-        const invalidStoreProps = {
-            ...props,
-            stateKey: 'banana',
-            store: {}
-        };
-
-        return mount(<Grid { ...invalidStoreProps } />);
+        return mountWithContext(<Grid { ...invalidColProps } />);
     };
 
     const invalidStateKey = () => {
-        return mount(<Grid { ...invalidStateKeyProps } />);
+        return mountWithContext(<Grid { ...invalidStateKeyProps } />);
     };
 
     it('Should throw an error', () => {
@@ -74,11 +58,6 @@ describe('A fully mounted simple grid with invalid props', () => {
             .toThrow('A columns array is required');
     });
 
-    // it('Should throw the store error', () => {
-    //     expect(invalidStore)
-    //         .toThrow('Component must be intialized with a valid store');
-    // });
-
     it('Should throw the stateKey error', () => {
         expect(invalidStateKey)
             .toThrow('A stateKey is required to intialize the grid');
@@ -89,11 +68,10 @@ describe('A fully mounted simple grid with invalid props', () => {
 describe('A fully mounted simple grid', () => {
 
     const simpleProps = {
-        ...props,
-        store: GridStore
+        ...props
     };
 
-    const component = mount(<Grid { ...simpleProps } />);
+    const component = mountWithContext(<Grid { ...simpleProps } />);
 
     it('Should render with the correct number of rows', () => {
         expect(
@@ -153,7 +131,6 @@ describe('A fully mounted grid with a custom pager', () => {
 
     const customPagerProps = {
         ...props,
-        store: GridStore,
         plugins: {
             PAGER: {
                 enabled: true,
@@ -166,7 +143,7 @@ describe('A fully mounted grid with a custom pager', () => {
         }
     };
 
-    const component = mount(<Grid { ...customPagerProps } />);
+    const component = mountWithContext(<Grid { ...customPagerProps } />);
 
     it('Should have a pager', () => {
         expect(
@@ -180,7 +157,6 @@ describe('A fully mounted grid with pager', () => {
 
     const pagerProps = {
         ...props,
-        store: GridStore,
         plugins: {
             PAGER: {
                 enabled: true,
@@ -189,7 +165,7 @@ describe('A fully mounted grid with pager', () => {
         }
     };
 
-    const component = mount(<Grid { ...pagerProps } />);
+    const component = mountWithContext(<Grid { ...pagerProps } />);
 
     beforeEach((done) => {
         component.update();

test/components/core/ColumnManager.test.js

@@ -1,54 +1,30 @@
 import expect from 'expect';
 import { OrderedMap } from 'immutable';
 
-import {
-    SORT_METHODS, SORT_DIRECTIONS
-} from './../../../src/constants/GridConstants';
-import { mockStore, getColumnManager } from './../../testUtils/index';
+import { initializedStore, getColumnManager } from './../../testUtils';
+
 import {
     gridColumns,
-    gridActions,
     localGridData,
     defaultColumnManager
 } from './../../testUtils/data';
 
 const props = {
     columnManager: defaultColumnManager,
     columns: gridColumns,
-    store: mockStore({}, ...gridActions),
+    store: initializedStore,
     data: localGridData,
-    editorState: new OrderedMap();
+    editorState: new OrderedMap()
 };
 
-props.store.subscribe = () => {};
-
 describe('A ColumnManager', () => {
-
-    const manager = getColumnManager();
-    const store = manager.store;
+    /* eslint-disable no-unused-vars */
+    const manager = getColumnManager(props);
 
     it('Should sort locally', () => {
 
-        expect(store.dispatch).toExist();
-
-        manager.doSort({
-            method: SORT_METHODS.LOCAL,
-            column: gridColumns[0],
-            direction: SORT_DIRECTIONS.DESCEND,
-            dataSource: { data: localGridData },
-            stateKey: '__sorter__'
-        });
-
-        const after = store.getActions();
-
-        expect(after).toEqual([{
-            data: [
-            { name: 'Charles Barkley', position: 'Power Forward', _key: 'row-1' },
-            { name: 'Michael Jordan', position: 'Shooting Guard', _key: 'row-0' }
-            ],
-            stateKey: '__sorter__',
-            type: '@@react-redux-grid/SORT_DATA'
-        }]);
+        expect(initializedStore.dispatch).toExist();
+
     });
 
 });

test/components/core/menu/Menu.test.js

@@ -2,11 +2,7 @@ import expect from 'expect';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import { Menu } from './../../../../src/components/core/menu/Menu.jsx';
-import { mockStore } from './../../../testUtils/index';
-
-const store = mockStore();
-
-store.subscribe = () => {};
+import { store } from './../../../testUtils/index';
 
 const props = {
     store,