Refactoring Editor into different components for each mode

src/components/editorAnnotateMode.js

@@ -0,0 +1,43 @@
+import { ReadModeTopBar, EditModeTopBar, AnnotateModeTopBar }  from '../components/contentTopBar'
+import { EditModeBottomBar } from '../components/contentBottomBar'
+import actions from '../actions'
+import DocumentTitle from '../components/documentTitle'
+import LoadingSpinner from '../components/loadingSpinner'
+
+const EditorAnnotateMode = ({
+	currentDocument,
+	editorState,
+	docType,
+	loadingToggle,
+	onChangeEditorState,
+	onNewAnnotationClick,
+	annotateKeyBindings,
+	onRemoveAnnotationClick,
+	cancelEdit,
+	onSubmitClick,
+	documentTitleInput
+}) =>
+	<div>
+		<div id='editor_metadata'>
+			{loadingToggle === true &&
+				<LoadingSpinner />
+			}
+			<DocumentTitle docType={docType} currentDocument={currentDocument} />
+		</div>
+		<div id='editor_topbar'>
+			<AnnotateModeTopBar 
+				onNewAnnotationClick={onNewAnnotationClick}
+				onRemoveAnnotationClick={onRemoveAnnotationClick}
+				addDisabled={editorState.getSelection().isCollapsed() ? true : false}
+				removeDisabled={(editorState.getSelection().isCollapsed() ) ? true : false}
+			/>
+		</div>	
+		<div id='editor_content'>
+			<Editor editorState={editorState} onChange={onChangeEditorState} keyBindingFn={annotateKeyBindings} />
+		</div>
+		<div id='editor_bottombar'>
+			<EditModeBottomBar cancelEdit={cancelEdit} onSubmitClick={onSubmitClick} />
+		</div>
+	</div>
+
+export default EditorAnnotateMode

src/components/editorEditMode.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Editor } from 'draft-js'
+
+import { EditModeTopBar }  from '../components/contentTopBar'
+import { EditModeBottomBar } from '../components/contentBottomBar'
+import actions from '../actions'
+import DocumentTitle from '../components/documentTitle'
+import LoadingSpinner from '../components/loadingSpinner'
+
+const EditorEditMode = ({
+	currentDocument,
+	editorState,
+	docType,
+	loadingToggle,
+	handleKeyCommand,
+	onChangeEditorState,
+	onToolButtonClick,
+	setMode,
+	cancelEdit,
+	onSubmitClick,
+	documentTitleInput,
+	onDocumentTitleChange
+}) =>
+	<div>
+		<div id='editor_metadata'>
+			{loadingToggle === true &&
+				<LoadingSpinner />
+			}
+			<input type='text' value={documentTitleInput} onChange={onDocumentTitleChange}/>
+		</div>
+		<div id='editor_topbar'>
+			<EditModeTopBar 
+				editorState={editorState}
+				onToolButtonClick={onToolButtonClick}
+				disabled={!currentDocument.id ? true : false}
+			/>
+		</div>	
+		<div id='editor_content'>
+			<Editor 
+				editorState={editorState} 
+				handleKeyCommand={handleKeyCommand} 
+				onChange={onChangeEditorState}
+			/>	
+		</div>
+		<div id='editor_bottombar'>
+			<EditModeBottomBar cancelEdit={cancelEdit} onSubmitClick={onSubmitClick} />
+		</div>
+	</div>
+
+export default EditorEditMode

src/components/editorReadMode.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Editor } from 'draft-js'
+
+import { ReadModeTopBar }  from '../components/contentTopBar'
+import actions from '../actions'
+import DocumentTitle from '../components/documentTitle'
+import LoadingSpinner from '../components/loadingSpinner'
+
+const EditorReadMode = ({
+	currentDocument,
+	editorState,
+	docType,
+	loadingToggle,
+	setMode
+}) =>
+	<div id='editor_read_mode'>
+		<div id='editor_metadata'>
+				{loadingToggle === true &&
+					<LoadingSpinner />
+				}
+				<DocumentTitle docType={docType} currentDocument={currentDocument} />
+		</div>
+		<div id='editor_topbar'>
+			<ReadModeTopBar setMode={setMode} />
+		</div>	
+		<div id='editor_content'>
+			<Editor editorState={editorState} readOnly={true} />
+		</div>
+	</div>
+
+export default EditorReadMode

src/containers/editorContentContainer.js

@@ -1,13 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Editor } from 'draft-js'
 
