-
Notifications
You must be signed in to change notification settings - Fork 285
/
ContentDetails.js
66 lines (60 loc) · 2.28 KB
/
ContentDetails.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useParams } from 'react-router-dom';
import { Grid, GridItem, TextContent, Text, TextVariants, Flex, Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
import { STATUS } from 'foremanReact/constants';
import ContentConfig from '../ContentConfig';
import RoutedTabs from '../../../components/RoutedTabs';
import { selectContentDetails, selectContentDetailsStatus } from '../ContentSelectors';
import { getContentDetails } from '../ContentActions';
import Loading from '../../../components/Loading';
const ContentDetails = () => {
const dispatch = useDispatch();
const contentDetailsResponse = useSelector(selectContentDetails);
const contentDetailsResponseStatus = useSelector(selectContentDetailsStatus);
const { id, content_type: contentType } = useParams();
const contentId = Number(id);
const config = ContentConfig().find(type =>
type.names.pluralLabel === contentType);
const { pluralTitle, pluralLabel } = config.names;
const tabs = [];
config.tabs.forEach((tab) => {
tabs.push({
title: tab.title,
key: tab.tabKey,
content: tab.getContent(contentType, contentId, tab.tabKey),
});
});
useEffect(() => {
dispatch(getContentDetails(contentType, contentId));
}, [dispatch, contentType, contentId]);
if (contentDetailsResponseStatus === STATUS.PENDING) {
return <Loading />;
}
return (
<Grid className="grid-with-margin">
<Breadcrumb style={{ marginTop: '15px', marginBottom: '15px' }}>
<BreadcrumbItem
aria-label="content_breadcrumb"
render={() => (<Link to={`/content/${pluralLabel}`}>{pluralTitle}</Link>)}
/>
<BreadcrumbItem
aria-label="content_breadcrumb_content"
isActive
> {contentDetailsResponse.name}
</BreadcrumbItem>
</Breadcrumb>
<GridItem span={12} >
<Flex>
<TextContent>
<Text component={TextVariants.h1}> {contentDetailsResponse.name} </Text>
</TextContent>
</Flex>
</GridItem>
<GridItem span={12}>
<RoutedTabs tabs={tabs} baseUrl={`/${contentType}/${contentId}`} defaultTabIndex={0} />
</GridItem>
</Grid>
);
};
export default ContentDetails;