Change routes to /:username/sketches/:projectid (#216)

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,

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;

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>

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();

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>
             );

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>

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());
 // });