diff options
author | 2018-07-18 13:24:00 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | ab09cb3b3aed7105570c387d9c4ff18e7f5c544c (patch) | |
tree | 016781d623804e04ba79a1ba21ffe0d8c596fee3 | |
parent | d0053977cd080814747a221a5531fe6a726c2834 (diff) |
SearchBox now works
-rw-r--r-- | vnext/src/App.js | 13 | ||||
-rw-r--r-- | vnext/src/components/SearchBox.js | 12 |
2 files changed, 16 insertions, 9 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index aa159f14..81862d4f 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -96,8 +96,11 @@ export default class App extends React.Component { me().then(visitor => this.auth(visitor)); } } - search = (searchString) => { - console.log(searchString); + search = (history, pathname, searchString) => { + let location = {}; + location.pathname = pathname; + location.search = `?search=${searchString}`; + history.push(location); } render() { const user = this.state.visitor; @@ -114,7 +117,7 @@ export default class App extends React.Component { <div id="logo"><Link to="/">Juick</Link></div> } <div id="search"> - <SearchBox onSearch={this.search} /> + <SearchBox pathname="/" onSearch={this.search} {...this.props} /> </div> <nav id="global"> <ul> @@ -196,9 +199,7 @@ export default class App extends React.Component { </li> </ul> <hr /> - <form> - <p><input type="text" name="search" className="inp" placeholder="Search..." /></p> - </form> + <SearchBox pathname={`/${user.uname}/`} onSearch={this.search} {...this.props} /> <hr /> <div id="ustats"> <ul> diff --git a/vnext/src/components/SearchBox.js b/vnext/src/components/SearchBox.js index e64c8be4..314b89fb 100644 --- a/vnext/src/components/SearchBox.js +++ b/vnext/src/components/SearchBox.js @@ -1,7 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; +import ReactRouterPropTypes from 'react-router-prop-types'; +import { withRouter } from 'react-router-dom'; -export default class SearchBox extends React.Component { +class SearchBox extends React.Component { constructor(props) { super(props); this.state = { @@ -14,8 +16,9 @@ export default class SearchBox extends React.Component { }); } onSubmit = (event) => { + const { history, pathname } = this.props; event.preventDefault(); - this.props.onSearch(this.state.search); + this.props.onSearch(history, pathname, this.state.search); this.setState({ search: '' }); @@ -29,5 +32,8 @@ export default class SearchBox extends React.Component { } SearchBox.propTypes = { - onSearch: PropTypes.func.isRequired + pathname: PropTypes.string.isRequired, + onSearch: PropTypes.func.isRequired, + history: ReactRouterPropTypes.history.isRequired }; +export default withRouter(SearchBox); |