Skip to content

Commit 347aa43

Browse files
Akshay02022Akshay02022
committed
Refactor Dashboard.jsx: Convert legacy class component to functional component and remove unused code
1 parent e347dcd commit 347aa43

File tree

1 file changed

+90
-111
lines changed

1 file changed

+90
-111
lines changed

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

Lines changed: 90 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import PropTypes from 'prop-types';
2-
import React from 'react';
2+
import React, { useState, useEffect, useCallback } from 'react';
33
import { connect } from 'react-redux';
44
import MediaQuery from 'react-responsive';
55
import { withTranslation } 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';
@@ -24,36 +23,15 @@ import DashboardTabSwitcherPublic, {
2423
TabKey
2524
} from '../components/DashboardTabSwitcher';
2625

27-
class DashboardView extends React.Component {
28-
static defaultProps = {
29-
user: null
30-
};
31-
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-
}
42-
43-
closeAccountPage() {
44-
browserHistory.push(this.props.previousPath);
45-
}
26+
const DashboardView = ({ newProject, location, params, user, t }) => {
27+
const [collectionCreateVisible, setCollectionCreateVisible] = useState(false);
4628

47-
createNewSketch() {
48-
this.props.newProject();
49-
}
50-
51-
gotoHomePage() {
52-
browserHistory.push('/');
53-
}
29+
const createNewSketch = () => {
30+
newProject();
31+
};
5432

55-
selectedTabKey() {
56-
const path = this.props.location.pathname;
33+
const selectedTabKey = useCallback(() => {
34+
const path = location.pathname;
5735

5836
if (/assets/.test(path)) {
5937
return TabKey.assets;
@@ -62,57 +40,53 @@ class DashboardView extends React.Component {
6240
}
6341

6442
return TabKey.sketches;
65-
}
43+
}, [location.pathname]);
6644

67-
ownerName() {
68-
if (this.props.params.username) {
69-
return this.props.params.username;
45+
const ownerName = () => {
46+
if (params.username) {
47+
return params.username;
7048
}
7149

72-
return this.props.user.username;
73-
}
50+
return user.username;
51+
};
7452

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

79-
toggleCollectionCreate() {
80-
this.setState((prevState) => ({
81-
collectionCreateVisible: !prevState.collectionCreateVisible
82-
}));
83-
}
55+
const toggleCollectionCreate = () => {
56+
setCollectionCreateVisible((prevState) => !prevState);
57+
};
8458

85-
renderActionButton(tabKey, username, t) {
59+
const renderActionButton = (tabKey) => {
8660
switch (tabKey) {
8761
case TabKey.assets:
88-
return this.isOwner() && <AssetSize />;
62+
return isOwner() && <AssetSize />;
8963
case TabKey.collections:
9064
return (
91-
this.isOwner() && (
92-
<React.Fragment>
93-
<Button onClick={this.toggleCollectionCreate}>
65+
isOwner() && (
66+
<>
67+
<Button onClick={toggleCollectionCreate}>
9468
{t('DashboardView.CreateCollection')}
9569
</Button>
9670
<CollectionSearchbar />
97-
</React.Fragment>
71+
</>
9872
)
9973
);
10074
case TabKey.sketches:
10175
default:
10276
return (
103-
<React.Fragment>
104-
{this.isOwner() && (
105-
<Button onClick={this.createNewSketch}>
77+
<>
78+
{isOwner() && (
79+
<Button onClick={createNewSketch}>
10680
{t('DashboardView.NewSketch')}
10781
</Button>
10882
)}
10983
<SketchSearchbar />
110-
</React.Fragment>
84+
</>
11185
);
11286
}
113-
}
87+
};
11488

115-
renderContent(tabKey, username, mobile) {
89+
const renderContent = (tabKey, username, mobile) => {
11690
switch (tabKey) {
11791
case TabKey.assets:
11892
return <AssetList key={username} mobile={mobile} username={username} />;
@@ -126,63 +100,60 @@ class DashboardView extends React.Component {
126100
<SketchList key={username} mobile={mobile} username={username} />
127101
);
128102
}
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>
103+
};
104+
105+
const currentTab = selectedTabKey();
106+
const owner = isOwner();
107+
const { username } = params;
108+
const actions = renderActionButton(currentTab, username, t);
157109

158-
<div className="dashboard-content">
159-
<MediaQuery maxWidth={770}>
160-
{(mobile) => this.renderContent(currentTab, username, mobile)}
161-
</MediaQuery>
110+
useEffect(() => {
111+
if (collectionCreateVisible) {
112+
document.body.style.overflow = 'hidden';
113+
} else {
114+
document.body.style.overflow = 'auto';
115+
}
116+
}, [collectionCreateVisible]);
117+
118+
return (
119+
<RootPage fixedHeight="100%">
120+
<Nav layout="dashboard" />
121+
122+
<main className="dashboard-header">
123+
<div className="dashboard-header__header">
124+
<h2 className="dashboard-header__header__title">{ownerName()}</h2>
125+
<div className="dashboard-header__nav">
126+
<DashboardTabSwitcherPublic
127+
currentTab={currentTab}
128+
isOwner={owner}
129+
username={username}
130+
/>
131+
{actions && (
132+
<div className="dashboard-header__actions">{actions}</div>
133+
)}
162134
</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
181-
};
182-
}
135+
</div>
136+
137+
<div className="dashboard-content">
138+
<MediaQuery maxWidth={770}>
139+
{(mobile) => renderContent(currentTab, username, mobile)}
140+
</MediaQuery>
141+
</div>
142+
</main>
143+
{collectionCreateVisible && (
144+
<Overlay
145+
title={t('DashboardView.CreateCollectionOverlay')}
146+
closeOverlay={toggleCollectionCreate}
147+
>
148+
<CollectionCreate />
149+
</Overlay>
150+
)}
151+
</RootPage>
152+
);
153+
};
183154

184-
const mapDispatchToProps = {
185-
...ProjectActions
155+
DashboardView.defaultProps = {
156+
user: null
186157
};
187158

188159
DashboardView.propTypes = {
@@ -193,13 +164,21 @@ DashboardView.propTypes = {
193164
params: PropTypes.shape({
194165
username: PropTypes.string.isRequired
195166
}).isRequired,
196-
previousPath: PropTypes.string.isRequired,
197167
user: PropTypes.shape({
198168
username: PropTypes.string
199169
}),
200170
t: PropTypes.func.isRequired
201171
};
202172

173+
const mapStateToProps = (state) => ({
174+
previousPath: state.ide.previousPath,
175+
user: state.user
176+
});
177+
178+
const mapDispatchToProps = {
179+
...ProjectActions
180+
};
181+
203182
export default withTranslation()(
204183
connect(mapStateToProps, mapDispatchToProps)(DashboardView)
205184
);

0 commit comments

Comments
 (0)