p5.js-web-editor/client/modules/User/pages/DashboardView.jsx

182 lines
4.9 KiB
React
Raw Normal View History

2019-08-11 11:08:17 +02:00
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { browserHistory } from 'react-router';
2019-08-11 11:08:17 +02:00
import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
import Button from '../../../common/Button';
import Nav from '../../../components/Nav';
2019-10-02 17:01:52 +02:00
import Overlay from '../../App/components/Overlay';
2019-08-11 11:08:17 +02:00
import AssetList from '../../IDE/components/AssetList';
2019-11-04 20:30:24 +01:00
import AssetSize from '../../IDE/components/AssetSize';
import CollectionList from '../../IDE/components/CollectionList';
2019-08-11 11:08:17 +02:00
import SketchList from '../../IDE/components/SketchList';
import { CollectionSearchbar, SketchSearchbar } from '../../IDE/components/Searchbar';
2019-08-11 11:08:17 +02:00
2019-10-02 17:01:52 +02:00
import CollectionCreate from '../components/CollectionCreate';
2019-08-11 11:08:17 +02:00
import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
class DashboardView extends React.Component {
static defaultProps = {
user: null,
};
constructor(props) {
super(props);
this.closeAccountPage = this.closeAccountPage.bind(this);
this.gotoHomePage = this.gotoHomePage.bind(this);
}
componentDidMount() {
document.body.className = this.props.theme;
}
closeAccountPage() {
browserHistory.push(this.props.previousPath);
}
gotoHomePage() {
browserHistory.push('/');
}
selectedTabKey() {
2019-08-11 11:08:17 +02:00
const path = this.props.location.pathname;
if (/assets/.test(path)) {
return TabKey.assets;
} else if (/collections/.test(path)) {
return TabKey.collections;
2019-08-11 11:08:17 +02:00
}
return TabKey.sketches;
}
ownerName() {
if (this.props.params.username) {
return this.props.params.username;
}
return this.props.user.username;
}
isOwner() {
return this.props.user.username === this.props.params.username;
}
2019-10-02 17:01:52 +02:00
isCollectionCreate() {
const path = this.props.location.pathname;
return /collections\/create$/.test(path);
}
returnToDashboard = () => {
browserHistory.push(`/${this.ownerName()}/collections`);
}
renderActionButton(tabKey, username) {
switch (tabKey) {
case TabKey.assets:
2019-11-04 20:30:24 +01:00
return this.isOwner() && <AssetSize />;
case TabKey.collections:
return this.isOwner() && (
<React.Fragment>
<Button to={`/${username}/collections/create`}>
Create collection
</Button>
<CollectionSearchbar />
</React.Fragment>);
case TabKey.sketches:
default:
2019-10-02 17:17:52 +02:00
return (
<React.Fragment>
{this.isOwner() && <Button to="/">New sketch</Button>}
<SketchSearchbar />
2019-10-02 17:17:52 +02:00
</React.Fragment>
);
}
}
renderContent(tabKey, username) {
switch (tabKey) {
case TabKey.assets:
return <AssetList key={username} username={username} />;
case TabKey.collections:
return <CollectionList key={username} username={username} />;
case TabKey.sketches:
default:
return <SketchList key={username} username={username} />;
}
2019-08-11 11:08:17 +02:00
}
render() {
const currentTab = this.selectedTabKey();
2019-08-11 11:08:17 +02:00
const isOwner = this.isOwner();
const { username } = this.props.params;
2019-11-04 20:30:24 +01:00
const actions = this.renderActionButton(currentTab, username);
2019-08-11 11:08:17 +02:00
return (
<div className="dashboard">
<Nav layout="dashboard" />
2019-08-11 11:08:17 +02:00
<main className="dashboard-header">
2019-08-11 11:08:17 +02:00
<div className="dashboard-header__header">
<h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
2019-10-02 17:17:52 +02:00
<div className="dashboard-header__nav">
<DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
2019-11-04 20:30:24 +01:00
{actions &&
<div className="dashboard-header__actions">
{actions}
</div>
}
</div>
2019-08-11 11:08:17 +02:00
</div>
2019-09-08 16:43:16 +02:00
2019-08-11 11:08:17 +02:00
<div className="dashboard-content">
{this.renderContent(currentTab, username)}
2019-08-11 11:08:17 +02:00
</div>
</main>
2019-10-02 17:01:52 +02:00
{this.isCollectionCreate() &&
<Overlay
title="Create collection"
closeOverlay={this.returnToDashboard}
>
<CollectionCreate />
</Overlay>
}
2019-08-11 11:08:17 +02:00
</div>
);
}
}
function mapStateToProps(state) {
return {
previousPath: state.ide.previousPath,
user: state.user,
2019-11-04 20:30:24 +01:00
theme: state.preferences.theme,
2019-08-11 11:08:17 +02:00
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
updateSettings, initiateVerification, createApiKey, removeApiKey
}, dispatch);
}
DashboardView.propTypes = {
location: PropTypes.shape({
pathname: PropTypes.string.isRequired,
}).isRequired,
params: PropTypes.shape({
username: PropTypes.string.isRequired,
}).isRequired,
previousPath: PropTypes.string.isRequired,
theme: PropTypes.string.isRequired,
user: PropTypes.shape({
2020-02-05 00:40:54 +01:00
username: PropTypes.string,
2019-08-11 11:08:17 +02:00
}),
};
export default connect(mapStateToProps, mapDispatchToProps)(DashboardView);