From 55b54f09bdc7bfd5439f096cf1411019cb24d1de Mon Sep 17 00:00:00 2001
From: Jen Kagan <kaganjd@gmail.com>
Date: Thu, 1 Dec 2016 17:12:34 -0500
Subject: [PATCH] Change routes to /:username/sketches/:projectid (#216)

---
 client/modules/IDE/actions/project.js        | 6 +++---
 client/modules/IDE/components/ShareModal.jsx | 5 +++--
 client/modules/IDE/components/SketchList.jsx | 3 ++-
 client/modules/IDE/components/Toolbar.jsx    | 2 +-
 client/modules/IDE/pages/IDEView.jsx         | 1 +
 client/routes.jsx                            | 1 +
 server/routes/server.routes.js               | 4 ++++
 7 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index 2659b4d5..837639d4 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -76,7 +76,7 @@ export function saveProject(autosave = false) {
         .then(response => {
           dispatch(setUnsavedChanges(false));
           dispatch(setProjectSavedTime(moment().format()));
-          browserHistory.push(`/projects/${response.data.id}`);
+          browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
           dispatch({
             type: ActionTypes.NEW_PROJECT,
             name: response.data.name,
@@ -114,7 +114,7 @@ export function createProject() {
   return (dispatch) => {
     axios.post(`${ROOT_URL}/projects`, {}, { withCredentials: true })
       .then(response => {
-        browserHistory.push(`/projects/${response.data.id}`);
+        browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
         dispatch({
           type: ActionTypes.NEW_PROJECT,
           name: response.data.name,
@@ -153,7 +153,7 @@ export function cloneProject() {
     const formParams = Object.assign({}, { name: `${state.project.name} copy` }, { files: state.files });
     axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true })
       .then(response => {
-        browserHistory.push(`/projects/${response.data.id}`);
+        browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
         dispatch({
           type: ActionTypes.NEW_PROJECT,
           name: response.data.name,
diff --git a/client/modules/IDE/components/ShareModal.jsx b/client/modules/IDE/components/ShareModal.jsx
index 661a1ed6..99a42626 100644
--- a/client/modules/IDE/components/ShareModal.jsx
+++ b/client/modules/IDE/components/ShareModal.jsx
@@ -37,7 +37,7 @@ class ShareModal extends React.Component {
           <input
             type="text"
             className="share-modal__input"
-            value={`${hostname}/projects/${this.props.projectId}`}
+            value={`${hostname}/${this.props.ownerUsername}/sketches/${this.props.projectId}`}
           />
         </div>
       </section>
@@ -47,7 +47,8 @@ class ShareModal extends React.Component {
 
 ShareModal.propTypes = {
   projectId: PropTypes.string.isRequired,
-  closeShareModal: PropTypes.func.isRequired
+  closeShareModal: PropTypes.func.isRequired,
+  ownerUsername: PropTypes.string
 };
 
 export default ShareModal;
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index d2b95d14..ec1ebd9b 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -25,6 +25,7 @@ class SketchList extends React.Component {
   }
 
   render() {
+    const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
     return (
       <section className="sketch-list" aria-label="project list" tabIndex="0" role="main" id="sketchlist">
         <header className="sketch-list__header">
@@ -64,7 +65,7 @@ class SketchList extends React.Component {
                     }
                   })()}
                   </td>
-                  <td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
+                  <td scope="row"><Link to={`/${username}/sketches/${sketch._id}`}>{sketch.name}</Link></td>
                   <td>{moment(sketch.createdAt).format('MMM D, YYYY h:mm:ss A')}</td>
                   <td>{moment(sketch.updatedAt).format('MMM D, YYYY h:mm:ss A')}</td>
                 </tr>
diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx
index fcc9dbaf..630c57ca 100644
--- a/client/modules/IDE/components/Toolbar.jsx
+++ b/client/modules/IDE/components/Toolbar.jsx
@@ -95,7 +95,7 @@ class Toolbar extends React.Component {
         <div className={nameContainerClass}>
           <a
             className="toolbar__project-name"
-            href={`/projects/${this.props.project.id}`}
+            href={this.props.owner ? `/${this.props.owner.username}/sketches/${this.props.project.id}` : ''}
             onClick={(e) => {
               if (this.canEditProjectName()) {
                 e.preventDefault();
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 238460c7..4277b420 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -414,6 +414,7 @@ class IDEView extends React.Component {
                 <ShareModal
                   projectId={this.props.project.id}
                   closeShareModal={this.props.closeShareModal}
+                  ownerUsername={this.props.project.owner.username}
                 />
               </Overlay>
             );
diff --git a/client/routes.jsx b/client/routes.jsx
index ea3a8fe6..a2e461f5 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -21,6 +21,7 @@ const routes = (store) =>
     <Route path="/projects/:project_id" component={IDEView} />
     <Route path="/full/:project_id" component={FullView} />
     <Route path="/sketches" component={IDEView} />
+    <Route path="/:username/sketches/:project_id" component={IDEView} />
     <Route path="/:username/sketches" component={IDEView} />
     <Route path="/about" component={IDEView} />
   </Route>
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index d18a932e..8891f56e 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -18,6 +18,10 @@ router.route('/projects/:project_id').get((req, res) => {
   res.send(renderIndex());
 });
 
+router.route('/:username/sketches/:project_id').get((req, res) => {
+  res.send(renderIndex());
+});
+
 // router.route('/full/:project_id').get((req, res) => {
 //   res.send(renderIndex());
 // });