Commit 0aece59f authored by DESKTOP-J7QTMBR\mikke's avatar DESKTOP-J7QTMBR\mikke
Browse files

working sorting and filter

parent 1b1a4cf4
...@@ -14,9 +14,9 @@ interface IState { ...@@ -14,9 +14,9 @@ interface IState {
active: boolean, active: boolean,
search_text: string, search_text: string,
page_number: number, page_number: number,
total_items: number,
filter_order: string[], filter_order: string[],
continent_filter: string continent_filter: string,
totalItems: number
} }
export class Searchbar extends React.Component<IProps, IState> { export class Searchbar extends React.Component<IProps, IState> {
...@@ -26,52 +26,52 @@ export class Searchbar extends React.Component<IProps, IState> { ...@@ -26,52 +26,52 @@ export class Searchbar extends React.Component<IProps, IState> {
active: false, active: false,
search_text: "", search_text: "",
page_number: 0, page_number: 0,
total_items: 0,
filter_order: [], filter_order: [],
continent_filter: "" continent_filter: "",
totalItems: 0
}; };
} }
gotoPage(page: number){ createFilter(): string{
store.dispatch({ type: 'setState', newValue: -1 });
if(page === this.state.page_number){
return;
}
this.setState({page_number: page})
let filter: string = "(";
filter+=`start: ${page*PAGE_LIMIT}, limit: ${PAGE_LIMIT}, `
filter += `continent_contains: "${this.state.continent_filter}", `;
filter += `search: "${this.state.search_text}"`;
filter += ")";
getAllData(filter).then((data) => {
searchbarStore.dispatch({ type: 'setState', NewCountry: data });
})
}
onSearch() {
store.dispatch({ type: 'setState', newValue: -1 });
this.setState({page_number: 0})
let filter: string = "("; let filter: string = "(";
if(this.state.filter_order[0] !== ""){ if(this.state.filter_order[0] !== ""){
filter+=`sortBy: "${this.state.filter_order[0]}", order: "${this.state.filter_order[1]}",` filter+=`sortBy: "${this.state.filter_order[0]}", order: "${this.state.filter_order[1]}",`
} }
filter+=`start: ${0}, limit: ${PAGE_LIMIT}, ` filter+=`start: ${this.state.page_number*PAGE_LIMIT}, limit: ${PAGE_LIMIT}, `
filter += `continent_contains: "${this.state.continent_filter}", `; filter += `continent_contains: "${this.state.continent_filter}", `;
filter += `search: "${this.state.search_text}"`; filter += `search: "${this.state.search_text}"`;
filter += ")"; filter += ")";
getAllData(filter).then((data) => { return filter;
}
sendNewCall(){
getAllData(this.createFilter()).then((data) => {
searchbarStore.dispatch({ type: 'setState', NewCountry: data }); searchbarStore.dispatch({ type: 'setState', NewCountry: data });
}) })
getNumberOfResults(`(search: "${this.state.search_text}")`).then((data) => { }
this.setState({total_items: data}) gotoPage(page: number){
}) if(page === this.state.page_number){
return;
}
store.dispatch({ type: 'setState', newValue: -1 });
this.setState({page_number: page})
}
onSearch() {
store.dispatch({ type: 'setState', newValue: -1 });
this.setState({page_number: 0})
} }
componentDidUpdate(nextProps: any, nextState: any) {
getNumberOfResults(this.createFilter()).then((data) => {
this.setState({totalItems: data})
})
this.sendNewCall()
}
componentDidMount(){ componentDidMount(){
getAllData(`(start: ${this.state.page_number*PAGE_LIMIT}, limit: ${PAGE_LIMIT})`).then((data) => { getAllData(`(start: ${this.state.page_number*PAGE_LIMIT}, limit: ${PAGE_LIMIT})`).then((data) => {
searchbarStore.dispatch({ type: 'setState', NewCountry: data }); searchbarStore.dispatch({ type: 'setState', NewCountry: data });
}) })
getNumberOfResults().then((data) => { getNumberOfResults().then((data) => {
this.setState({total_items: data}) this.setState({totalItems: data})
}) })
} }
render() { render() {
...@@ -79,7 +79,7 @@ export class Searchbar extends React.Component<IProps, IState> { ...@@ -79,7 +79,7 @@ export class Searchbar extends React.Component<IProps, IState> {
<> <>
<div className="searchbar"> <div className="searchbar">
<input type="text" className="form-control" placeholder="Enter Country" onInput={(e)=>{this.setState({search_text: e.currentTarget.value})}}/> <input type="text" className="form-control" placeholder="Enter Country" onInput={(e)=>{this.setState({search_text: e.currentTarget.value});this.setState({page_number: 0});}}/>
<div className="input-group-append"> <div className="input-group-append">
<button id="search_button" onClick={() => this.onSearch()} <button id="search_button" onClick={() => this.onSearch()}
className="btn btn-outline-secondary" type="button"> Search</button> className="btn btn-outline-secondary" type="button"> Search</button>
...@@ -87,12 +87,12 @@ export class Searchbar extends React.Component<IProps, IState> { ...@@ -87,12 +87,12 @@ export class Searchbar extends React.Component<IProps, IState> {
{this.state.active } {this.state.active }
</div> </div>
<div className={"page_counter"}> <div className={"page_counter"}>
{[...Array(Math.ceil(this.state.total_items/PAGE_LIMIT))].map((e, i) => {[...Array(Math.ceil(this.state.totalItems/PAGE_LIMIT))].map((e, i) =>
<button key={i} className="btn btn-outline-secondary" <button key={i} className="btn btn-outline-secondary"
onClick={()=> this.gotoPage(i)}>{i+1}</button>)} onClick={()=> this.gotoPage(i)}>{i+1}</button>)}
</div> </div>
<Filter onButtonClick={(new_value: string[]) => {this.setState({filter_order: new_value}); this.onSearch();}} <Filter onButtonClick={(new_value: string[]) => {this.setState({filter_order: new_value});this.setState({page_number: 0});}}
filterClick={(newValue: string) => {this.setState({continent_filter: newValue}); this.onSearch();}}/> filterClick={(newValue: string) => {this.setState({continent_filter: newValue});this.setState({page_number: 0});}}/>
</>) </>)
} }
} }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment