Remove the search from the redux-store

Let's use uncontrolled component, this will be much more simple to read
and understand
This commit is contained in:
Grégoire Delattre 2017-05-20 01:24:05 +02:00
parent 6c5d5e11fd
commit c42687ddd5
3 changed files with 9 additions and 18 deletions

View File

@ -1,7 +1,6 @@
import React from 'react'
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
import { Control, Form } from 'react-redux-form';
export default function NavBar(props) {
return (
@ -19,20 +18,14 @@ export default function NavBar(props) {
<WishlistDropdown username={props.userStore.username} />
<UserDropdown username={props.userStore.username} />
<Search
model="movieStore"
model="movieStore.search"
placeholder="Search movies"
router={props.router}
search={props.movieStore.search}
path='/movies/search'
pathMatch='movies'
/>
<Search
model="showStore"
model="showStore.search"
placeholder="Search shows"
router={props.router}
search={props.showStore.search}
path='/shows/search'
pathMatch='shows'
/>
@ -47,8 +40,9 @@ class Search extends React.Component {
super(props);
this.handleSearch = this.handleSearch.bind(this);
}
handleSearch() {
this.props.router.push(`${this.props.path}/${encodeURI(this.props.search)}`);
handleSearch(ev) {
ev.preventDefault();
this.props.router.push(`${this.props.path}/${encodeURI(this.input.value)}`);
}
isActive() {
const location = this.props.router.getCurrentLocation().pathname;
@ -60,16 +54,15 @@ class Search extends React.Component {
}
return(
<Navbar.Form pullRight>
<Form model={this.props.model} className="input-group" onSubmit={this.handleSearch}>
<Control.text
model={this.props.model}
<div className="navbar-form navbar-right">
<form className="input-group" onSubmit={(ev) => this.handleSearch(ev)}>
<input
className="form-control"
placeholder={this.props.placeholder}
updateOn="change"
ref={(input) => this.input = input}
/>
</Form>
</Navbar.Form>
</form>
</div>
);
}
}

View File

@ -7,7 +7,6 @@ const defaultState = {
fetchingDetails: false,
lastFetchUrl: "",
exploreOptions: {},
search: "",
};
export default function movieStore(state = defaultState, action) {

View File

@ -7,7 +7,6 @@ const defaultState = {
show: {
seasons: [],
},
search: "",
getDetails: false,
lastShowsFetchUrl: "",
exploreOptions: {},