111 lines
2.7 KiB
JavaScript
111 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Collapse,
|
|
Navbar,
|
|
NavbarToggler,
|
|
NavbarBrand,
|
|
Nav,
|
|
NavItem,
|
|
NavLink,
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
Input,
|
|
Button,
|
|
UncontrolledDropdown,
|
|
DropdownToggle,
|
|
DropdownMenu,
|
|
DropdownItem,
|
|
Badge
|
|
} from 'reactstrap';
|
|
import {
|
|
FaSearch
|
|
} from 'react-icons/fa';
|
|
import Api from './Api';
|
|
import {
|
|
NotificationContainer,
|
|
NotificationManager
|
|
} from 'react-notifications';
|
|
import strToSlug from '../StrToSlug';
|
|
|
|
import '../css/Header.css'
|
|
|
|
export default class Header extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.toggle = this.toggle.bind(this);
|
|
this.getVegetablesTypes = this.getVegetablesTypes.bind(this);
|
|
|
|
this.state = {
|
|
isOpen: false,
|
|
types: []
|
|
};
|
|
|
|
this.getVegetablesTypes();
|
|
}
|
|
|
|
toggle() {
|
|
this.setState({
|
|
isOpen: !this.state.isOpen
|
|
});
|
|
}
|
|
|
|
getVegetablesTypes() {
|
|
Api.get('types')
|
|
.then(res => {
|
|
this.setState({
|
|
types: res.data.rows
|
|
});
|
|
})
|
|
.catch(() => {
|
|
NotificationManager.error('Erreur lors de la récupération des catégories');
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<NotificationContainer />
|
|
<Navbar color="light" light fixed="top" expand="md">
|
|
<NavbarBrand href="/"><img src="/logo.png" alt="RodiVert" /></NavbarBrand>
|
|
<NavbarToggler onClick={this.toggle} />
|
|
<Collapse isOpen={this.state.isOpen} navbar>
|
|
<Nav className="ml-auto" navbar>
|
|
<NavItem>
|
|
<NavLink href="/carte">Carte</NavLink>
|
|
</NavItem>
|
|
<UncontrolledDropdown nav inNavbar>
|
|
<DropdownToggle nav caret>
|
|
Les végétaux
|
|
</DropdownToggle>
|
|
<DropdownMenu right>
|
|
{
|
|
this.state.types.map((type, key) =>
|
|
(<DropdownItem key={key}>
|
|
|
|
<NavLink href={`/vegetaux/${type.id}-${strToSlug(type.name)}`}>
|
|
<span className="text">{type.name}</span> <Badge pill>{type.Vegetables.length}</Badge>
|
|
</NavLink>
|
|
|
|
</DropdownItem>)
|
|
)
|
|
}
|
|
</DropdownMenu>
|
|
</UncontrolledDropdown>
|
|
<NavItem>
|
|
<InputGroup>
|
|
<Input placeholder="rechercher..." type="text" />
|
|
<InputGroupAddon addonType="append">
|
|
<Button color="primary">
|
|
<FaSearch />
|
|
</Button>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</NavItem>
|
|
</Nav>
|
|
</Collapse>
|
|
</Navbar>
|
|
</div>
|
|
);
|
|
}
|
|
} |