Skip to content

Made DashboardView a functional component #2402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Made DashboardView a functional component #2402

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 85 additions & 112 deletions client/modules/User/pages/DashboardView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
import React, { useState } from 'react';
import { connect } from 'react-redux';
import MediaQuery from 'react-responsive';
import { withTranslation } from 'react-i18next';

import browserHistory from '../../../browserHistory';
import Button from '../../../common/Button';
import Nav from '../../IDE/components/Header/Nav';
import Overlay from '../../App/components/Overlay';
Expand All @@ -24,36 +23,15 @@ import DashboardTabSwitcherPublic, {
TabKey
} from '../components/DashboardTabSwitcher';

class DashboardView extends React.Component {
static defaultProps = {
user: null
};

constructor(props) {
super(props);
this.closeAccountPage = this.closeAccountPage.bind(this);
this.createNewSketch = this.createNewSketch.bind(this);
this.gotoHomePage = this.gotoHomePage.bind(this);
this.toggleCollectionCreate = this.toggleCollectionCreate.bind(this);
this.state = {
collectionCreateVisible: false
};
}

closeAccountPage() {
browserHistory.push(this.props.previousPath);
}
function DashboardView(props) {
const [collectionCreateVisible, setCollectionCreateVisible] = useState(false);

createNewSketch() {
this.props.newProject();
}

gotoHomePage() {
browserHistory.push('/');
}
const createNewSketch = () => {
props.newProject();
};

selectedTabKey() {
const path = this.props.location.pathname;
const selectedTabKey = () => {
const path = props.location.pathname;

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

return TabKey.sketches;
}
};

ownerName() {
if (this.props.params.username) {
return this.props.params.username;
const ownerName = () => {
if (props.params.username) {
return props.params.username;
}

return this.props.user.username;
}
return props.user.username;
};

isOwner() {
return this.props.user.username === this.props.params.username;
}
const isOwner = () => props.user.username === props.params.username;

toggleCollectionCreate() {
this.setState((prevState) => ({
collectionCreateVisible: !prevState.collectionCreateVisible
}));
}
const toggleCollectionCreate = () => {
setCollectionCreateVisible((prevState) => !prevState);
};

renderActionButton(tabKey, username, t) {
const renderActionButton = (tabKey, username, t) => {
switch (tabKey) {
case TabKey.assets:
return this.isOwner() && <AssetSize />;
return isOwner() && <AssetSize />;
case TabKey.collections:
return (
this.isOwner() && (
<React.Fragment>
<Button onClick={this.toggleCollectionCreate}>
isOwner() && (
<>
<Button onClick={toggleCollectionCreate}>
{t('DashboardView.CreateCollection')}
</Button>
<CollectionSearchbar />
</React.Fragment>
</>
)
);
case TabKey.sketches:
default:
return (
<React.Fragment>
{this.isOwner() && (
<Button onClick={this.createNewSketch}>
<>
{isOwner() && (
<Button onClick={createNewSketch}>
{t('DashboardView.NewSketch')}
</Button>
)}
<SketchSearchbar />
</React.Fragment>
</>
);
}
}
};

renderContent(tabKey, username, mobile) {
const renderContent = (tabKey, username, mobile) => {
switch (tabKey) {
case TabKey.assets:
return <AssetList key={username} mobile={mobile} username={username} />;
Expand All @@ -126,65 +100,50 @@ class DashboardView extends React.Component {
<SketchList key={username} mobile={mobile} username={username} />
);
}
}

render() {
const currentTab = this.selectedTabKey();
const isOwner = this.isOwner();
const { username } = this.props.params;
const actions = this.renderActionButton(currentTab, username, this.props.t);

return (
<RootPage fixedHeight="100%">
<Nav layout="dashboard" />

<main className="dashboard-header">
<div className="dashboard-header__header">
<h2 className="dashboard-header__header__title">
{this.ownerName()}
</h2>
<div className="dashboard-header__nav">
<DashboardTabSwitcherPublic
currentTab={currentTab}
isOwner={isOwner}
username={username}
/>
{actions && (
<div className="dashboard-header__actions">{actions}</div>
)}
</div>
</div>
};

<div className="dashboard-content">
<MediaQuery maxWidth={770}>
{(mobile) => this.renderContent(currentTab, username, mobile)}
</MediaQuery>
const currentTab = selectedTabKey();
const owner = isOwner();
const { username } = props.params;
const actions = renderActionButton(currentTab, username, props.t);

return (
<RootPage fixedHeight="100%">
<Nav layout="dashboard" />

<main className="dashboard-header">
<div className="dashboard-header__header">
<h2 className="dashboard-header__header__title">{ownerName()}</h2>
<div className="dashboard-header__nav">
<DashboardTabSwitcherPublic
currentTab={currentTab}
isOwner={owner}
username={username}
/>
{actions && (
<div className="dashboard-header__actions">{actions}</div>
)}
</div>
</main>
{this.state.collectionCreateVisible && (
<Overlay
title={this.props.t('DashboardView.CreateCollectionOverlay')}
closeOverlay={this.toggleCollectionCreate}
>
<CollectionCreate />
</Overlay>
)}
</RootPage>
);
}
}

function mapStateToProps(state) {
return {
previousPath: state.ide.previousPath,
user: state.user
};
</div>

<div className="dashboard-content">
<MediaQuery maxWidth={770}>
{(mobile) => renderContent(currentTab, username, mobile)}
</MediaQuery>
</div>
</main>
{collectionCreateVisible && (
<Overlay
title={props.t('DashboardView.CreateCollectionOverlay')}
closeOverlay={toggleCollectionCreate}
>
<CollectionCreate />
</Overlay>
)}
</RootPage>
);
}

const mapDispatchToProps = {
...ProjectActions
};

DashboardView.propTypes = {
newProject: PropTypes.func.isRequired,
location: PropTypes.shape({
Expand All @@ -193,13 +152,27 @@ DashboardView.propTypes = {
params: PropTypes.shape({
username: PropTypes.string.isRequired
}).isRequired,
previousPath: PropTypes.string.isRequired,
user: PropTypes.shape({
username: PropTypes.string
}),
t: PropTypes.func.isRequired
};

DashboardView.defaultProps = {
user: null
};

function mapStateToProps(state) {
return {
previousPath: state.ide.previousPath,
user: state.user
};
}

const mapDispatchToProps = {
...ProjectActions
};

export default withTranslation()(
connect(mapStateToProps, mapDispatchToProps)(DashboardView)
);