add file works on unsaved project

client/modules/IDE/actions/files.js

@@ -73,6 +73,8 @@ export function createFile(formProps) {
         name: createUniqueName(formProps.name, state.files),
         url: formProps.url,
         content: formProps.content || ''
+        // TODO pass parent id to API, once there are folders
+        parentId: '0'
       };
       axios.post(`${ROOT_URL}/projects/${state.project.id}/files`, postParams, { withCredentials: true })
         .then(response => {
@@ -107,6 +109,8 @@ export function createFile(formProps) {
         id: `${maxFileId + 1}`,
         url: formProps.url,
         content: formProps.content || ''
+        // TODO pass parent id from File Tree
+        parentId: '0'
       });
       dispatch({
         type: ActionTypes.HIDE_MODAL

client/modules/IDE/reducers/files.js

@@ -78,8 +78,16 @@ const files = (state = initialState, action) => {
       return [...action.files];
     case ActionTypes.RESET_PROJECT:
       return initialState;
-    case ActionTypes.CREATE_FILE:
-      return [...state, { name: action.name, id: action.id, content: action.content, url: action.url }];
+    case ActionTypes.CREATE_FILE: // eslint-disable-line
+      const newState = state.map((file) => {
+        if (file.id === action.parentId) {
+          const newFile = Object.assign({}, file);
+          newFile.children = [...newFile.children, action.id];
+          return newFile;
+        }
+        return file;
+      });
+      return [...newState, { name: action.name, id: action.id, content: action.content, url: action.url }];
     case ActionTypes.SHOW_FILE_OPTIONS:
       return state.map(file => {
         if (file.id !== action.id) {

client/styles/components/_sidebar.scss

@@ -40,9 +40,6 @@
   padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
   color: $light-inactive-text-color;
   cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  position: relative;
   &--selected {
     background-color: $ide-border-color;
   }
@@ -51,6 +48,12 @@
   }
 }
 
+.file-item__content {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
 .sidebar__file-item-name {
   .sidebar__file-item--editing & {
     display: none;

server/controllers/file.controller.js

@@ -14,6 +14,19 @@ export function createFile(req, res) {
       new: true
     }, (err, updatedProject) => {
       if (err) { return res.json({ success: false }); }
-      return res.json(updatedProject.files[updatedProject.files.length - 1]);
+      const newFile = updatedProject.files[updatedProject.files.length - 1];
+      Project.findByIdAndUpdate(
+        {"_id": req.params.project_id, "files._id": req.params.parentId},
+        {
+          $push: {
+            'files.$.children': newFile.id
+          }
+        },
+        {
+          new: true
+        }, (errAgain, updatedProjectAgain) => {
+          if (errAgain) { return res.json({ success: false }); }
+          return res.json(updatedProject.files[updatedProject.files.length - 1]);
+        });
     });
 }

server/models/project.js

@@ -54,7 +54,8 @@ const projectSchema = new Schema({
   user: { type: Schema.Types.ObjectId, ref: 'User' },
   files: { type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch, _id: new ObjectId() },
     { name: 'index.html', content: defaultHTML, _id: new ObjectId() },
-    { name: 'style.css', content: defaultCSS, _id: new ObjectId() }]},
+    { name: 'style.css', content: defaultCSS, _id: new ObjectId() },
+    { name: 'root', _id: '0'}]},
   _id: { type: String, default: shortid.generate },
   selectedFile: Schema.Types.ObjectId
 }, { timestamps: true });