Add param and query examples to demo

demo/client/demo.js

@@ -1,9 +1,9 @@
-/* eslint-disable no-magic-numbers */
+/* eslint-disable no-magic-numbers, react/no-multi-comp */
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import chunk from 'lodash.chunk';
-import { Link, Fragment } from '../../src';
+import { Link, Fragment, push } from '../../src';
 import styles from './demo.css';
 
 const COLUMN_COUNT = 2;
@@ -18,7 +18,7 @@ const columnize = (array, columns) => {
   );
 };
 
-const Gallery = ({ images, columns, ...rest }) =>
+const Gallery = ({ columns, images = [], ...rest }) =>
   <div className={styles.gallery} {...rest}>
     {columnize(images, columns).map((column, index) =>
       <div key={index} className={styles.column}>
@@ -34,9 +34,41 @@ Gallery.propTypes = {
   images: PropTypes.arrayOf(PropTypes.string)
 };
 
+class SearchBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { term: '' };
+    this.handleTermChange = this.handleTermChange.bind(this);
+    this.handleSearchClick = this.handleSearchClick.bind(this);
+  }
+
+  handleTermChange(e) {
+    e.preventDefault();
+    this.setState({ term: e.target.value });
+  }
+
+  handleSearchClick(e) {
+    e.preventDefault();
+    this.props.onSearch(this.state.term);
+  }
+
+  render() {
+    return (
+      <div>
+        <input value={this.state.term} onChange={this.handleTermChange} />
+        <button onClick={this.handleSearchClick}>Search!</button>
+      </div>
+    );
+  }
+}
+
+SearchBar.propTypes = {
+  onSearch: PropTypes.func
+};
+
 // eslint-disable-next-line react/no-multi-comp
-const Demo = ({ location }) => {
-  const demoRoutes = ['/cheese', '/cat', '/dog', '/hipster'];
+const Demo = ({ location, goToRoute }) => {
+  const demoRoutes = ['/cheese', '/cat', '/dog', '/hipster', '/search-param', '/search-query'];
   return (
     <div className={styles.container}>
       <Fragment forRoute="/" className={styles.container}>
@@ -64,6 +96,8 @@ const Demo = ({ location }) => {
             >
               My Design Skills
             </Link>
+            <Link href="/search-param">Search Param</Link>
+            <Link href="/search-query">Search Query</Link>
           </div>
 
           <div className={styles.panes}>
@@ -80,6 +114,20 @@ const Demo = ({ location }) => {
                 </div>
               </Fragment>
             )}
+
+            <Fragment forRoute="/search-param">
+              <div>
+                {location.params && location.params.term && (<p>{location.params.term}</p>)}
+                <SearchBar onSearch={(term) => goToRoute(`/search-param/${term}`)} />
+              </div>
+            </Fragment>
+
+            <Fragment forRoute="/search-query">
+              <div>
+                {location.query.term && (<p>Your query: {location.query.term}</p>)}
+                <SearchBar onSearch={(term) => goToRoute({ pathname: '/search-query', query: { term } })} />
+              </div>
+            </Fragment>
           </div>
 
           <Fragment forRoute="/">
@@ -103,10 +151,16 @@ const Demo = ({ location }) => {
 };
 
 Demo.propTypes = {
+  goToRoute: PropTypes.func,
   location: PropTypes.object
 };
 
 const mapStateToProps = state => ({
   location: state.router
 });
-export default connect(mapStateToProps)(Demo);
+
+const mapDispatchToProps = dispatch => ({
+  goToRoute: (route) => dispatch(push(route))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Demo);

demo/client/routes.js

@@ -122,5 +122,14 @@ export default {
     '/is': {
       '/nested': {}
     }
+  },
+  '/search-param': {
+    text: 'Type in the search bar and click enter to change the param',
+    '/:term': {
+      text: 'You search term param is here:'
+    }
+  },
+  '/search-query': {
+    text: 'Type in the search bar and click enter to change the query string'
   }
 };