Fixing other functionality broken by routing and refactoring

src/components/annotationModal.js

@@ -13,7 +13,7 @@ const AnnotateModal = ({annotationNote}) =>
 				<div className='modal-body'>
 					<div className='row'>
 						<div className='col-md-10 offset-md-1'>
-							<div dangerouslySetInnerHTML={{__html: annotationNote.text}} />
+							<div dangerouslySetInnerHTML={{__html: annotationNote.html_source}} />
 						</div>
 					</div>
 				</div>

src/components/chooseAnnotationModal.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { EditorSubmitButton, EditorCancelButton } from './button'
 import { DocumentList } from './list'
 
-const AnnotateModal = ({notes, annotationNote, onSubmitClick, selectAnnotationNote}) =>
+const ChooseAnnotationModal = ({notes, annotationNote, onSubmitClick, selectAnnotationNote}) =>
 	<div className='modal fade' id='annotate_modal' tabIndex='-1' role='dialog'>
 		<div className='modal-dialog modal-lg' role='document'>
 			<div className='modal-content'>
@@ -28,4 +28,4 @@ const AnnotateModal = ({notes, annotationNote, onSubmitClick, selectAnnotationNo
 		</div>
 	</div>
 
-export default AnnotateModal
+export default ChooseAnnotationModal

src/containers/editorPageContainer.js

@@ -9,7 +9,8 @@ import LoadingSpinner from '../components/loadingSpinner'
 import EditorSidebarContainer from './editorSidebarContainer'
 import EditorContentContainer from './editorContentContainer'
 import DeleteConfirmModal from '../components/deleteConfirmModal'
-import AnnotateModal from '../components/annotateModal'
+import AnnotationModal from '../components/annotationModal'
+import ChooseAnnotationModal from '../components/chooseAnnotationModal'
 
 const EditorPage = ({notes, currentDocument, docType, annotationNote, onDeleteConfirm, onSubmitAnnotationClick, selectAnnotationNote, selectionState, editorState, loadingToggle}) =>
 	<div id='joyce_reader' className='container-fluid'>
@@ -28,18 +29,19 @@ const EditorPage = ({notes, currentDocument, docType, annotationNote, onDeleteCo
 			</Content>
 		</div>
 		<DeleteConfirmModal onDeleteConfirm={()=>onDeleteConfirm(currentDocument.id, docType)}/>
-		<AnnotateModal notes={notes} annotationNote={annotationNote} onSubmitClick={()=>onSubmitAnnotationClick(annotationNote, selectionState, editorState)} selectAnnotationNote={selectAnnotationNote} />		
+		<AnnotationModal annotationNote={annotationNote} />
+		<ChooseAnnotationModal notes={notes} annotationNote={annotationNote} onSubmitClick={()=>onSubmitAnnotationClick(annotationNote, selectionState, editorState)} selectAnnotationNote={selectAnnotationNote} />
 	</div>
 
 const mapStateToProps = state => {
 	return {
 		notes: state.notes,
-		docType: state.docType,
 		currentDocument: state.currentDocument,
 		annotationNote: state.annotationNote,
-		loadingToggle: state.loadingToggle,
+		editorState: state.editorState,
 		selectionState: state.selectionState,
-		editorState: state.editorState
+		docType: state.docType,
+		loadingToggle: state.loadingToggle,
 	}
 }
 

src/containers/linkContainer.js

@@ -20,7 +20,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => {
 	return {
 		onAnnotationClick: id => {
-			dispatch(selectAnnotationNote(id))
+			dispatch(actions.selectAnnotationNote(id))
 		}
 	}
 }

src/containers/readerPageContainer.js

@@ -7,8 +7,9 @@ import { ReaderWelcome } from '../components/welcome'
 import LoadingSpinner from '../components/loadingSpinner'
 import ReaderSidebarContainer from '../containers/readerSidebarContainer'
 import ReaderContentContainer from '../containers/readerContentContainer'
+import AnnotationModal from '../components/annotationModal'
 
-const ReaderPage = ({currentDocument, loadingToggle}) =>
+const ReaderPage = ({currentDocument, annotationNote, loadingToggle}) =>
 	<div id='joyce_reader' className='container-fluid'>
 		<div id='content_window' className='row'>
 			<ReaderSidebarContainer />
@@ -24,12 +25,14 @@ const ReaderPage = ({currentDocument, loadingToggle}) =>
 				}				
 			</Content>
 		</div>
+		<AnnotationModal annotationNote={annotationNote} />
 	</div>
 
 const mapStateToProps = state => {
 	return {
 		currentDocument: state.currentDocument,
-		loadingToggle: state.loadingToggle
+		annotationNote: state.annotationNote,
+		loadingToggle: state.loadingToggle,
 	}
 }
 

src/joyce.js

@@ -8,10 +8,9 @@ import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-ro
 import createHistory from 'history/createBrowserHistory'
 import 'bootstrap'
 
-// src packages
+// src modules
 import Navbar from './components/navbar'
 import reduceJoyce from './reducers/reduceJoyce'
-import AnnotationModal from './components/annotationModal'
 import actions from './actions'
 import { logger, joyceAPI, joyceInterface, joyceRouter } from './middleware/'
 import ReaderPageContainer from './containers/readerPageContainer'
@@ -51,7 +50,6 @@ ReactDOM.render(
 					<Route exact path='/search/' component={SearchPageContainer} />
 					<Route exact path='/:id' component={ReaderPageContainer} />	
 				</Switch>
-				<AnnotationModal annotationNote={state.annotationNote} />
 			</div>
 		</ConnectedRouter>
 	</Provider>,

src/middleware/joyceRouter.js

@@ -67,7 +67,7 @@ const joyceRouter = store => next => action => {
 			}
 			break
 		case 'GET_DOCUMENT_TEXT':
-			if (action.status === 'success') {
+			if (action.status === 'success' && action.state === 'currentDocument') {
 				store.dispatch(push(action.docType === 'chapters' ? String(action.data.number) : action.data.id))
 			}
 			break

src/reducers/reduceJoyce.js

@@ -1,33 +1,46 @@
+// node_modules
 import { combineReducers } from 'redux'
+import { routerReducer } from 'react-router-redux'
 
+// Documents
 import chapters from './chapters'
 import notes from './notes'
+import tags from './tags'
 import currentDocument from './currentDocument'
-import editorState from './editorState'
 import annotationNote from './annotationNote'
-import highlightToggle from './highlightToggle'
-import loadingToggle from './loadingToggle'
-import docType from './docType'
-import { routerReducer } from 'react-router-redux'
-import mode from './mode'
-import documentTitleInput from './documentTitleInput'
 import searchResults from './searchResults'
+
+// User Inputs
+import editorState from './editorState'
+import selectionState from './selectionState'
+import documentTitleInput from './documentTitleInput'
 import searchInput from './searchInput'
 
+// Toggles
+import docType from './docType'
+import mode from './mode'
+import highlightToggle from './highlightToggle'
+import loadingToggle from './loadingToggle'
+
 const reduceJoyce = combineReducers({
+	routerReducer,
+	//
 	chapters,
 	notes,
-	editorState,
-	annotationNote,
-	docType,
+	tags,
 	currentDocument,
-	highlightToggle,
-	loadingToggle,
-	routerReducer,
-	mode,
-	documentTitleInput,
+	annotationNote,
 	searchResults,
-	searchInput	
+	//
+	editorState,
+	selectionState,
+	documentTitleInput,
+	searchInput,
+	//
+	docType,
+	mode,
+	highlightToggle,
+	loadingToggle
 })
 
 export default reduceJoyce

src/stylesheets/_page.scss

@@ -2,7 +2,7 @@
 
 #page {
     height: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
     background-color: rgba(256,256,256,.8);
     box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
     padding: 3% 8%;

src/stylesheets/_sidebar.scss

@@ -59,7 +59,7 @@ button {
     border-radius: 5px;
     background-color: rgba(200, 200, 200, .8);
     max-height: 38em;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 #new_document_button > button {

src/stylesheets/_texteditor.scss

@@ -2,7 +2,7 @@
 
 #editor_content {
     height: 43em;
-    overflow-y: scroll;
+    overflow-y: auto;
     background-color: rgba(256,256,256,.8);
     box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
     margin: 1.3% 0;

src/stylesheets/joyce.scss

@@ -40,7 +40,7 @@ $fa-font-path: "../../node_modules/font-awesome/fonts";
 }
 
 #search_results_box {
-    overflow-y: scroll;	
+    overflow-y: auto;	
 	margin-top: 3%;
 	height: 75vh;
 	border: 1px solid $border_color;