import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { browserHistory, Link } from 'react-router'; import { Helmet } from 'react-helmet'; import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions'; import NavBasic from '../../../components/NavBasic'; import AssetList from '../../IDE/components/AssetList'; import CollectionList from '../../IDE/components/CollectionList'; import SketchList from '../../IDE/components/SketchList'; 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() { const path = this.props.location.pathname; if (/assets/.test(path)) { return TabKey.assets; } else if (/collections/.test(path)) { return TabKey.collections; } 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; } renderActionButton(tabKey, username) { if (!this.isOwner()) { return null; } switch (tabKey) { case TabKey.assets: return null; case TabKey.collections: return Create collection; case TabKey.sketches: default: return New sketch; } } renderContent(tabKey, username) { switch (tabKey) { case TabKey.assets: return ; case TabKey.collections: return ; case TabKey.sketches: default: return ; } } render() { const currentTab = this.selectedTabKey(); const isOwner = this.isOwner(); const { username } = this.props.params; return (
p5.js Web Editor | Account

{this.ownerName()}

{this.renderActionButton(currentTab, username)}
{this.renderContent(currentTab, username)}
); } } function mapStateToProps(state) { return { previousPath: state.ide.previousPath, user: state.user, theme: state.preferences.theme }; } 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({ username: PropTypes.string.isRequired, }), }; export default connect(mapStateToProps, mapDispatchToProps)(DashboardView);