diff --git a/src/modules/lists/components/TextAction/index.js b/src/modules/lists/components/TextAction/index.js index aa089e7ac..089c10e54 100644 --- a/src/modules/lists/components/TextAction/index.js +++ b/src/modules/lists/components/TextAction/index.js @@ -1,92 +1,56 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; +import React, { useState } from 'react'; import ActionStatusMessage from '../ActionStatusMessage'; import { Button } from '../../../reusable'; import PropTypes from 'prop-types'; -class TextAction extends Component { - state = { - text: '', - sent: false, - status: undefined - }; - - componentDidMount () { - const { profile } = this.props; +function TextAction (props) { + const [text, setText] = useState(props.profile.text || ''); + const [status, setStatus] = useState(undefined); - if (profile.text) { - this.setState({ text: profile.text }); - } + if (props.listLength === 0) { + return null; } - handleChange = (event) => { - this.setState({ text: event.target.value }); - }; - - handleSubmitCallback = (data) => { - this.setState({ status: data }); - }; - - handleSubmit = (event) => { - event.preventDefault(); - this.setState({ sent: true }); - this.props.prejudice.act( - 'text', - this.props.datastore.uid, - this.state.text, - this.handleSubmitCallback - ); - }; - - setCloseStatus = () => { - this.props.setActive(''); - this.setState({ status: undefined, sent: false }); + const setCloseStatus = () => { + props.setActive(''); + setStatus(undefined); }; - renderForm = () => { - const { status } = this.state; - - if (!status || status.status_code !== 'action.response.success') { - return ( - <> -
-
- - - Please enter using this format: 000-111-5555 -
- -
- - ); - } - - return null; + const handleSubmitCallback = (data) => { + setStatus(data); }; - render () { - const { listLength, action } = this.props; - - if (listLength === 0) { - return null; - } - - return ( -
- - {this.renderForm()} -
- ); - } + return ( +
+ + {(!status || status.status_code !== 'action.response.success') && +
{ + event.preventDefault(); + props.prejudice.act('text', props.datastore.uid, text, handleSubmitCallback); + }} + > +
+ + { + setText(event.target.value); + }} + aria-describedby='phone-number-description' + autoComplete='on' + /> + Please enter using this format: 000-111-5555 +
+ +
} +
+ ); } TextAction.propTypes = { @@ -98,10 +62,4 @@ TextAction.propTypes = { action: PropTypes.object }; -function mapStateToProps (state) { - return { - profile: state.profile - }; -} - -export default connect(mapStateToProps)(TextAction); +export default TextAction;