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 React from 'react'
|
||||||
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
|
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
|
||||||
import { LinkContainer } from 'react-router-bootstrap'
|
import { LinkContainer } from 'react-router-bootstrap'
|
||||||
import { Control, Form } from 'react-redux-form';
|
|
||||||
|
|
||||||
export default function NavBar(props) {
|
export default function NavBar(props) {
|
||||||
return (
|
return (
|
||||||
@ -19,20 +18,14 @@ export default function NavBar(props) {
|
|||||||
<WishlistDropdown username={props.userStore.username} />
|
<WishlistDropdown username={props.userStore.username} />
|
||||||
<UserDropdown username={props.userStore.username} />
|
<UserDropdown username={props.userStore.username} />
|
||||||
<Search
|
<Search
|
||||||
model="movieStore"
|
|
||||||
model="movieStore.search"
|
|
||||||
placeholder="Search movies"
|
placeholder="Search movies"
|
||||||
router={props.router}
|
router={props.router}
|
||||||
search={props.movieStore.search}
|
|
||||||
path='/movies/search'
|
path='/movies/search'
|
||||||
pathMatch='movies'
|
pathMatch='movies'
|
||||||
/>
|
/>
|
||||||
<Search
|
<Search
|
||||||
model="showStore"
|
|
||||||
model="showStore.search"
|
|
||||||
placeholder="Search shows"
|
placeholder="Search shows"
|
||||||
router={props.router}
|
router={props.router}
|
||||||
search={props.showStore.search}
|
|
||||||
path='/shows/search'
|
path='/shows/search'
|
||||||
pathMatch='shows'
|
pathMatch='shows'
|
||||||
/>
|
/>
|
||||||
@ -47,8 +40,9 @@ class Search extends React.Component {
|
|||||||
super(props);
|
super(props);
|
||||||
this.handleSearch = this.handleSearch.bind(this);
|
this.handleSearch = this.handleSearch.bind(this);
|
||||||
}
|
}
|
||||||
handleSearch() {
|
handleSearch(ev) {
|
||||||
this.props.router.push(`${this.props.path}/${encodeURI(this.props.search)}`);
|
ev.preventDefault();
|
||||||
|
this.props.router.push(`${this.props.path}/${encodeURI(this.input.value)}`);
|
||||||
}
|
}
|
||||||
isActive() {
|
isActive() {
|
||||||
const location = this.props.router.getCurrentLocation().pathname;
|
const location = this.props.router.getCurrentLocation().pathname;
|
||||||
@ -60,16 +54,15 @@ class Search extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<Navbar.Form pullRight>
|
<div className="navbar-form navbar-right">
|
||||||
<Form model={this.props.model} className="input-group" onSubmit={this.handleSearch}>
|
<form className="input-group" onSubmit={(ev) => this.handleSearch(ev)}>
|
||||||
<Control.text
|
<input
|
||||||
model={this.props.model}
|
|
||||||
className="form-control"
|
className="form-control"
|
||||||
placeholder={this.props.placeholder}
|
placeholder={this.props.placeholder}
|
||||||
updateOn="change"
|
ref={(input) => this.input = input}
|
||||||
/>
|
/>
|
||||||
</Form>
|
</form>
|
||||||
</Navbar.Form>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,6 @@ const defaultState = {
|
|||||||
fetchingDetails: false,
|
fetchingDetails: false,
|
||||||
lastFetchUrl: "",
|
lastFetchUrl: "",
|
||||||
exploreOptions: {},
|
exploreOptions: {},
|
||||||
search: "",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function movieStore(state = defaultState, action) {
|
export default function movieStore(state = defaultState, action) {
|
||||||
|
@ -7,7 +7,6 @@ const defaultState = {
|
|||||||
show: {
|
show: {
|
||||||
seasons: [],
|
seasons: [],
|
||||||
},
|
},
|
||||||
search: "",
|
|
||||||
getDetails: false,
|
getDetails: false,
|
||||||
lastShowsFetchUrl: "",
|
lastShowsFetchUrl: "",
|
||||||
exploreOptions: {},
|
exploreOptions: {},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user