42 lines
1.0 KiB
JavaScript
42 lines
1.0 KiB
JavaScript
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="7809999999"
|
|
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;
|