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 {
active: boolean,
search_text: string,
page_number: number,
total_items: number,
filter_order: string[],
continent_filter: string
continent_filter: string,
totalItems: number
}
export class Searchbar extends React.Component<IProps, IState> {
......@@ -26,52 +26,52 @@ export class Searchbar extends React.Component<IProps, IState> {
active: false,
search_text: "",
page_number: 0,
total_items: 0,
filter_order: [],
continent_filter: ""
continent_filter: "",
totalItems: 0
};
}
gotoPage(page: number){
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})
createFilter(): string{
let filter: string = "(";
if(this.state.filter_order[0] !== ""){
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 += `search: "${this.state.search_text}"`;
filter += ")";
getAllData(filter).then((data) => {
return filter;
}
sendNewCall(){
getAllData(this.createFilter()).then((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(){
getAllData(`(start: ${this.state.page_number*PAGE_LIMIT}, limit: ${PAGE_LIMIT})`).then((data) => {
searchbarStore.dispatch({ type: 'setState', NewCountry: data });
})
getNumberOfResults().then((data) => {
this.setState({total_items: data})
this.setState({totalItems: data})
})
}
render() {
......@@ -79,7 +79,7 @@ export class Searchbar extends React.Component<IProps, IState> {
<>
<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">
<button id="search_button" onClick={() => this.onSearch()}
className="btn btn-outline-secondary" type="button"> Search</button>
......@@ -87,12 +87,12 @@ export class Searchbar extends React.Component<IProps, IState> {
{this.state.active }
</div>
<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"
onClick={()=> this.gotoPage(i)}>{i+1}</button>)}
</div>
<Filter onButtonClick={(new_value: string[]) => {this.setState({filter_order: new_value}); this.onSearch();}}
filterClick={(newValue: string) => {this.setState({continent_filter: newValue}); 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.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