Changed forms to fix problems with Creating and Updating applications

src/App.js

@@ -7,7 +7,8 @@ import Nav from './components/nav';
 import Account from './components/account';
 import Register from './components/register';
 import Login from './components/login';
-import Home from './components/home';
+import Admin from './components/admin';
+import Home from './components/homescreen';
 import Application from './components/application';
 import ApplicationForUsers from './components/applicationsForUsers';
 import NewApplication from './components/newApplication';
@@ -75,6 +76,7 @@ class App extends React.Component {
 
           <Content >
             <Switch>
+							<Route path="/" children={<Home />} exact/>
               <Route path="/account" children={<Account />} />
               <Route path="/register" children={<Register />} />
               <Route path="/login" children={<Login />} />
@@ -84,11 +86,11 @@ class App extends React.Component {
 							<Route path="/newapplication" children={<NewApplication />} />
 							<Route path="/edit/:id" component={EditApplication} />
 							<Route path="/messages" children={<Messages />} />
-              <Route path="/" children={<Home />} exact />
+              <Route path="/adminSpace" children={<Admin />}/>
             </Switch>
           </Content>
 
-          <Footer style={{ textAlign: 'center' }}>Created for Web API Development {this.state.apiResponse}</Footer>
+          <Footer style={{ textAlign: 'center' }}>Created for Web API Development by Andre Emiliano</Footer>
 
         </Router>
       </UserContext.Provider>  

src/components/home.js → src/components/admin.js

@@ -8,12 +8,12 @@ const { Search } = Input;
 
 /**
    * @function
-   * @name Home
-   * Function to show the main page
+   * @name Admin
+   * Function to show the admin page
    * @param {object} props
    * @returns {object} Page Structure
 */
-function Home(props) {
+function Admin(props) {
 
 	const [search, setSearch] = useState(undefined);
 
@@ -25,7 +25,7 @@ function Home(props) {
    * @returns {object} Output from the search
 */
   function searchHandler(value) {
-    console.log("setting query" + value)
+    console.log("setting query")
     setSearch(value)
   }
 
@@ -35,7 +35,7 @@ function Home(props) {
 					<Image width={200} alt="TLD" src={Icon} />
 					<PageHeader className="site-page-header"
             title="Trading License Department"
-            subTitle="Here businesses can apply for trading licenses."/>
+            subTitle="Admins can manage all applications from here."/>
           <Search placeholder="Search Applications"
             allowClear
             enterButton="Search"
@@ -47,4 +47,4 @@ function Home(props) {
   );
 }
 
-export default Home;
+export default Admin;

src/components/application.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { withRouter } from 'react-router';
-import { Image, Row, Col, Typography, Space, Button, Form } from 'antd';
+import { Image, Row, Col, Typography, Space, Button, Form, Input } from 'antd';
 import { status, json } from '../utilities/requestHandlers';
 import Select from 'react-select';
+import { Link, useHistory } from "react-router-dom";
 
 import UserContext from '../contexts/user';
 
@@ -54,35 +55,28 @@ class Application extends React.Component {
    * @param {string} values - The status value that is going to change
    * @returns {object} The values of the application that was edited
 */
-	edit(values){ //Edit application
-		if (this.context.user.loggedIn){
-        const id = this.props.match.params.id;
-				const username=this.context.user.username
-        const password=this.context.user.password
-        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(username + ":" + password)
-            }
-        })
-        .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)}`);
-        });
-		};
-	};
+	edit = (values) =>{ //Edit application
+		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/applications/${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);
+      alert("Application successfully updated and will be reviewed soon!")
+    })
+    .catch(errorResponse => {
+      console.log(errorResponse)
+    })
+	}
 
 /**
    * @function
@@ -119,7 +113,7 @@ render() {
 
 		//Error Here!! Change the user.role to a valid verification
 		let adminSpace = <Space></Space>
-      if(this.context.user.loggedIn){  //Add user.role so that only admins can change it!
+      if(this.context.user.role === "admin"){  //Add user.role so that only admins can change it!
         adminSpace = <Space>
                       <Button onClick={this.deleteHandler}>Delete application</Button>
                       <Button onClick={this.edit}>Update application</Button>
@@ -131,7 +125,7 @@ render() {
   { value: 'accepted', label: 'Accepted' },
   { value: 'rejected', label: 'Rejected' },
 	]
-	
+
 /** Returns the data about the application */
      return(
 			<div>
@@ -148,9 +142,15 @@ render() {
 						<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 name="status" label="Change the Application Status and press Enter when done!">
+                    <Input />    
                 </Form.Item>
+								<Form.Item name= "submit">
+									<Button type="primary" htmlType="submit"> Edit </Button>
+								</Form.Item>
+								<Form.Item>
+									<Button> <Link to ='/adminSpace'>Reload</Link> </Button>
+								</Form.Item>
             </Form>
           </Col>
           <Col span={6} align="center">
@@ -160,8 +160,7 @@ render() {
       </div>
 
     );
-  }
-
+}
 }
 
 export default withRouter(Application);

src/components/applicationsForUsers.js

@@ -31,7 +31,8 @@ class ApplicationForUsers extends React.Component {
     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}`, {
+		const userid = this.context.user.ID
+    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/myapplications/${userid}`, {
     method: 'GET',
             headers: {
                 "Authorization": "Basic " + btoa(username + ":" + password)
@@ -40,13 +41,10 @@ class ApplicationForUsers extends React.Component {
     .then(status)
     .then(json)
     .then(application => {
-			window.$id = id;
-			const id_user = id;
-			module.exports ={id_user};
       this.setState({application:application})
     })
     .catch(err => {
-      console.log(`Fetch error for application ${id}`)
+      console.log(`Fetch error for application ${userid}`)
     });
   };