This is a preview version of the editor, that has not yet been officially released.
@@ -656,7 +714,8 @@ Nav.propTypes = {
stopSketch: PropTypes.func.isRequired,
setAllAccessibleOutput: PropTypes.func.isRequired,
newFile: PropTypes.func.isRequired,
- newFolder: PropTypes.func.isRequired
+ newFolder: PropTypes.func.isRequired,
+ layout: PropTypes.oneOf(['dashboard', 'project'])
};
Nav.defaultProps = {
@@ -664,7 +723,8 @@ Nav.defaultProps = {
id: undefined,
owner: undefined
},
- cmController: {}
+ cmController: {},
+ layout: 'project'
};
function mapStateToProps(state) {
diff --git a/client/components/createRedirectWithUsername.jsx b/client/components/createRedirectWithUsername.jsx
new file mode 100644
index 00000000..fe76b5cd
--- /dev/null
+++ b/client/components/createRedirectWithUsername.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { browserHistory } from 'react-router';
+
+const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
+ React.useEffect(() => {
+ if (username == null) {
+ return;
+ }
+
+ browserHistory.replace(url.replace(':username', username));
+ }, [username]);
+
+ return null;
+};
+
+function mapStateToProps(state) {
+ return {
+ username: state.user ? state.user.username : null,
+ };
+}
+
+const ConnectedRedirectToUser = connect(mapStateToProps)(RedirectToUser);
+
+const createRedirectWithUsername = url => props =>
;
+
+export default createRedirectWithUsername;
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 2678de7e..045074eb 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -18,7 +18,10 @@ class App extends React.Component {
}
componentWillReceiveProps(nextProps) {
- if (nextProps.location !== this.props.location) {
+ const locationWillChange = nextProps.location !== this.props.location;
+ const shouldSkipRemembering = nextProps.location.state && nextProps.location.state.skipSavingPath === true;
+
+ if (locationWillChange && !shouldSkipRemembering) {
this.props.setPreviousPath(this.props.location.pathname);
}
}
@@ -36,7 +39,10 @@ class App extends React.Component {
App.propTypes = {
children: PropTypes.element,
location: PropTypes.shape({
- pathname: PropTypes.string
+ pathname: PropTypes.string,
+ state: PropTypes.shape({
+ skipSavingPath: PropTypes.bool,
+ }),
}).isRequired,
setPreviousPath: PropTypes.func.isRequired,
};
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index b2ae1ebb..b0be087e 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -29,8 +29,6 @@ import * as ToastActions from '../actions/toast';
import * as ConsoleActions from '../actions/console';
import { getHTMLFile } from '../reducers/files';
import Overlay from '../../App/components/Overlay';
-import SketchList from '../components/SketchList';
-import AssetList from '../components/AssetList';
import About from '../components/About';
import Feedback from '../components/Feedback';
@@ -365,30 +363,6 @@ class IDEView extends React.Component {
createFolder={this.props.createFolder}
/>
}
- { this.props.location.pathname.match(/sketches$/) &&
-
-
-
- }
- { this.props.location.pathname.match(/assets$/) &&
-
-
-
- }
{ this.props.location.pathname === '/about' &&
{
+ const selectedClassName = 'dashboard-header__tab--selected';
+
+ const location = { pathname: to, state: { skipSavingPath: true } };
+ const content = isSelected ? children : {children};
+ return (
+
+
+ {content}
+
+
+ );
+};
+
+Tab.propTypes = {
+ children: PropTypes.element.isRequired,
+ isSelected: PropTypes.bool.isRequired,
+ to: PropTypes.string.isRequired,
+};
+
+const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => (
+
+);
+
+DashboardTabSwitcher.propTypes = {
+ currentTab: PropTypes.string.isRequired,
+ isOwner: PropTypes.bool.isRequired,
+ username: PropTypes.string.isRequired,
+};
+
+export { DashboardTabSwitcher as default, TabKey };
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index d529b5dd..0cda4898 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -4,7 +4,6 @@ import { reduxForm } from 'redux-form';
import { bindActionCreators } from 'redux';
import { browserHistory } from 'react-router';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import InlineSVG from 'react-inlinesvg';
import axios from 'axios';
import { Helmet } from 'react-helmet';
import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
@@ -14,8 +13,6 @@ import GithubButton from '../components/GithubButton';
import APIKeyForm from '../components/APIKeyForm';
import NavBasic from '../../../components/NavBasic';
-const exitUrl = require('../../../images/exit.svg');
-
class AccountView extends React.Component {
constructor(props) {
super(props);
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
new file mode 100644
index 00000000..af93db70
--- /dev/null
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -0,0 +1,119 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { browserHistory } from 'react-router';
+
+import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
+import Nav from '../../../components/Nav';
+
+import AssetList from '../../IDE/components/AssetList';
+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('/');
+ }
+
+ selectedTabName() {
+ const path = this.props.location.pathname;
+
+ if (/assets/.test(path)) {
+ return TabKey.assets;
+ }
+
+ 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;
+ }
+
+ navigationItem() {
+
+ }
+
+ render() {
+ const currentTab = this.selectedTabName();
+ const isOwner = this.isOwner();
+ const { username } = this.props.params;
+
+ return (
+
+
+
+
+
+
{this.ownerName()}
+
+
+
+
+
+ {
+ currentTab === TabKey.sketches ?
:
+ }
+
+