Serve assets from /:username/assets, redirecting old path

Author: andrewn

client/components/Nav.jsx

@@ -576,7 +576,7 @@ class Nav extends React.PureComponent {
                 </li>
                 <li className="nav__dropdown-item">
                   <Link
-                    to="/assets"
+                    to={`/${this.props.user.username}/assets`}
                     onFocus={this.handleFocusForAccount}
                     onBlur={this.handleBlur}
                     onClick={this.setDropdownForNone}

client/components/createRedirectWithUsername.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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/routes.jsx

@@ -10,7 +10,7 @@ import EmailVerificationView from './modules/User/pages/EmailVerificationView';
 import NewPasswordView from './modules/User/pages/NewPasswordView';
 import AccountView from './modules/User/pages/AccountView';
 import DashboardView from './modules/User/pages/DashboardView';
-// import SketchListView from './modules/Sketch/pages/SketchListView';
+import createRedirectWithUsername from './components/createRedirectWithUsername';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 
@@ -36,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={DashboardView} />
-    <Route path="/assets" component={DashboardView} />
+    <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={DashboardView} />
+    <Route path="/:username/assets" component={DashboardView} />
     <Route path="/about" component={IDEView} />
     <Route path="/feedback" component={IDEView} />
   </Route>

server/routes/server.routes.js

@@ -79,6 +79,16 @@ router.get('/assets', (req, res) => {
   }
 });
 
+router.get('/:username/assets', (req, res) => {
+  userExists(req.params.username, (exists) => {
+    const isLoggedInUser = req.user && req.user.username === req.params.username;
+    const canAccess = exists && isLoggedInUser;
+    return canAccess ?
+      res.send(renderIndex()) :
+      get404Sketch(html => res.send(html));
+  });
+});
+
 router.get('/account', (req, res) => {
   if (req.user) {
     res.send(renderIndex());