From aaee713224269251b7986c8937db7ed2745620e1 Mon Sep 17 00:00:00 2001 From: Andre Emiliano Date: Sun, 4 Jul 2021 16:23:57 +0000 Subject: [PATCH] Changes to user account --- src/App.js | 2 +- src/components/account.js | 162 ++++++++++++++++++++++++++---------- src/components/nav.js | 4 +- src/components/usersgrid.js | 2 +- src/components/usersinfo.js | 5 +- 5 files changed, 123 insertions(+), 52 deletions(-) diff --git a/src/App.js b/src/App.js index 00df544..870ad79 100644 --- a/src/App.js +++ b/src/App.js @@ -77,7 +77,7 @@ class App extends React.Component { } exact/> - } /> + } /> } /> } /> } /> diff --git a/src/components/account.js b/src/components/account.js index 6c12986..48ba769 100644 --- a/src/components/account.js +++ b/src/components/account.js @@ -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) { -

Please login in order to see your account details

- } +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 ( - <> -
-

{user.role} Account

- -

Username: {user.username}

-

Email: {user.email}

- - {Object.keys(profile).map(key =>
  • {key}: {profile[key]}
    • )} -     -
    - + return( +
    + + + + + + {user.firstName} {user.lastName} + Username: {user.username} + Email: {user.email} + Date Registered: {user.dateRegistered} + Role: {user.role} + +

    Change your account details here:

    +
    + + + + + + + + + + + + + + + + + + +
    + + + +     +
    + ); } +} + -export default Account; +export default withRouter(Account); diff --git a/src/components/nav.js b/src/components/nav.js index efee3e3..746db05 100644 --- a/src/components/nav.js +++ b/src/components/nav.js @@ -16,7 +16,7 @@ class Nav extends React.Component { Applications Users - Account + Account Logout ) @@ -25,7 +25,7 @@ class Nav extends React.Component { Home Add Application - Account + Account Contact Us Logout diff --git a/src/components/usersgrid.js b/src/components/usersgrid.js index 33e7761..6e7bec6 100644 --- a/src/components/usersgrid.js +++ b/src/components/usersgrid.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Col, Row, Input, Select } from 'antd'; +import { Col, Row, Input } from 'antd'; import UserCard from './usercard'; import { status, json } from '../utilities/requestHandlers'; import { withRouter } from 'react-router-dom'; diff --git a/src/components/usersinfo.js b/src/components/usersinfo.js index b1d30e5..2f25eeb 100644 --- a/src/components/usersinfo.js +++ b/src/components/usersinfo.js @@ -1,15 +1,12 @@ import React from 'react'; import { withRouter } from 'react-router'; -import { Image, Row, Col, Typography, Space, Button, Form, Select } from 'antd'; +import { Image, Row, Col, Typography, Space, Button } from 'antd'; import { status, json } from '../utilities/requestHandlers'; -import { Link } from "react-router-dom"; import UserContext from '../contexts/user'; const { Title, Paragraph } = Typography; -const { Option } = Select; - class User extends React.Component { static contextType = UserContext;