adding close preview

src/components/EntryEditor/EntryEditor.js

@@ -1,15 +1,19 @@
 import React, { Component, PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import SplitPane from 'react-split-pane';
+import Button from 'react-toolbox/lib/button';
 import { ScrollSync, ScrollSyncPane } from '../ScrollSync';
 import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
 import Toolbar from './EntryEditorToolbar';
 import styles from './EntryEditor.css';
 
+const PREVIEW_STATE = 'cms.preview-state';
+
 class EntryEditor extends Component {
   state = {
     showEventBlocker: false,
+    previewOpen: localStorage.getItem(PREVIEW_STATE) === "open",
   };
 
   handleSplitPaneDragStart = () => {
@@ -25,6 +29,15 @@ class EntryEditor extends Component {
     this.props.onPersist();
   };
 
+  handleTogglePreview = () => {
+    const { previewOpen } = this.state;
+    const newPreviewState = !previewOpen ? "open" : "closed";
+    this.setState(
+      { previewOpen: !previewOpen },
+      localStorage.setItem(PREVIEW_STATE, newPreviewState)
+    );
+  };
+
   render() {
     const {
         collection,
@@ -40,20 +53,13 @@ class EntryEditor extends Component {
         onCancelEdit,
     } = this.props;
 
+    const { previewOpen } = this.state;
     const controlClassName = `${ styles.controlPane } ${ this.state.showEventBlocker && styles.blocker }`;
     const previewClassName = `${ styles.previewPane } ${ this.state.showEventBlocker && styles.blocker }`;
-    return (
-      <div className={styles.root}>
-        <ScrollSync>
-          <div className={styles.container}>
-            <SplitPane
-              defaultSize="50%"
-              onDragStarted={this.handleSplitPaneDragStart}
-              onDragFinished={this.handleSplitPaneDragFinished}
-            >
-              <ScrollSyncPane>
-                <div className={controlClassName}>
 
+    const editor = (
+      <div className={controlClassName}>
+        <Button onClick={this.handleTogglePreview}> TOGGLE PREVIEW </Button>
         <ControlPane
           collection={collection}
           entry={entry}
@@ -67,8 +73,19 @@ class EntryEditor extends Component {
           onRemoveAsset={onRemoveAsset}
           ref={c => this.controlPaneRef = c} // eslint-disable-line
         />
-
       </div>
+    );
+
+    const editorWithPreivew = (
+      <ScrollSync>
+        <div className={styles.container}>
+          <SplitPane
+            defaultSize="50%"
+            onDragStarted={this.handleSplitPaneDragStart}
+            onDragFinished={this.handleSplitPaneDragFinished}
+          >
+            <ScrollSyncPane>
+              {editor}
             </ScrollSyncPane>
             <div className={previewClassName}>
               <PreviewPane
@@ -81,7 +98,11 @@ class EntryEditor extends Component {
             </div>
           </SplitPane>
         </div>
-        </ ScrollSync>
+      </ScrollSync>
+    );
+    return (
+      <div className={styles.root}>
+        {previewOpen === true ? editorWithPreivew : editor}
         <div className={styles.footer}>
           <Toolbar
             isPersisting={entry.get('isPersisting')}
@@ -89,7 +110,6 @@ class EntryEditor extends Component {
             onCancelEdit={onCancelEdit}
           />
         </div>
-
       </div>
     );
   }