[WIP] Updating rename functionality

Author: LakshSingla

client/constants.js

@@ -28,6 +28,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/IDE/actions/project.js

@@ -277,3 +277,31 @@ export function hideEditProjectName() {
     type: ActionTypes.HIDE_EDIT_PROJECT_NAME
   };
 }
+
+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
+        });
+      });
+  };
+}

client/modules/IDE/components/SketchList.jsx

@@ -30,6 +30,12 @@ class SketchList extends React.Component {
     this.restoreRenameBoxContent = this.restoreRenameBoxContent.bind(this);
   }
 
+  componentWillReceiveProps(props) {
+    this.setState({
+      renameBoxContent: props.sketches.map(({ name }) => name)
+    });
+  }
+
   getSketchesTitle() {
     if (this.props.username === this.props.user.username) {
       return 'p5.js Web Editor | My sketches';
@@ -118,6 +124,7 @@ class SketchList extends React.Component {
                         onKeyUp={(e) => {
                           // Enter pressed
                           if (e.key === 'Enter') {
+                            this.props.changeProjectName(sketch.id, this.state.renameBoxContent[i]);
                             this.restoreRenameBoxContent();
                             this.closeAllRenameBoxes();
                           }
@@ -184,12 +191,12 @@ class SketchList extends React.Component {
                           className="sketch-list__action-option"
                           onClick={() => {
                             this.closeAllRenameBoxes();
+                            this.closeAllDropdowns();
                             const renameBoxDisplayed = new Array(this.props.sketches.length).fill(false);
                             renameBoxDisplayed[i] = true;
                             this.setState({
                               renameBoxDisplayed
                             });
-                            this.closeAllDropdowns();
                           }}
                         >
                             Rename
@@ -272,6 +279,7 @@ SketchList.propTypes = {
   cloneProject: PropTypes.func.isRequired,
   autosaveProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
+  changeProjectName: PropTypes.func.isRequired
 };
 
 SketchList.defaultProps = {

client/modules/IDE/pages/IDEView.jsx

@@ -427,6 +427,7 @@ class IDEView extends React.Component {
             <Feedback previousPath={this.props.ide.previousPath} />
           </Overlay>
         }
+        aa
         { this.props.ide.shareModalVisible &&
           <Overlay
             title="Share This Sketch"

client/modules/IDE/reducers/projects.js

@@ -7,6 +7,14 @@ const sketches = (state = [], action) => {
     case ActionTypes.DELETE_PROJECT:
       return state.filter(sketch =>
         sketch.id !== action.id);
+    case ActionTypes.RENAME_PROJECT: {
+      return state.map((sketch) => {
+        if (sketch.id === action.payload.id) {
+          return { ...sketch, name: action.payload.name };
+        }
+        return { ...sketch };
+      });
+    }
     default:
       return state;
   }

server/controllers/project.controller.js

@@ -62,7 +62,7 @@ export function updateProject(req, res) {
           res.json({ success: false });
           return;
         }
-        if (updatedProject.files.length !== req.body.files.length) {
+        if (req.body.files && updatedProject.files.length !== req.body.files.length) {
           const oldFileIds = updatedProject.files.map(file => file.id);
           const newFileIds = req.body.files.map(file => file.id);
           const staleIds = oldFileIds.filter(id => newFileIds.indexOf(id) === -1);