Admins can see all users information

src/App.js

@@ -8,9 +8,11 @@ import Account from './components/account';
 import Register from './components/register';
 import Login from './components/login';
 import Admin from './components/admin';
+import Users from './components/users';
 import Home from './components/homescreen';
 import Application from './components/application';
 import ApplicationForUsers from './components/applicationsForUsers';
+import UserInfo from './components/usersinfo';
 import NewApplication from './components/newApplication';
 import ContactForm from './components/contact';
 import Uploader from './components/upload';
@@ -84,6 +86,8 @@ class App extends React.Component {
 							<Route path="/newapplication" children={<NewApplication />} />
 							<Route path="/contact" children={<ContactForm />} />
               <Route path="/adminSpace" children={<Admin />}/>
+							<Route path="/users" children={<Users />}/>
+							<Route path="/user/:id" children={<UserInfo />}/>
             </Switch>
           </Content>
 

src/components/admin.js

@@ -13,10 +13,10 @@ import Icon from './icon.png';
 */
 function Admin(props) {
   return (
-      <div className="site-layout-content">
+      <div>
         <div style={{ padding: '2% 20%' }}>
 					<Image width={200} alt="TLD" src={Icon} />
-					<PageHeader className="site-page-header"
+					<PageHeader 
             title="Trading License Department"
             subTitle="Admins can manage all applications from here."/>
         </div>  

src/components/application.js

@@ -123,7 +123,7 @@ render() {
 		let adminSpace = <Space></Space>
       if(this.context.user.role === "admin"){  //Only admins can change it!
         adminSpace = <Space>
-                      <Button onClick={this.deleteHandler}>Delete application</Button>
+                      <Button danger onClick={this.deleteHandler}>Delete application</Button>
                      </Space>
 		}
 

src/components/applicationgrid.js

@@ -25,7 +25,7 @@ class ApplicationGrid extends React.Component {
     const id = this.context.user.ID;
     const username = this.context.user.username
     const password = this.context.user.password
-    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/account/${id}`, {
+    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/owned/${id}`, {
     method: 'GET',
             headers: {
                 "Authorization": "Basic " + btoa(username + ":" + password)

src/components/contact.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import emailjs from 'emailjs-com';
 import UserContext from '../contexts/user';
 import { Typography, Button, Input } from 'antd';
 import { withRouter } from 'react-router';
+import emailjs from 'emailjs-com';
 
 const { Title } = Typography;
 const { TextArea } = Input;

src/components/nav.js

@@ -14,8 +14,9 @@ class Nav extends React.Component {
 			if  (this.context.user.role!=="user") {
       return (
 				<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
-						<Menu.Item key="1" disabled={this.context.user.role!== "admin"}><Link to="/adminSpace">Admin</Link></Menu.Item>
-						<Menu.Item key="2" disabled={!this.context.user.loggedIn}><Link to="/account">Account</Link></Menu.Item>
+						<Menu.Item key="1" disabled={this.context.user.role!== "admin"}><Link to="/adminSpace">Applications</Link></Menu.Item>
+						<Menu.Item key="2" disabled={this.context.user.role!== "admin"}><Link to="/users">Users</Link></Menu.Item>
+						<Menu.Item key="3" disabled={!this.context.user.loggedIn}><Link to="/account">Account</Link></Menu.Item>
             <Menu.Item key="4" disabled={!this.context.user.loggedIn} onClick={this.context.logout}> <Link to="/">Logout</Link></Menu.Item>
          </Menu>
       )

src/components/usercard.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Card } from 'antd';
+import NavImage from './navimage';
+import {Link} from "react-router-dom";
+
+const { Meta } = Card;
+
+class UserCard extends React.Component {
+
+/** Renders all the structure with the data using the user ID */
+  render() {
+    const userID = this.props.ID;
+    return (
+      <Link to={`/user/${userID}`}>
+        <Card
+          style={{ width: 320, textAlign: "center", paddingTop: "50px"}}
+          cover={<NavImage src={this.props.avatarURL} to={`/users/${userID}`} />}
+          hoverable={true}>
+					<Meta title={this.props.username} description={this.props.email} />
+        </Card>
+      </Link>
+    );
+  }
+}
+
+export default UserCard;

src/components/users.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PageHeader } from 'antd';
+import UsersGrid from './usersgrid';
+import { Image } from 'antd'
+import Icon from './icon.png';
+
+/**
+   * @function
+   * @name User
+   * Function to show the users page
+   * @param {object} props
+   * @returns {object} Page Structure
+*/
+function User(props) {
+  return (
+      <div className="site-layout-content">
+        <div style={{ padding: '2% 20%' }}>
+				<Image width={200} alt="TLD" src={Icon} />
+					<PageHeader
+            title="Users"
+            subTitle="All registered users appear here"/>
+        </div>  
+        <UsersGrid/>
+      </div>
+  );
+}
+
+export default User;

src/components/usersgrid.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Col, Row, Input, Select } from 'antd';
+import UserCard from './usercard';
+import { status, json } from '../utilities/requestHandlers';
+import { withRouter } from 'react-router-dom';
+import UserContext from '../contexts/user';
+
+
+class UsersGrid extends React.Component {
+
+	static contextType = UserContext;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [],
+			search:{}
+    }
+  }
+
+	/**
+   * @function
+   * @name componentDidMount
+   * Function to get all the users in the DB
+   * @returns {object} Clickable User Cards with their data
+*/
+	componentDidMount() {
+		const username = this.context.user.username
+    const password = this.context.user.password
+    let url = "https://animal-hello-3000.codio-box.uk/api/v1/users"
+    if (this.props.query) {url = `https://animal-hello-3000.codio-box.uk/api/v1/users?query=${this.props.query}`}
+    fetch(url, {
+      method: "GET",
+            headers: {
+                "Authorization": "Basic " + btoa(username + ":" + password)
+            },       
+    })
+    .then(status)
+    .then(json)
+    .then(data => {
+      this.setState({ users: data })
+    })
+    .catch(err => {
+        console.log("Not found")
+    });
+  }
+
+/**
+   * @function
+   * @name searchHandler
+   * Function to handle the search query
+   * @param {object} value - Query for the search
+   * @returns {object} Output from the search
+*/
+	searchHandler = value => {
+    console.log(value)
+    this.setState({search:value})
+  }
+
+/** Renders the page using User Card and filters the search query */
+  render() {
+		const { Search } = Input;
+
+    if (!this.context.user.loggedIn) {
+      return (
+        <h2>Login first in order to see applications!</h2>
+      )
+    }if  (this.context.user.role!=="admin") {
+      return (
+        <h2>You have to be a user in order to see applications!</h2>
+      )
+		}if(this.state.search.length){ //If anything is written in the search bar does the search
+      const searchedUser = this.state.users.filter(user=>user.username.toLowerCase() === this.state.search.toLowerCase() || user.email.toLowerCase() === this.state.search.toLowerCase()).map(user => {
+        return (
+          <div style={{padding:"10px"}} key={user.ID}>
+            <Col span={6}>
+              <UserCard {...user} />
+            </Col>
+          </div>
+        )
+      });
+		return (
+        <div style={{ padding: '3% 20%' }}>
+        <Search placeholder="Search by Company Name, Company Reference Number or Email"
+                          allowClear
+                          enterButton="Search"
+                          size="large"
+                          onSearch={this.searchHandler}/>
+
+        <Row type="flex" justify="space-around">
+          {searchedUser}
+        </Row>
+        </div>
+      );
+    }else{ //If search bar is empty shows all applications
+       const allUsers = this.state.users.map(user => {
+        return (
+          <div style={{padding:"10px"}} key={user.ID}>
+            <Col span={6}>
+              <UserCard {...user} />
+            </Col>
+          </div>
+        )
+      });
+      return (
+        <div>
+          <div style={{ padding: '3% 20%' }}>
+            <Search placeholder="Search by Company Name, Company Reference Number or Email"
+                              allowClear
+                              enterButton="Search"
+                              size="large"
+                              onSearch={this.searchHandler}/>
+
+          </div>
+          <Row type="flex" justify="space-around">
+            {allUsers}
+          </Row>
+        </div>
+      );
+    }
+  }
+}
+
+export default withRouter(UsersGrid);

src/components/usersinfo.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import { Image, Row, Col, Typography, Space, Button, Form, Select } 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;
+
+  constructor(props) {
+    super(props);
+		this.deleteHandler = this.deleteHandler.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 deleteHandler
+   * Function that deletes the user using its id
+   * @returns {object} the information that the user was deleted
+*/
+	deleteHandler() {
+    const username = this.context.user.username
+    const password = this.context.user.password
+    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/users/${this.state.user.ID}`, {
+      method: "DELETE",
+      headers: {
+      "Authorization": "Basic " + btoa(username + ":" + password)
+      }
+    })
+    .then(status)
+    .then(user => {
+      alert(`Deleted user for company ${this.state.user.companyName}`);
+      this.props.history.push('/adminSpace')
+    })
+    .catch(error => {
+      console.log('Delete failed' + error);
+    });
+  }
+
+/** Renders all the structure with the data */
+render() {
+		if (!this.context.user.loggedIn) {
+      return (
+        <h2>Login first in order to see users!</h2>
+      )
+    }if  (this.context.user.role!=="admin") {
+      return (
+        <h2>You have to be a user in order to see users!</h2>
+      )
+		}if (!this.state.user) {
+      return <h3>Loading user...</h3>
+		}else {
+
+		const user = this.state.user;
+
+		let adminSpace = <Space></Space>
+      if(this.context.user.role === "admin"){  //Only admins can change it!
+        adminSpace = <Space>
+                      <Button danger onClick={this.deleteHandler}>Delete user</Button>
+                     </Space>
+		}
+
+
+/** Returns the data about the user */
+     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>
+          </Col>
+          <Col span={6} align="center">
+						{adminSpace}
+          </Col>
+        </Row>
+      </div>
+
+    );
+}
+}
+}
+
+export default withRouter(User);