Fixing broken functionality

src/actions/inputActions.js

@@ -20,6 +20,12 @@ const inputActions = {
 		({
 			type: 'UPDATE_SEARCH_INPUT',
 			data: input.target.value
+		}),
+	// Handle changes to the file upload input for media docs
+	updateMediaInput: input => 
+		({
+			type: 'UPDATE_MEDIA_INPUT',
+			data: input.target.files
 		})
 }
 

src/components/contentBottomBar.js

@@ -1,19 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { EditorCancelButton, EditorSubmitButton } from '../components/button'
-
-export const EditModeBottomBar = ({cancelEdit, onSubmitClick}) =>
-	<div className='row'>
-		<div className='col-5'>
-			<EditorCancelButton onClick={()=>cancelEdit()}/>
-		</div>
-		<div className='col-5 offset-2'>
-			<EditorSubmitButton onClick={onSubmitClick} />
-		</div>
-	</div>
-
-EditModeBottomBar.propTypes = {
-	cancelEdit: PropTypes.func,
-	onSubmitClick: PropTypes.func,
-}

src/components/contentTopBar.js

@@ -1,58 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { ReaderAnnotateButton, ReaderEditButton, EditorToolButton, EditorDeleteToolButton, AnnotatorNewButton, AnnotatorRemoveButton } from './button'
-
-export const ReadModeTopBar = ({docType, setMode}) =>
-	<div className='row'>
-		{['chapters', 'notes'].indexOf(docType) >= 0 &&
-			<div className='topbar_button col-5'>
-				<ReaderAnnotateButton onClick={()=>setMode('ANNOTATE_MODE')}/>
-			</div>
-		}
-		<div className='topbar_button col-5 ml-auto'>
-			<ReaderEditButton onClick={()=>setMode('EDIT_MODE')} />
-		</div>
-	</div>
-
-export const EditModeTopBar = ({editorState, onToolButtonClick, disabled}) =>
-	<div className='row'>
-		<div className='col-5'>
-			<div className='btn-group' role='group'>
-				<EditorToolButton glyph='bold' onClick={()=>onToolButtonClick(editorState, 'BOLD')}/>
-				<EditorToolButton glyph='italic' onClick={()=>onToolButtonClick(editorState, 'ITALIC')}/>
-				<EditorToolButton glyph='underline' onClick={()=>onToolButtonClick(editorState, 'UNDERLINE')}/>
-				<EditorToolButton glyph='header' onClick={()=>onToolButtonClick(editorState, 'header-two')}/>
-			</div>
-		</div>
-		<div className='col-5 offset-2'>
-			<EditorDeleteToolButton disabled={disabled}/>
-		</div>
-	</div>
-
-export const AnnotateModeTopBar = ({onNewAnnotationClick, onRemoveAnnotationClick, addDisabled, removeDisabled}) =>
-	<div className='row'>
-		<div className='col-5'>
-			<AnnotatorNewButton onClick={onNewAnnotationClick} disabled={addDisabled}/>
-		</div>
-		<div className='col-5 offset-2'>
-			<AnnotatorRemoveButton onClick={onRemoveAnnotationClick} disabled={removeDisabled} />
-		</div>	
-	</div>
-
-ReadModeTopBar.propTypes = {
-	setMode: PropTypes.func,
-}
-
-EditModeTopBar.propTypes = {
-	editorState: PropTypes.object,
-	onToolButtonClick: PropTypes.func,
-	disabled: PropTypes.bool,
-}
-
-AnnotateModeTopBar.propTypes = {
-	onNewAnnotationClick: PropTypes.func,
-	onRemoveAnnotationClick: PropTypes.func,
-	onAddDisabled: PropTypes.bool,
-	removeDisabled: PropTypes.bool,
-}

src/components/documentTitleInput.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const DocumentTitleInput = ({input, onChange}) =>
+	<div className="input-group mb-3">
+	  <div className="input-group-prepend">
+	    <span className="input-group-text" id="basic-addon1">Title:</span>
+	  </div>
+	  <input type="text" className="form-control" value={input} onChange={onChange} placeholder='Document Title'/>
+	</div>
+
+DocumentTitleInput.propTypes = {
+	docType: PropTypes.string,
+	currentDocument: PropTypes.object
+}
+
+export default DocumentTitleInput

