parent
561664a701
commit
f0c30f1023
18 changed files with 699 additions and 24 deletions
@ -1,7 +1,57 @@ |
||||
import { SEND_GET_SELF_USER_REQUEST } from "../../constants/user.constants"; |
||||
import { |
||||
GET_SELF_USER_REQUEST, |
||||
CREATE_USER_INFO_REQUEST, |
||||
UPDATE_USER_INFO_REQUEST, |
||||
CREATE_CLIENT_REQUEST, |
||||
UPDATE_CLIENT_REQUEST, |
||||
CREATE_PROVIDER_REQUEST, |
||||
UPDATE_PROVIDER_REQUEST |
||||
} from "../../constants/user.constants"; |
||||
|
||||
export function sendGetSelfUserRequest() { |
||||
export function getSelfUserRequest() { |
||||
return { |
||||
type: SEND_GET_SELF_USER_REQUEST |
||||
type: GET_SELF_USER_REQUEST |
||||
}; |
||||
} |
||||
|
||||
export function createUserInfoRequest(postBody) { |
||||
return { |
||||
type: CREATE_USER_INFO_REQUEST, |
||||
data: postBody |
||||
}; |
||||
} |
||||
|
||||
export function updateUserInfoRequest(payload) { |
||||
return { |
||||
type: UPDATE_USER_INFO_REQUEST, |
||||
data: payload |
||||
}; |
||||
} |
||||
|
||||
export function createClientRequest(postBody) { |
||||
return { |
||||
type: CREATE_CLIENT_REQUEST, |
||||
data: postBody |
||||
}; |
||||
} |
||||
|
||||
export function updateClientRequest(payload) { |
||||
return { |
||||
type: UPDATE_CLIENT_REQUEST, |
||||
data: payload |
||||
}; |
||||
} |
||||
|
||||
export function createProviderRequest(postBody) { |
||||
return { |
||||
type: CREATE_PROVIDER_REQUEST, |
||||
data: postBody |
||||
}; |
||||
} |
||||
|
||||
export function updateProviderRequest(payload) { |
||||
return { |
||||
type: UPDATE_PROVIDER_REQUEST, |
||||
data: payload |
||||
}; |
||||
} |
||||
|
@ -1,5 +1,69 @@ |
||||
import { get } from "./baseApi"; |
||||
import { get, post, put } from "./baseApi"; |
||||
|
||||
/** |
||||
* Function wrapping GET request for getting user data |
||||
*/ |
||||
export function getSelfUser() { |
||||
return get("/user/").then(resp => Promise.resolve(resp)); |
||||
} |
||||
|
||||
/** |
||||
* Function wrapping POST request for initializing User Info |
||||
* @param {string} phone_number - user's phone number |
||||
*/ |
||||
export function createUserInfo(phone_number) { |
||||
return post("/userinfo/", { phone_number }).then(resp => |
||||
Promise.resolve(resp) |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Function wrapping PUT request for updating User Info |
||||
* @param {string} username - username for user |
||||
* @param {string} phone_number - user's phone number |
||||
*/ |
||||
export function updateUserInfo(username, phone_number) { |
||||
return put(`/userinfo/${username}/`, { phone_number }).then(resp => |
||||
Promise.resolve(resp) |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Function wrapping POST request for creating a client |
||||
* @param {string} business_number - user's client business number |
||||
*/ |
||||
export function createClient(business_number) { |
||||
return post("/client/", { business_number }).then(resp => |
||||
Promise.resolve(resp) |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Function wrapping PUT request for updating a client |
||||
* @param {string} username - username for user |
||||
* @param {*} business_number - user's client business number |
||||
*/ |
||||
export function updateClient(username, business_number) { |
||||
return put(`/client/${username}/`, { business_number }).then(resp => |
||||
Promise.resolve(resp) |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Function wrapping POST request for creating a provider |
||||
* @param {string} sin - user's provider sin |
||||
*/ |
||||
export function createProvider(sin) { |
||||
return post("/provider/", { sin }).then(resp => Promise.resolve(resp)); |
||||
} |
||||
|
||||
/** |
||||
* Function wrapping PUT request for updating a provider |
||||
* @param {string} username - username for user |
||||
* @param {*} sin - user's provider sin |
||||
*/ |
||||
export function updateProvider(username, sin) { |
||||
return put(`/provider/${username}/`, { sin }).then(resp => |
||||
Promise.resolve(resp) |
||||
); |
||||
} |
||||
|
@ -0,0 +1,41 @@ |
||||
import React from "react"; |
||||
import { Container, Form, Header, Message } from "semantic-ui-react"; |
||||
|
||||
import Error from "../Shared/Error"; |
||||
|
||||
const ClientFormView = ({ |
||||
isSendingUserRequest, |
||||
userRequestError, |
||||
userRequestSuccess, |
||||
businessNumber, |
||||
changeBusinessNumber, |
||||
onSubmitClient |
||||
}) => ( |
||||
<Container> |
||||
<Header>Complete Client Information</Header> |
||||
<Form |
||||
loading={isSendingUserRequest} |
||||
onSubmit={onSubmitClient} |
||||
error={!!userRequestError} |
||||
success={!!userRequestSuccess} |
||||
> |
||||
<Form.Field> |
||||
<label>Business Number</label> |
||||
<input |
||||
placeholder="12345" |
||||
type="text" |
||||
value={businessNumber} |
||||
onChange={changeBusinessNumber} |
||||
/> |
||||
</Form.Field> |
||||
<Error header="Modify Client failed!" error={userRequestError} /> |
||||
<Message success> |
||||
<Message.Header>Modify Client successful!</Message.Header> |
||||
<p>Set client successfully.</p> |
||||
</Message> |
||||
<Form.Button>Submit Client</Form.Button> |
||||
</Form> |
||||
</Container> |
||||
); |
||||
|
||||
export default ClientFormView; |
@ -0,0 +1,64 @@ |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { Container, Form, Header } from "semantic-ui-react"; |
||||
|
||||
import { |
||||
setCompleteRegistrationClientOrProvider, |
||||
setCompleteRegistrationStep |
||||
} from "../../actions/user/reducer.actions"; |
||||
import { CLIENT, PROVIDER, COMPLETE_INFORMATION_STEP } from "../../constants/user.constants"; |
||||
|
||||
class ClientOrProviderForm extends Component { |
||||
changeClientOrProvider = (event, { value }) => { |
||||
this.props.dispatch(setCompleteRegistrationClientOrProvider(value)); |
||||
} |
||||
|
||||
onSelectClientOrProvider = event => { |
||||
this.props.dispatch(setCompleteRegistrationStep(COMPLETE_INFORMATION_STEP)); |
||||
} |
||||
|
||||
render() { |
||||
const { completeRegistrationClientOrProvider } = this.props; |
||||
return ( |
||||
<ClientOrProviderFormView |
||||
clientOrProvider={completeRegistrationClientOrProvider} |
||||
changeClientOrProvider={this.changeClientOrProvider} |
||||
onSelectClientOrProvider={this.onSelectClientOrProvider} |
||||
/> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function mapStateToProps(state) { |
||||
return { ...state.user }; |
||||
} |
||||
|
||||
const ClientOrProviderFormView = ({ |
||||
clientOrProvider, |
||||
changeClientOrProvider, |
||||
onSelectClientOrProvider |
||||
}) => ( |
||||
<Container> |
||||
<Header>Client or Provider</Header> |
||||
<Form onSubmit={onSelectClientOrProvider}> |
||||
<Form.Group inline> |
||||
<label>Client or Provider</label> |
||||
<Form.Radio |
||||
label="Client" |
||||
value={CLIENT} |
||||
checked={clientOrProvider === CLIENT} |
||||
onChange={changeClientOrProvider} |
||||
/> |
||||
<Form.Radio |
||||
label="Provider" |
||||
value={PROVIDER} |
||||
checked={clientOrProvider === PROVIDER} |
||||
onChange={changeClientOrProvider} |
||||
/> |
||||
</Form.Group> |
||||
<Form.Button>Continue</Form.Button> |
||||
</Form> |
||||
</Container> |
||||
); |
||||
|
||||
export default connect(mapStateToProps)(ClientOrProviderForm); |
@ -0,0 +1,54 @@ |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
import { |
||||
clearUserRequestError, |
||||
clearUserRequestSuccess, |
||||
setFormBusinessNumber |
||||
} from "../../actions/user/reducer.actions"; |
||||
import { createClientRequest } from "../../actions/user/saga.actions"; |
||||
import ClientFormView from "./ClientFormView"; |
||||
|
||||
class InitializeClientForm extends Component { |
||||
componentWillMount() { |
||||
this.props.dispatch(clearUserRequestError()); |
||||
this.props.dispatch(clearUserRequestSuccess()); |
||||
} |
||||
|
||||
changeBusinessNumber = event => { |
||||
this.props.dispatch(setFormBusinessNumber(event.target.value)); |
||||
} |
||||
|
||||
onSubmitClient = event => { |
||||
event.preventDefault(); |
||||
const { businessNumber } = this.props; |
||||
this.props.dispatch( |
||||
createClientRequest({ business_number: businessNumber }) |
||||
); |
||||
}; |
||||
|
||||
render() { |
||||
const { |
||||
isSendingUserRequest, |
||||
userRequestError, |
||||
userRequestSuccess, |
||||
businessNumber |
||||
} = this.props; |
||||
return ( |
||||
<ClientFormView |
||||
isSendingUserRequest={isSendingUserRequest} |
||||
userRequestError={userRequestError} |
||||
userRequestSuccess={userRequestSuccess} |
||||
businessNumber={businessNumber} |
||||
changeBusinessNumber={this.changeBusinessNumber} |
||||
onSubmitClient={this.onSubmitClient} |
||||
/> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function mapStateToProps(state) { |
||||
return { ...state.user }; |
||||
} |
||||
|
||||
export default connect(mapStateToProps)(InitializeClientForm); |
@ -0,0 +1,54 @@ |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
import { |
||||
clearUserRequestError, |
||||
clearUserRequestSuccess, |
||||
setFormSocialInsuranceNumber |
||||
} from "../../actions/user/reducer.actions"; |
||||
import { createProviderRequest } from "../../actions/user/saga.actions"; |
||||
import ProviderFormView from "./ProviderFormView"; |
||||
|
||||
class InitializeProviderForm extends Component { |
||||
componentWillMount() { |
||||
this.props.dispatch(clearUserRequestError()); |
||||
this.props.dispatch(clearUserRequestSuccess()); |
||||
} |
||||
|
||||
changeSocialInsuranceNumber = event => { |
||||
this.props.dispatch(setFormSocialInsuranceNumber(event.target.value)); |
||||
} |
||||
|
||||
onSubmitProvider = event => { |
||||
event.preventDefault(); |
||||
const { socialInsuranceNumber } = this.props; |
||||
this.props.dispatch( |
||||
createProviderRequest({ sin: socialInsuranceNumber }) |
||||
); |
||||
}; |
||||
|
||||
render() { |
||||
const { |
||||
isSendingUserRequest, |
||||
userRequestError, |
||||
userRequestSuccess, |
||||
socialInsuranceNumber |
||||
} = this.props; |
||||
return ( |
||||
<ProviderFormView |
||||
isSendingUserRequest={isSendingUserRequest} |
||||
userRequestError={userRequestError} |
||||
userRequestSuccess={userRequestSuccess} |
||||
socialInsuranceNumber={socialInsuranceNumber} |
||||
changeSocialInsuranceNumber={this.changeSocialInsuranceNumber} |
||||
onSubmitProvider={this.onSubmitProvider} |
||||
/> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function mapStateToProps(state) { |
||||
return { ...state.user }; |
||||
} |
||||
|
||||
export default connect(mapStateToProps)(InitializeProviderForm); |
@ -0,0 +1,76 @@ |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
import { |
||||
clearUserRequestError, |
||||
clearUserRequestSuccess, |
||||
setFormPhoneNumber |
||||
} from "../../actions/user/reducer.actions"; |
||||
import { |
||||
createUserInfoRequest, |
||||
updateUserInfoRequest |
||||
} from "../../actions/user/saga.actions"; |
||||
|
||||
import UserInfoFormView from "./UserInfoFormView"; |
||||
|
||||
class InitializeUserInfoForm extends Component { |
||||
componentWillMount() { |
||||
this.props.dispatch(clearUserRequestError()); |
||||
this.props.dispatch(clearUserRequestSuccess()); |
||||
} |
||||
|
||||
changePhoneNumber = event => { |
||||
this.props.dispatch(setFormPhoneNumber(event.target.value)); |
||||
}; |
||||
|
||||
onSubmitUserInfo = event => { |
||||
event.preventDefault(); |
||||
const { selfUser, phoneNumber } = this.props; |
||||
const phoneNumberVal = |
||||
phoneNumber || (selfUser.userinfo || {}).phone_number; |
||||
|
||||
if (selfUser.userinfo) { |
||||
this.props.dispatch( |
||||
updateUserInfoRequest({ |
||||
...selfUser.userinfo, |
||||
username: selfUser.username, |
||||
phone_number: phoneNumberVal |
||||
}) |
||||
); |
||||
} else { |
||||
this.props.dispatch( |
||||
createUserInfoRequest({ |
||||
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)(InitializeUserInfoForm); |
@ -0,0 +1,41 @@ |
||||
import React from "react"; |
||||
import { Container, Form, Header, Message } from "semantic-ui-react"; |
||||
|
||||
import Error from "../Shared/Error"; |
||||
|
||||
const ProviderFormView = ({ |
||||
isSendingUserRequest, |
||||
userRequestError, |
||||
userRequestSuccess, |
||||
socialInsuranceNumber, |
||||
changeSocialInsuranceNumber, |
||||
onSubmitProvider |
||||
}) => ( |
||||
<Container> |
||||
<Header>Complete Provider Information</Header> |
||||
<Form |
||||
loading={isSendingUserRequest} |
||||
onSubmit={onSubmitProvider} |
||||
error={!!userRequestError} |
||||
success={!!userRequestSuccess} |
||||
> |
||||
<Form.Field> |
||||
<label>Social Insurance Number</label> |
||||
<input |
||||
placeholder="98765" |
||||
type="text" |
||||
value={socialInsuranceNumber} |
||||
onChange={changeSocialInsuranceNumber} |
||||
/> |
||||
</Form.Field> |
||||
<Error header="Modify Provider failed!" error={userRequestError} /> |
||||
<Message success> |
||||
<Message.Header>Modify Provider successful!</Message.Header> |
||||
<p>Set provider successfully.</p> |
||||
</Message> |
||||
<Form.Button>Submit Provider</Form.Button> |
||||
</Form> |
||||
</Container> |
||||
); |
||||
|
||||
export default ProviderFormView; |
@ -0,0 +1,41 @@ |
||||
import React from "react"; |
||||
import { Container, Form, Header, Message } from "semantic-ui-react"; |
||||
|
||||
import Error from "../Shared/Error"; |
||||
|
||||
const UserInfoFormView = ({ |
||||
isSendingUserRequest, |
||||
userRequestError, |
||||
userRequestSuccess, |
||||
phoneNumber, |
||||
changePhoneNumber, |
||||
onSubmitUserInfo |
||||
}) => ( |
||||
<Container> |
||||
<Header>User Info</Header> |
||||
<Form |
||||
loading={isSendingUserRequest} |
||||
onSubmit={onSubmitUserInfo} |
||||
error={!!userRequestError} |
||||
success={!!userRequestSuccess} |
||||
> |
||||
<Form.Field> |
||||
<label>Phone Number</label> |
||||
<input |
||||
placeholder="780-999-9999" |
||||
type="tel" |
||||
value={phoneNumber} |
||||
onChange={changePhoneNumber} |
||||
/> |
||||
</Form.Field> |
||||
<Error header="Modify User Info failed!" error={userRequestError} /> |
||||
<Message success> |
||||
<Message.Header>Modify User Info successful!</Message.Header> |
||||
<p>Set user info successfully.</p> |
||||
</Message> |
||||
<Form.Button>Submit User Info</Form.Button> |
||||
</Form> |
||||
</Container> |
||||
); |
||||
|
||||
export default UserInfoFormView; |
Loading…
Reference in new issue