bo/src/Header.js
2018-09-09 12:06:10 +02:00

78 lines
1.9 KiB
JavaScript

import React from 'react';
import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
import { Link } from 'react-router-dom';
import API from './Api';
class Header extends React.Component {
constructor(props) {
super(props);
const Breadcrumb = [];
if (API.defaults.headers.common.Authorization !== undefined) {
Breadcrumb.push({
name: 'Catégories',
path: '/categories',
active: !this.props.categoryId,
});
if (this.props.categoryId) {
Breadcrumb.push({
name: this.props.categoryId,
path: `/categories/${this.props.categoryId}`,
active: !this.props.vegetableId,
});
if (this.props.vegetableId) {
Breadcrumb.push({
name: this.props.vegetableId,
path: `/categories/${this.props.categoryId}/vegetal/${this.props.vegetableId}`,
active: true,
});
}
}
}
this.state = {
Breadcrumb,
};
}
componentWillReceiveProps(props) {
if (props.categoryName) {
const Breadcrumb = this.state.Breadcrumb;
Breadcrumb[1].name = props.categoryName;
this.setState({ Breadcrumb });
}
if (props.vegetableName) {
const Breadcrumb = this.state.Breadcrumb;
Breadcrumb[2].name = props.vegetableName;
this.setState({ Breadcrumb });
}
}
render() {
return (
<div>
<Breadcrumb>
{ this.state.Breadcrumb.map((item, key) => (
item.active === true
? (
<BreadcrumbItem key={key} active>
{item.name}
</BreadcrumbItem>
)
: (
<BreadcrumbItem key={key}>
<Link to={item.path}>{item.name}</Link>
</BreadcrumbItem>
)
))}
</Breadcrumb>
</div>
);
}
}
export default Header;