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