add files, server side, only css and js files

client/modules/IDE/actions/files.js

@@ -1,4 +1,7 @@
 import * as ActionTypes from '../../../constants';
+import axios from 'axios';
+
+const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
 export function updateFileContent(name, content) {
   return {
@@ -9,9 +12,39 @@ export function updateFileContent(name, content) {
 }
 
 // TODO make req to server
-export function createFile(name) {
+export function createFile(formProps) {
-  return {
+  return (dispatch, getState) => {
+    const state = getState();
+    if (state.project.id) {
+      const postParams = {
+        name: formProps.name
+      };
+      axios.post(`${ROOT_URL}/projects/${state.project.id}/files`, postParams, { withCredentials: true })
+        .then(response => {
+          dispatch({
             type: ActionTypes.CREATE_FILE,
-    name
+            ...response.data
+          });
+        })
+        .catch(response => dispatch({
+          type: ActionTypes.ERROR,
+          error: response.data
+        }));
+    } else {
+      let maxFileId = 0;
+      state.files.forEach(file => {
+        if (parseInt(file.id, 10) > maxFileId) {
+          maxFileId = parseInt(file.id, 10);
+        }
+      });
+      dispatch({
+        type: ActionTypes.CREATE_FILE,
+        name: formProps.name,
+        id: `${maxFileId + 1}`
+      });
+      dispatch({
+        type: ActionTypes.HIDE_MODAL
+      });
+    }
   };
 }

client/modules/IDE/components/NewFileModal.js

@@ -51,12 +51,10 @@ function validate(formProps) {
 
   if (!formProps.name) {
     errors.name = 'Please enter a name';
+  } else if (!formProps.name.match(/(.+\.js$|.+\.css$)/)) {
+    errors.name = 'File must be of type JavaScript or CSS.';
   }
 
-  // if (formProps.name.match(/(.+\.js$|.+\.css$)/)) {
-  //   errors.name = 'File must be of type JavaScript or CSS.';
-  // }
-
   return errors;
 }
 

client/modules/IDE/reducers/files.js

@@ -64,8 +64,8 @@ const files = (state = initialState, action) => {
       return [...action.files];
     case ActionTypes.SET_PROJECT:
       return [...action.files];
-    case ActionTypes.NEW_FILE:
+    case ActionTypes.CREATE_FILE:
-      return [{ name: action.name, content: '' }, ...state.files];
+      return [...state, { name: action.name, id: action.id, content: '' }];
     default:
       return state;
   }

client/styles/components/_modal.scss

@@ -1,7 +1,7 @@
 .modal {
   position: absolute;
   top: #{66 / $base-font-size}rem;
-  right: #{400 / $base-font-size}rem;;
+  right: #{400 / $base-font-size}rem;
   z-index: 100;
 }
 

server/controllers/file.controller.js

@@ -0,0 +1,19 @@
+import Project from '../models/Project'
+
+// Bug -> timestamps don't get created, but it seems like this will
+// be fixed in mongoose soon
+// https://github.com/Automattic/mongoose/issues/4049
+export function createFile(req, res) {
+  Project.findByIdAndUpdate(req.params.project_id,
+    {
+      $push: {
+        'files': req.body
+      }
+    },
+    {
+      new: true
+    }, (err, updatedProject) => {
+      if (err) { return res.json({ success: false }); }
+      return res.json(updatedProject.files[updatedProject.files.length - 1]);
+    });
+}

server/routes/file.routes.js

@@ -0,0 +1,8 @@
+import { Router } from 'express';
+import * as FileController from '../controllers/file.controller';
+
+const router = new Router();
+
+router.route('/projects/:project_id/files').post(FileController.createFile);
+
+export default router;

server/server.js

@@ -27,6 +27,7 @@ import serverConfig from './config';
 import users from './routes/user.routes';
 import sessions from './routes/session.routes';
 import projects from './routes/project.routes';
+import files from './routes/file.routes';
 import serverRoutes from './routes/server.routes';
 
 // Body parser, cookie parser, sessions, serve public assets
@@ -55,6 +56,7 @@ app.use(passport.session());
 app.use('/api', users);
 app.use('/api', sessions);
 app.use('/api', projects);
+app.use('/api', files);
 // this is supposed to be TEMPORARY -- until i figure out
 // isomorphic rendering
 app.use('/', serverRoutes);