2021-07-16 15:41:54 +02:00
|
|
|
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
|
|
|
|
import { Link, useLocation } from 'react-router-dom';
|
2021-08-13 10:57:46 +02:00
|
|
|
import usePermissions from '../../../hooks/usePermissions';
|
2021-07-16 15:41:54 +02:00
|
|
|
import ConditionallyRender from '../ConditionallyRender';
|
|
|
|
import { useStyles } from './BreadcrumbNav.styles';
|
|
|
|
|
|
|
|
const BreadcrumbNav = () => {
|
2021-08-13 10:57:46 +02:00
|
|
|
const { isAdmin } = usePermissions();
|
2021-07-16 15:41:54 +02:00
|
|
|
const styles = useStyles();
|
|
|
|
const location = useLocation();
|
|
|
|
|
|
|
|
const paths = location.pathname
|
|
|
|
.split('/')
|
|
|
|
.filter(item => item)
|
|
|
|
.filter(
|
|
|
|
item =>
|
|
|
|
item !== 'create' &&
|
|
|
|
item !== 'edit' &&
|
|
|
|
item !== 'view' &&
|
|
|
|
item !== 'variants' &&
|
|
|
|
item !== 'logs' &&
|
|
|
|
item !== 'metrics' &&
|
2021-08-25 13:37:22 +02:00
|
|
|
item !== 'copy' &&
|
|
|
|
item !== 'strategies' &&
|
2021-11-29 14:29:58 +01:00
|
|
|
item !== 'features' &&
|
2022-01-07 08:19:16 +01:00
|
|
|
item !== 'features2' &&
|
2022-01-10 13:04:49 +01:00
|
|
|
item !== 'create-toggle'
|
2021-07-16 15:41:54 +02:00
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ConditionallyRender
|
2021-08-13 10:57:46 +02:00
|
|
|
condition={
|
|
|
|
(location.pathname.includes('admin') && isAdmin()) ||
|
|
|
|
!location.pathname.includes('admin')
|
|
|
|
}
|
2021-07-16 15:41:54 +02:00
|
|
|
show={
|
2021-08-13 10:57:46 +02:00
|
|
|
<ConditionallyRender
|
|
|
|
condition={paths.length > 1}
|
|
|
|
show={
|
|
|
|
<Breadcrumbs className={styles.breadcrumbNav}>
|
|
|
|
{paths.map((path, index) => {
|
|
|
|
const lastItem = index === paths.length - 1;
|
|
|
|
if (lastItem) {
|
|
|
|
return (
|
|
|
|
<p
|
2021-08-19 13:54:28 +02:00
|
|
|
key={path}
|
2021-08-13 10:57:46 +02:00
|
|
|
className={
|
|
|
|
styles.breadcrumbNavParagraph
|
|
|
|
}
|
|
|
|
>
|
2021-11-29 14:03:52 +01:00
|
|
|
{path.substring(0, 30)}
|
2021-08-13 10:57:46 +02:00
|
|
|
</p>
|
|
|
|
);
|
|
|
|
}
|
2021-08-25 13:37:22 +02:00
|
|
|
|
|
|
|
let link = '/';
|
|
|
|
|
|
|
|
paths.forEach((path, i) => {
|
|
|
|
if (i !== index && i < index) {
|
|
|
|
link += path + '/';
|
|
|
|
} else if (i === index) {
|
|
|
|
link += path;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2021-08-13 10:57:46 +02:00
|
|
|
return (
|
|
|
|
<Link
|
2021-08-19 13:54:28 +02:00
|
|
|
key={path}
|
2021-08-13 10:57:46 +02:00
|
|
|
className={styles.breadcrumbLink}
|
2021-08-25 13:37:22 +02:00
|
|
|
to={link}
|
2021-08-13 10:57:46 +02:00
|
|
|
>
|
2021-11-29 14:03:52 +01:00
|
|
|
{path.substring(0, 30)}
|
2021-08-13 10:57:46 +02:00
|
|
|
</Link>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</Breadcrumbs>
|
|
|
|
}
|
|
|
|
/>
|
2021-07-16 15:41:54 +02:00
|
|
|
}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default BreadcrumbNav;
|