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:
parent
6c5d5e11fd
commit
c42687ddd5
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -7,7 +7,6 @@ const defaultState = {
|
||||
fetchingDetails: false,
|
||||
lastFetchUrl: "",
|
||||
exploreOptions: {},
|
||||
search: "",
|
||||
};
|
||||
|
||||
export default function movieStore(state = defaultState, action) {
|
||||
|
@ -7,7 +7,6 @@ const defaultState = {
|
||||
show: {
|
||||
seasons: [],
|
||||
},
|
||||
search: "",
|
||||
getDetails: false,
|
||||
lastShowsFetchUrl: "",
|
||||
exploreOptions: {},
|
||||
|
Loading…
x
Reference in New Issue
Block a user