Finished routing for edit page doc type switching

TODO.txt

@@ -27,9 +27,7 @@
 NEXT: Bring everything under single entry point w/ React Router
 
 REFACTORING CHECKLIST:
-	- Split Up joyceAPI
-	- Single Action Object
-	- Switch to Webpack Dev Server and Remove Webpack/Flask Dependencies
+	- Switch to Webpack Dev Server and Remove Webpack-Flask Dependencies
 	- Write ReadMe
 	- One Pass Through Every Module's Imports
 	- Rename Components

blueprints/api.py

@@ -127,12 +127,12 @@ def es_search_text(body):
 		    }			
 		}
 	)
-	# TODO: Handle no hits
-	results = search['hits']['hits']
-	grouped_results = group_search_results(results)
+	results = search['hits']['hits'] if search else {}
+	grouped_results = group_search_results(results) 
 	return grouped_results
 
 
+
 #
 # Chapter API Routes
 #
@@ -206,4 +206,4 @@ def delete_note(id):
 ''' Basic Text Search '''
 @api.route('/search/', methods=['POST'])
 def search_text():
-	return jsonify(es_search_text(request.data))
+	return jsonify(es_search_text(request.data['data']))

src/actions/userActions.js

@@ -66,6 +66,11 @@ const userActions = {
 			type: 'SET_DOC_TYPE',
 			docType: docType
 		}),