src/components/editorAnnotateMode.js

@@ -1,46 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-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 LoadingSpinner from '../components/loadingSpinner'
-
-const EditorAnnotateMode = ({
-	currentDocument,
-	editorState,
-	docType,
-	toggles,
-	onChangeEditorState,
-	onNewAnnotationClick,
-	annotateKeyBindings,
-	onRemoveAnnotationClick,
-	cancelEdit,
-	onSubmitClick,
-}) =>
-	<div id='editor_annotate_mode'  className='editor_wrapper'>
-		<div id='editor_metadata'>
-			{toggles.loading === true &&
-				<LoadingSpinner />
-			}
-			<DocumentTitle docType={docType} currentDocument={currentDocument} />
-		</div>
-		<div id='editor_topbar' className='annotate_mode'>
-			<AnnotateModeTopBar 
-				onNewAnnotationClick={onNewAnnotationClick}
-				onRemoveAnnotationClick={onRemoveAnnotationClick}
-				addDisabled={editorState.getSelection().isCollapsed() ? true : false}
-				removeDisabled={(editorState.getSelection().isCollapsed() ) ? true : false}
-			/>
-		</div>	
-		<div id='editor_content' className={'annotate_mode ' + docType}>
-			<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

@@ -1,65 +0,0 @@
-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 TagColorPicker from '../components/tagColorPicker'
-import actions from '../actions'
-import DocumentTitle from '../components/documentTitle'
-import LoadingSpinner from '../components/loadingSpinner'
-
-const EditorEditMode = ({
-	currentDocument,
-	editorState,
-	docType,
-	toggles,
-	handleKeyCommand,
-	onChangeEditorState,
-	onToolButtonClick,
-	setMode,
-	cancelEdit,
-	onSubmitClick,
-	inputs,
-	onDocumentTitleChange,
-	onColorPickerInputChange,
-	onColorSwatchClick,
-	userErrors,
-}) =>
-	<div id='editor_edit_mode' className='editor_wrapper'>
-		<div id='editor_metadata'>
-			{toggles.loading === true &&
-				<LoadingSpinner />
-			}
-			<input type='text' value={inputs.documentTitle} placeholder='Document Title' onChange={onDocumentTitleChange}/>
-		</div>
-		<div id='editor_topbar'>
-			<EditModeTopBar 
-				editorState={editorState}
-				onToolButtonClick={onToolButtonClick}
-				disabled={!currentDocument.id ? true : false}
-			/>
-		</div>
-		<div id='editor_content' className={'edit_mode ' + docType}>
-			<Editor 
-				editorState={editorState} 
-				handleKeyCommand={handleKeyCommand}
-				onChange={onChangeEditorState}
-			/>	
-		</div>
-		<div id='editor_attributes' className={'edit_mode ' + docType}>
-			{docType === 'tags' &&
-				<TagColorPicker input={inputs.colorPicker} onChange={onColorPickerInputChange} onColorSwatchClick={onColorSwatchClick}/>
-			}
-		</div>		
-		<div id='editor_bottombar'>
-			<EditModeBottomBar cancelEdit={cancelEdit} onSubmitClick={onSubmitClick} />
-		</div>
-		<div id='user_errors'>
-			{userErrors.map(error =>
-				<div key={error} className='user_error_message'>{error}</div>
-			)}
-		</div>
-	</div>
-
-export default EditorEditMode

src/components/editorOptionBlock.js

@@ -16,7 +16,7 @@ export const EditorReadModeOptions = ({setMode, docType}) =>
 export const EditorEditModeRichTextOptions = ({editorState, onToolButtonClick, disabled}) =>
 	<div className='row'>
 		<div className='col-5'>
-			<div className='btn-group' role='group'>
+			<div id='rich_text_button_group' className='btn-group' role='group'>
 				<EditorToolButton glyph='bold' onClick={()=>onToolButtonClick(editorState, 'BOLD')}/>
 				<EditorToolButton glyph='italic' onClick={()=>onToolButtonClick(editorState, 'ITALIC')}/>
 				<EditorToolButton glyph='underline' onClick={()=>onToolButtonClick(editorState, 'UNDERLINE')}/>
