From 474abd8f7894b5d690616d8e25992390169ea772 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A1ssio=20Zen?= <cassiozen@gmail.com>
Date: Thu, 11 Aug 2016 18:21:32 -0300
Subject: [PATCH] Markdown editor switching

---
 src/actions/editor.js                     |  8 +++
 src/components/Widgets/MarkdownControl.js | 64 ++++++++++++++++++++---
 src/reducers/editor.js                    | 14 +++++
 src/reducers/index.js                     |  2 +
 4 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 src/actions/editor.js
 create mode 100644 src/reducers/editor.js

diff --git a/src/actions/editor.js b/src/actions/editor.js
new file mode 100644
index 00000000..c9e35448
--- /dev/null
+++ b/src/actions/editor.js
@@ -0,0 +1,8 @@
+export const SWITCH_VISUAL_MODE = 'SWITCH_VISUAL_MODE';
+
+export function switchVisualMode(useVisualMode) {
+  return {
+    type: SWITCH_VISUAL_MODE,
+    payload: useVisualMode
+  };
+}
diff --git a/src/components/Widgets/MarkdownControl.js b/src/components/Widgets/MarkdownControl.js
index f27285c0..0e7e9850 100644
--- a/src/components/Widgets/MarkdownControl.js
+++ b/src/components/Widgets/MarkdownControl.js
@@ -1,16 +1,59 @@
 import React, { PropTypes } from 'react';
+import RawEditor from './MarkdownControlElements/RawEditor';
 import VisualEditor from './MarkdownControlElements/VisualEditor';
+import { connect } from 'react-redux';
+import { switchVisualMode } from '../../actions/editor';
 
 class MarkdownControl extends React.Component {
+  constructor(props){
+    super(props);
+    this.useVisualEditor = this.useVisualEditor.bind(this);
+    this.useRawEditor = this.useRawEditor.bind(this);
+  }
+
+  useVisualEditor(){
+    this.props.switchVisualMode(true);
+  }
+
+  useRawEditor(){
+    this.props.switchVisualMode(false);
+  }
+
+  renderEditor() {
+    const { editor, onChange, onAddMedia, getMedia, value } = this.props;
+    if (editor.get('useVisualMode')) {
+      return (
+        <div>
+          <button onClick={this.useRawEditor}>Switch to Raw Editor</button>
+          <VisualEditor
+              onChange={onChange}
+              onAddMedia={onAddMedia}
+              getMedia={getMedia}
+              value={value}
+          />
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <button onClick={this.useVisualEditor}>Switch to Visual Editor</button>
+          <RawEditor
+              onChange={onChange}
+              onAddMedia={onAddMedia}
+              getMedia={getMedia}
+              value={value}
+          />
+        </div>
+      );
+    }
+  }
+
   render() {
-    const { onChange, onAddMedia, getMedia, value } = this.props;
     return (
-      <VisualEditor
-          onChange={onChange}
-          onAddMedia={onAddMedia}
-          getMedia={getMedia}
-          value={value}
-      />
+      <div>
+
+        { this.renderEditor() }
+      </div>
     );
   }
 }
@@ -18,8 +61,15 @@ class MarkdownControl extends React.Component {
 export default MarkdownControl;
 
 MarkdownControl.propTypes = {
+  editor: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
   onAddMedia: PropTypes.func.isRequired,
   getMedia: PropTypes.func.isRequired,
+  switchVisualMode: PropTypes.func.isRequired,
   value: PropTypes.node,
 };
+
+export default connect(
+  state => ({ editor: state.editor }),
+  { switchVisualMode }
+)(MarkdownControl);
diff --git a/src/reducers/editor.js b/src/reducers/editor.js
new file mode 100644
index 00000000..2273e708
--- /dev/null
+++ b/src/reducers/editor.js
@@ -0,0 +1,14 @@
+import { Map } from 'immutable';
+import { SWITCH_VISUAL_MODE } from '../actions/editor';
+
+const editor = (state = Map({ useVisualMode: true }), action) => {
+  switch (action.type) {
+    case SWITCH_VISUAL_MODE:
+      return Map({ useVisualMode: action.payload });
+
+    default:
+      return state;
+  }
+};
+
+export default editor;
diff --git a/src/reducers/index.js b/src/reducers/index.js
index ecdac295..f7199111 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,5 +1,6 @@
 import auth from './auth';
 import config from './config';
+import editor from './editor';
 import entries, * as fromEntries  from './entries';
 import entryDraft from './entryDraft';
 import collections from './collections';
@@ -9,6 +10,7 @@ const reducers = {
   auth,
   config,
   collections,
+  editor,
   entries,
   entryDraft,
   medias