Added more validation to forms and before rendering pages

src/App.js

@@ -12,7 +12,6 @@ import Home from './components/homescreen';
 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';
 import Uploader from './components/upload';
 
@@ -84,7 +83,6 @@ class App extends React.Component {
               <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 />} />
               <Route path="/adminSpace" children={<Admin />}/>
             </Switch>

src/components/application.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import { withRouter } from 'react-router';
-import { Image, Row, Col, Typography, Space, Button, Form, Input } from 'antd';
+import { Image, Row, Col, Typography, Space, Button, Form, Input, Select } 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';
 
 const { Title, Paragraph } = Typography;
 
+const { Option } = Select;
+
 class Application extends React.Component {
 
 	static contextType = UserContext;
@@ -71,7 +72,7 @@ class Application extends React.Component {
     .then(json)
     .then(data => {
       console.log(data);
-      alert("Application successfully updated and will be reviewed soon!")
+      alert("Application Updated!")
     })
     .catch(errorResponse => {
       console.log(errorResponse)
@@ -97,7 +98,7 @@ class Application extends React.Component {
     .then(status)
     .then(user => {
       console.log(`Deleted application ${this.state.application.ID}`);
-      this.props.history.push('/')
+      this.props.history.push('/adminSpace')
     })
     .catch(error => {
       console.log('Delete failed' + error);
@@ -106,25 +107,26 @@ class Application extends React.Component {
 
 /** Renders all the structure with the data */
 render() {
-	 if (!this.state.application) {
+		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.application) {
       return <h3>Loading application...</h3>
-    }
+		}else {
+
 		const application = this.state.application;
 
-		//Error Here!! Change the user.role to a valid verification
 		let adminSpace = <Space></Space>
-      if(this.context.user.role === "admin"){  //Add user.role so that only admins can change it!
+      if(this.context.user.role === "admin"){  //Only admins can change it!
         adminSpace = <Space>
                       <Button onClick={this.deleteHandler}>Delete application</Button>
-                      <Button onClick={this.edit}>Update application</Button>
                      </Space>
 		}
-
-	const options = [
-	{ value: 'pending', label: 'Pending' },
-  { value: 'accepted', label: 'Accepted' },
-  { value: 'rejected', label: 'Rejected' },
-	]
 
 /** Returns the data about the application */
      return(
@@ -142,14 +144,18 @@ render() {
 						<Paragraph>Created In: {application.dateCreated}</Paragraph>
 						<Paragraph>Status: {application.status}</Paragraph>
 						<Form name="update" onFinish={this.edit}  >
-                <Form.Item name="status" label="Change the Application Status and press Enter when done!">
-                    <Input />    
+                <Form.Item rules={[{required:true}]} name="New Status" label="Change the Application Status:">
+                    <Select placeholder="Select the new status">
+											<Option value="Pending">Pending</Option>
+											<Option value="Accepted">Accepted</Option>
+											<Option value="Rejected">Rejected</Option>
+										</Select>
                 </Form.Item>
 								<Form.Item name= "submit">
-									<Button type="primary" htmlType="submit"> Edit </Button>
+									<Button type="primary" htmlType="submit">Edit Status</Button>
 								</Form.Item>
 								<Form.Item>
-									<Button> <Link to ='/adminSpace'>Reload</Link> </Button>
+									<Button> <Link to ='/adminSpace'>Reload</Link></Button>
 								</Form.Item>
             </Form>
           </Col>
@@ -162,5 +168,6 @@ render() {
     );
 }
 }
+}
 
 export default withRouter(Application);

src/components/applicationsForUsers.js

@@ -50,9 +50,18 @@ class ApplicationForUsers extends React.Component {
 
 /** Renders all the structure with the data */
 render() {
-	 if (!this.state.application) {
+	 if (!this.context.user.loggedIn) {
+      return (
+        <h2>Login first in order to see your application!</h2>
+      )
+    }if  (this.context.user.role!="user") {
+      return (
+        <h2>You have to be a user in order to see your application!</h2>
+      )
+		}if (!this.state.application) {
       return <h3>Loading application...</h3>
-    }
+		}else {
+
 		const application = this.state.application;
 
 /** Returns the data about the application */
@@ -78,7 +87,7 @@ render() {
 
     );
   }
-
+ }
 }
 
 

src/components/homegrid.js

@@ -46,10 +46,17 @@ class HomeGrid extends React.Component {
 
 /** Renders the page using Application Card */
   render() {
-    console.log(this.context.errorCode)
-    if (!this.state.applications.length) {
-      return <h3>Loading applications...</h3>
-    }
+    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.application) {
+      return <h3>Loading application...</h3>
+		}else {
     const applicationList = this.state.applications.map(application => {
       return (
         <div style={{padding:"10px"}} key={application.ID}>
@@ -66,5 +73,6 @@ class HomeGrid extends React.Component {
     );
   }
 }
+}
 
 export default withRouter(HomeGrid);

src/components/login.js

@@ -80,6 +80,7 @@ class LoginForm extends React.Component {
     }    
     return (
         <Form {...formItemLayout} name="login" onFinish={this.login} scrollToFirstError >
+					<h2>Login Page</h2>
             <Form.Item name="username" label="Username" rules={usernameRules} >
                 <Input />
             </Form.Item>

src/components/nav.js

@@ -11,9 +11,7 @@ class Nav extends React.Component {
 
 	static contextType = UserContext;
 
-	//Change the Admin space section for admins only!!
   render() {
-		console.log(this.context.user.role)
 		return (
         <>
           <div className="logo" />

src/components/newApplication.js

@@ -5,21 +5,19 @@ import UserContext from '../contexts/user';
 
 const { Title } = Typography;
 
-const usernameRules= [
-  {required: true, message: "The username field is empty", whitespace:true}
-]
+const { TextArea } = Input
 
 const nameRule=[
     {required:true,message:'Please type the name of the compnay.',whitespace:false, min:5,max:150}
 ]
 const crnRule=[
-    {required:true,message:'Please type the company reference number.',whitespace:false, min:8,max:8}
+    {required:true, type:'number', message:'Please a valid company reference number.',whitespace:false, min:8,max:8}
 ]
 const addressRule=[
     {required:true,message:'Please enter the address where the company is located.',whitespace:false, min:5,max:32}
 ]
 const emailRule=[
-    {required:true,message:'Please enter the company email.',whitespace:false, min:5,max:32}
+    {required:true, type:'email', message:'Please enter a valid company email.',whitespace:false, min:5,max:32}
 ]
 const dateFoundedRule=[
     {required:true,message:'Please enter the foundation date of the company.'}
@@ -76,30 +74,37 @@ class NewApplication extends React.Component {
       return (
         <h2>Login first in order to create an application!</h2>
       )
-    } else {
+    }if  (this.context.user.role!="user") {
+      return (
+        <h2>You have to be a user in order to create an application!</h2>
+      )
+		}else {
       return (
 
         <Form {...formItemLayout} name="apply" onFinish={this.onFinish}>
-
+
+					<h2>Application Form</h2>
+
           <Form.Item name="companyName" label="Name of the Company" rules={nameRule}>
-            <Input />
+            <TextArea showCount={true} maxLength={100}/>
           </Form.Item>
 
           <Form.Item name="crn" label="Company Reference Number" rules={crnRule}>
-            <Input />
+            <TextArea showCount={true} maxLength={8}/>
           </Form.Item>
 
           <Form.Item name="address" label="Company Address" rules={addressRule}>
-            <Input />
+            <TextArea showCount={true} maxLength={100}/>
           </Form.Item>
 
           <Form.Item name="email" label="Email" rules={emailRule}>
-            <Input />
+            <TextArea showCount={true} maxLength={50}/>
           </Form.Item>
 
           <Form.Item name="dateFunded" label="Foundation Date" rules={dateFoundedRule}>
-            <DatePicker onChange={this.state.dateFunded} name="dateFunded" label="Foundation Date" rules={dateFoundedRule} />
+            <DatePicker onChange={this.state.dateFunded} name="dateFunded" label="Foundation Date"/>
           </Form.Item>
+
           <Form.Item name="imageURL" label="Photo of Premises">
             <Input type="file" name="file" />
           </Form.Item>
@@ -108,9 +113,7 @@ class NewApplication extends React.Component {
           </Form.Item>
 
           <Form.Item {...tailFormItemLayout}>
-            <Button type="primary" htmlType="submit">
-              Apply
-            </Button>
+            <Button type="primary" htmlType="submit">Submit Application</Button>
           </Form.Item>
         </Form>
 

src/components/register.js

@@ -107,7 +107,7 @@ class RegistrationForm extends React.Component {
   render() {
     return (
       <Form {...formItemLayout} name="register" onFinish={this.onFinish} scrollToFirstError >
-        
+      <h2>Registration Form</h2>
 			<Form.Item name="firstName" label="First Name" rules={firstNameRules} >
             <Input />
         </Form.Item>