diff --git a/src/actions/user/reducer.actions.js b/src/actions/user/reducer.actions.js index 03bf61f..33e4a47 100644 --- a/src/actions/user/reducer.actions.js +++ b/src/actions/user/reducer.actions.js @@ -9,7 +9,8 @@ import { SET_COMPLETE_REGISTRATION_CLIENT_OR_PROVIDER, SET_FORM_PHONE_NUMBER, SET_FORM_BUSINESS_NUMBER, - SET_FORM_SOCIAL_INSURANCE_NUMBER + SET_FORM_SOCIAL_INSURANCE_NUMBER, + SET_EDIT_PROFILE_TAB_ACTIVE_INDEX } from "../../constants/user.constants"; import { parseError } from "../common.actions"; @@ -94,3 +95,10 @@ export function setFormSocialInsuranceNumber(socialInsuranceNumber) { data: socialInsuranceNumber }; } + +export function setEditProfileTabActiveIndex(indexVal) { + return { + type: SET_EDIT_PROFILE_TAB_ACTIVE_INDEX, + data: indexVal + }; +} diff --git a/src/components/App.jsx b/src/components/App.jsx index cad0395..19bc87c 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -8,6 +8,7 @@ import ResetPassword from "./Auth/ResetPassword"; import Settings from "./Auth/Settings"; import VerifyEmail from "./Auth/VerifyEmail"; import CompleteRegistration from "./User/CompleteRegistration"; +import EditProfile from "./User/EditProfile"; import Profile from "./User/Profile"; import PrivateRoute from "./Shared/PrivateRoute"; import About from "./Static/About"; @@ -45,6 +46,7 @@ class App extends Component { path="/auth/reset-password/:uid/:token" component={ResetPassword} /> + diff --git a/src/components/User/EditClientForm.jsx b/src/components/User/EditClientForm.jsx new file mode 100644 index 0000000..b0666bd --- /dev/null +++ b/src/components/User/EditClientForm.jsx @@ -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 ( + + ); + } +} + +function mapStateToProps(state) { + return { ...state.user }; +} + +export default connect(mapStateToProps)(EditClientForm); diff --git a/src/components/User/EditProfile.jsx b/src/components/User/EditProfile.jsx new file mode 100644 index 0000000..fd3b064 --- /dev/null +++ b/src/components/User/EditProfile.jsx @@ -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: () => + } + ]; + if (selfUser.client) { + panes.push({ + menuItem: "Client Information", + render: () => + }); + } else if (selfUser.provider) { + panes.push({ + menuItem: "Provider Information", + render: () => + }); + } + return ( + +
Edit Profile
+ +
+ ); + } +} + +function mapStateToProps(state) { + return { ...state.user }; +} + +export default connect(mapStateToProps)(EditProfile); diff --git a/src/components/User/EditProviderForm.jsx b/src/components/User/EditProviderForm.jsx new file mode 100644 index 0000000..f14a511 --- /dev/null +++ b/src/components/User/EditProviderForm.jsx @@ -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 ( + + ); + } +} + +function mapStateToProps(state) { + return { ...state.user }; +} + +export default connect(mapStateToProps)(EditProviderForm); diff --git a/src/components/User/EditUserInfoForm.jsx b/src/components/User/EditUserInfoForm.jsx new file mode 100644 index 0000000..f79fb7d --- /dev/null +++ b/src/components/User/EditUserInfoForm.jsx @@ -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 ( + + ); + } +} + +function mapStateToProps(state) { + return { ...state.user }; +} + +export default connect(mapStateToProps)(EditUserInfoForm); diff --git a/src/components/User/Profile.jsx b/src/components/User/Profile.jsx index 590952c..c25bcc1 100644 --- a/src/components/User/Profile.jsx +++ b/src/components/User/Profile.jsx @@ -1,5 +1,6 @@ import React, { Component } from "react"; import { connect } from "react-redux"; +import { Link } from "react-router-dom"; import { Card, Container, Header, Label, List } from "semantic-ui-react"; class Profile extends Component { @@ -16,10 +17,17 @@ function mapStateToProps(state) { const ProfileView = ({ user }) => (
Profile
- + {user.username || "No username!"} - {user.email || "No email!"} + + {user.client && } + {user.provider && } + + {" "}{user.email || "No email!"} + {!user.client && @@ -56,11 +64,7 @@ const ProfileView = ({ user }) => ( - {user.client && } - {user.provider && } - + Edit Profile
diff --git a/src/components/User/UserInfoFormView.jsx b/src/components/User/UserInfoFormView.jsx index b906ad2..76055fa 100644 --- a/src/components/User/UserInfoFormView.jsx +++ b/src/components/User/UserInfoFormView.jsx @@ -22,7 +22,7 @@ const UserInfoFormView = ({