diff --git a/demo/client/demo.js b/demo/client/demo.js index 9b4b5b37..a2ad94ea 100644 --- a/demo/client/demo.js +++ b/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 }) =>
{columnize(images, columns).map((column, index) =>
@@ -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 ( +
+ + +
+ ); + } +} + +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 (
@@ -64,6 +96,8 @@ const Demo = ({ location }) => { > My Design Skills + Search Param + Search Query
@@ -80,6 +114,20 @@ const Demo = ({ location }) => {
)} + + +
+ {location.params && location.params.term && (

{location.params.term}

)} + goToRoute(`/search-param/${term}`)} /> +
+
+ + +
+ {location.query.term && (

Your query: {location.query.term}

)} + goToRoute({ pathname: '/search-query', query: { term } })} /> +
+
@@ -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); 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' } };