fix folder auto-expand on save

Author: 7070Shreyash

client/modules/IDE/actions/files.js

@@ -63,7 +63,7 @@ export function submitFile(formProps, files, parentId, projectId) {
       children: []
     };
     return apiClient
-      .post(`/projects/${projectId}/files`, postParams)
+      .post(`/projects/${projectId}/files`, postParams) //
       .then((response) => ({
         file: response.data.updatedFile,
         updatedAt: response.data.project.updatedAt
@@ -93,6 +93,7 @@ export function handleCreateFile(formProps, setSelected = true) {
       submitFile(formProps, files, parentId, projectId)
         .then((response) => {
           const { file, updatedAt } = response;
+          file.fileType = 'file';
           dispatch(createFile(file, parentId));
           if (updatedAt) dispatch(setProjectSavedTime(updatedAt));
           dispatch(closeNewFileModal());
@@ -153,6 +154,7 @@ export function handleCreateFolder(formProps) {
       submitFolder(formProps, files, parentId, projectId)
         .then((response) => {
           const { file, updatedAt } = response;
+          file.isFolderClosed = false;
           dispatch(createFile(file, parentId));
           if (updatedAt) dispatch(setProjectSavedTime(updatedAt));
           dispatch(closeNewFolderModal());

client/modules/IDE/reducers/files.js

@@ -18,7 +18,8 @@ export const initialState = () => {
       _id: r,
       children: [b, a, c],
       fileType: 'folder',
-      content: ''
+      content: '',
+      isFolderClosed: false //
     },
     {
       name: 'sketch.js',
@@ -159,8 +160,22 @@ const files = (state, action) => {
         return Object.assign({}, file, { blobURL: action.blobURL });
       });
     case ActionTypes.NEW_PROJECT:
+      action.files = action.files.map((file) => {
+        const corrospondingObj = state.find((obj) => obj.id === file.id);
+        if (corrospondingObj && corrospondingObj.fileType === 'folder') {
+          file.isFolderClosed = corrospondingObj.isFolderClosed;
+        }
+        return file;
+      });
       return setFilePaths(action.files);
     case ActionTypes.SET_PROJECT:
+      action.files = action.files.map((file) => {
+        const corrospondingObj = state.find((obj) => obj.id === file.id);
+        if (corrospondingObj && corrospondingObj.fileType === 'folder') {
+          file.isFolderClosed = corrospondingObj.isFolderClosed;
+        }
+        return file;
+      });
       return setFilePaths(action.files);
     case ActionTypes.RESET_PROJECT:
       return initialState();
@@ -175,19 +190,53 @@ const files = (state, action) => {
         parentFile.name === 'root'
           ? ''
           : `${parentFile.filePath}/${parentFile.name}`;
-      const newState = [
-        ...updateParent(state, action),
-        {
-          name: action.name,
-          id: action.id,
-          _id: action._id,
-          content: action.content,
-          url: action.url,
-          children: action.children,
-          fileType: action.fileType || 'file',
-          filePath
-        }
-      ];
+      // const newState = [
+      //   ...updateParent(state, action),
+      //   {
+      //     name: action.name,
+      //     id: action.id,
+      //     _id: action._id,
+      //     content: action.content,
+      //     url: action.url,
+      //     children: action.children,
+      //     fileType: action.fileType || 'file',
+      //     filePath,
+      //     isExpanded: action.isExpanded
+      //   }
+      // ];
+
+      let newState = null;
+      if (action.fileType === 'folder') {
+        newState = [
+          ...updateParent(state, action),
+          {
+            name: action.name,
+            id: action.id,
+            _id: action._id,
+            content: action.content,
+            url: action.url,
+            children: action.children,
+            fileType: 'folder',
+            filePath,
+            isFolderClosed: false
+          }
+        ];
+      } else {
+        newState = [
+          ...updateParent(state, action),
+          {
+            name: action.name,
+            id: action.id,
+            _id: action._id,
+            content: action.content,
+            url: action.url,
+            children: action.children,
+            fileType: 'file',
+            filePath
+          }
+        ];
+      }
+
       return newState.map((file) => {
         if (file.id === action.parentId) {
           file.children = sortedChildrenId(newState, file.children);
@@ -236,14 +285,18 @@ const files = (state, action) => {
     case ActionTypes.SHOW_FOLDER_CHILDREN:
       return state.map((file) => {
         if (file.id === action.id) {
-          return Object.assign({}, file, { isFolderClosed: false });
+          return Object.assign({}, file, {
+            isFolderClosed: false
+          });
         }
         return file;
       });
     case ActionTypes.HIDE_FOLDER_CHILDREN:
       return state.map((file) => {
         if (file.id === action.id) {
-          return Object.assign({}, file, { isFolderClosed: true });
+          return Object.assign({}, file, {
+            isFolderClosed: true
+          });
         }
         return file;
       });

client/modules/IDE/reducers/project.js

@@ -33,7 +33,8 @@ const project = (state, action) => {
         name: action.project.name,
         updatedAt: action.project.updatedAt,
         owner: action.owner,
-        isSaving: false
+        isSaving: false,
+        files: action.project.files
       };
     case ActionTypes.RESET_PROJECT:
       return initialState();