Merge pull request #815 from LD4P/thunk

Use thunks for loading the root resource template

__tests__/components/editor/ResourceTemplate.test.js

@@ -12,7 +12,7 @@ describe('<ResourceTemplate />', () => {
 
   const wrapper = shallow(<ResourceTemplate.WrappedComponent resourceTemplateId="resourceTemplate:bf2:Note"
                                                              resourceTemplate={reduxState}
-                                                             handleResourceTemplate={jest.fn()}
+                                                             retrieveResourceTemplate={jest.fn()}
                                                              title="BF2 Work"/>)
 
   it('has div with class "ResourceTemplate"', () => {

src/actionCreators.js

@@ -1,7 +1,12 @@
+// Copyright 2019 Stanford University see LICENSE for license
+
 import {
-  authenticationFailure, authenticationSuccess, signOutSuccess, updateStarted, updateFinished,
+  authenticationFailure, authenticationSuccess, signOutSuccess,
+  updateStarted, updateFinished,
+  retrieveResourceTemplateStarted, rootResourceTemplateLoaded,
+  retrieveError,
 } from 'actions/index'
-import { updateRDFResource } from 'sinopiaServer'
+import { updateRDFResource, getResourceTemplate } from 'sinopiaServer'
 import { rootResourceId } from 'selectors/resourceSelectors'
 import GraphBuilder from 'GraphBuilder'
 
@@ -21,3 +26,13 @@ export const update = currentUser => (dispatch, getState) => {
   return updateRDFResource(currentUser, uri, rdf)
     .then(response => dispatch(updateFinished(response)))
 }
+// A thunk that retrieve the root resource template
+export const fetchRootResourceTemplate = resourceTemplateId => (dispatch) => {
+  dispatch(retrieveResourceTemplateStarted(resourceTemplateId))
+  getResourceTemplate(resourceTemplateId, 'ld4p').then((response) => {
+    dispatch(rootResourceTemplateLoaded(response.response.body))
+  }).catch((err) => {
+    console.error(err)
+    dispatch(retrieveError(resourceTemplateId))
+  })
+}

src/actions/index.js

@@ -1,5 +1,10 @@
 // Copyright 2019 Stanford University see LICENSE for license
 
+export const retrieveError = resourceTemplateId => ({
+  type: 'RETRIEVE_ERROR',
+  payload: resourceTemplateId,
+})
+
 export const setItems = item => ({
   type: 'SET_ITEMS',
   payload: item,
@@ -52,6 +57,11 @@ export const updateFinished = () => ({
   type: 'UPDATE_FINISHED',
 })
 
+export const retrieveResourceTemplateStarted = resourceTemplateId => ({
+  type: 'RETRIEVE_RESOURCE_TEMPLATE_STARTED',
+  payload: resourceTemplateId,
+})
+
 export const changeSelections = item => ({
   type: 'CHANGE_SELECTIONS',
   payload: item,

src/components/editor/ResourceTemplate.jsx

@@ -1,50 +1,31 @@
-// Copyright 2018 Stanford University see LICENSE for license
+// Copyright 2019 Stanford University see LICENSE for license
 
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import ResourceTemplateForm from './ResourceTemplateForm'
-import { rootResourceTemplateLoaded } from 'actions/index'
-import { getResourceTemplate } from 'sinopiaServer'
+import { fetchRootResourceTemplate } from 'actionCreators'
 import { rootResource } from 'selectors/resourceSelectors'
 
-const _ = require('lodash')
-
 /**
  * This is the root component of the editor on the resource edit page
  */
 class ResourceTemplate extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {}
-  }
-
   // Called immediately after the component is rendered for the first time
   componentDidMount() {
-    if (!this.props.resourceTemplate) {
-      this.resolveResourceTemplatePromise(getResourceTemplate(this.props.resourceTemplateId))
-    }
-  }
-
-  resolveResourceTemplatePromise = (promise) => {
-    promise.then((responseAndBody) => {
-      this.props.handleResourceTemplate(responseAndBody.response.body)
-    }).catch((error) => {
-      console.error(error)
-      this.setState({ error })
-    })
+    this.props.retrieveResourceTemplate(this.props.resourceTemplateId)
   }
 
   render() {
-    if (_.isEmpty(this.props.resourceTemplate)) {
-      let errorMessage = <span/>
+    let errorMessage = <span/>
 
-      if (this.state.error) {
-        errorMessage = <div className="alert alert-warning">Sinopia server is offline or has no resource templates to display</div>
-      }
-      return errorMessage
+    if (this.props.error) {
+      errorMessage = <div className="alert alert-warning">Sinopia server is offline or has no resource templates to display.</div>
     }
 
+    if (!this.props.resourceTemplate) {
+      return errorMessage
+    }
     return (
       <div className="ResourceTemplate">
         <div id="resourceTemplate" style={{ marginTop: '-30px' }}>
@@ -59,20 +40,21 @@ class ResourceTemplate extends Component {
 }
 
 ResourceTemplate.propTypes = {
-  handleResourceTemplate: PropTypes.func,
+  retrieveResourceTemplate: PropTypes.func,
   resourceTemplateId: PropTypes.string,
   resourceTemplate: PropTypes.object,
   title: PropTypes.string,
+  error: PropTypes.string,
 }
 
-const mapStateToProps = (state, ourProps) => ({
+const mapStateToProps = state => ({
   resourceTemplate: rootResource(state),
-  title: state.selectorReducer.entities.resourceTemplates[ourProps.resourceTemplateId]?.resourceLabel,
+  error: state.selectorReducer.editor.serverError,
 })
 
 const mapDispatchToProps = dispatch => ({
-  handleResourceTemplate(resourceTemplate) {
-    dispatch(rootResourceTemplateLoaded(resourceTemplate))
+  retrieveResourceTemplate: (resourceTemplate) => {
+    dispatch(fetchRootResourceTemplate(resourceTemplate))
   },
 })
 

src/components/editor/ResourceTemplateForm.jsx

@@ -167,10 +167,13 @@ ResourceTemplateForm.propTypes = {
   propertyTemplates: PropTypes.array,
 }
 
-const mapStateToProps = (state, ourProps) => ({
-  resourceTemplateMap: state.selectorReducer.entities.resourceTemplates,
-  propertyTemplates: state.selectorReducer.entities.resourceTemplates[ourProps.rtId].propertyTemplates,
-})
+const mapStateToProps = (state, ourProps) => {
+  const ourTemplate = state.selectorReducer.entities.resourceTemplates[ourProps.rtId]
+  return {
+    resourceTemplateMap: state.selectorReducer.entities.resourceTemplates,
+    propertyTemplates: ourTemplate?.propertyTemplates || [],
+  }
+}
 
 const mapDispatchToProps = dispatch => ({
   handleMyItemsChange(userInput) {

src/reducers/index.js

@@ -1,5 +1,5 @@
 // Copyright 2018, 2019 Stanford University see LICENSE for license
-/* eslint complexity: ["warn", 13] */
+/* eslint complexity: ["warn", 14] */
 
 import { combineReducers } from 'redux'
 import shortid from 'shortid'
@@ -8,6 +8,7 @@ import {
   removeAllContent, removeMyItem, setItemsOrSelections, setBaseURL, setMyItemsLang,
   showGroupChooser, closeGroupChooser, showRdfPreview,
 } from './inputs'
+
 import { defaultLangTemplate } from 'Utilities'
 
 /**
@@ -97,13 +98,23 @@ export const resourceTemplateLoaded = (state, action) => {
 
 export const makeShortID = () => shortid.generate()
 
+const setRetrieveError = (state, action) => {
+  const resourceTemplateId = action.payload
+  const newState = { ...state }
+
+  newState.editor.serverError = `There was a problem retrieving ${resourceTemplateId}`
+  return newState
+}
+
 const selectorReducer = (state = {}, action) => {
   switch (action.type) {
     case 'ROOT_RESOURCE_TEMPLATE_LOADED':
       return rootResourceTemplateLoaded(state, action)
     case 'SET_ITEMS':
     case 'CHANGE_SELECTIONS':
       return setItemsOrSelections(state, action)
+    case 'RETRIEVE_ERROR':
+      return setRetrieveError(state, action)
     case 'SET_BASE_URL':
       return setBaseURL(state, action)
     case 'SHOW_GROUP_CHOOSER':