satchlj
/
joyce
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed the delete document issues caused by switch to routing

This commit is contained in:
Alex Hunt 2018-05-10 20:25:39 -04:00
parent 667c4548a2
commit 3aafbac5a6
6 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/deleteConfirmModal.js
View File

@ -2,7 +2,7 @@ import React from 'react'
import { EditorDeleteButton, EditorCancelButton } from './button'
const DeleteConfirmModal = ({onDeleteClick}) =>
const DeleteConfirmModal = ({onDeleteConfirm}) =>
<div className='modal fade' id='delete_confirm_modal' tabIndex='-1' role='dialog'>
<div className='modal-dialog' role='document'>
<div className='modal-content'>
@ -14,7 +14,7 @@ const DeleteConfirmModal = ({onDeleteClick}) =>
</div>
<div className='modal-footer'>
<EditorCancelButton />
<EditorDeleteButton onClick={onDeleteClick} />
<EditorDeleteButton onClick={onDeleteConfirm} />
</div>
</div>
</div>

12
src/containers/editorPageContainer.js
View File

@ -6,10 +6,12 @@ import actions from '../actions'
import Content from '../components/content'
import { EditorWelcome } from '../components/welcome'
import LoadingSpinner from '../components/loadingSpinner'
import EditorSidebarContainer from '../containers/editorSidebarContainer'
import EditorContentContainer from '../containers/editorContentContainer'
import EditorSidebarContainer from './editorSidebarContainer'
import EditorContentContainer from './editorContentContainer'
import DeleteConfirmModal from '../components/deleteConfirmModal'
import AnnotateModal from '../components/annotateModal'
const EditorPage = ({notes, currentDocument, docType, annotationNote, onDeleteClick, onSubmitAnnotationClick, selectAnnotationNote, selectionState, editorState, loadingToggle}) =>
const EditorPage = ({notes, currentDocument, docType, annotationNote, onDeleteConfirm, onSubmitAnnotationClick, selectAnnotationNote, selectionState, editorState, loadingToggle}) =>
<div id='joyce_reader' className='container-fluid'>
<div className="row">
<EditorSidebarContainer />
@ -25,6 +27,8 @@ const EditorPage = ({notes, currentDocument, docType, annotationNote, onDeleteCl
}
</Content>
</div>
<DeleteConfirmModal onDeleteConfirm={()=>onDeleteConfirm(currentDocument.id, docType)}/>
<AnnotateModal notes={notes} annotationNote={annotationNote} onSubmitClick={()=>onSubmitAnnotationClick(annotationNote, selectionState, editorState)} selectAnnotationNote={selectAnnotationNote} />
</div>
const mapStateToProps = state => {
@ -41,7 +45,7 @@ const mapStateToProps = state => {
const mapDispatchToProps = dispatch => {
return {
onDeleteClick: (id, docType) => {
onDeleteConfirm: (id, docType) => {
dispatch(actions.deleteCurrentDocument(id, docType))
},
selectAnnotationNote: id => {

10
src/joyce.js
View File

@ -11,8 +11,6 @@ import 'bootstrap'
// src packages
import Navbar from './components/navbar'
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/'
@ -23,12 +21,12 @@ import SearchPageContainer from './containers/searchPageContainer'
const history = createHistory()
const router = routerMiddleware(history)
const store = createStore(reduceJoyce, applyMiddleware(logger, router, joyceAPI, joyceInterface, joyceRouter))
const state = store.getState()
// TODO: Modal container should probably be connected to Redux if possible
store.dispatch(actions.getDocumentList({docType: 'chapters'}))
store.dispatch(actions.getDocumentList({docType: 'notes'}))
// TODO: Modal container should probably get state and dispatch as props, not access store
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
@ -53,9 +51,7 @@ ReactDOM.render(
<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} />
<AnnotationModal annotationNote={store.getState().annotationNote} />
<AnnotationModal annotationNote={state.annotationNote} />
</div>
</ConnectedRouter>
</Provider>,

18
src/middleware/joyceInterface.js
View File

@ -1,26 +1,10 @@
import axios from 'axios'
import { stateToHTML } from 'draft-js-export-html'
import { convertToRaw } from 'draft-js'
import actions from '../actions'
import helpers from '../modules/helpers'
const html_export_options = {
entityStyleFn: (entity) => {
const entityType = entity.get('type').toUpperCase()
if (entityType === 'LINK') {
const data = entity.getData()
return {
element: 'a',
attributes: {
'href': data.url,
'data-target': '#annotation_modal',
'data-toggle': 'modal'
}
}
}
}
}
import { html_export_options, convertToPlainText } from '../modules/editorSettings.js'
const joyceInterface = store => next => action => {
next(action)

10
src/middleware/joyceRouter.js
View File

@ -77,14 +77,8 @@ const joyceRouter = store => next => action => {
}
break
case 'DELETE_DOCUMENT':
if (action.status === 'request') {
api.HTTPDeleteDocument(action.id, action.docType).then(response =>
store.dispatch(actions.deleteDocument(response))
)
} else if (action.status === 'success') {
if (action.data[0]) {
store.dispatch(actions.setCurrentDocument(action.data[0].id, action.docType, 'currentDocument'))
}
if (action.status === 'success' && action.data[0]) {
store.dispatch(actions.setCurrentDocument(action.data[0].id, action.docType, 'currentDocument'))
}
break
default:

26
src/modules/editorSettings.js Normal file
View File

@ -0,0 +1,26 @@
import { convertToRaw } from 'draft-js'
export const html_export_options = {
entityStyleFn: (entity) => {
const entityType = entity.get('type').toUpperCase()
if (entityType === 'LINK') {
const data = entity.getData()
return {
element: 'a',
attributes: {
'href': data.url,
'data-target': '#annotation_modal',
'data-toggle': 'modal'
}
}
}
}
}
export const convertToPlainText = contentState => {
const rawState = convertToRaw(contentState)
return rawState.blocks.reduce(
(plaintText, block) => plaintText + block.text + '\n',
''
)
}