@@ -30,20 +30,20 @@ export const EditorEditModeRichTextOptions = ({editorState, onToolButtonClick, d
 
 export const EditorSubmitOptions = ({cancelEdit, onSubmitClick}) =>
 	<div className='row'>
-		<div className='col-5'>
+		<div className='submit_option_button col-5'>
 			<EditorCancelButton onClick={()=>cancelEdit()}/>
 		</div>
-		<div className='col-5 offset-2'>
+		<div className='submit_option_button col-5 offset-2'>
 			<EditorSubmitButton onClick={onSubmitClick} />
 		</div>
 	</div>
 
 export const EditorAnnotateOptions = ({onNewAnnotationClick, onRemoveAnnotationClick, addDisabled, removeDisabled}) =>
 	<div className='row'>
-		<div className='col-5'>
+		<div className='annotate_option_button col-5'>
 			<AnnotatorNewButton onClick={onNewAnnotationClick} disabled={addDisabled}/>
 		</div>
-		<div className='col-5 offset-2'>
+		<div className='annotate_option_button col-5 offset-2'>
 			<AnnotatorRemoveButton onClick={onRemoveAnnotationClick} disabled={removeDisabled} />
 		</div>	
 	</div>	

src/components/editorReadMode.js

@@ -1,29 +0,0 @@
-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,
-	toggles,
-	setMode
-}) =>
-	<div id='editor_read_mode'  className='editor_wrapper'>
-		<div id='editor_metadata'>
-			<DocumentTitle docType={docType} currentDocument={currentDocument} />
-		</div>
-		<div id='editor_topbar'>
-			<ReadModeTopBar docType={docType} setMode={setMode} />
-		</div>	
-		<div id='editor_content' className={'read_mode ' + docType}>
-			
-		</div>
-	</div>
-
-export default EditorReadMode

src/components/mediaUploadInput.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const MediaUploadInput = ({input, onChange}) =>
+	<div className="input-group mb-3">
+	  <div className="custom-file">
+	    <input type="file" className="custom-file-input" id="media_input" onChange={onChange}/>
+	    <label className="custom-file-label" htmlFor="media_input">{input ? input[0].name : 'Choose file'}</label>
+	  </div>
+	</div>
+
+export default MediaUploadInput

src/containers/editorEditModeContainer.js

