-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
5 changed files
with
123 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,133 @@ | ||
| import React from 'react'; | ||
| import { withRouter } from 'react-router'; | ||
| import { Image, Row, Col, Typography, Space, Button, Form, Select, Input } from 'antd'; | ||
| import { status, json } from '../utilities/requestHandlers'; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
| import UserContext from '../contexts/user'; | ||
| import { Image, Card } from 'antd' | ||
| import {useContext} from 'react'; | ||
|
|
||
| /** | ||
| * @function | ||
| * @name Account | ||
| * Function that shows the user informations | ||
| * @param {object} props - Gets the user information if logged in | ||
| * @returns {object} Returns the data of the user | ||
| */ | ||
| function Account(props) { | ||
| const context = useContext(UserContext); | ||
| const user = context.user; | ||
| console.log("current user in UserContext is", user); | ||
| const { Title, Paragraph } = Typography; | ||
|
|
||
| const [profile, setProfile] = React.useState({}); | ||
| const { Option } = Select; | ||
|
|
||
| if (!user.loggedIn) { | ||
| <h2>Please login in order to see your account details</h2> | ||
| } | ||
| class Account extends React.Component { | ||
|
|
||
| static contextType = UserContext; | ||
|
|
||
| else if (!profile.username) { | ||
| let headers = new Headers(); | ||
| headers.append('Authorization', 'Basic ' + btoa(user.username + ":" + user.password)); | ||
|
|
||
| fetch(user.links.self, {headers:headers}) | ||
| .then(response => { | ||
| if (response.ok) { | ||
| return response.json(); | ||
| } else { | ||
| throw new Error(response.text()); | ||
| } | ||
| constructor(props) { | ||
| super(props); | ||
| this.edit = this.edit.bind(this) | ||
| this.state = { | ||
| user: {} | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @function | ||
| * @name componentDidMount | ||
| * Function to get the data of an user by providing its id | ||
| * @returns {object} the object containing the user information | ||
| */ | ||
| componentDidMount() { | ||
| const id = this.props.match.params.id; // available using withRouter() | ||
| const username = this.context.user.username | ||
| const password = this.context.user.password | ||
| fetch(`https://animal-hello-3000.codio-box.uk/api/v1/users/${id}`, { | ||
| method: 'GET', | ||
| headers: { | ||
| "Authorization": "Basic " + btoa(username + ":" + password) | ||
| }, | ||
| }) | ||
| .then(status) | ||
| .then(json) | ||
| .then(user => { | ||
| this.setState({user:user}) | ||
| }) | ||
| .catch(err => { | ||
| console.log(`Fetch error for user ${id}`) | ||
| }); | ||
| }; | ||
|
|
||
| /** | ||
| * @function | ||
| * @name edit | ||
| * Function to edit an user status | ||
| * @param {string} values - The status value that is going to change | ||
| * @returns {object} The values of the user that was edited | ||
| */ | ||
| edit = (values) =>{ //Edit user | ||
| const id = this.props.match.params.id; | ||
| console.log('Form data: ', values); | ||
| const {confirm, ...data} = values; | ||
| fetch(`https://animal-hello-3000.codio-box.uk/api/v1/users/${id}`, { | ||
| method: "PUT", | ||
| body: JSON.stringify(data), | ||
| headers: { | ||
| "Authorization": "Basic " + btoa(this.context.user.username + ":" + this.context.user.password), | ||
| "Content-Type": "application/json" | ||
| } | ||
| }) | ||
| .then(status) | ||
| .then(json) | ||
| .then(data => { | ||
| console.log(data); | ||
| setProfile(data); | ||
| alert("User Updated!") | ||
| }) | ||
| .catch(err => console.error(err)); | ||
| } | ||
| .catch(errorResponse => { | ||
| console.log(errorResponse) | ||
| }) | ||
| } | ||
|
|
||
| /** Renders all the structure with the data */ | ||
| render() { | ||
|
|
||
| const user = this.state.user; | ||
|
|
||
|
|
||
| /** Returns the data about the user */ | ||
| return ( | ||
| <> | ||
| <div style= {{ padding: '2% 20%' }}> | ||
| <h1>{user.role} Account</h1> | ||
| <Card hoverable style={{ width: '450px' }}> | ||
| <p>Username: {user.username} </p> | ||
| <p>Email: {user.email}</p> | ||
| <Image width={200} src={user.avatarURL} /> | ||
| {Object.keys(profile).map(key => <li key={key}>{key}: {profile[key]}</li>)} | ||
| </Card> | ||
| </div> | ||
| </> | ||
| return( | ||
| <div> | ||
| <Row type="flex" justify="space-around" align="middle"> | ||
| <Col span={6} align="center"> | ||
| <Image width={200} src={user.avatarURL} /> | ||
| </Col> | ||
| <Col span={12}> | ||
| <Title>{user.firstName} {user.lastName}</Title> | ||
| <Paragraph>Username: {user.username}</Paragraph> | ||
| <Paragraph>Email: {user.email}</Paragraph> | ||
| <Paragraph>Date Registered: {user.dateRegistered}</Paragraph> | ||
| <Paragraph>Role: {user.role}</Paragraph> | ||
|
|
||
| <h1>Change your account details here:</h1> | ||
| <Form name="update" onFinish={this.edit} > | ||
| <Form.Item rules={[{required:false, message:'Change your new name'}]} name="firstName" label="First name:"> | ||
| <Input /> | ||
| </Form.Item> | ||
| <Form.Item rules={[{required:false, message:'Change your new name'}]} name="lastName" label="Last name:"> | ||
| <Input /> | ||
| </Form.Item> | ||
| <Form.Item rules={[{required:false, message:'Change your new username'}]} name="username" label="Username:"> | ||
| <Input /> | ||
| </Form.Item> | ||
| <Form.Item rules={[{required:false,type:'email', message:'Input a valid email'}]} name="email" label="Email:"> | ||
| <Input /> | ||
| </Form.Item> | ||
| <Form.Item name= "submit"> | ||
| <Button type="primary" htmlType="submit">Change Details</Button> | ||
| </Form.Item> | ||
| <Form.Item> | ||
| <Button> <Link to ='/'>Reload</Link></Button> | ||
| </Form.Item> | ||
| </Form> | ||
| </Col> | ||
| <Col span={6} align="center"> | ||
| </Col> | ||
| </Row> | ||
| </div> | ||
|
|
||
| ); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| export default Account; | ||
| export default withRouter(Account); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters