From c9f197675f2d3766abbd40bade32ea51766979cb Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Thu, 29 Nov 2018 23:37:36 -0800 Subject: [PATCH] Refactoring input & toggle state --- src/actions/inputActions.js | 12 ++--- src/actions/userActions.js | 13 +++-- src/components/adminHeader.js | 28 +++++++++++ src/components/button.js | 12 ++--- src/components/contentBottomBar.js | 4 +- src/components/editorAnnotateMode.js | 4 +- src/components/editorEditMode.js | 11 ++--- src/components/editorReadMode.js | 4 +- src/components/mobileSidebarOptions.js | 2 +- src/components/tagColorPicker.js | 4 +- src/containers/editorContentContainer.js | 43 ++++++++--------- src/containers/editorPageContainer.js | 12 ++--- src/containers/readerContentContainer.js | 13 ++--- src/containers/readerPageContainer.js | 24 +++++----- src/containers/readerSidebarContainer.js | 8 ++-- src/containers/searchContentContainer.js | 14 +++--- src/joyce.js | 10 +--- src/middleware/joyceInterface.js | 2 +- src/modules/validation.js | 8 ++-- src/reducers/inputs.js | 61 ++++++++++++++++++++++++ src/reducers/reduceJoyce.js | 26 +++++----- src/reducers/toggles.js | 46 ++++++++++++++++++ src/reducers/userErrors.js | 2 +- src/stylesheets/_dev.scss | 6 ++- templates/joyce.html | 2 +- 25 files changed, 254 insertions(+), 117 deletions(-) create mode 100644 src/components/adminHeader.js create mode 100644 src/reducers/inputs.js create mode 100644 src/reducers/toggles.js diff --git a/src/actions/inputActions.js b/src/actions/inputActions.js index d0371be..06fa7fa 100644 --- a/src/actions/inputActions.js +++ b/src/actions/inputActions.js @@ -5,21 +5,21 @@ const inputActions = { // Handle changes to the document title input box - updateDocumentTitleInput: documentTitleInput => + updateDocumentTitleInput: input => ({ type: 'UPDATE_DOCUMENT_TITLE', - data: documentTitleInput.target.value + data: input.target.value }), - updateColorPickerInput: colorPickerInput => + updateColorPickerInput: input => ({ type: 'UPDATE_COLOR_PICKER', - data: colorPickerInput.target.value + data: input.target.value }), // Handle changes to the search input box - updateSearchInput: searchInput => + updateSearchInput: input => ({ type: 'UPDATE_SEARCH_INPUT', - data: searchInput.target.value + data: input.target.value }) } diff --git a/src/actions/userActions.js b/src/actions/userActions.js index 6fea71d..e7963c4 100644 --- a/src/actions/userActions.js +++ b/src/actions/userActions.js @@ -18,13 +18,12 @@ const userActions = { docType: docType }), // Click 'Submit' to save a document edit - submitDocumentEdit: (currentDocument, editorState, documentTitleInput, colorPickerInput, docType) => + submitDocumentEdit: (currentDocument, editorState, inputs, docType) => ({ type: 'SUBMIT_DOCUMENT_EDIT', currentDocument: currentDocument, editorState: editorState, - documentTitleInput: documentTitleInput, - colorPickerInput: colorPickerInput, + inputs: inputs, docType: docType }), // Click 'Cancel' to discard document changes @@ -62,10 +61,10 @@ const userActions = { mode: mode }), // Click 'Search' to request search results - clickSearch: searchInput => + clickSearch: inputs => ({ type: 'CLICK_SEARCH', - data: searchInput + data: inputs.search }), // Set the DocType to choose from in the Editor setDocType: docType => @@ -116,6 +115,10 @@ const userActions = { ({ type: 'CLEAR_ANNOTATION_TAG' }), + hideAdmin: () => + ({ + type: 'HIDE_ADMIN_HEADER' + }) } export default userActions \ No newline at end of file diff --git a/src/components/adminHeader.js b/src/components/adminHeader.js new file mode 100644 index 0000000..029ea7a --- /dev/null +++ b/src/components/adminHeader.js @@ -0,0 +1,28 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import api from '../modules/api' + +import { ReaderAnnotateButton, ReaderEditButton, EditorToolButton, EditorDeleteToolButton, AnnotatorNewButton, AnnotatorRemoveButton } from './button' + +const refreshElasticsearch = () => { + api.HTTPGetRefreshList().then(response => + location.reload() + ) +} + +const AdminHeader = ({toggles, hideAdmin}) => +
+ + +
+ +export default AdminHeader + +AdminHeader.propTypes = { + refreshElasticsearch: PropTypes.func, +} \ No newline at end of file diff --git a/src/components/button.js b/src/components/button.js index 2c173ac..eeb4daa 100644 --- a/src/components/button.js +++ b/src/components/button.js @@ -44,19 +44,19 @@ export const TagButton = ({tag, currentTag, onClick}) => -export const HighlightButton = ({highlightToggle, onClick, size='lg'}) => +export const HighlightButton = ({toggle, onClick, size='lg'}) =>
-
-export const SearchButton = ({searchInput, onClick}) => +export const SearchButton = ({input, onClick}) =>
-
@@ -146,7 +146,7 @@ NoteButton.propTypes = { } HighlightButton.propTypes = { - highlightToggle: PropTypes.bool, + toggle: PropTypes.bool, onClick: PropTypes.func, } diff --git a/src/components/contentBottomBar.js b/src/components/contentBottomBar.js index 9b77de9..2119ec6 100644 --- a/src/components/contentBottomBar.js +++ b/src/components/contentBottomBar.js @@ -5,10 +5,10 @@ import { EditorCancelButton, EditorSubmitButton } from '../components/button' export const EditModeBottomBar = ({cancelEdit, onSubmitClick}) =>
-
+
cancelEdit()}/>
-
+
diff --git a/src/components/editorAnnotateMode.js b/src/components/editorAnnotateMode.js index bac650a..bd1511f 100644 --- a/src/components/editorAnnotateMode.js +++ b/src/components/editorAnnotateMode.js @@ -12,7 +12,7 @@ const EditorAnnotateMode = ({ currentDocument, editorState, docType, - loadingToggle, + toggles, onChangeEditorState, onNewAnnotationClick, annotateKeyBindings, @@ -22,7 +22,7 @@ const EditorAnnotateMode = ({ }) =>
- {loadingToggle === true && + {toggles.loading === true && } diff --git a/src/components/editorEditMode.js b/src/components/editorEditMode.js index 78166e6..497fb27 100644 --- a/src/components/editorEditMode.js +++ b/src/components/editorEditMode.js @@ -13,15 +13,14 @@ const EditorEditMode = ({ currentDocument, editorState, docType, - loadingToggle, + toggles, handleKeyCommand, onChangeEditorState, onToolButtonClick, setMode, cancelEdit, onSubmitClick, - colorPickerInput, - documentTitleInput, + inputs, onDocumentTitleChange, onColorPickerInputChange, onColorSwatchClick, @@ -29,10 +28,10 @@ const EditorEditMode = ({ }) =>
- {loadingToggle === true && + {toggles.loading === true && } - +
{docType === 'tags' && - + }
diff --git a/src/components/editorReadMode.js b/src/components/editorReadMode.js index 7e5d212..f0af9ca 100644 --- a/src/components/editorReadMode.js +++ b/src/components/editorReadMode.js @@ -11,12 +11,12 @@ const EditorReadMode = ({ currentDocument, editorState, docType, - loadingToggle, + toggles, setMode }) =>
- {loadingToggle === true && + {toggles.loading === true && } diff --git a/src/components/mobileSidebarOptions.js b/src/components/mobileSidebarOptions.js index cefa302..b025ab0 100644 --- a/src/components/mobileSidebarOptions.js +++ b/src/components/mobileSidebarOptions.js @@ -7,7 +7,7 @@ import { ReaderDocDropdown } from './dropdown' export const ReaderSidebarOptions = ({docs, currentDocument, highlightToggle, docType, onHighlightClick, onDocumentClick}) =>
- +
diff --git a/src/components/tagColorPicker.js b/src/components/tagColorPicker.js index 3d650aa..ccbe51c 100644 --- a/src/components/tagColorPicker.js +++ b/src/components/tagColorPicker.js @@ -2,12 +2,12 @@ import React from 'react' import defaultTagColors from '../modules/editorSettings' -const TagColorPicker = ({colorPickerInput, onChange, onColorSwatchClick}) => +const TagColorPicker = ({input, onChange, onColorSwatchClick}) =>
#
- +
diff --git a/src/containers/editorContentContainer.js b/src/containers/editorContentContainer.js index 237895e..fe07ec0 100644 --- a/src/containers/editorContentContainer.js +++ b/src/containers/editorContentContainer.js @@ -8,11 +8,15 @@ import EditorAnnotateMode from '../components/editorAnnotateMode' import EditorEditMode from '../components/editorEditMode' const EditorContent = ({ + // State currentDocument, editorState, docType, mode, - loadingToggle, + toggles, + inputs, + userErrors, + //Dispatch handleKeyCommand, onChangeEditorState, onToolButtonClick, @@ -20,14 +24,11 @@ const EditorContent = ({ cancelEdit, onSubmitClick, onColorSwatchClick, - documentTitleInput, - colorPickerInput, onDocumentTitleChange, onColorPickerInputChange, onNewAnnotationClick, annotateKeyBindings, onRemoveAnnotationClick, - userErrors, }) =>
{mode === 'READ_MODE' && @@ -35,7 +36,7 @@ const EditorContent = ({ currentDocument={currentDocument} editorState={editorState} docType={docType} - loadingToggle={loadingToggle} + toggles={toggles} setMode={setMode} /> } @@ -44,7 +45,7 @@ const EditorContent = ({ currentDocument={currentDocument} editorState={editorState} docType={docType} - loadingToggle={loadingToggle} + toggles={toggles} handleKeyCommand={handleKeyCommand} onNewAnnotationClick={()=>onNewAnnotationClick(editorState.getSelection())} onRemoveAnnotationClick={()=>onRemoveAnnotationClick(editorState)} @@ -53,7 +54,7 @@ const EditorContent = ({ onToolButtonClick={onToolButtonClick} setMode={setMode} cancelEdit={cancelEdit} - onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, colorPickerInput, docType)} + onSubmitClick={()=>onSubmitClick(currentDocument, editorState, inputs, docType)} /> } {mode === 'EDIT_MODE' && @@ -61,12 +62,11 @@ const EditorContent = ({ currentDocument={currentDocument} editorState={editorState} docType={docType} - loadingToggle={loadingToggle} + toggles={toggles} onChangeEditorState={onChangeEditorState} cancelEdit={cancelEdit} - onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, colorPickerInput, docType)} - documentTitleInput={documentTitleInput} - colorPickerInput={colorPickerInput} + onSubmitClick={()=>onSubmitClick(currentDocument, editorState, inputs, docType)} + inputs={inputs} onColorSwatchClick={onColorSwatchClick} onDocumentTitleChange={onDocumentTitleChange} onColorPickerInputChange={onColorPickerInputChange} @@ -81,9 +81,8 @@ const mapStateToProps = (state, props) => { mode: state.mode, docType: state.docType, editorState: state.editorState, - documentTitleInput: state.documentTitleInput, - colorPickerInput: state.colorPickerInput, - loadingToggle: state.loadingToggle, + inputs: state.inputs, + toggles: state.toggles, userErrors: state.userErrors, } } @@ -93,11 +92,11 @@ const mapDispatchToProps = dispatch => { onChangeEditorState: editorState => { dispatch(actions.updateEditorState(editorState)) }, - onDocumentTitleChange: documentTitleInput => { - dispatch(actions.updateDocumentTitleInput(documentTitleInput)) + onDocumentTitleChange: input => { + dispatch(actions.updateDocumentTitleInput(input)) }, - onColorPickerInputChange: colorPickerInput => { - dispatch(actions.updateColorPickerInput(colorPickerInput)) + onColorPickerInputChange: input => { + dispatch(actions.updateColorPickerInput(input)) }, handleKeyCommand: (command, editorState) => { dispatch(actions.handleEditorKeyCommand(editorState, command)) @@ -124,8 +123,8 @@ const mapDispatchToProps = dispatch => { onToolButtonClick: (editorState, style) => { dispatch(actions.applyInlineStyles(editorState, style)) }, - onSubmitClick: (currentDocument, editorState, documentTitleInput, colorPickerInput, docType) => { - dispatch(actions.submitDocumentEdit(currentDocument, editorState, documentTitleInput, colorPickerInput, docType)) + onSubmitClick: (currentDocument, editorState, inputs, docType) => { + dispatch(actions.submitDocumentEdit(currentDocument, editorState, inputs, docType)) } } } @@ -133,10 +132,10 @@ const mapDispatchToProps = dispatch => { EditorContent.propTypes = { currentDocument: PropTypes.object, editorState: PropTypes.object, - documentTitleInput: PropTypes.string, + inputs: PropTypes.object, docType: PropTypes.string, mode: PropTypes.string, - loadingToggle: PropTypes.bool, + toggles: PropTypes.object, handleKeyCommand: PropTypes.func, onChangeEditorState: PropTypes.func, onToolButtonClick: PropTypes.func, diff --git a/src/containers/editorPageContainer.js b/src/containers/editorPageContainer.js index 173f672..35be681 100644 --- a/src/containers/editorPageContainer.js +++ b/src/containers/editorPageContainer.js @@ -21,7 +21,7 @@ const EditorPage = ({ modalEditorState, docType, tags, - loadingToggle, + toggles, onDeleteConfirm, onSubmitAnnotationClick, selectAnnotationNote, @@ -34,13 +34,13 @@ const EditorPage = ({
- {loadingToggle === true && + {toggles.loading === true && } - {(Object.keys(currentDocument).length > 0 && loadingToggle === false) && + {(Object.keys(currentDocument).length > 0 && toggles.loading === false) && } - {(Object.keys(currentDocument).length === 0 && loadingToggle === false) && + {(Object.keys(currentDocument).length === 0 && toggles.loading === false) && } @@ -72,7 +72,7 @@ const mapStateToProps = state => { modalEditorState: state.modalEditorState, selectionState: state.selectionState, docType: state.docType, - loadingToggle: state.loadingToggle, + toggles: state.toggles, userErrors: state.userErrors, } } @@ -107,7 +107,7 @@ EditorPage.propTypes = { modalEditorState: PropTypes.object, selectionState: PropTypes.object, docType: PropTypes.string, - loadingToggle: PropTypes.bool, + toggles: PropTypes.object, onDeleteConfirm: PropTypes.func, onSubmitAnnotationClick: PropTypes.func, selectAnnotationNote: PropTypes.func, diff --git a/src/containers/readerContentContainer.js b/src/containers/readerContentContainer.js index 5ce8cc1..f6491b0 100644 --- a/src/containers/readerContentContainer.js +++ b/src/containers/readerContentContainer.js @@ -9,11 +9,10 @@ import LoadingSpinner from '../components/loadingSpinner' const ReaderContent = ({ currentDocument, editorState, - loadingToggle, - highlightToggle, + toggles, }) => -
- {loadingToggle === true && +
+ {toggles.loading === true && }
@@ -28,16 +27,14 @@ const mapStateToProps = state => { return { currentDocument: state.currentDocument, editorState: state.editorState, - highlightToggle: state.highlightToggle, - loadingToggle: state.loadingToggle + toggles: state.toggles, } } ReaderContent.propTypes = { currentDocument: PropTypes.object, editorState: PropTypes.object, - loadingToggle: PropTypes.bool, - highlightToggle: PropTypes.bool, + toggles: PropTypes.object, } const ReaderContentContainer = connect(mapStateToProps)(ReaderContent) diff --git a/src/containers/readerPageContainer.js b/src/containers/readerPageContainer.js index e4603dc..580667f 100644 --- a/src/containers/readerPageContainer.js +++ b/src/containers/readerPageContainer.js @@ -21,8 +21,7 @@ const ReaderPage = ({ docType, annotationNote, modalEditorState, - loadingToggle, - highlightToggle, + toggles, onDocumentClick, onHighlightClick, }) => @@ -30,7 +29,7 @@ const ReaderPage = ({ - {loadingToggle === true && + {toggles.loading === true && } - {(Object.keys(currentDocument).length > 0 && loadingToggle === false) && + {(Object.keys(currentDocument).length > 0 && toggles.loading === false) && } - {(Object.keys(currentDocument).length === 0 && loadingToggle === false) && + {(Object.keys(currentDocument).length === 0 && toggles.loading === false) && } @@ -61,8 +60,7 @@ const mapStateToProps = state => { docType: state.docType, annotationNote: state.annotationNote, modalEditorState: state.modalEditorState, - loadingToggle: state.loadingToggle, - highlightToggle: state.highlightToggle, + toggles: state.toggles, } } @@ -73,15 +71,19 @@ const mapDispatchToProps = dispatch => { }, onHighlightClick: () => { dispatch(actions.toggleHighlight()) - } + } } } ReaderPage.propTypes = { + chapters: PropTypes.arrayOf(PropTypes.object), + notes: PropTypes.arrayOf(PropTypes.object), + tags: PropTypes.arrayOf(PropTypes.object), currentDocument: PropTypes.object, - modalEditorState: PropTypes.object, + docType: PropTypes.string, annotationNote: PropTypes.object, - loadingToggle: PropTypes.bool, + modalEditorState: PropTypes.object, + toggles: PropTypes.object, } const ReaderPageContainer = connect(mapStateToProps, mapDispatchToProps)(ReaderPage) diff --git a/src/containers/readerSidebarContainer.js b/src/containers/readerSidebarContainer.js index 1ec2394..627d6df 100644 --- a/src/containers/readerSidebarContainer.js +++ b/src/containers/readerSidebarContainer.js @@ -13,13 +13,13 @@ const ReaderSidebar = ({ notes, currentDocument, docType, - highlightToggle, + toggles, onDocumentClick, onHighlightClick, }) =>