-import { ReadModeTopBar, EditModeTopBar, AnnotateModeTopBar }  from '../components/contentTopBar'
-import { EditModeBottomBar } from '../components/contentBottomBar'
 import actions from '../actions'
-import DocumentTitle from '../components/documentTitle'
+import EditorReadMode from '../components/editorReadMode'
-import LoadingSpinner from '../components/loadingSpinner'
+import EditorAnnotateMode from '../components/editorAnnotateMode'
+import EditorEditMode from '../components/editorEditMode'
 
 const EditorContent = ({
 	currentDocument,
@@ -27,46 +25,48 @@ const EditorContent = ({
 	annotateKeyBindings,
 	onRemoveAnnotationClick,
 }) =>
-	<div>
+	<div id='editor_container'>
-		<div id='editor_metadata'>
+		{mode === 'READ_MODE' &&
-			{loadingToggle === true &&
+			<EditorReadMode 
-				<LoadingSpinner />
+				currentDocument={currentDocument} 
-			}
+				editorState={editorState} 
-			{(mode === 'READ_MODE' || mode === 'ANNOTATE_MODE') &&
+				docType={docType}
-				<DocumentTitle docType={docType} currentDocument={currentDocument} />
+				loadingToggle={loadingToggle} 
-			}
+				setMode={setMode} 
-			{mode === 'EDIT_MODE' &&
+			/>
-				<input type='text' value={documentTitleInput} onChange={onDocumentTitleChange}/>
+		}
-			}
+		{mode === 'ANNOTATE_MODE' &&
-		</div>
+			<EditorAnnotateMode 
-		<div id='editor_topbar'>
+				currentDocument={currentDocument} 
-			{mode === 'READ_MODE' &&
+				editorState={editorState}	
-				<ReadModeTopBar setMode={setMode} />
+				docType={docType} 
-			}
+				loadingToggle={loadingToggle} 
-			{mode === 'ANNOTATE_MODE' &&
+				handleKeyCommand={handleKeyCommand}	
-				<AnnotateModeTopBar onNewAnnotationClick={()=>onNewAnnotationClick(editorState.getSelection())} onRemoveAnnotationClick={()=>onRemoveAnnotationClick(editorState)} addDisabled={editorState.getSelection().isCollapsed() ? true : false} removeDisabled={(editorState.getSelection().isCollapsed() ) ? true : false}/>
+				onChangeEditorState={onChangeEditorState} 
-			}
+				onToolButtonClick={onToolButtonClick} 
-			{mode === 'EDIT_MODE' &&
+				setMode={setMode} 
-				<EditModeTopBar editorState={editorState} onToolButtonClick={onToolButtonClick} disabled={!currentDocument.id ? true : false}/>
+				cancelEdit={cancelEdit} 
-			}
+				onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, docType)}	
-		</div>	
+				documentTitleInput={documentTitleInput}	
-		<div id='editor_content'>
+				onDocumentTitleChange={onDocumentTitleChange}
-			{mode === 'READ_MODE' &&
+			/>
-				<Editor editorState={editorState} readOnly={true} />
+		}
-			}
+		{mode === 'EDIT_MODE' &&
-			{mode === 'ANNOTATE_MODE' &&
+			<EditorEditMode 
-				<Editor editorState={editorState} onChange={onChangeEditorState} keyBindingFn={annotateKeyBindings} />
+				currentDocument={currentDocument}
-			}
+				editorState={editorState}
-			{mode === 'EDIT_MODE' &&
+				docType={docType}
-				<Editor editorState={editorState} handleKeyCommand={handleKeyCommand} onChange={onChangeEditorState}/>
+				loadingToggle={loadingToggle}
-			}			
+				onChangeEditorState={onChangeEditorState}
-		</div>
+				onNewAnnotationClick={()=>onNewAnnotationClick(editorState.getSelection())}
-		<div id='editor_bottombar'>
+				annotateKeyBindings={annotateKeyBindings}
-			{(mode === 'EDIT_MODE' || mode === 'ANNOTATE_MODE') &&
+				onRemoveAnnotationClick={()=>onRemoveAnnotationClick(editorState)}
-				<EditModeBottomBar cancelEdit={cancelEdit} onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, docType)} />
+				cancelEdit={cancelEdit}
-			}
+				onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, docType)}
-		</div>
+				documentTitleInput={documentTitleInput}
-	</div>
+			/>
+		}
+	</div>	
 
 const mapStateToProps = (state, props) => {
 	return {