Added changes for TLD (authorization for applications not working)

src/App.js

@@ -12,9 +12,9 @@ import Account from './components/account';
 import Register from './components/register';
 import Login from './components/login';
 import Home from './components/home';
-import Dog from './components/dog';
-import NewDog from './components/newDog';
-import EditDog from './components/editDog';
+import Application from './components/application';
+import NewApplication from './components/newApplication';
+import EditApplication from './components/editApplication';
 import Messages from './components/messages';
 import Uploader from './components/upload';
 
@@ -76,9 +76,9 @@ class App extends React.Component {
               <Route path="/register" children={<Register />} />
               <Route path="/login" children={<Login />} />
               <Route path="/upload" children={<Uploader />} />
-              <Route path="/dog/:id"  children={<Dog />} />
-							<Route path="/newdog" children={<NewDog />} />
-							<Route path="/edit/:id" component={EditDog} />
+              <Route path="/application/:id"  children={<Application />} />
+							<Route path="/newapplication" children={<NewApplication />} />
+							<Route path="/edit/:id" component={EditApplication} />
 							<Route path="/messages" children={<Messages />} />
               <Route path="/" children={<Home />} exact />
             </Switch>

src/components/dog.js → src/components/application.js

@@ -1,62 +1,62 @@
 import React from 'react';
 import { withRouter } from 'react-router';
 import { Image, Row, Col, Typography, Space, Button } from 'antd'
-import DogIcon from './dogicon';
+import ApplicationIcon from './applicationicon';
 import { status, json } from '../utilities/requestHandlers';
 
 import UserContext from '../contexts/user';
 
 const { Title, Paragraph } = Typography;
 
-class Dog extends React.Component {
+class Application extends React.Component {
 
 	static contextType = UserContext;
 
   constructor(props) {
     super(props);
 		this.deleteHandler = this.deleteHandler.bind(this)
     this.state = {
-      dog: {}
+      application: {}
     }
     this.toggleLike = this.toggleLike.bind(this);
   }
 
   componentDidMount() {
     const id = this.props.match.params.id; // available using withRouter()
 
-    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/dogs/${id}`)
+    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}`)
     .then(status)
     .then(json)
-    .then(dog => {
-			console.log(dog)
-      this.setState({dog:dog})
+    .then(application => {
+			console.log(application)
+      this.setState({application:application})
     })
     .catch(err => {
-      console.log(`Fetch error for dog ${id}`)
+      console.log(`Fetch error for application ${id}`)
     });
   }
 
   toggleLike(isSelected) {
-    // Implement same functionality as in <DogCard>
+    // Implement same functionality as in <ApplicationCard>
     // To avoid repetition (DRY principle) the handler for this
-    // and for <DogCard> should be defined in a single place
+    // and for <ApplicationCard> should be defined in a single place
     // and imported into both components.
     console.log('like was toggled');
   }
 
 	deleteHandler() {
     const username = this.context.user.username
     const password = this.context.user.password
-    console.log(`deleting dog: ${this.state.dog.ID}`)
-    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/dogs/${this.state.dog.ID}`, {
+    console.log(`deleting application: ${this.state.application.ID}`)
+    fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${this.state.application.ID}`, {
       method: "DELETE",
       headers: {
       "Authorization": "Basic " + btoa(username + ":" + password)
       }
     })
     .then(status)
     .then(user => {
-      console.log(`Deleted dog ${this.state.dog.ID}`);
+      console.log(`Deleted application ${this.state.application.ID}`);
       this.props.history.push('/')
     })
     .catch(error => {
@@ -65,44 +65,39 @@ class Dog extends React.Component {
   }
 
   render() {
-		const dog = this.state.dog;
+		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){
         adminSpace = <Space>
-                      <Button onClick={this.deleteHandler}>Delete dog</Button>
-                      <Button href={'/edit/'+ this.state.dog.ID}>Update dog</Button>
+                      <Button onClick={this.deleteHandler}>Delete application</Button>
+                      <Button href={'/edit/'+ this.state.application.ID}>Update application</Button>
                      </Space>
       }
 		}
 
-		 if (!dog) {
-      return <h3>Loading dogs...</h3>
+		 if (!application) {
+      return <h3>Loading applications...</h3>
     }
 
-    const icons = (
-      <div>
-        Likes : <DogIcon type="like" count={dog.likes} selected={dog.liked}
-          handleToggle={this.toggleLike}/><br/>
-      </div>
-    );
-
-     return( //add {adminSpace} here  //Add shelter name and breed
+     return( //add {adminSpace} here
 			<div>
         <Row type="flex" justify="space-around" align="middle">
           <Col span={6} align="center">
-          <Image width={200} alt="Dog" src={dog.imageURL} />
+          <Image width={200} alt="Application" src={application.imageURL} />
           </Col>
           <Col span={12}>
-            <Title>{dog.name}</Title>
-            <Paragraph>About: {dog.about}</Paragraph>
-						<Paragraph>Breed: {dog.breedsID}</Paragraph>
-						<Paragraph>Shelter: {dog.sheltersID}</Paragraph>
+            <Title>{application.companyName}</Title>
+            <Paragraph>Company Registration Number: {application.crn}</Paragraph>
+						<Paragraph>Address: {application.address}</Paragraph>
+						<Paragraph>Email: {application.email}</Paragraph>
+						<Paragraph>Funded in: {application.dateFunded}</Paragraph>
+						<Paragraph>Created In: {application.dateCreated}</Paragraph>
+						<Paragraph>Status: {application.status}</Paragraph>
           </Col>
           <Col span={6} align="center">
-            {icons}
 						{adminSpace}
           </Col>
         </Row>
@@ -113,4 +108,4 @@ class Dog extends React.Component {
 
 }
 
-export default withRouter(Dog);
+export default withRouter(Application);

src/components/applicationcard.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Card } from 'antd';
+import ApplicationIcon from './applicationicon';
+import NavImage from './navimage';
+import {Link} from "react-router-dom";
+
+const { Meta } = Card;
+
+class ApplicationCard extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.toggleLike = this.toggleLike.bind(this);
+  }
+
+  render() {
+    const applicationID = this.props.ID;
+    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.comapnyName} description={this.props.status} />
+      </Card>
+			</Link>
+    );
+  }
+}
+
+export default ApplicationCard; 

src/components/doggrid.js → src/components/applicationgrid.js

@@ -8,55 +8,55 @@ const grid = (
   <>
   <Row type="flex" justify="space-around">
     <Col span={6}>
-      <Link to="/dogs/1">
+      <Link to="/applications/1">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1024/400"/>} hoverable>
-          <Meta title="First Dog" description="This is about something" />
+          <Meta title="First Application" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/dogs/2">
+      <Link to="/applications/2">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1025/400"/>}>
-          <Meta title="Second Dog" description="This is about something" />
+          <Meta title="Second Application" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/dogs/3">
+      <Link to="/applications/3">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1026/400"/>}>
-          <Meta title="Third Dog" description="This is about something" />
+          <Meta title="Third Application" description="This is about something" />
         </Card>
       </Link>
     </Col>
   </Row>  
   <Row type="flex" justify="space-around">
     <Col span={6}>
-      <Link to="/dogs/4">
+      <Link to="/applications/4">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1027/400"/>}>
-          <Meta title="Fourth Dog" description="This is about something" />
+          <Meta title="Fourth Application" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/dogs/5">
+      <Link to="/applications/5">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1028/400"/>}>
-          <Meta title="Fifth Dog" description="This is about something" />
+          <Meta title="Fifth Application" description="This is about something" />
         </Card>
       </Link>
     </Col>
     <Col span={6}>
-      <Link to="/dogs/6">
+      <Link to="/applications/6">
         <Card cover={<img alt="test" src="https://picsum.photos/id/1029/400"/>}>
-          <Meta title="Sixth Dog" description="This is about something" />
+          <Meta title="Sixth Application" description="This is about something" />
         </Card>
       </Link>
     </Col>
   </Row>  
   </>
 );
 
-function DogGrid(props) {
+function ApplicationGrid(props) {
   return grid;
 }
 
-export default DogGrid;
+export default ApplicationGrid;

src/components/dogicon.js → src/components/applicationicon.js

@@ -28,7 +28,7 @@ function getIcon (theme, iconType) {
   return Icon;
 }
 
-class DogIcon extends React.Component {
+class ApplicationIcon extends React.Component {
   constructor(props){  
     super(props);  
     this.state = {
@@ -56,7 +56,7 @@ class DogIcon extends React.Component {
       this.setState({count:count})
     })
     .catch(err => {
-      console.log(`${this.props.type} icon error for dog ${this.props.id}`)
+      console.log(`${this.props.type} icon error for application ${this.props.id}`)
     });
   }
 
@@ -87,4 +87,4 @@ class DogIcon extends React.Component {
   }
 }
 
-export default DogIcon;
+export default ApplicationIcon;

src/components/editDog.js → src/components/editApplication.js

@@ -15,7 +15,7 @@ const tailFormItemLayout = {
   wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
 };
 
-class EditDog extends React.Component {
+class EditApplication extends React.Component {
 
   constructor(props) {
       super(props);
@@ -27,7 +27,7 @@ class EditDog extends React.Component {
 
   componentDidMount(){
     this.setState({
-      dogID: this.props.match.params.id
+      applicationID: this.props.match.params.id
     })
   }
 
@@ -55,7 +55,7 @@ class EditDog extends React.Component {
     if(this.state.imageURL){data.append('upload', this.state.imageURL)}
     if(this.state.name){data.append('name', this.state.name)}
     if(this.state.about){data.append('about', this.state.about)}
-    axios.put(`https://animal-hello-3000.codio-box.uk/api/v1/dogs/${this.state.dogID}`, data, { 
+    axios.put(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${this.state.applicationID}`, data, { 
       auth: {
               username: 'joe',
               password: '1234'
@@ -73,7 +73,7 @@ class EditDog extends React.Component {
   render(){
     return ( 
       <Form {...formItemLayout}>
-        <Title level={2}> Edit dog</Title>
+        <Title level={2}> Edit application</Title>
         <Form.Item name="name" label="Name">
           <Input onChange={this.handleBreedChange}/>
         </Form.Item>
@@ -91,4 +91,4 @@ class EditDog extends React.Component {
 }
 
 
-export default withRouter(EditDog);
+export default withRouter(EditApplication);

src/components/home.js

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { PageHeader, Input } from 'antd';
 import HomeGrid from './homegrid';
+import { Image } from 'antd'
+import Icon from './icon.png';
 
 const { Search } = Input;
 
@@ -16,10 +18,11 @@ function Home(props) {
   return (
       <div className="site-layout-content">
         <div style={{ padding: '2% 20%' }}>
+					<Image width={200} alt="TLD" src={Icon} />
 					<PageHeader className="site-page-header"
-            title="Dog Shelter"
-            subTitle="Welcome to the website where you will find your new friend!"/>
-          <Search placeholder="Search dogs"
+            title="Trading License Department"
+            subTitle="Here businesses can apply for trading licenses."/>
+          <Search placeholder="Search Applications"
             allowClear
             enterButton="Search"
             size="large"

src/components/homegrid.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Col, Row } from 'antd';
-import DogCard from './dogcard';
+import ApplicationCard from './applicationcard';
 import { status, json } from '../utilities/requestHandlers';
 import { withRouter } from 'react-router-dom';
 
@@ -9,46 +9,46 @@ class HomeGrid extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      dogs: []
+      applications: []
     }
   }
 
 	componentDidMount() {
-    let url = "https://animal-hello-3000.codio-box.uk/api/v1/dogs"
-    if (this.props.query) {url = `https://animal-hello-3000.codio-box.uk/api/v1/dogs?query=${this.props.query}`}
+    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)
     .then(status)
     .then(json)
     .then(data => {
-      this.setState({ dogs: data })
+      this.setState({ applications: data })
     })
     .catch(err => {
-        console.log("Error fetching dogs")
+        console.log("Error fetching applications")
         this.setState({ found: false})
 
     });
   }
 
   render() {
-    if (!this.state.dogs.length) {
+    if (!this.state.applications.length) {
       if(!this.state.found){
-        return <h3>No dogs were found. Refresh the page or check your connection!</h3>
+        return <h3>No applications were found. Refresh the page or check your connection!</h3>
       }
-      return <h4>Loading dogs...</h4>
+      return <h4>Loading applications...</h4>
     }
-    const dogList = this.state.dogs.map(dog => {
+    const applicationList = this.state.applications.map(application => {
       return (
-        <div style={{padding:"10px"}} key={dog.ID}>
+        <div style={{padding:"10px"}} key={application.ID}>
           <Col span={6}>
-            <DogCard {...dog} />
+            <ApplicationCard {...application} />
           </Col>
         </div>
       )
     });
     return (
       <Row type="flex" justify="space-around">
-        {dogList}
+        {applicationList}
       </Row>
     );
   }

src/components/nav.js

@@ -6,7 +6,7 @@ import UserContext from '../contexts/user';
 
 function Nav(props) {
   const context = useContext(UserContext);
-	//Change the new dog section for admins only!!
+	//Change the new application section for admins only!!
   return (
         <>
           <div className="logo" />
@@ -16,7 +16,7 @@ function Nav(props) {
             <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="/newdog">Add Dog</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>
         </>

src/components/newDog.js → src/components/newApplication.js

@@ -14,7 +14,7 @@ const tailFormItemLayout = {
   wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
 };
 
-class NewDog extends React.Component {
+class NewApplication extends React.Component {
 
   constructor(props) {
       super(props);
@@ -47,10 +47,10 @@ class NewDog extends React.Component {
     data.append('upload', this.state.imageURL)
     data.append('name', this.state.name)
     data.append('about', this.state.about)
-    axios.post("https://animal-hello-3000.codio-box.uk/api/v1/dogs", data, { 
+    axios.post("https://animal-hello-3000.codio-box.uk/api/v1/applications", data, { 
       auth: {
-              username: 'joe',
-              password: '1234'
+							username: 'andre',
+              password: '12345'
         },
       headers: {
             'content-type': 'multipart/form-data'
@@ -64,7 +64,7 @@ class NewDog extends React.Component {
   render(){
     return ( 
       <Form {...formItemLayout}>
-        <Title level={2}> Insert a new dog</Title>
+        <Title level={2}> Insert a new application</Title>
         <Form.Item name="name" label="Name">
           <Input onChange={this.handleBreedChange}/>
         </Form.Item>
@@ -82,4 +82,4 @@ class NewDog extends React.Component {
 }
 
 
-export default NewDog;
+export default NewApplication;

src/components/upload.js

@@ -37,7 +37,7 @@ function Uploader(props) {
       <h1>Upload</h1>
 
       <p>This is a bare-bones upload interface. It is simply to illustrate connecting to a multipart-form aware API route.</p>
-      <p>You will need to wire any realistic upload component into one of your app's forms (such as for dogs or users).</p>
+      <p>You will need to wire any realistic upload component into one of your app's forms (such as for applications or users).</p>
       <p>In addition you will need to ensure that the upload is correctly authenticated if appropriate, using the 'headers' prop.</p>
 
       <Upload {...uploadProps}>