Update sketch list styling

client/constants.js

@@ -20,6 +20,7 @@ export const AUTH_ERROR = 'AUTH_ERROR';
 export const SETTINGS_UPDATED = 'SETTINGS_UPDATED';
 
 export const SET_PROJECT_NAME = 'SET_PROJECT_NAME';
+export const RENAME_PROJECT = 'RENAME_PROJECT';
 
 export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';

client/modules/App/components/Overlay.jsx

@@ -33,7 +33,7 @@ class Overlay extends React.Component {
       return;
     }
 
-    this.handleClickOutside();
+    this.handleClickOutside(e);
   }
 
   handleClickOutside() {
@@ -49,6 +49,10 @@ class Overlay extends React.Component {
   }
 
   close() {
+    // Only close if it is the last (and therefore the topmost overlay)
+    const overlays = document.getElementsByClassName('overlay');
+    if (this.node.parentElement.parentElement !== overlays[overlays.length - 1]) return;
+
     if (!this.props.closeOverlay) {
       browserHistory.push(this.props.previousPath);
     } else {

client/modules/IDE/actions/ide.js

@@ -134,9 +134,17 @@ export function closeNewFolderModal() {
   };
 }
 
-export function showShareModal() {
-  return {
-    type: ActionTypes.SHOW_SHARE_MODAL
+export function showShareModal(projectId, projectName, ownerUsername) {
+  return (dispatch, getState) => {
+    const { project, user } = getState();
+    dispatch({
+      type: ActionTypes.SHOW_SHARE_MODAL,
+      payload: {
+        shareModalProjectId: projectId || project.id,
+        shareModalProjectName: projectName || project.name,
+        shareModalProjectUsername: ownerUsername || user.username
+      }
+    });
   };
 }
 

client/modules/IDE/actions/project.js

@@ -9,7 +9,8 @@ import {
   setUnsavedChanges,
   justOpenedProject,
   resetJustOpenedProject,
-  showErrorModal
+  showErrorModal,
+  setPreviousPath
 } from './ide';
 import { clearState, saveState } from '../../../persistState';
 
@@ -246,47 +247,61 @@ function generateNewIdsForChildren(file, files) {
   file.children = newChildren; // eslint-disable-line
 }
 
-export function cloneProject() {
+export function cloneProject(id) {
   return (dispatch, getState) => {
     dispatch(setUnsavedChanges(false));
-    const state = getState();
-    const newFiles = state.files.map((file) => { // eslint-disable-line
-      return { ...file };
-    });
+    new Promise((resolve, reject) => {
+      if (!id) {
+        resolve(getState());
+      } else {
+        fetch(`${ROOT_URL}/projects/${id}`)
+          .then(res => res.json())
+          .then(data => resolve({
+            files: data.files,
+            project: {
+              name: data.name
+            }
+          }));
+      }
+    }).then((state) => {
+      const newFiles = state.files.map((file) => { // eslint-disable-line
+        return { ...file };
+      });
 
-    // generate new IDS for all files
-    const rootFile = newFiles.find(file => file.name === 'root');
-    const newRootFileId = objectID().toHexString();
-    rootFile.id = newRootFileId;
-    rootFile._id = newRootFileId;
-    generateNewIdsForChildren(rootFile, newFiles);
+      // generate new IDS for all files
+      const rootFile = newFiles.find(file => file.name === 'root');
+      const newRootFileId = objectID().toHexString();
+      rootFile.id = newRootFileId;
+      rootFile._id = newRootFileId;
+      generateNewIdsForChildren(rootFile, newFiles);
 
-    // duplicate all files hosted on S3
-    each(newFiles, (file, callback) => {
-      if (file.url && file.url.includes('amazonaws')) {
-        const formParams = {
-          url: file.url
-        };
-        axios.post(`${ROOT_URL}/S3/copy`, formParams, { withCredentials: true })
+      // duplicate all files hosted on S3
+      each(newFiles, (file, callback) => {
+        if (file.url && file.url.includes('amazonaws')) {
+          const formParams = {
+            url: file.url
+          };
+          axios.post(`${ROOT_URL}/S3/copy`, formParams, { withCredentials: true })
+            .then((response) => {
+              file.url = response.data.url;
+              callback(null);
+            });
+        } else {
+          callback(null);
+        }
+      }, (err) => {
+        // if not errors in duplicating the files on S3, then duplicate it
+        const formParams = Object.assign({}, { name: `${state.project.name} copy` }, { files: newFiles });
+        axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true })
           .then((response) => {
-            file.url = response.data.url;
-            callback(null);
-          });
-      } else {
-        callback(null);
-      }
-    }, (err) => {
-      // if not errors in duplicating the files on S3, then duplicate it
-      const formParams = Object.assign({}, { name: `${state.project.name} copy` }, { files: newFiles });
-      axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true })
-        .then((response) => {
-          browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
-          dispatch(setNewProject(response.data));
-        })
-        .catch(response => dispatch({
-          type: ActionTypes.PROJECT_SAVE_FAIL,
-          error: response.data
-        }));
+            browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
+            dispatch(setNewProject(response.data));
+          })
+          .catch(response => dispatch({
+            type: ActionTypes.PROJECT_SAVE_FAIL,
+            error: response.data
+          }));
+      });
     });
   };
 }
@@ -309,3 +324,58 @@ export function setProjectSavedTime(updatedAt) {
     value: updatedAt
   };
 }
