parent
4ee5670cfb
commit
fc8747d295
11 changed files with 272 additions and 13 deletions
@ -0,0 +1,59 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
import { |
||||||
|
clearUserRequestError, |
||||||
|
clearUserRequestSuccess, |
||||||
|
setFormBusinessNumber |
||||||
|
} from "../../actions/user/reducer.actions"; |
||||||
|
import { updateClientRequest } from "../../actions/user/saga.actions"; |
||||||
|
import ClientFormView from "./ClientFormView"; |
||||||
|
|
||||||
|
class EditClientForm extends Component { |
||||||
|
changeBusinessNumber = event => { |
||||||
|
this.props.dispatch(setFormBusinessNumber(event.target.value)); |
||||||
|
this.props.dispatch(clearUserRequestError()); |
||||||
|
this.props.dispatch(clearUserRequestSuccess()); |
||||||
|
}; |
||||||
|
|
||||||
|
onSubmitClient = event => { |
||||||
|
event.preventDefault(); |
||||||
|
const { selfUser, businessNumber } = this.props; |
||||||
|
const businessNumberVal = |
||||||
|
businessNumber || (selfUser.client || {}).business_number; |
||||||
|
this.props.dispatch( |
||||||
|
updateClientRequest({ |
||||||
|
username: selfUser.username, |
||||||
|
business_number: businessNumberVal |
||||||
|
}) |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { |
||||||
|
isSendingUserRequest, |
||||||
|
userRequestError, |
||||||
|
userRequestSuccess, |
||||||
|
businessNumber, |
||||||
|
selfUser |
||||||
|
} = this.props; |
||||||
|
const businessNumberVal = |
||||||
|
businessNumber || (selfUser.client || {}).business_number; |
||||||
|
return ( |
||||||
|
<ClientFormView |
||||||
|
isSendingUserRequest={isSendingUserRequest} |
||||||
|
userRequestError={userRequestError} |
||||||
|
userRequestSuccess={userRequestSuccess} |
||||||
|
businessNumber={businessNumberVal} |
||||||
|
changeBusinessNumber={this.changeBusinessNumber} |
||||||
|
onSubmitClient={this.onSubmitClient} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function mapStateToProps(state) { |
||||||
|
return { ...state.user }; |
||||||
|
} |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(EditClientForm); |
@ -0,0 +1,59 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { Container, Header, Tab } from "semantic-ui-react"; |
||||||
|
|
||||||
|
import { |
||||||
|
setEditProfileTabActiveIndex, |
||||||
|
clearUserRequestError, |
||||||
|
clearUserRequestSuccess |
||||||
|
} from "../../actions/user/reducer.actions"; |
||||||
|
import EditClientForm from "./EditClientForm"; |
||||||
|
import EditProviderForm from "./EditProviderForm"; |
||||||
|
import EditUserInfoForm from "./EditUserInfoForm"; |
||||||
|
|
||||||
|
class EditProfile extends Component { |
||||||
|
onTabChange = (event, { activeIndex }) => { |
||||||
|
if (this.props.editProfileActiveIndex !== activeIndex) { |
||||||
|
this.props.dispatch(clearUserRequestError()); |
||||||
|
this.props.dispatch(clearUserRequestSuccess()); |
||||||
|
} |
||||||
|
this.props.dispatch(setEditProfileTabActiveIndex(activeIndex)); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { selfUser, editProfileActiveIndex } = this.props; |
||||||
|
const panes = [ |
||||||
|
{ |
||||||
|
menuItem: "User Information", |
||||||
|
render: () => <Tab.Pane><EditUserInfoForm /></Tab.Pane> |
||||||
|
} |
||||||
|
]; |
||||||
|
if (selfUser.client) { |
||||||
|
panes.push({ |
||||||
|
menuItem: "Client Information", |
||||||
|
render: () => <Tab.Pane><EditClientForm /></Tab.Pane> |
||||||
|
}); |
||||||
|
} else if (selfUser.provider) { |
||||||
|
panes.push({ |
||||||
|
menuItem: "Provider Information", |
||||||
|
render: () => <Tab.Pane><EditProviderForm /></Tab.Pane> |
||||||
|
}); |
||||||
|
} |
||||||
|
return ( |
||||||
|
<Container> |
||||||
|
<Header>Edit Profile</Header> |
||||||
|
<Tab |
||||||
|
panes={panes} |
||||||
|
onTabChange={this.onTabChange} |
||||||
|
activeIndex={editProfileActiveIndex} |
||||||
|
/> |
||||||
|
</Container> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function mapStateToProps(state) { |
||||||
|
return { ...state.user }; |
||||||
|
} |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(EditProfile); |
@ -0,0 +1,56 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
import { |
||||||
|
clearUserRequestError, |
||||||
|
clearUserRequestSuccess, |
||||||
|
setFormSocialInsuranceNumber |
||||||
|
} from "../../actions/user/reducer.actions"; |
||||||
|
import { updateProviderRequest } from "../../actions/user/saga.actions"; |
||||||
|
import ProviderFormView from "./ProviderFormView"; |
||||||
|
|
||||||
|
class EditProviderForm extends Component { |
||||||
|
changeSocialInsuranceNumber = event => { |
||||||
|
this.props.dispatch(setFormSocialInsuranceNumber(event.target.value)); |
||||||
|
this.props.dispatch(clearUserRequestError()); |
||||||
|
this.props.dispatch(clearUserRequestSuccess()); |
||||||
|
}; |
||||||
|
|
||||||
|
onSubmitProvider = event => { |
||||||
|
event.preventDefault(); |
||||||
|
const { selfUser, socialInsuranceNumber } = this.props; |
||||||
|
const socialInsuranceNumberVal = |
||||||
|
socialInsuranceNumber || (selfUser.provider || {}).sin; |
||||||
|
this.props.dispatch( |
||||||
|
updateProviderRequest({ username: selfUser.username, sin: socialInsuranceNumberVal }) |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { |
||||||
|
isSendingUserRequest, |
||||||
|
userRequestError, |
||||||
|
userRequestSuccess, |
||||||
|
socialInsuranceNumber, |
||||||
|
selfUser |
||||||
|
} = this.props; |
||||||
|
const socialInsuranceNumberVal = |
||||||
|
socialInsuranceNumber || (selfUser.provider || {}).sin; |
||||||
|
return ( |
||||||
|
<ProviderFormView |
||||||
|
isSendingUserRequest={isSendingUserRequest} |
||||||
|
userRequestError={userRequestError} |
||||||
|
userRequestSuccess={userRequestSuccess} |
||||||
|
socialInsuranceNumber={socialInsuranceNumberVal} |
||||||
|
changeSocialInsuranceNumber={this.changeSocialInsuranceNumber} |
||||||
|
onSubmitProvider={this.onSubmitProvider} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function mapStateToProps(state) { |
||||||
|
return { ...state.user }; |
||||||
|
} |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(EditProviderForm); |
@ -0,0 +1,62 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
import { |
||||||
|
clearUserRequestError, |
||||||
|
clearUserRequestSuccess, |
||||||
|
setFormPhoneNumber |
||||||
|
} from "../../actions/user/reducer.actions"; |
||||||
|
import { updateUserInfoRequest } from "../../actions/user/saga.actions"; |
||||||
|
|
||||||
|
import UserInfoFormView from "./UserInfoFormView"; |
||||||
|
|
||||||
|
class EditUserInfoForm extends Component { |
||||||
|
changePhoneNumber = event => { |
||||||
|
this.props.dispatch(setFormPhoneNumber(event.target.value)); |
||||||
|
this.props.dispatch(clearUserRequestError()); |
||||||
|
this.props.dispatch(clearUserRequestSuccess()); |
||||||
|
}; |
||||||
|
|
||||||
|
onSubmitUserInfo = event => { |
||||||
|
event.preventDefault(); |
||||||
|
const { selfUser, phoneNumber } = this.props; |
||||||
|
const phoneNumberVal = |
||||||
|
phoneNumber || (selfUser.userinfo || {}).phone_number; |
||||||
|
|
||||||
|
this.props.dispatch( |
||||||
|
updateUserInfoRequest({ |
||||||
|
...selfUser.userinfo, |
||||||
|
username: selfUser.username, |
||||||
|
phone_number: phoneNumberVal |
||||||
|
}) |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { |
||||||
|
isSendingUserRequest, |
||||||
|
userRequestError, |
||||||
|
userRequestSuccess, |
||||||
|
selfUser, |
||||||
|
phoneNumber |
||||||
|
} = this.props; |
||||||
|
const phoneNumberVal = |
||||||
|
phoneNumber || (selfUser.userinfo || {}).phone_number; |
||||||
|
return ( |
||||||
|
<UserInfoFormView |
||||||
|
isSendingUserRequest={isSendingUserRequest} |
||||||
|
userRequestError={userRequestError} |
||||||
|
userRequestSuccess={userRequestSuccess} |
||||||
|
phoneNumber={phoneNumberVal} |
||||||
|
changePhoneNumber={this.changePhoneNumber} |
||||||
|
onSubmitUserInfo={this.onSubmitUserInfo} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function mapStateToProps(state) { |
||||||
|
return { ...state.user }; |
||||||
|
} |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(EditUserInfoForm); |
Loading…
Reference in new issue