|
1 | | -import PropTypes from 'prop-types'; |
2 | 1 | import React from 'react'; |
3 | | -import { connect } from 'react-redux'; |
4 | | -import { withTranslation } from 'react-i18next'; |
5 | | - |
| 2 | +import { useParams } from 'react-router-dom'; |
6 | 3 | import Nav from '../../IDE/components/Header/Nav'; |
7 | 4 | import RootPage from '../../../components/RootPage'; |
8 | | - |
9 | | -import CollectionCreate from '../components/CollectionCreate'; |
10 | 5 | import Collection from '../components/Collection'; |
11 | 6 |
|
12 | | -class CollectionView extends React.Component { |
13 | | - static defaultProps = { |
14 | | - user: null |
15 | | - }; |
16 | | - |
17 | | - ownerName() { |
18 | | - if (this.props.params.username) { |
19 | | - return this.props.params.username; |
20 | | - } |
21 | | - |
22 | | - return this.props.user.username; |
23 | | - } |
24 | | - |
25 | | - pageTitle() { |
26 | | - if (this.isCreatePage()) { |
27 | | - return this.props.t('CollectionView.TitleCreate'); |
28 | | - } |
29 | | - |
30 | | - return this.props.t('CollectionView.TitleDefault'); |
31 | | - } |
32 | | - |
33 | | - isOwner() { |
34 | | - return this.props.user.username === this.props.params.username; |
35 | | - } |
| 7 | +const CollectionView = () => { |
| 8 | + const params = useParams(); |
36 | 9 |
|
37 | | - isCreatePage() { |
38 | | - const path = this.props.location.pathname; |
39 | | - return /create$/.test(path); |
40 | | - } |
41 | | - |
42 | | - renderContent() { |
43 | | - if (this.isCreatePage() && this.isOwner()) { |
44 | | - return <CollectionCreate />; |
45 | | - } |
46 | | - |
47 | | - return ( |
| 10 | + return ( |
| 11 | + <RootPage> |
| 12 | + <Nav layout="dashboard" /> |
48 | 13 | <Collection |
49 | | - collectionId={this.props.params.collection_id} |
50 | | - username={this.props.params.username} |
| 14 | + collectionId={params.collection_id} |
| 15 | + username={params.username} |
51 | 16 | /> |
52 | | - ); |
53 | | - } |
54 | | - |
55 | | - render() { |
56 | | - return ( |
57 | | - <RootPage> |
58 | | - <Nav layout="dashboard" /> |
59 | | - |
60 | | - {this.renderContent()} |
61 | | - </RootPage> |
62 | | - ); |
63 | | - } |
64 | | -} |
65 | | - |
66 | | -function mapStateToProps(state) { |
67 | | - return { |
68 | | - user: state.user |
69 | | - }; |
70 | | -} |
71 | | - |
72 | | -function mapDispatchToProps(dispatch) { |
73 | | - return {}; |
74 | | -} |
75 | | - |
76 | | -CollectionView.propTypes = { |
77 | | - location: PropTypes.shape({ |
78 | | - pathname: PropTypes.string.isRequired |
79 | | - }).isRequired, |
80 | | - params: PropTypes.shape({ |
81 | | - collection_id: PropTypes.string.isRequired, |
82 | | - username: PropTypes.string.isRequired |
83 | | - }).isRequired, |
84 | | - user: PropTypes.shape({ |
85 | | - username: PropTypes.string |
86 | | - }), |
87 | | - t: PropTypes.func.isRequired |
| 17 | + </RootPage> |
| 18 | + ); |
88 | 19 | }; |
89 | 20 |
|
90 | | -export default withTranslation()( |
91 | | - connect(mapStateToProps, mapDispatchToProps)(CollectionView) |
92 | | -); |
| 21 | +export default CollectionView; |
0 commit comments