+
+export function changeProjectName(id, newName) {
+  return (dispatch, getState) => {
+    const state = getState();
+    axios.put(`${ROOT_URL}/projects/${id}`, { name: newName }, { withCredentials: true })
+      .then((response) => {
+        if (response.status === 200) {
+          dispatch({
+            type: ActionTypes.RENAME_PROJECT,
+            payload: { id: response.data.id, name: response.data.name }
+          });
+          if (state.project.id === response.data.id) {
+            dispatch({
+              type: ActionTypes.SET_PROJECT_NAME,
+              name: response.data.name
+            });
+          }
+        }
+      })
+      .catch((response) => {
+        console.log(response);
+        dispatch({
+          type: ActionTypes.PROJECT_SAVE_FAIL,
+          error: response.data
+        });
+      });
+  };
+}
+
+export function deleteProject(id) {
+  return (dispatch, getState) => {
+    axios.delete(`${ROOT_URL}/projects/${id}`, { withCredentials: true })
+      .then(() => {
+        const state = getState();
+        if (id === state.project.id) {
+          dispatch(resetProject());
+          dispatch(setPreviousPath('/'));
+        }
+        dispatch({
+          type: ActionTypes.DELETE_PROJECT,
+          id
+        });
+      })
+      .catch((response) => {
+        if (response.status === 403) {
+          dispatch(showErrorModal('staleSession'));
+        } else {
+          dispatch({
+            type: ActionTypes.ERROR,
+            error: response.data
+          });
+        }
+      });
+  };
+}

client/modules/IDE/actions/projects.js

@@ -1,12 +1,11 @@
 import axios from 'axios';
 import * as ActionTypes from '../../../constants';
-import { showErrorModal, setPreviousPath } from './ide';
-import { resetProject } from './project';
 import { startLoader, stopLoader } from './loader';
 
 const __process = (typeof global !== 'undefined' ? global : window).process;
 const ROOT_URL = __process.env.API_URL;
 
+// eslint-disable-next-line
 export function getProjects(username) {
   return (dispatch) => {
     dispatch(startLoader());
@@ -33,30 +32,3 @@ export function getProjects(username) {
       });
   };
 }
-
-export function deleteProject(id) {
-  return (dispatch, getState) => {
-    axios.delete(`${ROOT_URL}/projects/${id}`, { withCredentials: true })
-      .then(() => {
-        const state = getState();
-        if (id === state.project.id) {
-          dispatch(resetProject());
-          dispatch(setPreviousPath('/'));
-        }
-        dispatch({
-          type: ActionTypes.DELETE_PROJECT,
-          id
-        });
-      })
-      .catch((response) => {
-        if (response.status === 403) {
-          dispatch(showErrorModal('staleSession'));
-        } else {
-          dispatch({
-            type: ActionTypes.ERROR,
-            error: response.data
-          });
-        }
-      });
-  };
-}

client/modules/IDE/components/AssetList.jsx

@@ -17,13 +17,14 @@ class AssetList extends React.Component {
   }
 
   getAssetsTitle() {
-    if (this.props.username === this.props.user.username) {
+    if (!this.props.username || this.props.username === this.props.user.username) {
       return 'p5.js Web Editor | My assets';
     }
     return `p5.js Web Editor | ${this.props.username}'s assets`;
   }
 
   render() {
+    const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
     return (
       <div className="asset-table-container">
         <Helmet>
@@ -49,7 +50,7 @@ class AssetList extends React.Component {
                     <td>{asset.name}</td>
                     <td>{prettyBytes(asset.size)}</td>
                     <td><Link to={asset.url} target="_blank">View</Link></td>
-                    <td><Link to={`/${this.props.username}/sketches/${asset.sketchId}`}>{asset.sketchName}</Link></td>
+                    <td><Link to={`/${username}/sketches/${asset.sketchId}`}>{asset.sketchName}</Link></td>
                   </tr>
                 ))}
             </tbody>