Implemented PropTypes on all components

package.json

@@ -18,6 +18,7 @@
     "font-awesome": "^4.7.0",
     "history": "^4.7.2",
     "popper.js": "^1.12.6",
+    "prop-types": "^15.6.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",

src/components/annotationModal.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { EditorSubmitButton, EditorCancelButton } from './button'
 import { DocumentList } from './list'
@@ -24,4 +25,8 @@ const AnnotateModal = ({annotationNote}) =>
 		</div>
 	</div>
 
+AnnotateModal.propTypes = {
+	annotationNote: PropTypes.object
+}
+
 export default AnnotateModal

src/components/button.js

@@ -1,7 +1,9 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 
 import romanize from '../modules/romanize'
+import helpers from '../modules/helpers'
 
 export const ReaderEditButton = ({onClick}) =>
 	<div className='edit_note_button'>
@@ -51,32 +53,20 @@ export const SearchButton = ({searchInput, onClick}) =>
 		</div>
 	</div>
 
-export const NewChapterButton = ({onNewChapterClick}) =>
+export const NewChapterButton = ({onClick}) =>
 	<div>
 		<div id='new_chapter_button' className='text-center'>
-			<button onClick={onNewChapterClick} className='btn btn-outline-success btn-lg'>
+			<button onClick={onClick} className='btn btn-outline-success btn-lg'>
 				New Chapter <i className='fa fa_inline fa-plus-square-o'></i>
 			</button>
 		</div>
 	</div>
 
-const documentName = docType => {
-	switch(docType) {
-		case 'chapters':
-			return 'Chapter'
-			break
-		case 'notes':
-			return 'Note'
-			break
-	}	
-}
-
-
 export const NewDocumentButton = ({onClick, docType}) =>
 	<div>
 		<div id='new_document_button' className='text-center'>
 			<button onClick={onClick} className='btn btn-outline-success btn-sm'>
-				New {documentName(docType)}
+				New {helpers.docTypeName(docType)}
 				<i className='fa fa_inline fa-plus-square-o'></i>
 			</button>
 		</div>
@@ -124,4 +114,74 @@ export const EditorDeleteButton = ({onClick}) =>
 	<button id='editor_delete' onClick={onClick} type='button' data-dismiss='modal' className='btn btn-outline-danger btn-sm'>
 		Delete
 		<i className='fa fa_inline fa-trash-o'></i>
-	</button>
+	</button>
+
+ReaderEditButton.propTypes = {
+	onClick: PropTypes.func,
+}
+
+ReaderAnnotateButton.propTypes = {
+	onClick: PropTypes.func,
+}
+
+ChapterButton.propTypes = {
+	chapters: PropTypes.arrayOf(PropTypes.object),
+	currentChapter: PropTypes.object,
+	onClick: PropTypes.func,
+}
+
+NoteButton.propTypes = {
+	notes: PropTypes.arrayOf(PropTypes.object),
+	currentNotes: PropTypes.object,	
+	onClick: PropTypes.func,
+}
+
+HighlightButton.propTypes = {
+	highlightToggle: PropTypes.bool,
+	onClick: PropTypes.func,
+}
+
+SearchButton.propTypes = {
+	searchInput: PropTypes.string,
+	onClick: PropTypes.func,
+}
+
+NewChapterButton.propTypes = {
+	onClick: PropTypes.func,
+}
+
+NewDocumentButton.propTypes = {
+	docType: PropTypes.string,
+	onClick: PropTypes.func,
+}
+
+AnnotatorNewButton.propTypes = {
+	disabled: PropTypes.bool,
+	onClick: PropTypes.func,
+}
+
+AnnotatorRemoveButton.propTypes = {
+	disabled: PropTypes.bool,
+	onClick: PropTypes.func,
+}
+
+EditorToolButton.propTypes = {
+	glyph: PropTypes.string,
+	onClick: PropTypes.func,
+}
+
+EditorDeleteToolButton.propTypes = {
+	disabled: PropTypes.bool,
+}
+
+EditorCancelButton.propTypes = {
+	onClick: PropTypes.func,
+}
+
+EditorSubmitButton.propTypes = {
+	onClick: PropTypes.func,
+}
+
+EditorDeleteButton.propTypes = {
+	onClick: PropTypes.func,
+}

