You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.3 KiB
125 lines
3.3 KiB
import React, { Component } from "react"; |
|
import { connect } from "react-redux"; |
|
import { Redirect } from "react-router-dom"; |
|
import { |
|
Container, |
|
Form, |
|
Header, |
|
Input, |
|
Message, |
|
TextArea |
|
} from "semantic-ui-react"; |
|
|
|
import { |
|
clearEmployeeRequestError, |
|
clearEmployeeRequestSuccess, |
|
setFormEmployeeEmail, |
|
setFormEmployeeNote |
|
} from "../../../actions/employee/reducer.actions"; |
|
import { createEmployeeRequest } from "../../../actions/employee/saga.actions"; |
|
import Error from "../../Shared/Error"; |
|
|
|
class ClientAddProviderForm extends Component { |
|
componentWillMount = () => { |
|
this.props.dispatch(clearEmployeeRequestError()); |
|
this.props.dispatch(clearEmployeeRequestSuccess()); |
|
this.props.dispatch(setFormEmployeeEmail("")); |
|
this.props.dispatch(setFormEmployeeNote("")); |
|
}; |
|
|
|
changeProviderEmail = event => { |
|
this.props.dispatch(setFormEmployeeEmail(event.target.value)); |
|
}; |
|
|
|
changeEmployeeNote = event => { |
|
this.props.dispatch(setFormEmployeeNote(event.target.value)); |
|
}; |
|
|
|
onSubmitEmployee = event => { |
|
event.preventDefault(); |
|
const { email, note } = this.props; |
|
this.props.dispatch(createEmployeeRequest({ provider_email: email, note })); |
|
}; |
|
|
|
render() { |
|
const { |
|
isSendingEmployeeRequest, |
|
employeeRequestError, |
|
employeeRequestSuccess, |
|
email, |
|
note, |
|
selfUser |
|
} = this.props; |
|
|
|
if (!selfUser.client) { |
|
return <Redirect to="/" />; |
|
} |
|
|
|
return ( |
|
<ClientAddProviderFormView |
|
isSendingEmployeeRequest={isSendingEmployeeRequest} |
|
employeeRequestError={employeeRequestError} |
|
employeeRequestSuccess={employeeRequestSuccess} |
|
email={email} |
|
note={note} |
|
changeProviderEmail={this.changeProviderEmail} |
|
changeEmployeeNote={this.changeEmployeeNote} |
|
onSubmitEmployee={this.onSubmitEmployee} |
|
/> |
|
); |
|
} |
|
} |
|
|
|
function mapStateToProps(state) { |
|
return { ...state.employee, selfUser: state.user.selfUser }; |
|
} |
|
|
|
const ClientAddProviderFormView = ({ |
|
isSendingEmployeeRequest, |
|
employeeRequestError, |
|
employeeRequestSuccess, |
|
email, |
|
note, |
|
changeProviderEmail, |
|
changeEmployeeNote, |
|
onSubmitEmployee |
|
}) => ( |
|
<Container> |
|
<Header>Add a Provider</Header> |
|
<Form |
|
loading={isSendingEmployeeRequest} |
|
onSubmit={onSubmitEmployee} |
|
error={!!employeeRequestError} |
|
success={!!employeeRequestSuccess} |
|
> |
|
<Form.Field> |
|
<label>Email Address</label> |
|
<Input |
|
placeholder="provider@caremyway.ca" |
|
type="email" |
|
value={email || ""} |
|
onChange={changeProviderEmail} |
|
/> |
|
</Form.Field> |
|
<Form.Field> |
|
<label>Note</label> |
|
<TextArea |
|
placeholder="Employee notes" |
|
value={note} |
|
onChange={changeEmployeeNote} |
|
/> |
|
</Form.Field> |
|
<Error header="Add Provider failed!" error={employeeRequestError} /> |
|
<Message success> |
|
<Message.Header>Create Provider successful!</Message.Header> |
|
<p>Provider successfully created.</p> |
|
{!!employeeRequestSuccess && ( |
|
<Redirect to="/user/profile/client/providers" /> |
|
)} |
|
</Message> |
|
<Form.Button>Submit Provider</Form.Button> |
|
</Form> |
|
</Container> |
|
); |
|
|
|
export default connect(mapStateToProps)(ClientAddProviderForm);
|
|
|