Merge pull request #725 from LD4P/show-rdf

Move state for showing preview to the redux store

__tests__/components/editor/RDFModal.test.js

@@ -11,7 +11,7 @@ describe('<RDFModal />', () => {
   const rdfFunc = jest.fn()
   const saveFunc = jest.fn()
 
-  const wrapper = shallow(<RDFModal show={true} rdf={rdfFunc} close={closeFunc} save={saveFunc} />)
+  const wrapper = shallow(<RDFModal.WrappedComponent show={true} rdf={rdfFunc} close={closeFunc} save={saveFunc} />)
 
   it('renders the <RDFModal /> component as a Modal', () => {
     expect(wrapper.find(Modal).length).toBe(1)

__tests__/reducers/inputs.test.js

@@ -2,7 +2,7 @@
 
 import {
   removeAllContent, removeMyItem, setMyItems, setMySelections, setBaseURL,
-  validate, showGroupChooser,
+  validate, showGroupChooser, showRdfPreview,
 } from 'reducers/inputs'
 
 import {
@@ -19,6 +19,9 @@ beforeEach(() => {
       groupChoice: {
         show: false,
       },
+      rdfPreview: {
+        show: false,
+      },
     },
     resource: { },
     entities: {
@@ -49,6 +52,20 @@ describe('showGroupChooser()', () => {
   })
 })
 
+describe('showRdfPreview()', () => {
+  it('sets the showRdfPreview to true', () => {
+    const result = showRdfPreview(initialState, { payload: true })
+
+    expect(result.editor.rdfPreview.show).toBe(true)
+  })
+
+  it('sets the showRdfPreview to false', () => {
+    const result = showRdfPreview(initialState, { payload: false })
+
+    expect(result.editor.rdfPreview.show).toBe(false)
+  })
+})
+
 describe('setMyItems', () => {
   it('adds item to state', () => {
     initialState.resource = {

src/actions/index.js

@@ -56,6 +56,11 @@ export const setLang = item => ({
   payload: item,
 })
 
+export const showRdfPreview = show => ({
+  type: 'SHOW_RDF_PREVIEW',
+  payload: show,
+})
+
 export const resourceTemplateLoaded = resourceTemplate => ({
   type: 'RESOURCE_TEMPLATE_LOADED',
   payload: resourceTemplate,

src/components/editor/Editor.jsx

@@ -4,7 +4,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import {
-  removeAllItems, assignBaseURL, runValidation, showGroupChooser,
+  removeAllItems, assignBaseURL, runValidation, showGroupChooser, showRdfPreview,
 } from '../../actions/index'
 import ResourceTemplate from './ResourceTemplate'
 import Header from './Header'
@@ -13,7 +13,7 @@ import GroupChoiceModal from './GroupChoiceModal'
 import Config from '../../Config'
 import { getCurrentSession, getCurrentUser } from '../../authSelectors'
 import { publishRDFResource } from '../../sinopiaServer'
-import { getAllRdf, findNode } from '../../reducers/index'
+import { findNode } from '../../reducers/index'
 
 const _ = require('lodash')
 
@@ -25,7 +25,6 @@ class Editor extends Component {
     super(props)
     this.state = {
       resourceTemplateId: '',
-      showRdf: false,
     }
   }
 
@@ -39,15 +38,6 @@ class Editor extends Component {
     }
   }
 
-  handleRdfShow = () => {
-    this.setState({ showRdf: true })
-  }
-
-  // NOTE: it's possible these handle methods for RDFModal could live in RDFModal component
-  handleRdfClose = () => {
-    this.setState({ showRdf: false })
-  }
-
   handleRdfSave = () => {
     this.props.openGroupChooser()
   }
@@ -66,7 +56,7 @@ class Editor extends Component {
       console.error('unable to save resource')
       console.error(err)
     })
-    this.handleRdfClose()
+    this.props.closeRdfPreview()
     this.props.closeGroupChooser()
   }
 
@@ -84,7 +74,6 @@ class Editor extends Component {
     }
 
     let errorMessage
-    let rdfModal
 
     if (this.props.displayValidations && this.props.errors.length > 0) {
       const errorList = this.props.errors.map(elem => (<li key={elem.path.join('-')}>{elem.label} {elem.message}</li>))
@@ -95,29 +84,21 @@ class Editor extends Component {
       </div>
     }
 
-
-    if (this.state.showRdf) {
-      rdfModal = <RDFModal save={ this.props.openGroupChooser }
-                           close={ this.handleRdfClose }
-                           rdf={ this.props.rdf } />
-    }
-
     return (
       <div id="editor">
         <Header triggerEditorMenu={this.props.triggerHandleOffsetMenu}/>
         { authenticationMessage }
         <div className="row">
           <section className="col-md-3" style={{ float: 'right', width: '320px' }}>
-            <button type="button" className="btn btn-link btn-sm btn-editor" onClick={ this.handleRdfShow }>Preview RDF</button>
+            <button type="button" className="btn btn-link btn-sm btn-editor" onClick={ this.props.openRdfPreview }>Preview RDF</button>
             <button type="button" className="btn btn-primary btn-sm btn-editor" onClick={ this.props.openGroupChooser }>Save & Publish</button>
             <button type="button" className="btn btn-primary btn-sm btn-editor" onClick={ this.props.validate }>Validate</button>
           </section>
         </div>
-        {rdfModal}
+        <RDFModal save={ this.handleRdfSave } close={ this.props.closeRdfPreview } />
         {errorMessage}
         <div>
-          <GroupChoiceModal rdf={this.props.rdf}
-                            close={ this.props.closeGroupChooser }
+          <GroupChoiceModal close={ this.closeGroupChooser }
                             save={ this.chooseGroupThenSave }
                             groups={ this.groupsToSaveInto() } />
         </div>
@@ -134,20 +115,20 @@ Editor.propTypes = {
   validate: PropTypes.func,
   openGroupChooser: PropTypes.func,
   closeGroupChooser: PropTypes.func,
+  openRdfPreview: PropTypes.func,
+  closeRdfPreview: PropTypes.func,
   location: PropTypes.object,
   resourceTemplateId: PropTypes.string,
   history: PropTypes.object,
   currentSession: PropTypes.object,
   currentUser: PropTypes.object,
-  rdf: PropTypes.func,
   errors: PropTypes.array,
   displayValidations: PropTypes.bool,
 }
 
-const mapStateToProps = (state, props) => ({
+const mapStateToProps = state => ({
   currentSession: getCurrentSession(state),
   currentUser: getCurrentUser(state),
-  rdf: getAllRdf(state, props),
   errors: findNode(state.selectorReducer, ['editor']).errors,
   displayValidations: state.selectorReducer.editor.displayValidations,
 })
@@ -168,6 +149,12 @@ const mapDispatchToProps = dispatch => ({
   closeGroupChooser() {
     dispatch(showGroupChooser(false))
   },
+  openRdfPreview() {
+    dispatch(showRdfPreview(true))
+  },
+  closeRdfPreview() {
+    dispatch(showRdfPreview(false))
+  },
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Editor)

src/components/editor/GroupChoiceModal.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 import Button from 'react-bootstrap/lib/Button'
 import Modal from 'react-bootstrap/lib/Modal'
 import PropTypes from 'prop-types'
+import { getAllRdf } from '../../reducers/index'
 
 class GroupChoiceModal extends Component {
   constructor(props) {
@@ -66,8 +67,9 @@ GroupChoiceModal.propTypes = {
   rdf: PropTypes.func,
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state, props) => ({
   show: state.selectorReducer.editor.groupChoice.show,
+  rdf: getAllRdf(state, props),
 })
 
 export default connect(mapStateToProps, {})(GroupChoiceModal)

src/components/editor/RDFModal.jsx

@@ -1,15 +1,20 @@
 // Copyright 2019 Stanford University see LICENSE for license
 
 import React from 'react'
+import { connect } from 'react-redux'
 import Button from 'react-bootstrap/lib/Button'
 import Modal from 'react-bootstrap/lib/Modal'
 import Row from 'react-bootstrap/lib/Row'
 import Col from 'react-bootstrap/lib/Col'
-
 import PropTypes from 'prop-types'
+import { getAllRdf } from '../../reducers/index'
+
+const RDFModal = (props) => {
+  if (!props.show) {
+    return null
+  }
 
-const RDFModal = props => (
-  <div>
+  return (<div>
     <Modal show={true} bsSize="lg" onHide={props.close}>
       <Modal.Header closeButton>
         <Modal.Title>
@@ -28,14 +33,20 @@ const RDFModal = props => (
         <pre style={{ marginTop: '10px' }}>{ props.rdf() }</pre>
       </Modal.Body>
     </Modal>
-  </div>
-)
+  </div>)
+}
 
 RDFModal.propTypes = {
+  show: PropTypes.bool,
   close: PropTypes.func,
   save: PropTypes.func,
   rtId: PropTypes.string,
   rdf: PropTypes.func,
 }
 
-export default RDFModal
+const mapStateToProps = (state, props) => ({
+  show: state.selectorReducer.editor.rdfPreview.show,
+  rdf: getAllRdf(state, props),
+})
+
+export default connect(mapStateToProps, {})(RDFModal)

src/reducers/index.js

@@ -6,7 +6,7 @@ import shortid from 'shortid'
 import authenticate from './authenticate'
 import {
   removeAllContent, removeMyItem, setMyItems, setMySelections, setBaseURL, setMyItemsLang,
-  validate, showGroupChooser,
+  validate, showGroupChooser, showRdfPreview,
 } from './inputs'
 import GraphBuilder from '../GraphBuilder'
 import { defaultLangTemplate } from '../Utilities'
@@ -152,6 +152,8 @@ const selectorReducer = (state = {}, action) => {
       return showGroupChooser(state, action)
     case 'SET_LANG':
       return setMyItemsLang(state, action)
+    case 'SHOW_RDF_PREVIEW':
+      return showRdfPreview(state, action)
     case 'RESOURCE_TEMPLATE_LOADED':
       return resourceTemplateLoaded(state, action)
     case 'CHANGE_SELECTIONS':

src/reducers/inputs.js

@@ -14,6 +14,18 @@ export const showGroupChooser = (state, action) => {
   return newState
 }
 
+/**
+ * @param {Object} state the previous redux state
+ * @param {Object} action the payload of the action is a boolean that says to show or not to show the preview
+ * @return {Object} the next redux state
+ */
+export const showRdfPreview = (state, action) => {
+  const newState = { ...state }
+
+  newState.editor.rdfPreview.show = action.payload
+  return newState
+}
+
 export const removeAllContent = (state, action) => {
   const newState = { ...state }
   const reduxPath = action.payload.reduxPath

src/store.js

@@ -9,6 +9,9 @@ const initialState = {
     editor: { // The state of the editor
       displayValidations: false,
       errors: [],
+      rdfPreview: {
+        show: false,
+      },
       groupChoice: {
         show: false,
       },