Update file on codemirror change

common/app/routes/challenges/components/Challenge.jsx

@@ -8,6 +8,7 @@ import Editor from './Editor.jsx';
 import SidePanel from './Side-Panel.jsx';
 import Preview from './Preview.jsx';
 import { challengeSelector } from '../redux/selectors';
+import { updateFile } from '../redux/actions';
 
 const mapStateToProps = createSelector(
   challengeSelector,
@@ -16,12 +17,15 @@ const mapStateToProps = createSelector(
   state => state.challengesApp.path,
   ({ challenge, showPreview, mode }, tests, files = {}, path = '') => ({
     content: files[path] && files[path].contents || '',
+    file: files[path],
     showPreview,
     mode,
     tests
   })
 );
 
+const bindableActions = { updateFile };
+
 export class Challenge extends PureComponent {
   static displayName = 'Challenge';
 
@@ -45,7 +49,13 @@ export class Challenge extends PureComponent {
   }
 
   render() {
-    const { content, mode, showPreview } = this.props;
+    const {
+      content,
+      updateFile,
+      file,
+      mode,
+      showPreview
+    } = this.props;
     return (
       <div>
         <Col
@@ -59,6 +69,7 @@ export class Challenge extends PureComponent {
           <Editor
             content={ content }
             mode={ mode }
+            updateFile={ content => updateFile(content, file) }
           />
         </Col>
         { this.renderPreview(showPreview) }
@@ -67,4 +78,4 @@ export class Challenge extends PureComponent {
   }
 }
 
-export default connect(mapStateToProps)(Challenge);
+export default connect(mapStateToProps, bindableActions)(Challenge);

common/app/routes/challenges/components/Editor.jsx

@@ -30,7 +30,8 @@ export class Editor extends PureComponent {
   static propTypes = {
     height: PropTypes.number,
     content: PropTypes.string,
-    mode: PropTypes.string
+    mode: PropTypes.string,
+    updateFile: PropTypes.func
   };
 
   static defaultProps = {
@@ -39,7 +40,7 @@ export class Editor extends PureComponent {
   };
 
   render() {
-    const { content, height, mode } = this.props;
+    const { content, height, mode, updateFile } = this.props;
     const style = {};
     if (height) {
       style.height = height + 'px';
@@ -50,6 +51,7 @@ export class Editor extends PureComponent {
         style={ style }>
         <NoSSR>
           <Codemirror
+            onChange={ updateFile }
             options={{ ...options, mode }}
             value={ content } />
         </NoSSR>

common/app/routes/challenges/redux/actions.js

@@ -1,4 +1,5 @@
 import { createAction } from 'redux-actions';
+import { updateContents } from '../../../../utils/polyvinyl';
 
 import types from './types';
 
@@ -34,5 +35,8 @@ export const updateFilter = createAction(
 export const clearFilter = createAction(types.clearFilter);
 
 // files
-export const updateFile = createAction(types.updateFile);
+export const updateFile = createAction(
+  types.updateFile,
+  (content, file) => updateContents(content, file)
+);
 export const updateFiles = createAction(types.updateFiles);