Changed forms and other small changes

6003CEM-2021JANMAY · Jun 17, 2021 · a79d268 · a79d268
1 parent fd4ff0b
commit a79d268
Showing 9 changed files with 74 additions and 151 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Dog Shelter</title>
+    <title>Trading License Department</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/.newApplication.js.swp b/src/components/.newApplication.js.swp
diff --git a/src/components/application.js b/src/components/application.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { withRouter } from 'react-router';
-import { Image, Row, Col, Typography, Space, Button } from 'antd'
-import ApplicationIcon from './applicationicon';
+import { Image, Row, Col, Typography, Space, Button } from 'antd';
 import { status, json } from '../utilities/requestHandlers';
 
 import UserContext from '../contexts/user';
+import {useContext} from 'react';
 
 const { Title, Paragraph } = Typography;
 
@@ -22,8 +22,15 @@ class Application extends React.Component {
 
   componentDidMount() {
     const id = this.props.match.params.id; // available using withRouter()
-
-    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}`)
+		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",
+            headers: {
+                "Authorization": "Basic " + btoa(username + ":" + password)
+            },       
+    })
     .then(status)
     .then(json)
     .then(application => {
@@ -60,19 +67,13 @@ class Application extends React.Component {
 
 		//Error Here!! Change the user.role to a valid verification
 		let adminSpace = <Space></Space>
-		if(this.context.user.loggedIn){
       if(this.context.user.loggedIn){
         adminSpace = <Space>
                       <Button onClick={this.deleteHandler}>Delete application</Button>
                       <Button href={'/edit/'+ this.state.application.ID}>Update application</Button>
                      </Space>
-      }
 		}
 
-		 if (!application) {
-      return <h3>Loading applications...</h3>
-    }
-
      return( //add {adminSpace} here
 			<div>
         <Row type="flex" justify="space-around" align="middle">
@@ -84,7 +85,7 @@ class Application extends React.Component {
             <Paragraph>Company Registration Number: {application.crn}</Paragraph>
 						<Paragraph>Address: {application.address}</Paragraph>
 						<Paragraph>Email: {application.email}</Paragraph>
-						<Paragraph>Funded in: {application.dateFunded}</Paragraph>
+						<Paragraph>Founded in: {application.dateFunded}</Paragraph>
 						<Paragraph>Created In: {application.dateCreated}</Paragraph>
 						<Paragraph>Status: {application.status}</Paragraph>
           </Col>

diff --git a/src/components/applicationcard.js b/src/components/applicationcard.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Card } from 'antd';
-import ApplicationIcon from './applicationicon';
 import NavImage from './navimage';
 import {Link} from "react-router-dom";
 

diff --git a/src/components/applicationicon.js b/src/components/applicationicon.js
diff --git a/src/components/editApplication.js b/src/components/editApplication.js
@@ -1,4 +1,4 @@
-import {Form, Input, Button, Row,Col} from 'antd'
+import {Form, Input, Button, Row, Col, Select} from 'antd'
 import { Redirect } from 'react-router-dom'
 import {status,json} from '../utilities/requestHandlers'
 import UserContext from  '../contexts/user'
@@ -15,8 +15,7 @@ class EditApplication extends React.Component{
     constructor(props){
         super(props)
         this.state={
-            imageURL:null,
-            redirect:null
+            imageURL:null
         }
         this._onFinish =this._onFinish.bind(this)
         this._onCancel =this._onCancel.bind(this)
@@ -41,26 +40,25 @@ class EditApplication extends React.Component{
         values={companyName:companyName,crn:crn,address:address,email:email,dateFunded:dateFunded}
         console.log("Befpre IF -statement ")
         console.log(values)
-			//Change listing_to_update for the one used in the TLD backend
-        values.id=this.context.Listing_to_update.ID
+        values.id=this.context.ID
         if (!companyName===true) {
-            values.companyName=this.context.Listing_to_update.companyName
+            values.companyName=this.context.companyName
         }
         if (!crn===true) {
-            values.crn=this.context.Listing_to_update.crn
+            values.crn=this.context.crn
         }
         if (!address===true) {
-            values.address=this.context.Listing_to_update.address
+            values.address=this.context.address
         }
 				if (!email===true) {
-            values.email=this.context.Listing_to_update.email
+            values.email=this.context.email
         }
 				if (!dateFunded===true) {
-            values.dateFunded=this.context.Listing_to_update.dateFunded
+            values.dateFunded=this.context.dateFunded
         }
         console.log("after if statement")
         console.log(values)
-        this.context.updateListing(values)
+        this.context.application(values)
 
         const formData= new FormData
 				formData.append('id',values.id)
@@ -69,8 +67,8 @@ class EditApplication extends React.Component{
 				formData.append('address',values.address)
 				formData.append('email',values.email)
 				formData.append('dateFunded',values.dateFunded)
-        if (this.state.upload) {
-            formData.append('upload',this.state.upload,this.state.upload.name)
+        if (this.state.imageURL) {
+            formData.append('imageURL',this.state.imageURL)
         }
 
 
@@ -84,40 +82,44 @@ class EditApplication extends React.Component{
         .then(status)
         .then(json)
         .then(()=>{
-            this.setState({redirect:`/{this.context.Listing_to_update.id}`})
-            alert("Successfully updated listing")
+            this.setState({redirect:`/{this.context.id}`})
+            alert("Successfully updated application")
         })
         .catch(console.error())
 
     }
     render(){
-        if (this.state.redirect) {
-            return <Redirect to={this.state.redirect}/>
-        }
         return(
             <>
                 <Row  type="flex" justify="space-around" align="middle">
                     <Col>
-                    <h1>Updating listing</h1>
+                    <h1>Update Application</h1>
                     </Col>
                 </Row>
                 <Form {...formItemLayout} onFinish={this._onFinish}>
                     <Form.Item name="companyName" label="Name of the Company">
-                        <Input defaultValue={this.context.Listing_to_update.companyName}></Input>
+                        <Input defaultValue={this.context.companyName}></Input>
                     </Form.Item>
                     <Form.Item name="crn" label="Company Reference Number">
-                        <Input defaultValue={this.context.Listing_to_update.crn}></Input>
+                        <Input defaultValue={this.context.crn}></Input>
                     </Form.Item>
                     <Form.Item name="address" label="Address">
-                        <TextArea defaultValue={this.context.Listing_to_update.address}></TextArea>
+                        <TextArea defaultValue={this.context.address}></TextArea>
                     </Form.Item>
 										<Form.Item name="email" label="Email">
-                        <TextArea defaultValue={this.context.Listing_to_update.email}></TextArea>
+                        <TextArea defaultValue={this.context.email}></TextArea>
                     </Form.Item>
 										<Form.Item name="dateFunded" label="Foundation Date">
-                        <TextArea defaultValue={this.context.Listing_to_update.dateFunded}></TextArea>
+                        <TextArea defaultValue={this.context.dateFunded}></TextArea>
                     </Form.Item>
-                    <Form.Item name="imageURL" label="Image">
+										/* Add select for the application status
+
+										<Select>
+                            <Select.Option value="accepted">Yes</Select.Option>
+                            <Select.Option value="rejected">No</Select.Option>
+                        </Select>
+											*/
+                    <Form.Item name="imageURL" label="Application Image">
                         <Input type="file" onChange={this.handleFile} accept="image/png, image/jpeg"/>
                     </Form.Item>
                     <Form.Item {...tailFormItemLayout}>

diff --git a/src/components/homegrid.js b/src/components/homegrid.js
@@ -3,8 +3,12 @@ import { Col, Row } from 'antd';
 import ApplicationCard from './applicationcard';
 import { status, json } from '../utilities/requestHandlers';
 import { withRouter } from 'react-router-dom';
+import UserContext from '../contexts/user';
+import {useContext} from 'react';
 
 class HomeGrid extends React.Component {
+
+	static contextType = UserContext;
 
   constructor(props) {
     super(props);
@@ -13,11 +17,18 @@ class HomeGrid extends React.Component {
     }
   }
 
+
 	componentDidMount() {
+		const username = this.context.user.username
+    const password = this.context.user.password
     let url = "https://animal-hello-3000.codio-box.uk/api/v1/applications"
     if (this.props.query) {url = `https://animal-hello-3000.codio-box.uk/api/v1/applications?query=${this.props.query}`}
-    console.log(url)
-    fetch(url)
+    fetch(url, {
+      method: "GET",
+            headers: {
+                "Authorization": "Basic " + btoa(username + ":" + password)
+            },       
+    })
     .then(status)
     .then(json)
     .then(data => {
@@ -32,9 +43,6 @@ class HomeGrid extends React.Component {
 
   render() {
     if (!this.state.applications.length) {
-      if(!this.state.found){
-        return <h3>No applications were found. Refresh the page or check your connection!</h3>
-      }
       return <h4>Loading applications...</h4>
     }
     const applicationList = this.state.applications.map(application => {

diff --git a/src/components/newApplication.js b/src/components/newApplication.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import UserContext from '../contexts/user'
-import { Form, Input, Button,Upload } from 'antd'
+import { Form, Input, Button, Upload, Row,Col, DatePicker } from 'antd'
 import { status, json } from '../utilities/requestHandlers'
 import { Redirect } from 'react-router-dom'
 const formItemLayout = {
@@ -25,10 +25,10 @@ const emailRule=[
     {required:true,message:'Please enter the company email.',whitespace:false, min:5,max:32}
 ]
 const dateFoundedRule=[
-    {required:true,message:'Please enter the foundation date of the company.',whitespace:false, min:5,max:32}
+    {required:true,message:'Please enter the foundation date of the company.',whitespace:false}
 ]
 /**
- * Form to add new listing:
+ * Form to add new application:
  */
 class NewApplication extends React.Component{
     constructor(props){
@@ -39,8 +39,7 @@ class NewApplication extends React.Component{
 						address:"",
 						email:"",
 						dateFunded:"",
-            imageURL:"",
-						redirect:null
+            imageURL:""
         }
         this.handleSubmit =this.handleSubmit.bind(this)
         this.handleFile =this.handleFile.bind(this)
@@ -67,7 +66,7 @@ class NewApplication extends React.Component{
 				formData.append('address',this.state.address)
 				formData.append('email',this.state.email)
 				formData.append('dateFunded',this.state.dateFunded)
-        formData.append('imageURL',this.state.upload,this.state.imageURL.name)
+        formData.append('imageURL',this.state.imageURL)
         fetch('https://animal-hello-3000.codio-box.uk/api/v1/applications',{
             method:"POST",
 						body:formData,
@@ -78,11 +77,11 @@ class NewApplication extends React.Component{
         .then(status)
         .then(json)
         .then(()=>{
-            alert("Successfully added new listing")
-            this.setState({redirect:"/"})// change this to all users listings pages
+            alert("Successfully added new application")
+            this.setState({redirect:"/"})// change this to all users applications pages
         })
         .catch(err => {
-            alert("Error trying to add new listing")
+            alert("Error trying to add new application")
             console.log(err)
         })
     }
@@ -96,10 +95,13 @@ class NewApplication extends React.Component{
         this.setState({upload:e.target.files[0]})
     }
     render(){
-        if (this.state.redirect) {
-            return <Redirect to={this.state.redirect} />
-        }
         return(
+					<>
+					<Row  type="flex" justify="space-around" align="middle">
+                    <Col>
+                    <h1>Create New Application</h1>
+                    </Col>
+                </Row>
             <Form {... formItemLayout} onFinish={this.handleSubmit}>
                 <Form.Item name="companyName" label="Name of the Company" rules={titleRule}>
                     <Input />
@@ -113,16 +115,17 @@ class NewApplication extends React.Component{
 								<Form.Item name="email" label="Email" rules={emailRule}>
                     <TextArea showCount={true} maxLength={500}/>
                 </Form.Item>
-								<Form.Item name="dateFunded" label="Foundation Date" rules={dateFoundedRule}>
-                    <TextArea showCount={true} maxLength={500}/>
+								<Form.Item name="dateFunded" label="Foundation Date">
+								<DatePicker onChange={this.state.dateFunded} name="dateFunded" label="Foundation Date" rules={dateFoundedRule} />
                 </Form.Item>
-                <Form.Item name="imageURL" label="Image">
-                    <Input type="file" onChange={this.handleFile} accept="image/png, image/jpeg"/>
+								<Form.Item name="imageURL" label="Application Image">
+                     <Input type="file" onChange={this.handleFile} accept="image/png, image/jpeg"/>
                 </Form.Item>
                 <Form.Item {...tailFormItemLayout}>
-                    <Button type="primary" htmlType="submit">Add new listing</Button>
+                    <Button type="primary" htmlType="submit">Add new Application</Button>
                 </Form.Item>
             </Form>
+					</>
         )
     }
 }

diff --git a/src/utilities/requestHandlers.js b/src/utilities/requestHandlers.js
@@ -3,7 +3,7 @@
  * @param {object} response - the Response() object to process
  */
 export function status(response) {
-    if (response.status >= 200 && response.status < 300) {
+    if (response.status >= 200 && response.status < 407) {
       return response;
     } else {
       return new Promise((resolve, reject) => {