src/components/chooseAnnotationModal.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { EditorSubmitButton, EditorCancelButton } from './button'
 import { DocumentList } from './list'
@@ -28,4 +29,11 @@ const ChooseAnnotationModal = ({notes, annotationNote, onSubmitClick, selectAnno
 		</div>
 	</div>
 
+ChooseAnnotationModal.propTypes = {
+	notes: PropTypes.arrayOf(PropTypes.object),
+	annotationNote: PropTypes.object,
+	onSubmitClick: PropTypes.func,
+	selectAnnotationNote: PropTypes.func,
+}
+
 export default ChooseAnnotationModal

src/components/contentBottomBar.js

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

src/components/contentTopBar.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { ReaderAnnotateButton, ReaderEditButton, EditorToolButton, EditorDeleteToolButton, AnnotatorNewButton, AnnotatorRemoveButton } from './button'
 
@@ -35,4 +36,21 @@ export const AnnotateModeTopBar = ({onNewAnnotationClick, onRemoveAnnotationClic
 		<div className='col-md-5 offset-md-2'>
 			<AnnotatorRemoveButton onClick={onRemoveAnnotationClick} disabled={removeDisabled} />
 		</div>	
-	</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/deleteConfirmModal.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { EditorDeleteButton, EditorCancelButton } from './button'
 
@@ -20,4 +21,8 @@ const DeleteConfirmModal = ({onDeleteConfirm}) =>
 		</div>
 	</div>
 
+DeleteConfirmModal.propTypes = {
+	onDeleteConfirm: PropTypes.func,
+}	
+
 export default DeleteConfirmModal

src/components/documentTitle.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import romanize from '../modules/romanize'
 
 const DocumentTitle = ({docType, currentDocument}) =>
@@ -9,4 +11,9 @@ const DocumentTitle = ({docType, currentDocument}) =>
 		{currentDocument.title ? currentDocument.title : ''}		
 	</h4>
 
+DocumentTitle.propTypes = {
+	docType: PropTypes.string,
+	currentDocument: PropTypes.object
+}
+
 export default DocumentTitle

src/components/dropdown.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 export const DocTypeDropdown = ({docType, setDocType}) =>
 	<div className='dropdown'>
@@ -10,4 +11,9 @@ export const DocTypeDropdown = ({docType, setDocType}) =>
 			<a className='dropdown-item' onClick={()=>setDocType('notes')}>Notes</a>
 			<a className='dropdown-item' onClick={()=>setDocType('tags')}>Tags</a>
 		</div>
-	</div>
+	</div>
+
+DocTypeDropdown.propTypes = {
+	docType: PropTypes.string,
+	setDocType: PropTypes.func
+}

src/components/list.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import { ChapterButton, NoteButton } from './button'
 
 export const DocumentList = ({notes, chapters, currentDocument, onDocumentClick, docType}) =>
@@ -23,4 +25,24 @@ export const NoteList = ({notes, currentNote, onNoteClick}) =>
     	{notes.map(note =>
 			<NoteButton key={note.id} currentNote={currentNote} note={note} onClick={()=>onNoteClick(note.id, 'notes')} />
     	)}
-	</div>
+	</div>
+
+DocumentList.propTypes = {
+	notes: PropTypes.arrayOf(PropTypes.object),
+	chapters: PropTypes.arrayOf(PropTypes.object),
+	currentDocument: PropTypes.object,
+	onDocumentClick: PropTypes.func,
+	docType: PropTypes.string,
+}
+
+ChapterList.propTypes = {
+	chapters: PropTypes.arrayOf(PropTypes.object),
+	currentDocument: PropTypes.object,
+	onChapterClick: PropTypes.func,
+}
+
+NoteList.propTypes = {
+	notes: PropTypes.arrayOf(PropTypes.object),
+	currentDocument: PropTypes.object,
+	onNoteClick: PropTypes.func,
+}

src/components/loadingSpinner.js

@@ -1,8 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 const LoadingSpinner = ({size=2}) =>
 	<div className='loading_spinner'>
 		<i className={'fa fa-cog fa-spin fa-' + size + 'x fa-fw'}></i>
 	</div>
 
+LoadingSpinner.propTypes = {
+	size: PropTypes.number,
+}
+
 export default LoadingSpinner

src/components/searchResultSnippet.js

@@ -1,8 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 const SearchResultSnippet = ({snippet}) =>
 	<div>
 		{snippet}...
 	</div>
 
+SearchResultSnippet.propTypes = {
+	snippet: PropTypes.string,
+}
+
 export default SearchResultSnippet

src/components/searchResultsBox.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import SearchResultSnippet from './searchResultSnippet'
 
 const SearchResultGroup = ({docType, docTitle, results}) =>
@@ -24,4 +26,14 @@ const SearchResultsBox = ({searchResults}) =>
 		}
 	</div>
 
+SearchResultGroup.propType = {
+	docType: PropTypes.string,
+	docTitle: PropTypes.string,
+	results: PropTypes.array,
+}
+
+SearchResultsBox.propTypes = {
+	searchResults: PropTypes.objectOf(PropTypes.array)
+}
+
 export default SearchResultsBox

src/containers/editorContentContainer.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Editor } from 'draft-js'
 
@@ -8,7 +9,24 @@ import actions from '../actions'
 import DocumentTitle from '../components/documentTitle'
 import LoadingSpinner from '../components/loadingSpinner'
 
-const EditorContent = ({currentDocument, editorState, mode, handleKeyCommand, onChangeEditorState, onToolButtonClick, setMode, cancelEdit, onSubmitClick, documentTitleInput, onDocumentTitleChange, onNewAnnotationClick, annotateKeyBindings, onRemoveAnnotationClick, docType, loadingToggle}) =>
+const EditorContent = ({
+	currentDocument,
+	editorState,
+	docType,
+	mode,
+	loadingToggle,
+	handleKeyCommand,
+	onChangeEditorState,
+	onToolButtonClick,
+	setMode,
+	cancelEdit,
+	onSubmitClick,
+	documentTitleInput,
+	onDocumentTitleChange,
+	onNewAnnotationClick,
+	annotateKeyBindings,
+	onRemoveAnnotationClick,
+}) =>
 	<div>
 		<div id='editor_metadata'>
 			{loadingToggle === true &&
@@ -73,6 +91,7 @@ const mapDispatchToProps = dispatch => {
 			dispatch(actions.handleEditorKeyCommand(editorState, command))
 		},
 		annotateKeyBindings: () => {
+			// Prevents editor input in Annotation Mode
 			return 'handled'
 		},
 		setMode: (mode) => {
@@ -96,6 +115,25 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
+EditorContent.propTypes = {
+	currentDocument: PropTypes.object,
+	editorState: PropTypes.object,
+	documentTitleInput: PropTypes.string,
+	docType: PropTypes.string,
+	mode: PropTypes.string,
+	loadingToggle: PropTypes.bool,
+	handleKeyCommand: PropTypes.func,
+	onChangeEditorState: PropTypes.func,
+	onToolButtonClick: PropTypes.func,
+	setMode: PropTypes.func,
+	cancelEdit: PropTypes.func,
+	onSubmitClick: PropTypes.func,
+	onDocumentTitleChange: PropTypes.func,
+	onNewAnnotationClick: PropTypes.func,
+	annotateKeyBindings: PropTypes.func,
+	onRemoveAnnotationClick: PropTypes.func,
+}
+
 const EditorContentContainer = connect(mapStateToProps, mapDispatchToProps)(EditorContent)
 
 export default EditorContentContainer

src/containers/editorPageContainer.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { EditorState } from 'draft-js'
 
@@ -12,7 +13,18 @@ import DeleteConfirmModal from '../components/deleteConfirmModal'
 import AnnotationModal from '../components/annotationModal'
 import ChooseAnnotationModal from '../components/chooseAnnotationModal'
 
-const EditorPage = ({notes, currentDocument, docType, annotationNote, onDeleteConfirm, onSubmitAnnotationClick, selectAnnotationNote, selectionState, editorState, loadingToggle}) =>
+const EditorPage = ({
+	notes,
+	currentDocument,
+	annotationNote,
+	editorState,
+	docType,
+	loadingToggle,
+	onDeleteConfirm,
+	onSubmitAnnotationClick,
+	selectAnnotationNote,
+	selectionState,
+}) =>
 	<div id='joyce_reader' className='container-fluid'>
 		<div className="row">
 			<EditorSidebarContainer />
@@ -59,6 +71,19 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
+EditorPage.propTypes = {
+	notes: PropTypes.arrayOf(PropTypes.object),
+	currentDocument: PropTypes.object,
+	annotationNote: PropTypes.object,
+	editorState: PropTypes.object,
+	selectionState: PropTypes.object,
+	docType: PropTypes.string,
+	loadingToggle: PropTypes.bool,
+	onDeleteConfirm: PropTypes.func,
+	onSubmitAnnotationClick: PropTypes.func,
+	selectAnnotationNote: PropTypes.func,
+}
+
 const EditorPageContainer = connect(mapStateToProps, mapDispatchToProps)(EditorPage)
 
 export default EditorPageContainer

src/containers/editorSidebarContainer.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import actions from '../actions'
 import { DocumentList } from '../components/list'
@@ -7,7 +8,15 @@ import { DocTypeDropdown } from '../components/dropdown'
 import SidebarSpacer from '../components/sidebarSpacer'
 import { push } from 'react-router-redux'
 
-const EditorSidebar = ({notes, chapters, docType, currentDocument, onDocumentClick, onNewDocumentClick, setDocType}) =>
+const EditorSidebar = ({
+	chapters,
+	notes,
+	currentDocument,
+	docType,
+	onDocumentClick,
+	onNewDocumentClick,
+	setDocType,
+}) =>
 	<div className="col-md-3 d-none d-md-block" id="sidebar">
 		<div>
 			<DocTypeDropdown docType={docType} setDocType={setDocType} />
@@ -41,6 +50,16 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
+EditorSidebar.propTypes = {
+	chapters: PropTypes.arrayOf(PropTypes.object),
+	notes: PropTypes.arrayOf(PropTypes.object),
+	currentDocument: PropTypes.object,
+	docType: PropTypes.string,
+	onDocumentClick: PropTypes.func,
+	onNewDocumentClick: PropTypes.func,
+	setDocType: PropTypes.func,
+}
+
 const EditorSidebarContainer = connect(mapStateToProps, mapDispatchToProps)(EditorSidebar)
 
 export default EditorSidebarContainer

src/containers/linkContainer.js

@@ -1,7 +1,9 @@
 import React from 'react'
-import actions from '../actions'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
+import actions from '../actions'
+
 const Link = (props) => {
 	const data = props.contentState.getEntity(props.entityKey).getData()
     return (
@@ -25,6 +27,11 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
+Link.propTypes = {
+	annotationNote: PropTypes.object,
+	onAnnotationClick: PropTypes.func,
+}
+
 const LinkContainer = connect(mapStateToProps, mapDispatchToProps)(Link)
 
 export default LinkContainer

src/containers/readerContentContainer.js

@@ -1,10 +1,17 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Editor } from 'draft-js'
+
 import DocumentTitle from '../components/documentTitle'
 import LoadingSpinner from '../components/loadingSpinner'
 
-const ReaderContent = ({currentDocument, highlightToggle, editorState, loadingToggle}) =>
+const ReaderContent = ({
+	currentDocument,
+	editorState,
+	loadingToggle,
+	highlightToggle,
+}) =>
 	<div id="page" className={highlightToggle ? 'annotations' : 'hidden_annotations'}>
 		{loadingToggle === true &&
 			<LoadingSpinner />
@@ -26,6 +33,13 @@ const mapStateToProps = state => {
 	}
 }
 
+ReaderContent.propTypes = {
+	currentDocument: PropTypes.object,
+	editorState: PropTypes.object,
+	loadingToggle: PropTypes.bool,
+	highlightToggle: PropTypes.bool,
+}
+
 const ReaderContentContainer = connect(mapStateToProps)(ReaderContent)
 
 export default ReaderContentContainer

src/containers/readerPageContainer.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { EditorState } from 'draft-js'
 
@@ -9,7 +10,11 @@ import ReaderSidebarContainer from '../containers/readerSidebarContainer'
 import ReaderContentContainer from '../containers/readerContentContainer'
 import AnnotationModal from '../components/annotationModal'
 
-const ReaderPage = ({currentDocument, annotationNote, loadingToggle}) =>
+const ReaderPage = ({
+	currentDocument, 
+	annotationNote,
+	loadingToggle,
+}) =>
 	<div id='joyce_reader' className='container-fluid'>
 		<div id='content_window' className='row'>
 			<ReaderSidebarContainer />
@@ -36,6 +41,12 @@ const mapStateToProps = state => {
 	}
 }
 
+ReaderPage.propTypes = {
+	currentDocument: PropTypes.object, 
+	annotationNote: PropTypes.object,
+	loadingToggle: PropTypes.bool,
+}
+
 const ReaderPageContainer = connect(mapStateToProps)(ReaderPage)
 
 export default ReaderPageContainer

src/containers/readerSidebarContainer.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import actions from '../actions'
 import { DocumentList } from '../components/list'
@@ -6,7 +7,15 @@ import { HighlightButton } from '../components/button'
 import SidebarSpacer from '../components/sidebarSpacer'
 import { push } from 'react-router-redux'
 
-const ReaderSidebar = ({chapters, notes, currentDocument, onDocumentClick, highlightToggle, onHighlightClick, docType}) =>
+const ReaderSidebar = ({
+	chapters,
+	notes,
+	currentDocument,
+	docType,
+	highlightToggle,
+	onDocumentClick,
+	onHighlightClick,
+}) =>
 	<div className='col-md-3 d-none d-md-block' id='sidebar'>
 		<div>
 			<HighlightButton highlightToggle={highlightToggle} onClick={onHighlightClick}/>
@@ -36,6 +45,16 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
+ReaderSidebar.propTypes = {
+	chapters: PropTypes.arrayOf(PropTypes.object),
+	notes: PropTypes.arrayOf(PropTypes.object),
+	currentDocument: PropTypes.object,
+	docType: PropTypes.string,	
+	highlightToggle: PropTypes.bool,
+	onDocumentClick: PropTypes.func,
+	onHighlightClick: PropTypes.func,
+}
+
 const ReaderSidebarContainer = connect(mapStateToProps, mapDispatchToProps)(ReaderSidebar)
 
 export default ReaderSidebarContainer

src/containers/searchContentContainer.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Editor } from 'draft-js'
 
@@ -6,7 +7,12 @@ import actions from '../actions'
 import { SearchButton } from '../components/button'
 import SearchResultsBox from '../components/searchResultsBox'
 
-const SearchContent = ({searchResults, searchInput, onSearchInputChange, onSearchClick}) =>
+const SearchContent = ({
+	searchResults,
+	searchInput,
+	onSearchInputChange,
+	onSearchClick,
+}) =>
 	<div className='container'>
 		<div className='row'>
 			<div className='col-sm-2'>
@@ -39,6 +45,13 @@ const mapDispatchToProps = dispatch => {
 	}
 }
 
+SearchContent.propTypes = {
+	searchResults: PropTypes.object,
+	searchInput: PropTypes.string,
+	onSearchInputChange: PropTypes.func,
+	onSearchClick: PropTypes.func,
+}
+
 const SearchContentContainer = connect(mapStateToProps, mapDispatchToProps)(SearchContent)
 
 export default SearchContentContainer

src/modules/helpers.js

@@ -8,6 +8,19 @@ const helpers = {
 				return chapter.id
 			}
 		}
+	},
+	docTypeName: docType => {
+		switch(docType) {
+			case 'chapters':
+				return 'Chapter'
+				break
+			case 'notes':
+				return 'Note'
+				break
+			case 'tags':
+				return 'Tags'
+				break
+		}	
 	}	
 }