From 1d6ada07f110ed8b49875e4195f0bbb32c1777c3 Mon Sep 17 00:00:00 2001
From: Stefan Huynh <huynh.stefan@gmail.com>
Date: Wed, 29 Nov 2017 12:32:39 -0800
Subject: [PATCH 1/2] Add param and query examples to demo

---
 demo/client/demo.js   | 58 +++++++++++++++++++++++++++++++++++++++----
 demo/client/routes.js |  9 +++++++
 2 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/demo/client/demo.js b/demo/client/demo.js
index 9b4b5b37..be0a67c9 100644
--- a/demo/client/demo.js
+++ b/demo/client/demo.js
@@ -3,7 +3,7 @@ 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,36 @@ Gallery.propTypes = {
   images: PropTypes.arrayOf(PropTypes.string)
 };
 
+class SearchBar extends React.Component {
+  state = { term: '' }
+
+  onTermChange = (e) => {
+    e.preventDefault();
+    this.setState({ term: e.target.value });
+  }
+
+  onSearchClick = (e) => {
+    e.preventDefault();
+    this.props.onSearch(this.state.term);
+  }
+
+  render() {
+    return (
+      <div>
+        <input value={this.state.term} onChange={this.onTermChange} />
+        <button onClick={this.onSearchClick}>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 +91,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 +109,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="/">
@@ -109,4 +152,9 @@ Demo.propTypes = {
 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);
diff --git a/demo/client/routes.js b/demo/client/routes.js
index 64682683..ccd97fae 100644
--- a/demo/client/routes.js
+++ b/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'
   }
 };

From b6c72cb2788456eee5176ceae14926e7d07ddf51 Mon Sep 17 00:00:00 2001
From: Stefan Huynh <huynh.stefan@gmail.com>
Date: Wed, 29 Nov 2017 14:34:36 -0800
Subject: [PATCH 2/2] Fix lint errors

---
 demo/client/demo.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/demo/client/demo.js b/demo/client/demo.js
index be0a67c9..a2ad94ea 100644
--- a/demo/client/demo.js
+++ b/demo/client/demo.js
@@ -1,4 +1,4 @@
-/* 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';
@@ -35,14 +35,19 @@ Gallery.propTypes = {
 };
 
 class SearchBar extends React.Component {
-  state = { term: '' }
+  constructor(props) {
+    super(props);
+    this.state = { term: '' };
+    this.handleTermChange = this.handleTermChange.bind(this);
+    this.handleSearchClick = this.handleSearchClick.bind(this);
+  }
 
-  onTermChange = (e) => {
+  handleTermChange(e) {
     e.preventDefault();
     this.setState({ term: e.target.value });
   }
 
-  onSearchClick = (e) => {
+  handleSearchClick(e) {
     e.preventDefault();
     this.props.onSearch(this.state.term);
   }
@@ -50,8 +55,8 @@ class SearchBar extends React.Component {
   render() {
     return (
       <div>
-        <input value={this.state.term} onChange={this.onTermChange} />
-        <button onClick={this.onSearchClick}>Search!</button>
+        <input value={this.state.term} onChange={this.handleTermChange} />
+        <button onClick={this.handleSearchClick}>Search!</button>
       </div>
     );
   }
@@ -146,6 +151,7 @@ const Demo = ({ location, goToRoute }) => {
 };
 
 Demo.propTypes = {
+  goToRoute: PropTypes.func,
   location: PropTypes.object
 };