diff --git a/public/favicon.ico b/public/favicon.ico index 72f8e0d..17fe431 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/App.js b/src/App.js index d05b286..9e12823 100644 --- a/src/App.js +++ b/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 { } /> } /> } /> - } /> - } /> - + } /> + } /> + } /> } exact /> diff --git a/src/components/dog.js b/src/components/application.js similarity index 54% rename from src/components/dog.js rename to src/components/application.js index c2da5ec..b69d33e 100644 --- a/src/components/dog.js +++ b/src/components/application.js @@ -1,14 +1,14 @@ 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; @@ -16,7 +16,7 @@ class Dog extends React.Component { super(props); this.deleteHandler = this.deleteHandler.bind(this) this.state = { - dog: {} + application: {} } this.toggleLike = this.toggleLike.bind(this); } @@ -24,22 +24,22 @@ class Dog extends React.Component { 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 + // Implement same functionality as in // To avoid repetition (DRY principle) the handler for this - // and for should be defined in a single place + // and for should be defined in a single place // and imported into both components. console.log('like was toggled'); } @@ -47,8 +47,8 @@ class Dog extends React.Component { 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) @@ -56,7 +56,7 @@ class Dog extends React.Component { }) .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 = if(this.context.user.loggedIn){ if(this.context.user.loggedIn){ adminSpace = - - + + } } - if (!dog) { - return

Loading dogs...

+ if (!application) { + return

Loading applications...

} - const icons = ( -
- Likes :
-
- ); - - return( //add {adminSpace} here //Add shelter name and breed + return( //add {adminSpace} here
- Dog + Application - {dog.name} - About: {dog.about} - Breed: {dog.breedsID} - Shelter: {dog.sheltersID} + {application.companyName} + Company Registration Number: {application.crn} + Address: {application.address} + Email: {application.email} + Funded in: {application.dateFunded} + Created In: {application.dateCreated} + Status: {application.status} - {icons} {adminSpace} @@ -113,4 +108,4 @@ class Dog extends React.Component { } -export default withRouter(Dog); +export default withRouter(Application); diff --git a/src/components/applicationcard.js b/src/components/applicationcard.js new file mode 100644 index 0000000..4172f14 --- /dev/null +++ b/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 ( + + } + hoverable={true}> + + + + + ); + } +} + +export default ApplicationCard; diff --git a/src/components/doggrid.js b/src/components/applicationgrid.js similarity index 60% rename from src/components/doggrid.js rename to src/components/applicationgrid.js index e54f379..5dc27fc 100644 --- a/src/components/doggrid.js +++ b/src/components/applicationgrid.js @@ -8,46 +8,46 @@ const grid = ( <> - + } hoverable> - + - + }> - + - + }> - + - + }> - + - + }> - + - + }> - + @@ -55,8 +55,8 @@ const grid = ( ); -function DogGrid(props) { +function ApplicationGrid(props) { return grid; } -export default DogGrid; +export default ApplicationGrid; diff --git a/src/components/dogicon.js b/src/components/applicationicon.js similarity index 92% rename from src/components/dogicon.js rename to src/components/applicationicon.js index 405f693..09f9905 100644 --- a/src/components/dogicon.js +++ b/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; diff --git a/src/components/dogcard.js b/src/components/dogcard.js deleted file mode 100644 index 0f6bc0a..0000000 --- a/src/components/dogcard.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { Card } from 'antd'; -import DogIcon from './dogicon'; -import NavImage from './navimage'; -import {Link} from "react-router-dom"; - -const { Meta } = Card; - -class DogCard extends React.Component { - - constructor(props) { - super(props); - this.toggleLike = this.toggleLike.bind(this); - } - - toggleLike(isSelected) { - console.log(`toggle LIKE on dog ${this.props.ID}`); - console.log(`new value ${isSelected}`); - // code can be added here to update the API with new liked status - } - - render() { - const dogID = this.props.ID; - return ( - - } - hoverable={true} - actions={[ - - ]}> - - - - - ); - } -} - -export default DogCard; diff --git a/src/components/editDog.js b/src/components/editApplication.js similarity index 87% rename from src/components/editDog.js rename to src/components/editApplication.js index 0e9543d..9edab12 100644 --- a/src/components/editDog.js +++ b/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 (
- Edit dog + Edit application @@ -91,4 +91,4 @@ class EditDog extends React.Component { } -export default withRouter(EditDog); \ No newline at end of file +export default withRouter(EditApplication); \ No newline at end of file diff --git a/src/components/home.js b/src/components/home.js index fc2abaa..299810d 100644 --- a/src/components/home.js +++ b/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 (
+ TLD - + { - 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

No dogs were found. Refresh the page or check your connection!

+ return

No applications were found. Refresh the page or check your connection!

} - return

Loading dogs...

+ return

Loading applications...

} - const dogList = this.state.dogs.map(dog => { + const applicationList = this.state.applications.map(application => { return ( -
+
- +
) }); return ( - {dogList} + {applicationList} ); } diff --git a/src/components/icon.png b/src/components/icon.png new file mode 100644 index 0000000..81b5af6 Binary files /dev/null and b/src/components/icon.png differ diff --git a/src/components/nav.js b/src/components/nav.js index 92fecdc..d04a7fd 100644 --- a/src/components/nav.js +++ b/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 ( <>
@@ -16,7 +16,7 @@ function Nav(props) { Register Messages Account - Add Dog + Add Application Logout diff --git a/src/components/newDog.js b/src/components/newApplication.js similarity index 86% rename from src/components/newDog.js rename to src/components/newApplication.js index d9ae760..e660120 100644 --- a/src/components/newDog.js +++ b/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 ( - Insert a new dog + Insert a new application @@ -82,4 +82,4 @@ class NewDog extends React.Component { } -export default NewDog; \ No newline at end of file +export default NewApplication; \ No newline at end of file diff --git a/src/components/upload.js b/src/components/upload.js index 5048f1c..d80b297 100644 --- a/src/components/upload.js +++ b/src/components/upload.js @@ -37,7 +37,7 @@ function Uploader(props) {

Upload

This is a bare-bones upload interface. It is simply to illustrate connecting to a multipart-form aware API route.

-

You will need to wire any realistic upload component into one of your app's forms (such as for dogs or users).

+

You will need to wire any realistic upload component into one of your app's forms (such as for applications or users).

In addition you will need to ensure that the upload is correctly authenticated if appropriate, using the 'headers' prop.