Added fullsearch

This commit is contained in:
dbroqua 2019-03-16 22:10:41 +01:00
parent 8c3ad7091b
commit 51fa7f013f
11 changed files with 10361 additions and 14949 deletions

1
.env Normal file
View file

@ -0,0 +1 @@
SKIP_PREFLIGHT_CHECK=true

14938
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -5,6 +5,7 @@
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"history": "^4.7.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-icons": "^3.2.2",

View file

@ -5,6 +5,7 @@ import {
Switch,
} from 'react-router-dom';
import Map from '../Routes/Map';
import Search from '../Routes/Search';
import Home from '../Routes/Home';
import Vegetables from '../Routes/Vegetables';
import Vegetable from '../Routes/Vegetable';
@ -42,6 +43,11 @@ class App extends Component {
path="/carte"
render={(props) => <Map {...props} changeBackground={this.changeBackground} />}
/>
<Route
exact
path="/recherche/:query"
render={(props) => <Search {...props} changeBackground={this.changeBackground} />}
/>
<Route
exact
path="/vegetaux/:typeId-:typeSlug"

View file

@ -26,19 +26,25 @@ import {
} from 'react-notifications';
import Api from './Api';
import strToSlug from '../StrToSlug';
import { createBrowserHistory } from 'history';
import '../css/Header.css';
const history = createBrowserHistory();
export default class Header extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.getVegetablesTypes = this.getVegetablesTypes.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
isOpen: false,
types: [],
search: '',
};
this.getVegetablesTypes();
@ -62,7 +68,22 @@ export default class Header extends React.Component {
});
}
handleChange(event) {
this.setState({ search: event.target.value });
}
handleSubmit(event) {
const {
search
} = this.state;
history.push(`/recherche/${search}`);
}
render() {
const {
search,
} = this.state;
return (
<div>
<NotificationContainer />
@ -95,14 +116,21 @@ export default class Header extends React.Component {
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<form onSubmit={this.handleSubmit}>
<InputGroup>
<Input placeholder="rechercher..." type="text" />
<Input
placeholder="rechercher..."
type="text"
value={search}
onChange={this.handleChange}
/>
<InputGroupAddon addonType="append">
<Button color="primary">
<FaSearch />
</Button>
</InputGroupAddon>
</InputGroup>
</form>
</NavItem>
</Nav>
</Collapse>

View file

@ -26,7 +26,6 @@ export default class Map extends React.Component {
render() {
return (
<div className="with-margin">
<div className=" with-border with-background">
<ListGroup className="vegetables--types--group">

View file

@ -13,7 +13,8 @@ export default class RouterHome extends React.Component {
return (
<Container>
<Row>
<Row className="with-margin">
{/* <Row className="mainContainer"> */}
<Col xs="12" className=" with-border with-background">
<img src="/logo.png" className="logo float-left" alt="RodiVert" />
<p>

87
src/Routes/Search.js Normal file
View file

@ -0,0 +1,87 @@
import React from 'react';
import {
Container,
Row,
Col,
} from 'reactstrap';
import {
NotificationContainer,
NotificationManager,
} from 'react-notifications';
import Api from '../Components/Api';
import MapItem from '../Components/Map';
import Vegetables from '../Components/Vegetables';
export default class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
query: props.match.params.query || null,
vegetables: [],
selectedType: {},
selectedVegetable: {},
};
this.getVegetables = this.getVegetables.bind(this);
this.selectVegetable = this.selectVegetable.bind(this);
this.getVegetables();
this.props.changeBackground('map');
}
getVegetables() {
const {
query,
} = this.state;
Api.get(`search/vegetables/?q=${query}`)
.then((res) => {
this.setState({
selectedType: {
Vegetables: res.data.rows,
},
vegetables: res.data.rows,
});
})
.catch(() => {
NotificationManager.error('Erreur lors de la récupération des catégories');
});
}
selectVegetable(vegetable) {
this.setState({
selectedVegetable: vegetable,
});
}
render() {
console.log('this.state.query:', this.state.query);
return (
<Container>
<NotificationContainer />
<Row>
<Col xs="12" sm="8">
<MapItem
selectedType={this.state.selectedType}
selectedVegetable={this.state.selectedVegetable}
selectVegetable={this.selectVegetable}
/>
</Col>
<Col xs="12" sm="4">
<Row>
<Col xs="6" sm="12">
<Vegetables
selectedType={this.state.selectedType}
selectedVegetable={this.state.selectedVegetable}
selectVegetable={this.selectVegetable}
/>
</Col>
</Row>
</Col>
</Row>
</Container>
);
}
}

View file

@ -1,3 +1,7 @@
.logo {
margin: 0 16px 16px 0;
}
.mainContainer {
margin: 16px 8px !important;
}

10223
yarn.lock Normal file

File diff suppressed because it is too large Load diff