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": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"bootstrap": "^4.1.3", "bootstrap": "^4.1.3",
"history": "^4.7.2",
"react": "^16.6.1", "react": "^16.6.1",
"react-dom": "^16.6.1", "react-dom": "^16.6.1",
"react-icons": "^3.2.2", "react-icons": "^3.2.2",

View file

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

View file

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

View file

@ -88,7 +88,7 @@ export default class Map extends React.Component {
render() { render() {
return ( return (
<Row className="with-margin "> <Row className="with-margin">
<Col className="with-border with-background"> <Col className="with-border with-background">
<div id="MapContainer"> <div id="MapContainer">
<div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}> <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>

View file

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

View file

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