Merge pull request #1143 from andrewn/feature/standalone-sketches

Standalone sketches and asset page (fixes #1142)

Author: catarak

client/components/Nav.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 => <ConnectedRedirectToUser {...props} url={url} />;
+
+export default createRedirectWithUsername;

client/components/createRedirectWithUsername.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,
 };

client/modules/App/App.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$/) &&
-          <Overlay
-            ariaLabel="project list"
-            title="Open a Sketch"
-            previousPath={this.props.ide.previousPath}
-          >
-            <SketchList
-              username={this.props.params.username}
-              user={this.props.user}
-            />
-          </Overlay>
-        }
-        { this.props.location.pathname.match(/assets$/) &&
-          <Overlay
-            title="Assets"
-            ariaLabel="asset list"
-            previousPath={this.props.ide.previousPath}
-          >
-            <AssetList
-              username={this.props.params.username}
-              user={this.props.user}
-            />
-          </Overlay>
-        }
         { this.props.location.pathname === '/about' &&
           <Overlay
             previousPath={this.props.ide.previousPath}

client/modules/IDE/pages/IDEView.jsx

@@ -1,6 +1,5 @@
 import { browserHistory } from 'react-router';
 import axios from 'axios';
-import crypto from 'crypto';
 import * as ActionTypes from '../../constants';
 import { showErrorModal, justOpenedProject } from '../IDE/actions/ide';
 import { showToast, setToastText } from '../IDE/actions/toast';

client/modules/User/actions.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Link } from 'react-router';
+
+const TabKey = {
+  assets: 'assets',
+  sketches: 'sketches',
+};
+
+const Tab = ({ children, isSelected, to }) => {
+  const selectedClassName = 'dashboard-header__tab--selected';
+
+  const location = { pathname: to, state: { skipSavingPath: true } };
+  const content = isSelected ? children : <Link to={location}>{children}</Link>;
+  return (
+    <li className={`dashboard-header__tab ${isSelected && selectedClassName}`}>
+      <h4 className="dashboard-header__tab__title">
+        {content}
+      </h4>
+    </li>
+  );
+};
+
+Tab.propTypes = {
+  children: PropTypes.element.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  to: PropTypes.string.isRequired,
+};
+
+const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => (
+  <ul className="dashboard-header__switcher">
+    <div className="dashboard-header__tabs">
+      <Tab to={`/${username}/sketches`} isSelected={currentTab === 'sketches'}>Sketches</Tab>
+      {isOwner && <Tab to={`/${username}/assets`} isSelected={currentTab === 'assets'}>Assets</Tab>}
+    </div>
+  </ul>
+);
+
+DashboardTabSwitcher.propTypes = {
+  currentTab: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+export { DashboardTabSwitcher as default, TabKey };

client/modules/User/components/DashboardTabSwitcher.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);

client/modules/User/pages/AccountView.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 (
+      <div className="dashboard">
+        <Nav layout="dashboard" />
+
+        <section className="dashboard-header">
+          <div className="dashboard-header__header">
+            <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
+
+            <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
+          </div>
+
+          <div className="dashboard-content">
+            {
+              currentTab === TabKey.sketches ? <SketchList username={username} /> : <AssetList username={username} />
+            }
+          </div>
+        </section>
+      </div>
+    );
+  }
+}
+
+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);

client/modules/User/pages/DashboardView.jsx

@@ -9,7 +9,8 @@ import ResetPasswordView from './modules/User/pages/ResetPasswordView';
 import EmailVerificationView from './modules/User/pages/EmailVerificationView';
 import NewPasswordView from './modules/User/pages/NewPasswordView';
 import AccountView from './modules/User/pages/AccountView';
-// import SketchListView from './modules/Sketch/pages/SketchListView';
+import DashboardView from './modules/User/pages/DashboardView';
+import createRedirectWithUsername from './components/createRedirectWithUsername';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 
@@ -35,11 +36,13 @@ const routes = store => (
     <Route path="/projects/:project_id" component={IDEView} />
     <Route path="/:username/full/:project_id" component={FullView} />
     <Route path="/full/:project_id" component={FullView} />
-    <Route path="/sketches" component={IDEView} />
-    <Route path="/assets" component={IDEView} />
+    <Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
+    <Route path="/:username/assets" component={DashboardView} />
+    <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
     <Route path="/account" component={AccountView} />
     <Route path="/:username/sketches/:project_id" component={IDEView} />
-    <Route path="/:username/sketches" component={IDEView} />
+    <Route path="/:username/sketches" component={DashboardView} />
+    <Route path="/:username/assets" component={DashboardView} />
     <Route path="/about" component={IDEView} />
     <Route path="/feedback" component={IDEView} />
   </Route>

client/routes.jsx

@@ -2,13 +2,12 @@
   // flex: 1 1 0%;
   overflow-y: scroll;
   max-width: 100%;
-  width: #{1000 / $base-font-size}rem;
   min-height: #{400 / $base-font-size}rem;
 }
 
 .asset-table {
   width: 100%;
-  padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
+  padding: #{10 / $base-font-size}rem 0;
   max-height: 100%;
   border-spacing: 0;
   & .asset-list__delete-column {
@@ -53,4 +52,5 @@
 .asset-table__empty {
   text-align: center;
   font-size: #{16 / $base-font-size}rem;
+  padding: #{42 / $base-font-size}rem 0;
 }