@@ -6,7 +6,9 @@ import { EditorTitleContentBlock, EditorTopBarContentBlock, EditorTextContentBlo
 import { EditorEditModeRichTextOptions, EditorSubmitOptions } from '../components/editorOptionBlock'
 import actions from '../actions'
 import DocumentTitle from '../components/documentTitle'
+import DocumentTitleInput from '../components/documentTitleInput'
 import TagColorPicker from '../components/tagColorPicker'
+import MediaUploadInput from '../components/mediaUploadInput'
 import LoadingSpinner from '../components/loadingSpinner'
 
 const EditorEditMode = ({
@@ -20,16 +22,15 @@ const EditorEditMode = ({
 	onDocumentTitleChange,
 	onColorPickerInputChange,
 	onColorSwatchClick,
+	onMediaInputChange,
 	cancelEdit,
 	onSubmitClick,
 	onToolButtonClick,
 }) =>
 	<div id='editor_edit_mode'  className='editor_wrapper'>
 		<EditorTitleContentBlock>
-			<input 
-				type='text' 
-				value={inputs.documentTitle} 
-				placeholder='Document Title' 
+			<DocumentTitleInput
+				input={inputs.documentTitle}
 				onChange={onDocumentTitleChange}
 			/>
 		</EditorTitleContentBlock>
@@ -55,6 +56,9 @@ const EditorEditMode = ({
 					onColorSwatchClick={onColorSwatchClick}
 				/>
 			}
+			{docType === 'media' &&
+				<MediaUploadInput input={inputs.fileUpload} onChange={onMediaInputChange}/>
+			}			
 		</EditorAttributeContentBlock>
 		<EditorBottomBarContentBlock>
 			<EditorSubmitOptions 
@@ -93,6 +97,9 @@ const mapDispatchToProps = dispatch => {
 		handleKeyCommand: (command, editorState) => {
 			dispatch(actions.handleEditorKeyCommand(editorState, command))
 		},
+		onMediaInputChange: input => {
+			dispatch(actions.updateMediaInput(input))
+		},
 		cancelEdit: () => {
 			dispatch(actions.cancelEdit())
 		},

src/middleware/joyceRouter.js

@@ -39,7 +39,8 @@ const joyceRouter = store => next => action => {
 				else if (regex.checkIfRootPath(path) && chapters.length > 0) {
 						store.dispatch(actions.setCurrentDocument(chapters[0].id, 'chapters'))
 				}
-				else if (regex.checkEditRoute(path) && !checkIfDocTypePath(path) && chapters.length > 0 ) {
+				// And path is /edit/:id and chapters are loaded, set currentDocument to first chapter
+				else if (regex.checkEditRoute(path) && !regex.checkIfDocTypePath(path) && chapters.length > 0 ) {
 					store.dispatch(actions.setCurrentDocument(chapters[0].id, 'chapters'))
 				}
 				// And path has a docType and docs are loaded, set currentDocument to first doc of that type

src/reducers/colorPickerInput.js

@@ -1,18 +0,0 @@
-const colorPickerInput = (state='', action) => {
-	switch(action.type) {
-		case 'GET_DOCUMENT_TEXT': 
-			if (action.status === 'success' && action.state === 'currentDocument' && action.docType === 'tags') {
-				return action.data.color
-			} else { return state }
-		case 'CREATE_DOCUMENT':
-			return ''
-		case 'SELECT_COLOR_SWATCH':
-			return action.data
-		case 'UPDATE_COLOR_PICKER':
-			return action.data.toUpperCase()
-		default:
-			return state
-	}
-}
-
-export default colorPickerInput

src/reducers/documentTitleInput.js

@@ -1,16 +0,0 @@
-const documentTitleInput = (state='', action) => {
-	switch(action.type) {
-		case 'GET_DOCUMENT_TEXT': 
-			if (action.status === 'success' && action.state === 'currentDocument') {
-				return action.data.title
-			} else { return state }
-		case 'CREATE_DOCUMENT':
-			return ''
-		case 'UPDATE_DOCUMENT_TITLE':
-			return action.data
-		default:
-			return state
-	}
-}
-
-export default documentTitleInput

src/reducers/inputs.js

@@ -2,6 +2,7 @@ const initialState = {
 	documentTitle: '',
 	search: '',
 	colorPicker: '',
+	fileUpload: undefined
 }
 
 const inputs = (state=initialState, action) => {
@@ -33,7 +34,6 @@ const inputs = (state=initialState, action) => {
 		// Color Picker
 		case 'GET_DOCUMENT_TEXT': 
 			if (action.status === 'success' && action.docType === 'tags') {
-				console.log('SOMETHING!')
 				return {
 					...state,
 					colorPicker: action.data.color
@@ -61,6 +61,12 @@ const inputs = (state=initialState, action) => {
 				...state,
 				colorPicker: action.data.toUpperCase()
 			}
+		// Media Upload
+		case 'UPDATE_MEDIA_INPUT':
+			return {
+				...state,
+				fileUpload: action.data
+			}
 		default:
 			return state
 	}

src/reducers/searchInput.js

@@ -1,10 +0,0 @@
-const searchInput = (state='', action) => {
-	switch(action.type) {
-		case 'UPDATE_SEARCH_INPUT':
-			return action.data
-		default:
-			return state
-	}
-}
-
-export default searchInput

src/stylesheets/_button.scss

@@ -38,6 +38,15 @@ button {
     text-align: left;
 }
 
+.media_button > button {
+    @extend %sidebar_button;
+    white-space: normal;
+    margin: 0.325% 0;
+    padding: 0.5rem;
+    font-size: 0.8rem;
+    text-align: left;
+}
+
 .chapter_button > button.inactive_button:not(:hover) {
     background-color: rgba(250, 250, 250, 1);
 }

src/stylesheets/_editor.scss

@@ -13,8 +13,21 @@
     font-size: 0.8em;
 }
 
+#editor_top_bar_block {
+	button {
+		width: 100%;
+	}
+}
 
+#editor_bottom_bar_block {
+	button {
+		width: 100%;
+	}
+}
 
+#rich_text_button_group {
+	width: 100%;
+}
 
 // PRE-FACTOR