Skip to content

Commit 185a0b1

Browse files
lindapaistelindapaiste
authored
Merge pull request #2437 from Akshay02022/Akshay02022/refactoring-dashboardView-2
Refactor DashboardView.jsx : Applied Necessary changes required [Ref PR#2422]
2 parents 42924b9 + 7dfdfea commit 185a0b1

File tree

1 file changed

+79
-130
lines changed

1 file changed

+79
-130
lines changed

‎client/modules/User/pages/DashboardView.jsx

Lines changed: 79 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import PropTypes from 'prop-types';
2-
import React from 'react';
3-
import { connect } from 'react-redux';
1+
import React, { useState, useCallback } from 'react';
2+
import { useDispatch, useSelector } from 'react-redux';
43
import MediaQuery from 'react-responsive';
5-
import { withTranslation } from 'react-i18next';
4+
import { useLocation, useParams } from 'react-router-dom';
5+
import { useTranslation } from 'react-i18next';
66

7-
import browserHistory from '../../../browserHistory';
87
import Button from '../../../common/Button';
98
import Nav from '../../IDE/components/Header/Nav';
109
import Overlay from '../../App/components/Overlay';
@@ -13,7 +12,7 @@ import AssetSize from '../../IDE/components/AssetSize';
1312
import CollectionList from '../../IDE/components/CollectionList';
1413
import SketchList from '../../IDE/components/SketchList';
1514
import RootPage from '../../../components/RootPage';
16-
import * as ProjectActions from '../../IDE/actions/project';
15+
import { newProject } from '../../IDE/actions/project';
1716
import {
1817
CollectionSearchbar,
1918
SketchSearchbar
@@ -24,36 +23,24 @@ import DashboardTabSwitcherPublic, {
2423
TabKey
2524
} from '../components/DashboardTabSwitcher';
2625

27-
class DashboardView extends React.Component {
28-
static defaultProps = {
29-
user: null
30-
};
26+
const DashboardView = () => {
27+
const { t } = useTranslation();
28+
29+
const params = useParams();
30+
const location = useLocation();
3131

32-
constructor(props) {
33-
super(props);
34-
this.closeAccountPage = this.closeAccountPage.bind(this);
35-
this.createNewSketch = this.createNewSketch.bind(this);
36-
this.gotoHomePage = this.gotoHomePage.bind(this);
37-
this.toggleCollectionCreate = this.toggleCollectionCreate.bind(this);
38-
this.state = {
39-
collectionCreateVisible: false
40-
};
41-
}
32+
const dispatch = useDispatch();
4233

43-
closeAccountPage() {
44-
browserHistory.push(this.props.previousPath);
45-
}
34+
const user = useSelector((state) => state.user);
4635

47-
createNewSketch() {
48-
this.props.newProject();
49-
}
36+
const [collectionCreateVisible, setCollectionCreateVisible] = useState(false);
5037

51-
gotoHomePage() {
52-
browserHistory.push('/');
53-
}
38+
const createNewSketch = () => {
39+
dispatch(newProject());
40+
};
5441

55-
selectedTabKey() {
56-
const path = this.props.location.pathname;
42+
const selectedTabKey = useCallback(() => {
43+
const path = location.pathname;
5744

5845
if (/assets/.test(path)) {
5946
return TabKey.assets;
@@ -62,57 +49,53 @@ class DashboardView extends React.Component {
6249
}
6350

6451
return TabKey.sketches;
65-
}
52+
}, [location.pathname]);
6653

67-
ownerName() {
68-
if (this.props.params.username) {
69-
return this.props.params.username;
54+
const ownerName = () => {
55+
if (params.username) {
56+
return params.username;
7057
}
7158

72-
return this.props.user.username;
73-
}
59+
return user.username;
60+
};
7461

75-
isOwner() {
76-
return this.props.user.username === this.props.params.username;
77-
}
62+
const isOwner = () => params.username === user.username;
7863

79-
toggleCollectionCreate() {
80-
this.setState((prevState) => ({
81-
collectionCreateVisible: !prevState.collectionCreateVisible
82-
}));
83-
}
64+
const toggleCollectionCreate = () => {
65+
setCollectionCreateVisible((prevState) => !prevState);
66+
};
8467

85-
renderActionButton(tabKey, username, t) {
68+
const renderActionButton = (tabKey) => {
8669
switch (tabKey) {
8770
case TabKey.assets:
88-
return this.isOwner() && <AssetSize />;
71+
return isOwner() && <AssetSize />;
8972
case TabKey.collections:
9073
return (
91-
this.isOwner() && (
92-
<React.Fragment>
93-
<Button onClick={this.toggleCollectionCreate}>
74+
isOwner() && (
75+
<>
76+
<Button onClick={toggleCollectionCreate}>
9477
{t('DashboardView.CreateCollection')}
9578
</Button>
9679
<CollectionSearchbar />
97-
</React.Fragment>
80+
</>
9881
)
9982
);
10083
case TabKey.sketches:
10184
default:
10285
return (
103-
<React.Fragment>
104-
{this.isOwner() && (
105-
<Button onClick={this.createNewSketch}>
86+
<>
87+
{isOwner() && (
88+
<Button onClick={createNewSketch}>
10689
{t('DashboardView.NewSketch')}
10790
</Button>
10891
)}
10992
<SketchSearchbar />
110-
</React.Fragment>
93+
</>
11194
);
11295
}
113-
}
96+
};
11497

115-
renderContent(tabKey, username, mobile) {
98+
const renderContent = (tabKey, username, mobile) => {
11699
switch (tabKey) {
117100
case TabKey.assets:
118101
return <AssetList key={username} mobile={mobile} username={username} />;
@@ -126,80 +109,46 @@ class DashboardView extends React.Component {
126109
<SketchList key={username} mobile={mobile} username={username} />
127110
);
128111
}
129-
}
130-
131-
render() {
132-
const currentTab = this.selectedTabKey();
133-
const isOwner = this.isOwner();
134-
const { username } = this.props.params;
135-
const actions = this.renderActionButton(currentTab, username, this.props.t);
136-
137-
return (
138-
<RootPage fixedHeight="100%">
139-
<Nav layout="dashboard" />
140-
141-
<main className="dashboard-header">
142-
<div className="dashboard-header__header">
143-
<h2 className="dashboard-header__header__title">
144-
{this.ownerName()}
145-
</h2>
146-
<div className="dashboard-header__nav">
147-
<DashboardTabSwitcherPublic
148-
currentTab={currentTab}
149-
isOwner={isOwner}
150-
username={username}
151-
/>
152-
{actions && (
153-
<div className="dashboard-header__actions">{actions}</div>
154-
)}
155-
</div>
156-
</div>
157-
158-
<div className="dashboard-content">
159-
<MediaQuery maxWidth={770}>
160-
{(mobile) => this.renderContent(currentTab, username, mobile)}
161-
</MediaQuery>
162-
</div>
163-
</main>
164-
{this.state.collectionCreateVisible && (
165-
<Overlay
166-
title={this.props.t('DashboardView.CreateCollectionOverlay')}
167-
closeOverlay={this.toggleCollectionCreate}
168-
>
169-
<CollectionCreate />
170-
</Overlay>
171-
)}
172-
</RootPage>
173-
);
174-
}
175-
}
176-
177-
function mapStateToProps(state) {
178-
return {
179-
previousPath: state.ide.previousPath,
180-
user: state.user
181112
};
182-
}
183-
184-
const mapDispatchToProps = {
185-
...ProjectActions
186-
};
187113

188-
DashboardView.propTypes = {
189-
newProject: PropTypes.func.isRequired,
190-
location: PropTypes.shape({
191-
pathname: PropTypes.string.isRequired
192-
}).isRequired,
193-
params: PropTypes.shape({
194-
username: PropTypes.string.isRequired
195-
}).isRequired,
196-
previousPath: PropTypes.string.isRequired,
197-
user: PropTypes.shape({
198-
username: PropTypes.string
199-
}),
200-
t: PropTypes.func.isRequired
114+
const currentTab = selectedTabKey();
115+
const actions = renderActionButton(currentTab);
116+
117+
return (
118+
<RootPage fixedHeight="100%">
119+
<Nav layout="dashboard" />
120+
121+
<main className="dashboard-header">
122+
<div className="dashboard-header__header">
123+
<h2 className="dashboard-header__header__title">{ownerName()}</h2>
124+
<div className="dashboard-header__nav">
125+
<DashboardTabSwitcherPublic
126+
currentTab={currentTab}
127+
isOwner={isOwner()}
128+
username={params.username}
129+
/>
130+
{actions && (
131+
<div className="dashboard-header__actions">{actions}</div>
132+
)}
133+
</div>
134+
</div>
135+
136+
<div className="dashboard-content">
137+
<MediaQuery maxWidth={770}>
138+
{(mobile) => renderContent(currentTab, params.username, mobile)}
139+
</MediaQuery>
140+
</div>
141+
</main>
142+
{collectionCreateVisible && (
143+
<Overlay
144+
title={t('DashboardView.CreateCollectionOverlay')}
145+
closeOverlay={toggleCollectionCreate}
146+
>
147+
<CollectionCreate />
148+
</Overlay>
149+
)}
150+
</RootPage>
151+
);
201152
};
202153

203-
export default withTranslation()(
204-
connect(mapStateToProps, mapDispatchToProps)(DashboardView)
205-
);
154+
export default DashboardView;

0 commit comments

Comments
 (0)