From b1bfb91f805fe1c53fdc0f4f9a016d88764112a4 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Sat, 24 Aug 2019 12:38:42 +0200
Subject: [PATCH] Serve assets from /:username/assets, redirecting old path

---
 client/components/Nav.jsx                     |  2 +-
 .../components/createRedirectWithUsername.jsx | 28 +++++++++++++++++++
 client/routes.jsx                             |  8 ++++--
 server/routes/server.routes.js                | 10 +++++++
 4 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 client/components/createRedirectWithUsername.jsx

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 253146b0..31b7e5b8 100644
--- a/client/components/Nav.jsx
+++ b/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}
diff --git a/client/components/createRedirectWithUsername.jsx b/client/components/createRedirectWithUsername.jsx
new file mode 100644
index 00000000..a2bdd790
--- /dev/null
+++ b/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;
diff --git a/client/routes.jsx b/client/routes.jsx
index 0bcad82b..89db6977 100644
--- a/client/routes.jsx
+++ b/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>
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index adade10d..41d7dc60 100644
--- a/server/routes/server.routes.js
+++ b/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());