Commit 1b1a4cf4 authored by DESKTOP-J7QTMBR\mikke's avatar DESKTOP-J7QTMBR\mikke
Browse files

wip endringer for page count

parent 3bb6dbdf
......@@ -7,8 +7,15 @@ module.exports = {
let kontinent = String(args.continent_contains || "")
let search = String(args.search || "")
sortOrder = {};
if(args.order !== null){
sortOrder = { capital: (args.order === "ASC" ? 1 : -1)};
if(args.sortBy !== null){
switch(args.sortBy){
case("name"):
sortOrder = { name: (args.order === "ASC" ? 1 : -1)};
break;
case("capital"):
sortOrder = { capital: (args.order === "ASC" ? 1 : -1)};
break;
}
}
let start = parseInt(args.start || 0);
let limit = parseInt(args.limit || -1);
......@@ -32,18 +39,9 @@ module.exports = {
try {
let kontinent = String(args.continent_contains || "")
let search = String(args.search || "")
sortOrder = {};
if(args.order !== null){
sortOrder = { capital: (args.order === "ASC" ? 1 : -1)};
}
let start = parseInt(args.start || 0);
let limit = parseInt(args.limit || -1);
const countryFetched = await Country.find({
continent: {$regex: kontinent, '$options' : 'i'},
name: {$regex: search, '$options' : 'i'}})
.limit(limit === -1 ? '$count' : limit)
.skip(start)
.sort(sortOrder);
name: {$regex: search, '$options' : 'i'}});
return countryFetched.length;
} catch (error) {
throw error;
......
......@@ -19,8 +19,8 @@ module.exports = buildSchema(`
capital: String!
}
type Query {
country(continent_contains: String, start: Int, limit: Int, order: String, search: String): [Country!]
TotalCountires(continent_contains: String, start: Int, limit: Int, order: String, search: String): Int
country(continent_contains: [String], start: Int, limit: Int, order: String, sortBy: String, search: String): [Country!]
TotalCountires(continent_contains: [String], start: Int, limit: Int, order: String, sortBy: String, search: String): Int
}
input NameOrder {
nameOrder: String
......
......@@ -3,6 +3,8 @@ import { Header } from './header/Header';
import "./Layout.css"
import { Searchbar } from './searchbar/searchbar';
import { Filter } from './searchbar/Filter';
import { filterStore } from '../utils/filterStore';
import { Provider } from 'react-redux';
interface IProps {
title: string
......@@ -13,15 +15,16 @@ const Layout: React.FC<IProps> = ({
}) => {
return (
<div className="Layout">
<Provider store={filterStore}>
<React.Fragment >
<Header>
<Searchbar/>
<Filter/>
</Header>
<div className="Layout__Content">
<main>{children}</main>
</div>
</React.Fragment>
</Provider>
</div>
);
};
......
import React, { FunctionComponent, useState } from 'react';
import { Form } from 'react-bootstrap';
import { Button, ButtonGroup, Form } from 'react-bootstrap';
import { searchbarStore } from './SearchbarStore';
//import './CountryCard.css';
export const ContinentCheckbox: FunctionComponent = ({
interface Iprops{
handleClick: (value: string) => void
}
export const ContinentCheckbox: FunctionComponent<Iprops> = ({ handleClick
}) => {
//interface iLand {name: string; checked: boolean;}
//const land: iLand[] = [{"Asia",true},{ "EU",true}, {"Amerika",true}]
const [checkedAsia, setCheckedAsia] = useState(false)
const [checkedAfrika, setCheckedAfrika] = useState(false)
const [checkedEuropa, setCheckedEuropa] = useState(false)
const [checkedNordAmerika, setCheckedNordAmerika] = useState(false)
const [checkedSorAmerika, setCheckedSorAmerika] = useState(false)
const [checkedOseania, setCheckedOseania] = useState(false)
const handleClick = () => {
let countrylist:string[] =[]
//send call
if (checkedAsia){
countrylist.push("asia")
}
//getFilter('{country(continent:'+ countrylist+'){name, native, continent, capital, currency, languages}}')
}
//lage usestate for asia og endrer seg.
//endre state
//
//
return <>
<div className="ContinentCheckbox"></div>
<Form.Check type="checkbox" label="Asia" id="Asia" onClick={() => {setCheckedAsia(!checkedAsia);handleClick();}} />
<Form.Check type="checkbox" label="Europa" onClick={() => {setCheckedEuropa(!checkedEuropa); handleClick()}} />
<Form.Check type="checkbox" label="Afrika" onClick={() => {setCheckedAfrika(!checkedAfrika);handleClick()}} />
<Form.Check type="checkbox" label="Sør-Amerika" onClick={() =>{setCheckedSorAmerika(!checkedSorAmerika); handleClick()}} />
<Form.Check type="checkbox" label="Nord-Amerika" onClick={() =>{setCheckedNordAmerika(!checkedNordAmerika); handleClick()}} />
<Form.Check type="checkbox" label="Oseania" onClick={() =>{setCheckedOseania(!checkedOseania); handleClick()}} />
<ButtonGroup aria-label="Basic example">
<Button variant="secondary" onClick={() => {handleClick("AS")}}>Asia</Button>
<Button variant="secondary" onClick={() => {handleClick("EU")}}>Europa</Button>
<Button variant="secondary" onClick={() => {handleClick("AF")}}>Afrika</Button>
<Button variant="secondary" onClick={() =>{handleClick("SA")}}>Sør-Amerika</Button>
<Button variant="secondary" onClick={() =>{handleClick("NA")}}>Nord-Amerika</Button>
<Button variant="secondary" onClick={() =>{handleClick("OC")}}>Oseania</Button>
</ButtonGroup>
</>
}
......
......@@ -4,23 +4,28 @@ import { Button, Form } from 'react-bootstrap';
import { ContinentCheckbox } from './ContinentCheckbox';
import './Filter.css';
import './ContinentCheckbox.css'
import { filterStore } from '../../utils/filterStore';
type IProps = {}
export const Filter: FunctionComponent<IProps> = () => {
type IProps = {
onButtonClick: (value: string[]) => void
filterClick: (value: string) => void
}
export const Filter: FunctionComponent<IProps> = ({onButtonClick, filterClick}) => {
const [hidden, setHidden] = useState(true);
const filterOptions = <>
<div className={"Sorting"}>
<Button variant="secondary">Name</Button>
<Button variant="secondary">Official languages</Button>
<Button variant="secondary">Option 3</Button>
<Button variant="secondary"
onClick={()=> onButtonClick(["name", "ASC"])}>Name abc</Button>
<Button variant="secondary"
onClick={()=> onButtonClick(["name", "DESC"])}>Name cba</Button>
<Button variant="secondary"
onClick={()=> onButtonClick(["capital", "ASC"])}>Capital abc</Button>
<Button variant="secondary"
onClick={()=> onButtonClick(["capital", "DESC"])}>Capital cba</Button>
</div>
<div className={"ContinentCheckbox"}>
<ContinentCheckbox/>
<ContinentCheckbox handleClick={filterClick}/>
</div>
</>;
......
......@@ -3,6 +3,9 @@ import React from 'react';
import './SearchbarStore.tsx'
import { searchbarStore } from './SearchbarStore';
import { getAllData, getNumberOfResults } from '../../utils/APIUtil';
import { store } from '../display/Store';
import { connect } from 'react-redux';
import { Filter } from './Filter';
const PAGE_LIMIT: number = 20;
interface IProps {
......@@ -11,25 +14,32 @@ interface IState {
active: boolean,
search_text: string,
page_number: number,
total_items: number
total_items: number,
filter_order: string[],
continent_filter: string
}
export class Searchbar extends React.Component<IProps, IState> {
constructor(props: IState) {
super(props);
super(props);
this.state = {
active: false,
search_text: "",
page_number: 0,
total_items: 0
total_items: 0,
filter_order: [],
continent_filter: ""
};
}
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) => {
......@@ -37,9 +47,14 @@ export class Searchbar extends React.Component<IProps, IState> {
})
}
onSearch() {
store.dispatch({ type: 'setState', newValue: -1 });
this.setState({page_number: 0})
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 += `continent_contains: "${this.state.continent_filter}", `;
filter += `search: "${this.state.search_text}"`;
filter += ")";
getAllData(filter).then((data) => {
......@@ -50,6 +65,7 @@ export class Searchbar extends React.Component<IProps, IState> {
})
}
componentDidMount(){
getAllData(`(start: ${this.state.page_number*PAGE_LIMIT}, limit: ${PAGE_LIMIT})`).then((data) => {
searchbarStore.dispatch({ type: 'setState', NewCountry: data });
......@@ -75,6 +91,8 @@ export class Searchbar extends React.Component<IProps, IState> {
<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();}}/>
</>)
}
}
......@@ -25,6 +25,5 @@ function numberOfResults(query: string): Promise<number> {
});
}
export function getNumberOfResults(filter: string=""): Promise<number> {
let order: string = ' (or '
return numberOfResults('{TotalCountires'+filter+"}");
}
\ No newline at end of file
import { createStore } from 'redux'
export interface filterOptions{
search: string,
start: number,
limit: number,
continent: string,
order: string
}//search: "", start: 0, limit: 0, continent: "", order: ""
const initState: filterOptions = {
search: '',
start: 0,
limit: 0,
continent: '',
order: ''
};
function filterOptions(state = { value: initState }, action: { type: string, newValue: any }) {
switch (action.type) {
case 'search':
return { value: state.value.search = action.newValue }
case 'start':
return { value: state.value.start = action.newValue }
case 'limit':
return { value: state.value.limit = action.newValue }
case 'continent':
return { value: state.value.continent = action.newValue }
case 'order':
return { value: state.value.order = action.newValue }
default:
return state
}
}
export let filterStore = createStore(filterOptions)
Markdown is supported
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