Use API from released version of react-router v4 STRIPES-173

folio-org · Mar 16, 2017 · adf2434 · adf2434
1 parent 0821e47
commit adf2434
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 27 deletions.
diff --git a/Items.js b/Items.js
@@ -2,7 +2,8 @@ import _ from 'lodash';
 // We have to remove node_modules/react to avoid having multiple copies loaded.
 // eslint-disable-next-line import/no-unresolved
 import React, { PropTypes } from 'react';
-import Match from 'react-router/Match';
+import Route from 'react-router-dom/Route';
+import queryString from 'query-string';
 
 import Pane from '@folio/stripes-components/lib/Pane';
 import Paneset from '@folio/stripes-components/lib/Paneset';
@@ -40,7 +41,6 @@ const filterConfig = [
 
 class Items extends React.Component {
   static contextTypes = {
-    router: PropTypes.object.isRequired,
     store: PropTypes.object,
   };
 
@@ -50,11 +50,15 @@ class Items extends React.Component {
       log: PropTypes.func.isRequired,
     }).isRequired,
     data: PropTypes.object.isRequired,
-    pathname: PropTypes.string.isRequired,
+    history: PropTypes.shape({
+      push: PropTypes.func.isRequired,
+    }).isRequired,
     location: PropTypes.shape({
       pathname: PropTypes.string.isRequired,
-      query: PropTypes.object, // object of key=value pairs
-      search: PropTypes.string, // string combining all parts of query
+      search: PropTypes.string,
+    }).isRequired,
+    match: PropTypes.shape({
+      path: PropTypes.string.isRequired,
     }).isRequired,
     mutator: PropTypes.shape({
       addItemMode: PropTypes.shape({
@@ -85,7 +89,7 @@ class Items extends React.Component {
   constructor(props) {
     super(props);
 
-    const query = props.location.query || {};
+    const query = props.location.search ? queryString.parse(props.location.search) : {};
     this.state = {
       filters: initialFilterState(filterConfig, query.filters),
       selectedItem: {},
@@ -113,7 +117,7 @@ class Items extends React.Component {
   onClearSearch() {
     this.props.logger.log('action', 'cleared search');
     this.setState({ searchTerm: '' });
-    this.context.router.transitionTo(this.props.location.pathname);
+    this.props.history.push(this.props.location.pathname);
   }
 
   onSort(e, meta) {
@@ -127,7 +131,7 @@ class Items extends React.Component {
     const itemId = meta.id;
     this.props.logger.log('action', `clicked ${itemId}, location =`, this.props.location, 'selected item =', meta);
     this.setState({ selectedItem: meta });
-    this.context.router.transitionTo(`/items/view/${itemId}${this.props.location.search}`);
+    this.props.history.push(`/items/view/${itemId}${this.props.location.search}`);
   }
 
   onClickAddNewItem(e) {
@@ -161,7 +165,7 @@ class Items extends React.Component {
   }
 
   render() {
-    const { data, pathname } = this.props;
+    const { data } = this.props;
     const items = data.items || [];
 
     /* searchHeader is a 'custom pane header'*/
@@ -211,7 +215,7 @@ class Items extends React.Component {
         </Pane>
 
         {/* Details Pane */}
-        <Match pattern={`${pathname}/view/:itemid`} render={props => <this.connectedViewItem placeholder={'placeholder'} {...props} />} />
+        <Route path={`${this.props.match.path}/view/:itemid`} render={props => <this.connectedViewItem placeholder={'placeholder'} {...props} />} />
         <Layer isOpen={data.addItemMode ? data.addItemMode.mode : false} label="Add New Item Dialog">
           <ItemForm
             onSubmit={(record) => { this.create(record); }}

diff --git a/ViewItem.js b/ViewItem.js
@@ -17,8 +17,8 @@ class ViewItem extends Component {
     data: PropTypes.shape({
       item: PropTypes.arrayOf(PropTypes.object),
     }),
-    params: PropTypes.shape({
-      itemid: PropTypes.string,
+    match: PropTypes.shape({
+      params: PropTypes.object,
     }),
     mutator: React.PropTypes.shape({
       items: React.PropTypes.shape({
@@ -69,7 +69,7 @@ class ViewItem extends Component {
   render() {
     const detailMenu = <PaneMenu><button onClick={this.onClickEditItem} title="Edit Item"><Icon icon="edit" />Edit</button></PaneMenu>;
 
-    const { data: { items }, params: { itemid } } = this.props;
+    const { data: { items }, match: { params: { itemid } } } = this.props;
     if (!items || !itemid) return <div />;
     const item = items.find(i => i.id === itemid);
 

diff --git a/index.js b/index.js
@@ -1,15 +1,15 @@
 // We have to remove node_modules/react to avoid having multiple copies loaded.
 // eslint-disable-next-line import/no-unresolved
 import React, { Component, PropTypes } from 'react';
-import Match from 'react-router/Match';
-import Miss from 'react-router/Miss';
+import Route from 'react-router-dom/Route';
+import Switch from 'react-router-dom/Switch';
 import Items from './Items';
 
 class ItemsRouting extends Component {
   static propTypes = {
     connect: PropTypes.func.isRequired,
     location: PropTypes.object.isRequired,
-    pathname: PropTypes.string,
+    match: PropTypes.object.isRequired,
   }
 
   constructor(props) {
@@ -27,15 +27,15 @@ class ItemsRouting extends Component {
   }
 
   render() {
-    const { pathname } = this.props;
+    const pathname = this.props.match.path;
     return (
-      <div>
-        <Match
-          pattern={`${pathname}`}
+      <Switch>
+        <Route
+          path={`${pathname}`}
           render={() => <this.connectedApp {...this.props} />}
         />
-        <Miss component={() => { this.NoMatch(); }} />
-      </div>
+        <Route component={() => { this.NoMatch(); }} />
+      </Switch>
     );
   }
 }

diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "0.0.1-test",
   "description": "Items management",
   "repository": "folio-org/stripes-components",
-  "publishConfig" : {
-    "registry" : "https://repository.folio.org/repository/npm-folio/"
+  "publishConfig": {
+    "registry": "https://repository.folio.org/repository/npm-folio/"
   },
   "license": "Apache-2.0",
   "engines": {
@@ -29,21 +29,22 @@
     "babel-register": "^6.18.0",
     "eslint": "^3.8.0",
     "eslint-config-airbnb": "^13.0.0",
+    "eslint-import-resolver-webpack": "0.7.1",
     "eslint-plugin-babel": "^3.3.0",
     "eslint-plugin-import": "^2.0.1",
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.4.1",
-    "eslint-import-resolver-webpack": "0.7.1",
     "webpack": "1.11.0"
   },
   "dependencies": {
-    "@folio/stripes-core": "^0.2.0",
     "@folio/stripes-components": "^0.2.0",
+    "@folio/stripes-core": "^0.2.0",
     "@folio/stripes-logger": "^0.0.2",
     "lodash": "^4.17.4",
+    "query-string": "^4.3.2",
     "react": "^15.4.2",
     "react-bootstrap": "^0.30.7",
-    "react-router": "4.0.0-alpha.6",
+    "react-router-dom": "^4.0.0",
     "redux-form": "^6.1.1"
   },
   "peerDependencies": {