Implemented PropTypes on all components
This commit is contained in:
parent
6d6efea4d4
commit
b8ce6ee29c
|
@ -18,6 +18,7 @@
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"history": "^4.7.2",
|
"history": "^4.7.2",
|
||||||
"popper.js": "^1.12.6",
|
"popper.js": "^1.12.6",
|
||||||
|
"prop-types": "^15.6.1",
|
||||||
"react": "^16.0.0",
|
"react": "^16.0.0",
|
||||||
"react-dom": "^16.0.0",
|
"react-dom": "^16.0.0",
|
||||||
"react-redux": "^5.0.6",
|
"react-redux": "^5.0.6",
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import { EditorSubmitButton, EditorCancelButton } from './button'
|
import { EditorSubmitButton, EditorCancelButton } from './button'
|
||||||
import { DocumentList } from './list'
|
import { DocumentList } from './list'
|
||||||
|
@ -24,4 +25,8 @@ const AnnotateModal = ({annotationNote}) =>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
AnnotateModal.propTypes = {
|
||||||
|
annotationNote: PropTypes.object
|
||||||
|
}
|
||||||
|
|
||||||
export default AnnotateModal
|
export default AnnotateModal
|
|
@ -1,7 +1,9 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
import romanize from '../modules/romanize'
|
import romanize from '../modules/romanize'
|
||||||
|
import helpers from '../modules/helpers'
|
||||||
|
|
||||||
export const ReaderEditButton = ({onClick}) =>
|
export const ReaderEditButton = ({onClick}) =>
|
||||||
<div className='edit_note_button'>
|
<div className='edit_note_button'>
|
||||||
|
@ -51,32 +53,20 @@ export const SearchButton = ({searchInput, onClick}) =>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
export const NewChapterButton = ({onNewChapterClick}) =>
|
export const NewChapterButton = ({onClick}) =>
|
||||||
<div>
|
<div>
|
||||||
<div id='new_chapter_button' className='text-center'>
|
<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>
|
New Chapter <i className='fa fa_inline fa-plus-square-o'></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
const documentName = docType => {
|
|
||||||
switch(docType) {
|
|
||||||
case 'chapters':
|
|
||||||
return 'Chapter'
|
|
||||||
break
|
|
||||||
case 'notes':
|
|
||||||
return 'Note'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export const NewDocumentButton = ({onClick, docType}) =>
|
export const NewDocumentButton = ({onClick, docType}) =>
|
||||||
<div>
|
<div>
|
||||||
<div id='new_document_button' className='text-center'>
|
<div id='new_document_button' className='text-center'>
|
||||||
<button onClick={onClick} className='btn btn-outline-success btn-sm'>
|
<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>
|
<i className='fa fa_inline fa-plus-square-o'></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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'>
|
<button id='editor_delete' onClick={onClick} type='button' data-dismiss='modal' className='btn btn-outline-danger btn-sm'>
|
||||||
Delete
|
Delete
|
||||||
<i className='fa fa_inline fa-trash-o'></i>
|
<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,
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import { EditorSubmitButton, EditorCancelButton } from './button'
|
import { EditorSubmitButton, EditorCancelButton } from './button'
|
||||||
import { DocumentList } from './list'
|
import { DocumentList } from './list'
|
||||||
|
@ -28,4 +29,11 @@ const ChooseAnnotationModal = ({notes, annotationNote, onSubmitClick, selectAnno
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
ChooseAnnotationModal.propTypes = {
|
||||||
|
notes: PropTypes.arrayOf(PropTypes.object),
|
||||||
|
annotationNote: PropTypes.object,
|
||||||
|
onSubmitClick: PropTypes.func,
|
||||||
|
selectAnnotationNote: PropTypes.func,
|
||||||
|
}
|
||||||
|
|
||||||
export default ChooseAnnotationModal
|
export default ChooseAnnotationModal
|
|
@ -1,4 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import { EditorCancelButton, EditorSubmitButton } from '../components/button'
|
import { EditorCancelButton, EditorSubmitButton } from '../components/button'
|
||||||
|
|
||||||
export const EditModeBottomBar = ({cancelEdit, onSubmitClick}) =>
|
export const EditModeBottomBar = ({cancelEdit, onSubmitClick}) =>
|
||||||
|
@ -9,4 +11,9 @@ export const EditModeBottomBar = ({cancelEdit, onSubmitClick}) =>
|
||||||
<div className='col-md-5 offset-md-2'>
|
<div className='col-md-5 offset-md-2'>
|
||||||
<EditorSubmitButton onClick={onSubmitClick} />
|
<EditorSubmitButton onClick={onSubmitClick} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
EditModeBottomBar.propTypes = {
|
||||||
|
cancelEdit: PropTypes.func,
|
||||||
|
onSubmitClick: PropTypes.func,
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import { ReaderAnnotateButton, ReaderEditButton, EditorToolButton, EditorDeleteToolButton, AnnotatorNewButton, AnnotatorRemoveButton } from './button'
|
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'>
|
<div className='col-md-5 offset-md-2'>
|
||||||
<AnnotatorRemoveButton onClick={onRemoveAnnotationClick} disabled={removeDisabled} />
|
<AnnotatorRemoveButton onClick={onRemoveAnnotationClick} disabled={removeDisabled} />
|
||||||
</div>
|
</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,
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import { EditorDeleteButton, EditorCancelButton } from './button'
|
import { EditorDeleteButton, EditorCancelButton } from './button'
|
||||||
|
|
||||||
|
@ -20,4 +21,8 @@ const DeleteConfirmModal = ({onDeleteConfirm}) =>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
DeleteConfirmModal.propTypes = {
|
||||||
|
onDeleteConfirm: PropTypes.func,
|
||||||
|
}
|
||||||
|
|
||||||
export default DeleteConfirmModal
|
export default DeleteConfirmModal
|
|
@ -1,4 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import romanize from '../modules/romanize'
|
import romanize from '../modules/romanize'
|
||||||
|
|
||||||
const DocumentTitle = ({docType, currentDocument}) =>
|
const DocumentTitle = ({docType, currentDocument}) =>
|
||||||
|
@ -9,4 +11,9 @@ const DocumentTitle = ({docType, currentDocument}) =>
|
||||||
{currentDocument.title ? currentDocument.title : ''}
|
{currentDocument.title ? currentDocument.title : ''}
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
|
DocumentTitle.propTypes = {
|
||||||
|
docType: PropTypes.string,
|
||||||
|
currentDocument: PropTypes.object
|
||||||
|
}
|
||||||
|
|
||||||
export default DocumentTitle
|
export default DocumentTitle
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
export const DocTypeDropdown = ({docType, setDocType}) =>
|
export const DocTypeDropdown = ({docType, setDocType}) =>
|
||||||
<div className='dropdown'>
|
<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('notes')}>Notes</a>
|
||||||
<a className='dropdown-item' onClick={()=>setDocType('tags')}>Tags</a>
|
<a className='dropdown-item' onClick={()=>setDocType('tags')}>Tags</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
DocTypeDropdown.propTypes = {
|
||||||
|
docType: PropTypes.string,
|
||||||
|
setDocType: PropTypes.func
|
||||||
|
}
|
|
@ -1,4 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import { ChapterButton, NoteButton } from './button'
|
import { ChapterButton, NoteButton } from './button'
|
||||||
|
|
||||||
export const DocumentList = ({notes, chapters, currentDocument, onDocumentClick, docType}) =>
|
export const DocumentList = ({notes, chapters, currentDocument, onDocumentClick, docType}) =>
|
||||||
|
@ -23,4 +25,24 @@ export const NoteList = ({notes, currentNote, onNoteClick}) =>
|
||||||
{notes.map(note =>
|
{notes.map(note =>
|
||||||
<NoteButton key={note.id} currentNote={currentNote} note={note} onClick={()=>onNoteClick(note.id, 'notes')} />
|
<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,
|
||||||
|
}
|
|
@ -1,8 +1,13 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
const LoadingSpinner = ({size=2}) =>
|
const LoadingSpinner = ({size=2}) =>
|
||||||
<div className='loading_spinner'>
|
<div className='loading_spinner'>
|
||||||
<i className={'fa fa-cog fa-spin fa-' + size + 'x fa-fw'}></i>
|
<i className={'fa fa-cog fa-spin fa-' + size + 'x fa-fw'}></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
LoadingSpinner.propTypes = {
|
||||||
|
size: PropTypes.number,
|
||||||
|
}
|
||||||
|
|
||||||
export default LoadingSpinner
|
export default LoadingSpinner
|
|
@ -1,8 +1,13 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
const SearchResultSnippet = ({snippet}) =>
|
const SearchResultSnippet = ({snippet}) =>
|
||||||
<div>
|
<div>
|
||||||
{snippet}...
|
{snippet}...
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
SearchResultSnippet.propTypes = {
|
||||||
|
snippet: PropTypes.string,
|
||||||
|
}
|
||||||
|
|
||||||
export default SearchResultSnippet
|
export default SearchResultSnippet
|
|
@ -1,4 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import SearchResultSnippet from './searchResultSnippet'
|
import SearchResultSnippet from './searchResultSnippet'
|
||||||
|
|
||||||
const SearchResultGroup = ({docType, docTitle, results}) =>
|
const SearchResultGroup = ({docType, docTitle, results}) =>
|
||||||
|
@ -24,4 +26,14 @@ const SearchResultsBox = ({searchResults}) =>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
SearchResultGroup.propType = {
|
||||||
|
docType: PropTypes.string,
|
||||||
|
docTitle: PropTypes.string,
|
||||||
|
results: PropTypes.array,
|
||||||
|
}
|
||||||
|
|
||||||
|
SearchResultsBox.propTypes = {
|
||||||
|
searchResults: PropTypes.objectOf(PropTypes.array)
|
||||||
|
}
|
||||||
|
|
||||||
export default SearchResultsBox
|
export default SearchResultsBox
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import { Editor } from 'draft-js'
|
import { Editor } from 'draft-js'
|
||||||
|
|
||||||
|
@ -8,7 +9,24 @@ import actions from '../actions'
|
||||||
import DocumentTitle from '../components/documentTitle'
|
import DocumentTitle from '../components/documentTitle'
|
||||||
import LoadingSpinner from '../components/loadingSpinner'
|
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>
|
||||||
<div id='editor_metadata'>
|
<div id='editor_metadata'>
|
||||||
{loadingToggle === true &&
|
{loadingToggle === true &&
|
||||||
|
@ -73,6 +91,7 @@ const mapDispatchToProps = dispatch => {
|
||||||
dispatch(actions.handleEditorKeyCommand(editorState, command))
|
dispatch(actions.handleEditorKeyCommand(editorState, command))
|
||||||
},
|
},
|
||||||
annotateKeyBindings: () => {
|
annotateKeyBindings: () => {
|
||||||
|
// Prevents editor input in Annotation Mode
|
||||||
return 'handled'
|
return 'handled'
|
||||||
},
|
},
|
||||||
setMode: (mode) => {
|
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)
|
const EditorContentContainer = connect(mapStateToProps, mapDispatchToProps)(EditorContent)
|
||||||
|
|
||||||
export default EditorContentContainer
|
export default EditorContentContainer
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import { EditorState } from 'draft-js'
|
import { EditorState } from 'draft-js'
|
||||||
|
|
||||||
|
@ -12,7 +13,18 @@ import DeleteConfirmModal from '../components/deleteConfirmModal'
|
||||||
import AnnotationModal from '../components/annotationModal'
|
import AnnotationModal from '../components/annotationModal'
|
||||||
import ChooseAnnotationModal from '../components/chooseAnnotationModal'
|
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 id='joyce_reader' className='container-fluid'>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<EditorSidebarContainer />
|
<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)
|
const EditorPageContainer = connect(mapStateToProps, mapDispatchToProps)(EditorPage)
|
||||||
|
|
||||||
export default EditorPageContainer
|
export default EditorPageContainer
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import actions from '../actions'
|
import actions from '../actions'
|
||||||
import { DocumentList } from '../components/list'
|
import { DocumentList } from '../components/list'
|
||||||
|
@ -7,7 +8,15 @@ import { DocTypeDropdown } from '../components/dropdown'
|
||||||
import SidebarSpacer from '../components/sidebarSpacer'
|
import SidebarSpacer from '../components/sidebarSpacer'
|
||||||
import { push } from 'react-router-redux'
|
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 className="col-md-3 d-none d-md-block" id="sidebar">
|
||||||
<div>
|
<div>
|
||||||
<DocTypeDropdown docType={docType} setDocType={setDocType} />
|
<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)
|
const EditorSidebarContainer = connect(mapStateToProps, mapDispatchToProps)(EditorSidebar)
|
||||||
|
|
||||||
export default EditorSidebarContainer
|
export default EditorSidebarContainer
|
|
@ -1,7 +1,9 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import actions from '../actions'
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
|
|
||||||
|
import actions from '../actions'
|
||||||
|
|
||||||
const Link = (props) => {
|
const Link = (props) => {
|
||||||
const data = props.contentState.getEntity(props.entityKey).getData()
|
const data = props.contentState.getEntity(props.entityKey).getData()
|
||||||
return (
|
return (
|
||||||
|
@ -25,6 +27,11 @@ const mapDispatchToProps = dispatch => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Link.propTypes = {
|
||||||
|
annotationNote: PropTypes.object,
|
||||||
|
onAnnotationClick: PropTypes.func,
|
||||||
|
}
|
||||||
|
|
||||||
const LinkContainer = connect(mapStateToProps, mapDispatchToProps)(Link)
|
const LinkContainer = connect(mapStateToProps, mapDispatchToProps)(Link)
|
||||||
|
|
||||||
export default LinkContainer
|
export default LinkContainer
|
|
@ -1,10 +1,17 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import { Editor } from 'draft-js'
|
import { Editor } from 'draft-js'
|
||||||
|
|
||||||
import DocumentTitle from '../components/documentTitle'
|
import DocumentTitle from '../components/documentTitle'
|
||||||
import LoadingSpinner from '../components/loadingSpinner'
|
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'}>
|
<div id="page" className={highlightToggle ? 'annotations' : 'hidden_annotations'}>
|
||||||
{loadingToggle === true &&
|
{loadingToggle === true &&
|
||||||
<LoadingSpinner />
|
<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)
|
const ReaderContentContainer = connect(mapStateToProps)(ReaderContent)
|
||||||
|
|
||||||
export default ReaderContentContainer
|
export default ReaderContentContainer
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import { EditorState } from 'draft-js'
|
import { EditorState } from 'draft-js'
|
||||||
|
|
||||||
|
@ -9,7 +10,11 @@ import ReaderSidebarContainer from '../containers/readerSidebarContainer'
|
||||||
import ReaderContentContainer from '../containers/readerContentContainer'
|
import ReaderContentContainer from '../containers/readerContentContainer'
|
||||||
import AnnotationModal from '../components/annotationModal'
|
import AnnotationModal from '../components/annotationModal'
|
||||||
|
|
||||||
const ReaderPage = ({currentDocument, annotationNote, loadingToggle}) =>
|
const ReaderPage = ({
|
||||||
|
currentDocument,
|
||||||
|
annotationNote,
|
||||||
|
loadingToggle,
|
||||||
|
}) =>
|
||||||
<div id='joyce_reader' className='container-fluid'>
|
<div id='joyce_reader' className='container-fluid'>
|
||||||
<div id='content_window' className='row'>
|
<div id='content_window' className='row'>
|
||||||
<ReaderSidebarContainer />
|
<ReaderSidebarContainer />
|
||||||
|
@ -36,6 +41,12 @@ const mapStateToProps = state => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ReaderPage.propTypes = {
|
||||||
|
currentDocument: PropTypes.object,
|
||||||
|
annotationNote: PropTypes.object,
|
||||||
|
loadingToggle: PropTypes.bool,
|
||||||
|
}
|
||||||
|
|
||||||
const ReaderPageContainer = connect(mapStateToProps)(ReaderPage)
|
const ReaderPageContainer = connect(mapStateToProps)(ReaderPage)
|
||||||
|
|
||||||
export default ReaderPageContainer
|
export default ReaderPageContainer
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import actions from '../actions'
|
import actions from '../actions'
|
||||||
import { DocumentList } from '../components/list'
|
import { DocumentList } from '../components/list'
|
||||||
|
@ -6,7 +7,15 @@ import { HighlightButton } from '../components/button'
|
||||||
import SidebarSpacer from '../components/sidebarSpacer'
|
import SidebarSpacer from '../components/sidebarSpacer'
|
||||||
import { push } from 'react-router-redux'
|
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 className='col-md-3 d-none d-md-block' id='sidebar'>
|
||||||
<div>
|
<div>
|
||||||
<HighlightButton highlightToggle={highlightToggle} onClick={onHighlightClick}/>
|
<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)
|
const ReaderSidebarContainer = connect(mapStateToProps, mapDispatchToProps)(ReaderSidebar)
|
||||||
|
|
||||||
export default ReaderSidebarContainer
|
export default ReaderSidebarContainer
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import { Editor } from 'draft-js'
|
import { Editor } from 'draft-js'
|
||||||
|
|
||||||
|
@ -6,7 +7,12 @@ import actions from '../actions'
|
||||||
import { SearchButton } from '../components/button'
|
import { SearchButton } from '../components/button'
|
||||||
import SearchResultsBox from '../components/searchResultsBox'
|
import SearchResultsBox from '../components/searchResultsBox'
|
||||||
|
|
||||||
const SearchContent = ({searchResults, searchInput, onSearchInputChange, onSearchClick}) =>
|
const SearchContent = ({
|
||||||
|
searchResults,
|
||||||
|
searchInput,
|
||||||
|
onSearchInputChange,
|
||||||
|
onSearchClick,
|
||||||
|
}) =>
|
||||||
<div className='container'>
|
<div className='container'>
|
||||||
<div className='row'>
|
<div className='row'>
|
||||||
<div className='col-sm-2'>
|
<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)
|
const SearchContentContainer = connect(mapStateToProps, mapDispatchToProps)(SearchContent)
|
||||||
|
|
||||||
export default SearchContentContainer
|
export default SearchContentContainer
|
|
@ -8,6 +8,19 @@ const helpers = {
|
||||||
return chapter.id
|
return chapter.id
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
docTypeName: docType => {
|
||||||
|
switch(docType) {
|
||||||
|
case 'chapters':
|
||||||
|
return 'Chapter'
|
||||||
|
break
|
||||||
|
case 'notes':
|
||||||
|
return 'Note'
|
||||||
|
break
|
||||||
|
case 'tags':
|
||||||
|
return 'Tags'
|
||||||
|
break
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue