Added changes for normal users to see their applications

package.json

@@ -14,6 +14,7 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-select": "^4.3.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
@@ -42,6 +43,7 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
+    "http-proxy-middleware": "^0.19.1",
     "jest": "^26.6.0",
     "supertest": "^6.1.3"
   }

src/App.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import { Layout } from 'antd';
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route
-} from "react-router-dom";
+import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
 import './App.css';
 
 import Nav from './components/nav';
@@ -13,6 +9,7 @@ import Register from './components/register';
 import Login from './components/login';
 import Home from './components/home';
 import Application from './components/application';
+import ApplicationForUsers from './components/applicationsForUsers';
 import NewApplication from './components/newApplication';
 import EditApplication from './components/editApplication';
 import Messages from './components/messages';
@@ -77,6 +74,7 @@ class App extends React.Component {
               <Route path="/login" children={<Login />} />
               <Route path="/upload" children={<Uploader />} />
               <Route path="/application/:id"  children={<Application />} />
+							<Route path="/myapplication/:id"  children={<ApplicationForUsers />} />
 							<Route path="/newapplication" children={<NewApplication />} />
 							<Route path="/edit/:id" component={EditApplication} />
 							<Route path="/messages" children={<Messages />} />

src/components/application.js

@@ -1,46 +1,82 @@
 import React from 'react';
 import { withRouter } from 'react-router';
-import { Image, Row, Col, Typography, Space, Button } from 'antd';
+import { Image, Row, Col, Typography, Space, Button, Form, Input } from 'antd';
 import { status, json } from '../utilities/requestHandlers';
+import { Component } from 'react';
+import Select from 'react-select';
 
 import UserContext from '../contexts/user';
 import {useContext} from 'react';
 
 const { Title, Paragraph } = Typography;
 
+const formItemLayout = {
+    labelCol: { xs: { span: 24 }, sm: { span: 6 } },
+    wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
+};
+
 class Application extends React.Component {
 
 	static contextType = UserContext;
 
   constructor(props) {
     super(props);
 		this.deleteHandler = this.deleteHandler.bind(this)
+		this.edit = this.edit.bind(this)
     this.state = {
       application: {}
     }
   }
+
 
   componentDidMount() {
     const id = this.props.match.params.id; // available using withRouter()
 		const username = this.context.user.username
     const password = this.context.user.password
-		const url = "https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}"
-    fetch(url, {
-      method: "GET",
+    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}`, {
+    method: 'GET',
             headers: {
                 "Authorization": "Basic " + btoa(username + ":" + password)
             },       
     })
     .then(status)
     .then(json)
     .then(application => {
-			console.log(application)
       this.setState({application:application})
     })
     .catch(err => {
       console.log(`Fetch error for application ${id}`)
     });
-  }
+  };
+
+
+	edit(values){ //Edit application
+		if (this.context.user.loggedIn){
+        const id = this.props.match.params.id;
+        console.log(values)
+				const {status}=values
+        values.userID=this.context.user.ID
+        const { confirm, ...data } = values;
+        fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}`, {
+            method: "PUT",
+            body: data,
+            headers:{
+                "Authorization": "Basic " + btoa("andre" + ":" + "12345")
+            }
+        })
+        .then(status)
+        .then(json)
+        .then(data => {
+            console.log("updated succesfully");
+            console.log(data)
+            this.setState({redirect:"/"})
+        })
+        .catch(errorResponse => {
+            console.log('Update failed');
+            alert(`Error: ${JSON.stringify(errorResponse)}`);
+        });
+		};
+	};
 
 	deleteHandler() {
     const username = this.context.user.username
@@ -62,19 +98,28 @@ class Application extends React.Component {
     });
   }
 
-  render() {
+render() {
+	 if (!this.state.application) {
+      return <h3>Loading application...</h3>
+    }
 		const application = this.state.application;
 
 		//Error Here!! Change the user.role to a valid verification
 		let adminSpace = <Space></Space>
-      if(this.context.user.loggedIn){
+      if(this.context.user.loggedIn){  //Add user.role so that only admins can change it!
         adminSpace = <Space>
                       <Button onClick={this.deleteHandler}>Delete application</Button>
-                      <Button href={'/edit/'+ this.state.application.ID}>Update application</Button>
+                      <Button onClick={this.edit}>Update application</Button>
                      </Space>
 		}
+
+	const options = [
+	{ value: 'pending', label: 'Pending' },
+  { value: 'accepted', label: 'Accepted' },
+  { value: 'rejected', label: 'Rejected' },
+	]
 
-     return( //add {adminSpace} here
+     return(
 			<div>
         <Row type="flex" justify="space-around" align="middle">
           <Col span={6} align="center">
@@ -88,6 +133,11 @@ class Application extends React.Component {
 						<Paragraph>Founded in: {application.dateFunded}</Paragraph>
 						<Paragraph>Created In: {application.dateCreated}</Paragraph>
 						<Paragraph>Status: {application.status}</Paragraph>
+						<Form name="update" onFinish={this.edit}  >
+                <Form.Item name="status" label="Update Application Status">
+                    <Select options={options} />
+                </Form.Item>
+            </Form>
           </Col>
           <Col span={6} align="center">
 						{adminSpace}

src/components/applicationcard.js

@@ -1,30 +1,26 @@
 import React from 'react';
 import { Card } from 'antd';
-import NavImage from './navimage';
 import {Link} from "react-router-dom";
 
 const { Meta } = Card;
 
 class ApplicationCard extends React.Component {
 
-  constructor(props) {
-    super(props);
-  }
-
   render() {
+    const imagesrc = "https://animal-hello-3000.codio-box.uk/api/v1/applications" + this.props.image
+    console.log(this.props.image)
     const applicationID = this.props.ID;
+    const companyName = this.props.companyName
     return (
-			<Link to={`/application/${applicationID}`}>
-      <Card
-        style={{ width: 320 }}
-        cover={<NavImage alt={`Application ${applicationID}`} src={this.props.imageURL} to={`/applications/${applicationID}`} />}
-        hoverable={true}>
-
-        <Meta title={this.props.companyName} description={this.props.status} />
-      </Card>
-			</Link>
+      <Link to={`/application/${applicationID}`}>
+        <Card
+          style={{ width: 320, textAlign: "center", paddingTop: "50px"}}
+          cover={<p> {`${companyName}`}</p>}
+          hoverable={true}>
+        </Card>
+      </Link>
     );
   }
 }
 
-export default ApplicationCard; 
+export default ApplicationCard;

src/components/applicationsForUsers.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import { Image, Row, Col, Typography, Space, Button, Form, Input } from 'antd';
+import { status, json } from '../utilities/requestHandlers';
+import { Component } from 'react';
+import Select from 'react-select';
+import ReactDOM from "react-dom";
+
+import ApplicationCard from './applicationcard';
+
+import UserContext from '../contexts/user';
+import {useContext} from 'react';
+
+window.$name = ""
+
+
+const { Title, Paragraph } = Typography;
+
+const formItemLayout = {
+    labelCol: { xs: { span: 24 }, sm: { span: 6 } },
+    wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
+};
+
+class ApplicationForUsers extends React.Component {
+
+	static contextType = UserContext;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      application: {}
+    }
+  }
+
+  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/applications/myapplications/${id}`, {
+    method: 'GET',
+            headers: {
+                "Authorization": "Basic " + btoa(username + ":" + password)
+            },       
+    })
+    .then(status)
+    .then(json)
+    .then(application => {
+			window.$id = id;
+      this.setState({application:application})
+    })
+    .catch(err => {
+      console.log(`Fetch error for application ${id}`)
+    });
+  };
+
+render() {
+	 if (!this.state.application) {
+      return <h3>Loading application...</h3>
+    }
+		const application = this.state.application;
+
+     return(
+
+			<div>
+        <Row type="flex" justify="space-around" align="middle">
+          <Col span={6} align="center">
+          <Image width={200} alt="Application" src={application.imageURL} />
+          </Col>
+          <Col span={12}>
+            <Title>{application.companyName}</Title>
+            <Paragraph>Company Registration Number: {application.crn}</Paragraph>
+						<Paragraph>Address: {application.address}</Paragraph>
+						<Paragraph>Email: {application.email}</Paragraph>
+						<Paragraph>Founded in: {application.dateFunded}</Paragraph>
+						<Paragraph>Created In: {application.dateCreated}</Paragraph>
+						<Paragraph>Status: {application.status}</Paragraph>
+          </Col>
+          <Col span={6} align="center">
+          </Col>
+        </Row>
+      </div>
+
+    );
+  }
+
+}
+
+export default withRouter(ApplicationForUsers);

src/components/editApplication.js

@@ -38,7 +38,7 @@ class EditApplication extends React.Component{
         console.log(values)
         const {companyName,crn,address,email,dateFunded}=values
         values={companyName:companyName,crn:crn,address:address,email:email,dateFunded:dateFunded}
-        console.log("Befpre IF -statement ")
+        console.log("Before IF -statement ")
         console.log(values)
         values.id=this.context.ID
         if (!companyName===true) {

src/components/homegrid.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Col, Row } from 'antd';
+import { Col, Row ,Result, Button } from 'antd';
 import ApplicationCard from './applicationcard';
 import { status, json } from '../utilities/requestHandlers';
 import { withRouter } from 'react-router-dom';
@@ -35,15 +35,19 @@ class HomeGrid extends React.Component {
       this.setState({ applications: data })
     })
     .catch(err => {
-        console.log("Error fetching applications")
+        console.log("Not found")
+        console.log(err)
+        console.log(err.status)
+        this.context.errorCode = err.status
         this.setState({ found: false})
 
     });
   }
 
   render() {
+    console.log(this.context.errorCode)
     if (!this.state.applications.length) {
-      return <h4>Loading applications...</h4>
+      return <h3>Loading applications...</h3>
     }
     const applicationList = this.state.applications.map(application => {
       return (

src/components/login.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Form, Input, Button } from 'antd';
 import { status, json } from '../utilities/requestHandlers';
 import UserContext from '../contexts/user';
-import { Redirect } from 'react-router-dom';
+import { Redirect, Link } from 'react-router-dom';
 
 // add some layout to keep the form organised on different screen sizes
 const formItemLayout = {
@@ -51,9 +51,15 @@ class LoginForm extends React.Component {
             console.log('Logged in successfully');
             console.log(user);
             user.password = password;  // store in context for future API calls
+						console.log(user.id);
             this.context.login(user);
 						alert('Hello ' + username + '!')
-            this.setState({redirect:'/'});
+						if (username === "andre"){
+							this.setState({redirect:'/'});
+						}
+            else{
+							this.setState({redirect:`/myapplication/${this.context.user.id}`});
+						}
         })
         .catch(error => {
 						alert('Wrong username or password!!')
@@ -76,7 +82,11 @@ class LoginForm extends React.Component {
             <Form.Item {...tailFormItemLayout}>
                 <Button type="primary" htmlType="submit">Login</Button>
             </Form.Item>
+						<Form.Item {...tailFormItemLayout}>
+							<Button> <Link to ='/register'>Create an accout here!</Link> </Button>
+						</Form.Item>
         </Form>
+
     );
   };
 };

src/components/nav.js

@@ -3,24 +3,36 @@ import {useContext} from 'react';
 import { Menu } from 'antd';
 import { Link } from "react-router-dom";
 import UserContext from '../contexts/user';
+import { withRouter } from 'react-router';
+
+import { status, json } from '../utilities/requestHandlers';
+
+import ApplicationForUsers from './applicationsForUsers'
+
+class Nav extends React.Component {
+
+	static contextType = UserContext;
 
-function Nav(props) {
-  const context = useContext(UserContext);
 	//Change the new application section for admins only!!
-  return (
+  render() {
+		const id = window.$id;
+		console.log(id) //Find value that corresponds to the userID of the application
+		return (
         <>
           <div className="logo" />
-          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
-            <Menu.Item key="1"><Link to="/">Home</Link></Menu.Item>
-            <Menu.Item key="2" disabled={context.user.loggedIn}><Link to="/login">Login</Link></Menu.Item>
-            <Menu.Item key="3" disabled={context.user.loggedIn}><Link to="/register">Register</Link></Menu.Item>
-            <Menu.Item key="4" disabled={!context.user.loggedIn}><Link to="/messages">Messages</Link></Menu.Item> 
-            <Menu.Item key="5" disabled={!context.user.loggedIn}><Link to="/account">Account</Link></Menu.Item>
-            <Menu.Item key="6" disabled={!context.user.loggedIn}><Link to="/newapplication">Add Application</Link></Menu.Item> 
-            <Menu.Item key="7" disabled={!context.user.loggedIn} onClick={context.logout}> <Link to="/">Logout</Link></Menu.Item>
+          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
+            <Menu.Item key="1" disabled={!this.context.user.loggedIn}><Link to="/">Home</Link></Menu.Item>
+						<Menu.Item key="8" disabled={!this.context.user.loggedIn}><Link to={`/myapplication/${window.$name}`}>App</Link></Menu.Item>
+            <Menu.Item key="2" disabled={this.context.user.loggedIn}><Link to="/login">Login</Link></Menu.Item>
+            <Menu.Item key="3" disabled={this.context.user.loggedIn}><Link to="/register">Register</Link></Menu.Item>
+            <Menu.Item key="4" disabled={!this.context.user.loggedIn}><Link to="/messages">Messages</Link></Menu.Item> 
+            <Menu.Item key="5" disabled={!this.context.user.loggedIn}><Link to="/account">Account</Link></Menu.Item>
+            <Menu.Item key="6" disabled={!this.context.user.loggedIn}><Link to="/newapplication">Add Application</Link></Menu.Item> 
+            <Menu.Item key="7" disabled={!this.context.user.loggedIn} onClick={this.context.logout}> <Link to="/">Logout</Link></Menu.Item>
           </Menu>
         </>
-  );
-}
+		)
+	};
+};
 
-export default Nav;
+export default withRouter(Nav);

src/components/newApplication.js

@@ -3,6 +3,7 @@ import UserContext from '../contexts/user'
 import { Form, Input, Button, Upload, Row,Col, DatePicker } from 'antd'
 import { status, json } from '../utilities/requestHandlers'
 import { Redirect } from 'react-router-dom'
+
 const formItemLayout = {
     labelCol: { xs: { span: 24 }, sm: { span: 6 } },
     wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }

src/components/register.js

@@ -88,7 +88,7 @@ class RegistrationForm extends React.Component {
         // TODO: display success message and/or redirect
         console.log(data);
         alert("User added!")
-				this.setState({redirect:"/"})
+				this.setState({redirect:"/login"})
     })
     .catch(err => {
         // TODO: show nicely formatted error message and clear form

src/setupProxy.js

@@ -0,0 +1,11 @@
+const proxy = require("http-proxy-middleware");
+
+module.exports = function(app) {
+  app.use(
+    proxy("api/v1", {
+      target: "https://animal-hello-3000.codio-box.uk",
+      secure: false,
+      changeOrigin: true
+    })
+  );
+};