+	setEditorDocType: docType =>
+		({
+			type: 'SET_EDITOR_DOC_TYPE',
+			docType: docType
+		}),		
 	// Click 'Add Annotation' to enter 'Annotate' mode
 	addAnnotation: data =>
 		({

src/containers/editorContentContainer.js

@@ -8,7 +8,7 @@ import actions from '../actions'
 import DocumentTitle from '../components/documentTitle'
 import LoadingSpinner from '../components/loadingSpinner'
 
-const JoyceEditorContent = ({currentDocument, editorState, mode, handleKeyCommand, onChangeEditorState, onToolButtonClick, setMode, cancelEdit, onSubmitClick, documentTitleInput, onDocumentTitleChange, onNewAnnotationClick, annotateKeyBindings, onRemoveAnnotationClick, docType, loadingToggle}) =>
+const EditorContent = ({currentDocument, editorState, mode, handleKeyCommand, onChangeEditorState, onToolButtonClick, setMode, cancelEdit, onSubmitClick, documentTitleInput, onDocumentTitleChange, onNewAnnotationClick, annotateKeyBindings, onRemoveAnnotationClick, docType, loadingToggle}) =>
 	<div>
 		<div id='editor_metadata'>
 			{loadingToggle === true &&
@@ -96,6 +96,6 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
-const JoyceEditorContentContainer = connect(mapStateToProps, mapDispatchToProps)(JoyceEditorContent)
+const EditorContentContainer = connect(mapStateToProps, mapDispatchToProps)(EditorContent)
 
-export default JoyceEditorContentContainer
+export default EditorContentContainer

src/containers/editorPageContainer.js

@@ -6,19 +6,19 @@ import actions from '../actions'
 import Content from '../components/content'
 import { EditorWelcome } from '../components/welcome'
 import LoadingSpinner from '../components/loadingSpinner'
-import JoyceEditorSidebarContainer from '../containers/joyceEditorSidebarContainer'
-import JoyceEditorContentContainer from '../containers/joyceEditorContentContainer'
+import EditorSidebarContainer from '../containers/editorSidebarContainer'
+import EditorContentContainer from '../containers/editorContentContainer'
 
-const JoyceEditorPage = ({notes, currentDocument, docType, annotationNote, onDeleteClick, onSubmitAnnotationClick, selectAnnotationNote, selectionState, editorState, loadingToggle}) =>
+const EditorPage = ({notes, currentDocument, docType, annotationNote, onDeleteClick, onSubmitAnnotationClick, selectAnnotationNote, selectionState, editorState, loadingToggle}) =>
 	<div id='joyce_reader' className='container-fluid'>
 		<div className="row">
-			<JoyceEditorSidebarContainer />
+			<EditorSidebarContainer />
 			<Content>
 				{loadingToggle === true &&
 					<LoadingSpinner size={4} />
 				}
 				{(Object.keys(currentDocument).length > 0 && loadingToggle === false) &&
-					<JoyceEditorContentContainer />
+					<EditorContentContainer />
 				}
 				{(Object.keys(currentDocument).length === 0 && loadingToggle === false) &&
 					<EditorWelcome />
@@ -53,6 +53,6 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
-const JoyceEditorPageContainer = connect(mapStateToProps, mapDispatchToProps)(JoyceEditorPage)
+const EditorPageContainer = connect(mapStateToProps, mapDispatchToProps)(EditorPage)
 
-export default JoyceEditorPageContainer
+export default EditorPageContainer

src/containers/editorSidebarContainer.js

@@ -7,7 +7,7 @@ import { DocTypeDropdown } from '../components/dropdown'
 import SidebarSpacer from '../components/sidebarSpacer'
 import { push } from 'react-router-redux'
 
-const JoyceEditorSidebar = ({notes, chapters, docType, currentDocument, onDocumentClick, onNewDocumentClick, setDocType}) =>
+const EditorSidebar = ({notes, chapters, docType, currentDocument, onDocumentClick, onNewDocumentClick, setDocType}) =>
 	<div className="col-md-3 d-none d-md-block" id="sidebar">
 		<div>
 			<DocTypeDropdown docType={docType} setDocType={setDocType} />
@@ -30,7 +30,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => {
 	return {
 		setDocType: docType => {
-			dispatch(actions.setDocType(docType))
+			dispatch(actions.setEditorDocType(docType))
 		},
 		onNewDocumentClick: docType => {
 			dispatch(actions.createNewDocument(docType))
@@ -41,6 +41,6 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
-const JoyceEditorSidebarContainer = connect(mapStateToProps, mapDispatchToProps)(JoyceEditorSidebar)
+const EditorSidebarContainer = connect(mapStateToProps, mapDispatchToProps)(EditorSidebar)
 
-export default JoyceEditorSidebarContainer
+export default EditorSidebarContainer

src/containers/joyceSearchPageContainer.js

@@ -1,15 +0,0 @@
-import React from 'react'
-import { connect } from 'react-redux'
-
-import JoyceSearchContentContainer from '../containers/joyceSearchContentContainer'
-
-const JoyceSearchPage = () =>
-	<div id='joyce_reader' className='container-fluid'>
-		<div id='content_window' className='row'>
-			<JoyceSearchContentContainer />
-		</div>
-	</div>
-
-const JoyceSearchPageContainer = connect()(JoyceSearchPage)
-
-export default JoyceSearchPageContainer

src/containers/readerContentContainer.js

@@ -4,7 +4,7 @@ import { Editor } from 'draft-js'
 import DocumentTitle from '../components/documentTitle'
 import LoadingSpinner from '../components/loadingSpinner'
 
-const JoyceReaderContent = ({currentDocument, highlightToggle, editorState, loadingToggle}) =>
+const ReaderContent = ({currentDocument, highlightToggle, editorState, loadingToggle}) =>
 	<div id="page" className={highlightToggle ? 'annotations' : 'hidden_annotations'}>
 		{loadingToggle === true &&
 			<LoadingSpinner />
@@ -26,6 +26,6 @@ const mapStateToProps = state => {
 	}
 }
 
-const JoyceReaderContentContainer = connect(mapStateToProps)(JoyceReaderContent)
+const ReaderContentContainer = connect(mapStateToProps)(ReaderContent)
 
-export default JoyceReaderContentContainer
+export default ReaderContentContainer

src/containers/readerPageContainer.js

@@ -5,19 +5,19 @@ import { EditorState } from 'draft-js'
 import Content from '../components/content'
 import { ReaderWelcome } from '../components/welcome'
 import LoadingSpinner from '../components/loadingSpinner'
-import JoyceReaderSidebarContainer from '../containers/joyceReaderSidebarContainer'
-import JoyceReaderContentContainer from '../containers/joyceReaderContentContainer'
+import ReaderSidebarContainer from '../containers/readerSidebarContainer'
+import ReaderContentContainer from '../containers/readerContentContainer'
 
-const JoyceReaderPage = ({currentDocument, loadingToggle}) =>
+const ReaderPage = ({currentDocument, loadingToggle}) =>
 	<div id='joyce_reader' className='container-fluid'>
 		<div id='content_window' className='row'>
-			<JoyceReaderSidebarContainer />
+			<ReaderSidebarContainer />
 			<Content>
 				{loadingToggle === true &&
 					<LoadingSpinner size={4} />
 				}				
 				{(Object.keys(currentDocument).length > 0 && loadingToggle === false) &&
-					<JoyceReaderContentContainer />
+					<ReaderContentContainer />
 				}
 				{(Object.keys(currentDocument).length === 0 && loadingToggle === false) &&
 					<ReaderWelcome />
@@ -33,6 +33,6 @@ const mapStateToProps = state => {
 	}
 }
 
-const JoyceReaderPageContainer = connect(mapStateToProps)(JoyceReaderPage)
+const ReaderPageContainer = connect(mapStateToProps)(ReaderPage)
 
-export default JoyceReaderPageContainer
+export default ReaderPageContainer

src/containers/readerSidebarContainer.js

@@ -6,7 +6,7 @@ import { HighlightButton } from '../components/button'
 import SidebarSpacer from '../components/sidebarSpacer'
 import { push } from 'react-router-redux'
 
-const JoyceReaderSidebar = ({chapters, notes, currentDocument, onDocumentClick, highlightToggle, onHighlightClick, docType}) =>
+const ReaderSidebar = ({chapters, notes, currentDocument, onDocumentClick, highlightToggle, onHighlightClick, docType}) =>
 	<div className='col-md-3 d-none d-md-block' id='sidebar'>
 		<div>
 			<HighlightButton highlightToggle={highlightToggle} onClick={onHighlightClick}/>
@@ -36,6 +36,6 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
-const JoyceReaderSidebarContainer = connect(mapStateToProps, mapDispatchToProps)(JoyceReaderSidebar)
+const ReaderSidebarContainer = connect(mapStateToProps, mapDispatchToProps)(ReaderSidebar)
 
-export default JoyceReaderSidebarContainer
+export default ReaderSidebarContainer

src/containers/searchContentContainer.js

@@ -6,7 +6,7 @@ import actions from '../actions'
 import { SearchButton } from '../components/button'
 import SearchResultsBox from '../components/searchResultsBox'
 
-const JoyceSearchContent = ({searchResults, searchInput, onSearchInputChange, onSearchClick}) =>
+const SearchContent = ({searchResults, searchInput, onSearchInputChange, onSearchClick}) =>
 	<div className='container'>
 		<div className='row'>
 			<div className='col-sm-2'>
@@ -39,6 +39,6 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
-const JoyceSearchContentContainer = connect(mapStateToProps, mapDispatchToProps)(JoyceSearchContent)
+const SearchContentContainer = connect(mapStateToProps, mapDispatchToProps)(SearchContent)
 
-export default JoyceSearchContentContainer
+export default SearchContentContainer

src/containers/searchPageContainer.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import SearchContentContainer from '../containers/searchContentContainer'
+
+const SearchPage = () =>
+	<div id='joyce_reader' className='container-fluid'>
+		<div id='content_window' className='row'>
+			<SearchContentContainer />
+		</div>
+	</div>
+
+const SearchPageContainer = connect()(SearchPage)
+
+export default SearchPageContainer

src/joyce.js

@@ -10,21 +10,20 @@ import 'bootstrap'
 
 // src packages
 import Navbar from './components/navbar'
-import reduceReader from './reducers/reduceReader'
+import reduceJoyce from './reducers/reduceJoyce'
 import DeleteConfirmModal from './components/deleteConfirmModal'
 import AnnotateModal from './components/annotateModal'
 import AnnotationModal from './components/annotationModal'
 import actions from './actions'
 import { logger, joyceAPI, joyceInterface, joyceRouter } from './middleware/'
-import JoyceReaderPageContainer from './containers/joyceReaderPageContainer'
-import JoyceEditorPageContainer from './containers/joyceEditorPageContainer'
-import JoyceSearchPageContainer from './containers/joyceSearchPageContainer'
+import ReaderPageContainer from './containers/readerPageContainer'
+import EditorPageContainer from './containers/editorPageContainer'
+import SearchPageContainer from './containers/searchPageContainer'
 
 const history = createHistory()
 const router = routerMiddleware(history)
-const store = createStore(reduceReader, applyMiddleware(logger, router, joyceAPI, joyceInterface, joyceRouter))	
+const store = createStore(reduceJoyce, applyMiddleware(logger, router, joyceAPI, joyceInterface, joyceRouter))	
 
-console.log(actions)
 store.dispatch(actions.getDocumentList({docType: 'chapters'}))
 store.dispatch(actions.getDocumentList({docType: 'notes'}))
 
@@ -48,11 +47,11 @@ ReactDOM.render(
 					<Route exact path='/notes' render={() =>
 						<Redirect to={'/notes/:id'}/>
 					}/>							
-					<Route exact path='/notes/:id' component={JoyceReaderPageContainer} />
-					<Route exact path='/edit/:id' component={JoyceEditorPageContainer} />
-					<Route exact path='/edit/notes/:id' component={JoyceEditorPageContainer} />
-					<Route exact path='/search/' component={JoyceSearchPageContainer} />
-					<Route exact path='/:id' component={JoyceReaderPageContainer} />	
+					<Route exact path='/notes/:id' component={ReaderPageContainer} />
+					<Route exact path='/edit/:id' component={EditorPageContainer} />
+					<Route exact path='/edit/notes/:id' component={EditorPageContainer} />
+					<Route exact path='/search/' component={SearchPageContainer} />
+					<Route exact path='/:id' component={ReaderPageContainer} />	
 				</Switch>
 				<DeleteConfirmModal onDeleteClick={()=>onDeleteClick(currentDocument.id, docType)}/>
 				<AnnotateModal notes={store.getState().notes} annotationNote={store.getState().annotationNote} onSubmitClick={()=>onSubmitAnnotationClick(store.getState().annotationNote, store.getState().selectionState, store.getState().editorState)} selectAnnotationNote={actions.selectAnnotationNote} />

src/middleware/joyceRouter.js

@@ -1,4 +1,4 @@
-import { push } from 'react-router-redux'
+import { go, push } from 'react-router-redux'
 
 import actions from '../actions'
 import helpers from '../modules/helpers'
@@ -16,11 +16,17 @@ const joyceRouter = store => next => action => {
 	switch(action.type) {
 		case '@@router/LOCATION_CHANGE':
 			if (regex.checkIfRedirectPath(path) && currentDocument.hasOwnProperty('id')) {
-				store.dispatch(actions.push(docType === 'chapters' ? String(currentDocument.number) : currentDocument.id))
+				store.dispatch(push(docType === 'chapters' ? String(currentDocument.number) : currentDocument.id))
 			}
 			if (regex.checkNoteReaderRoute(path) && regex.checkIfRedirectPath(path) && notes.length > 0) {
 				store.dispatch(actions.setCurrentDocument(notes[0].id, 'notes'))
 			}
+			if (regex.checkNoteEditorRoute(path) && regex.checkIfRedirectPath(path) && notes.length > 0) {
+				store.dispatch(actions.setCurrentDocument(notes[0].id, 'notes'))
+			}
+			if (regex.checkChapterEditorRoute(path) && regex.checkIfRedirectPath(path) && chapters.length > 0) {
+				store.dispatch(actions.setCurrentDocument(chapters[0].id, 'chapters'))
+			}			
 			if (regex.checkNoteReaderRoute(path) || regex.checkNoteEditorRoute(path)) {
 				store.dispatch(actions.setDocType('notes'))
 			}
@@ -51,6 +57,15 @@ const joyceRouter = store => next => action => {
 				}				
 			}
 			break
+		case 'SET_EDITOR_DOC_TYPE':
+			if (regex.checkEditRoute(path)) {
+				if (action.docType === 'chapters') {			
+					store.dispatch(push('/edit'))
+				} else {
+					store.dispatch(push('/edit/' + action.docType))
+				}
+			}
+			break
 		case 'GET_DOCUMENT_TEXT':
 			if (action.status === 'success') {
 				store.dispatch(push(action.docType === 'chapters' ? String(action.data.number) : action.data.id))

src/modules/api.js

@@ -34,7 +34,6 @@ const api = {
 		}),
 	HTTPPostSearchResults: (data) =>
 		axios.post(apiRoute + 'search/', { data }).then(res => {
-			console.log('data is ', data)
 			return {status: 'success', data: res.data}
 		}).catch(error => {
 			return {status: 'error', data: res.data}

src/modules/regex.js

@@ -25,13 +25,19 @@ const regex = {
 	},
 	checkEditBaseRoute: path => {
 		return regexCheckBaseFunction(path, /^\/edit$/)
-	},	
+	},
+	checkEditRoute: path => {
+		return regexCheckBaseFunction(path, /^\/edit\//)
+	},		
 	checkChapterReaderRoute: path => {
 		return regexCheckBaseFunction(path, /^\/[0-9]{1,3}$/)
 	},
 	checkNoteReaderRoute: path => {
 		return regexCheckBaseFunction(path, /^\/notes\/([0-9a-zA-Z\-\_]{18,}|\:id)/)
 	},
+	checkChapterEditorRoute: path => {
+		return regexCheckBaseFunction(path, /^\/edit\/([0-9]{1,3}|\:id)/)
+	},	
 	checkNoteEditorRoute: path => {
 		return regexCheckBaseFunction(path, /^\/edit\/notes\/([0-9a-zA-Z\-\_]{18,}|\:id)/)
 	},

src/reducers/currentDocument.js

@@ -9,6 +9,8 @@ const currentDocument = (state={}, action) => {
 			else { return state }
 		case 'CLEAR_CURRENT_DOCUMENT':
 			return {}
+		case 'SET_EDITOR_DOC_TYPE':
+			return {}
 		case 'DELETE_DOCUMENT':
 			if (action.status === 'success' && action.data.length <= 0) {
 				return {}

src/reducers/docType.js

@@ -2,6 +2,8 @@ const docType = (state='chapters', action) => {
 	switch(action.type) {
 		case 'SET_DOC_TYPE':
 			return action.docType
+		case 'SET_EDITOR_DOC_TYPE':
+			return action.docType
 		case 'SET_CURRENT_DOCUMENT':
 			return action.docType
 		default:

src/reducers/reduceJoyce.js

@@ -14,7 +14,7 @@ import documentTitleInput from './documentTitleInput'
 import searchResults from './searchResults'
 import searchInput from './searchInput'
 
-const reduceReader = combineReducers({
+const reduceJoyce = combineReducers({
 	chapters,
 	notes,
 	editorState,
@@ -30,4 +30,4 @@ const reduceReader = combineReducers({
 	searchInput	
 })
 
-export default reduceReader
+export default reduceJoyce

src/reducers/reduceSearch.js

@@ -1,11 +0,0 @@
-import { combineReducers } from 'redux'
-
-import searchResults from './searchResults'
-import searchInput from './searchInput'
-
-const reduceSearch = combineReducers({
-	searchResults,
-	searchInput
-})
-
-export default reduceSearch