feat(StatusModal): add optional action handler/prop for status modal

landonreed · landonreed · commit f2cfe84cebac · 2017-07-10T16:33:01.000-04:00
diff --git a/lib/common/actions/index.js b/lib/common/actions/index.js
@@ -5,7 +5,7 @@ export function secureFetch (url, method = 'get', payload, raw) {
   return function (dispatch, getState) {
     const {user} = getState()
     var opts = {
-      method: method,
+      method,
       headers: {
         'Authorization': `Bearer ${user.token}`,
         'Accept': 'application/json',
@@ -20,18 +20,18 @@ export function secureFetch (url, method = 'get', payload, raw) {
       .then(res => {
         // if raw response is requested
         if (raw) return res
-
+        let action, message
         // check for errors
         if (res.status >= 500) {
-          dispatch(setErrorMessage(`Network error!\n\n(${method} request on ${url})`))
+          action = 'RELOAD'
+          message = `Network error!\n\n(${method} request on ${url})`
+          dispatch(setErrorMessage(message, action))
           return null
         } else if (res.status >= 400) {
-          // res.text().then(text => {
-          //   dispatch(setErrorMessage(text))
-          // })
+          action = res.status === 401 ? 'LOG_IN' : null
           res.json().then(json => {
             const message = json.message || `Unknown (${res.status}) error occurred while making request`
-            dispatch(setErrorMessage(message))
+            dispatch(setErrorMessage(message, action))
           })
           return null
         } else {
diff --git a/lib/common/components/StatusModal.js b/lib/common/components/StatusModal.js
@@ -1,7 +1,14 @@
-import React from 'react'
-import { Modal, Button } from 'react-bootstrap'
+import React, {Component, PropTypes} from 'react'
+import {Modal, Button} from 'react-bootstrap'
+
+export default class StatusModal extends Component {
+  static propTypes = {
+    title: PropTypes.string,
+    body: PropTypes.string,
+    action: PropTypes.string,
+    onConfirm: PropTypes.func
+  }
 
-export default class StatusModal extends React.Component {
   state = {
     showModal: false
   }
@@ -10,8 +17,7 @@ export default class StatusModal extends React.Component {
     if (newProps.title) {
       this.setState({
         showModal: true,
-        title: newProps.title,
-        body: newProps.body
+        ...newProps
       })
     }
   }
@@ -23,12 +29,21 @@ export default class StatusModal extends React.Component {
     this.props.clearStatusModal()
   }
 
+  handleLogin = () => {
+    this.props.login()
+    .then((success) => {
+      if (success) {
+        this.close()
+      }
+    }, failure => {
+      console.log(failure)
+    })
+  }
+
   open (props) {
     this.setState({
       showModal: true,
-      title: props.title,
-      body: props.body,
-      onConfirm: props.onConfirm
+      ...props
     })
   }
 
@@ -37,19 +52,30 @@ export default class StatusModal extends React.Component {
     this.close()
   }
 
+  _renderAction = (action) => {
+    switch (action) {
+      case 'LOG_IN':
+        return <Button bsStyle='primary' onClick={this.handleLogin}>Log in</Button>
+      default:
+        return null
+    }
+  }
+
   render () {
     const {Body, Footer, Header, Title} = Modal
+    const {title, body, action} = this.state
     return (
       <Modal
         show={this.state.showModal}
         onHide={this.close}>
         <Header>
-          <Title>{this.state.title}</Title>
+          <Title>{title}</Title>
         </Header>
         <Body>
-          <p style={{whiteSpace: 'pre-wrap'}}>{this.state.body}</p>
+          <p style={{whiteSpace: 'pre-wrap'}}>{body}</p>
         </Body>
         <Footer>
+          {this._renderAction(action)}
           <Button onClick={this.close}>Close</Button>
         </Footer>
       </Modal>
diff --git a/lib/common/containers/CurrentStatusModal.js b/lib/common/containers/CurrentStatusModal.js
@@ -1,16 +1,20 @@
-import { connect } from 'react-redux'
+import {connect} from 'react-redux'
 
 import StatusModal from '../components/StatusModal'
-import { clearStatusModal } from '../../manager/actions/status'
+import {clearStatusModal} from '../../manager/actions/status'
+import {login} from '../../manager/actions/user'
 
 const mapStateToProps = (state, ownProps) => {
+  const {action, body, title} = state.status.modal ? state.status.modal : {}
   return {
-    title: state.status.modal ? state.status.modal.title : null,
-    body: state.status.modal ? state.status.modal.body : null
+    title,
+    action,
+    body
   }
 }
 const mapDispatchToProps = {
-  clearStatusModal
+  clearStatusModal,
+  login
 }
 var CurrentStatusModal = connect(
   mapStateToProps,
