Added images for both users and dogs (need to add and edit dogs)

src/components/account.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import UserContext from '../contexts/user';
+import { Image } from 'antd'
 import {useContext} from 'react';
 
 
@@ -36,6 +37,7 @@ function Account(props) {
   return (
     <>
       <h1>Account</h1>
+			<Image width={200} alt="avatarURL" src={user.avatarURL} />
 			<p>Username: {user.username} </p>
 			<p>Email: {user.email}</p>
       {Object.keys(profile).map(key => <li key={key}>{key}: {profile[key]}</li>)}

src/components/dog.js

@@ -4,9 +4,13 @@ import { Image, Row, Col, Typography, Space, Button } from 'antd'
 import DogIcon from './dogicon';
 import { status, json } from '../utilities/requestHandlers';
 
+import UserContext from '../contexts/user';
+
 const { Title, Paragraph } = Typography;
 
 class Dog extends React.Component {
+
+	static contextType = UserContext;
 
   constructor(props) {
     super(props);
@@ -61,20 +65,20 @@ class Dog extends React.Component {
   }
 
   render() {
-		const user = this.state.user;
 		const dog = this.state.dog;
-		/*
+
 		//Error Here!! Change the user.role to a valid verification
 		let adminSpace = <Space></Space>
-      if(user.role == 'admin'){
+		if(this.context.user.loggedIn){
+      if(this.context.user.loggedIn){
         adminSpace = <Space>
                       <Button onClick={this.deleteHandler}>Delete dog</Button>
-                      <Button href={'/edit/'+ dog.Id}>Update dog</Button>
+                      <Button href={'/edit/'+ this.state.dog.ID}>Update dog</Button>
                      </Space>
       }
-		*/
-		
-		 if (!this.state.dog) {
+		}
+
+		 if (!dog) {
       return <h3>Loading dogs...</h3>
     }
 
@@ -85,18 +89,21 @@ class Dog extends React.Component {
       </div>
     );
 
-     return( //add {adminSpace here
+     return( //add {adminSpace} here  //Add shelter name and breed
 			<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="Dog" src={dog.imageURL} />
           </Col>
           <Col span={12}>
             <Title>{dog.name}</Title>
-            <Paragraph>{dog.about}</Paragraph>
+            <Paragraph>About: {dog.about}</Paragraph>
+						<Paragraph>Breed: {dog.breedsID}</Paragraph>
+						<Paragraph>Shelter: {dog.sheltersID}</Paragraph>
           </Col>
           <Col span={6} align="center">
             {icons}
+						{adminSpace}
           </Col>
         </Row>
       </div>

src/components/editDog.js

@@ -33,46 +33,32 @@ class EditDog extends React.Component {
 
   handleBreedChange=event=>{
     this.setState({
-      breed: event.target.value
+      name: event.target.value
     })
   }
 
   handleAgeChange=event=>{
     this.setState({
-      age: event.target.value
+      about: event.target.value
     })
   }
-
-  handleSizeChange=event=>{
-    this.setState({
-      size: event.target.value
-    })
-  }
-
-  handleDescriptionChange=event=>{
-    this.setState({
-      description: event.target.value
-    })
-  }
-
+
   handleImageChange=event=>{
     this.setState({
-      selectedFile: event.target.files[0],
+      imageURL: event.target.files[0],
       loaded: 0,
     })
   }
 
   onClickHandler = () => {
     const data = new FormData() 
-    if(this.state.selectedFile){data.append('upload', this.state.selectedFile)}
-    if(this.state.breed){data.append('breed', this.state.breed)}
-    if(this.state.age){data.append('age', this.state.age)}
-    if(this.state.size){data.append('size', this.state.size)}
-    if(this.state.description){data.append('description', this.state.description)}
+    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, { 
       auth: {
-              username: 'daniel',
-              password: 'abc'
+              username: 'joe',
+              password: '1234'
         },
       headers: {
             'content-type': 'multipart/form-data'
@@ -88,18 +74,12 @@ class EditDog extends React.Component {
     return ( 
       <Form {...formItemLayout}>
         <Title level={2}> Edit dog</Title>
-        <Form.Item name="breed" label="Breed">
+        <Form.Item name="name" label="Name">
           <Input onChange={this.handleBreedChange}/>
         </Form.Item>
-        <Form.Item name="age" label="Age">
+        <Form.Item name="about" label="About">
           <Input onChange={this.handleAgeChange}/>
         </Form.Item>
-        <Form.Item name="size" label="Size">
-          <Input onChange={this.handleSizeChange}/>
-        </Form.Item>
-        <Form.Item name="description" label="Description">
-          <TextArea rows={3} onChange={this.handleDescriptionChange}/>
-        </Form.Item >
         <Form.Item label="Image">
           <Input type="file" name="file" onChange={this.handleImageChange}/>
         </Form.Item>

src/components/home.js

@@ -16,14 +16,14 @@ function Home(props) {
   return (
       <div className="site-layout-content">
         <div style={{ padding: '2% 20%' }}>
+					<PageHeader className="site-page-header"
+            title="Dog Shelter"
+            subTitle="Welcome to the website where you will find your new friend!"/>
           <Search placeholder="Search dogs"
             allowClear
             enterButton="Search"
             size="large"
             onSearch={searchHandler}/>
-          <PageHeader className="site-page-header"
-            title="Dog Shelter"
-            subTitle="Welcome to the website where you will find your new friend!"/>
         </div>  
         <HomeGrid key={search} query={search}/>
       </div>

src/components/messages.js

@@ -1,11 +1,45 @@
-import React from 'react'; 
+import react, { useContext }  from 'react'
+import {Form, Input, Button} from 'antd'
+import { Redirect } from 'react-router-dom'
+import {status,json} from '../utilities/requestHandlers'
+import UserContext from  '../contexts/user'
+const { TextArea } = Input
+// Form formating :
+const formItemLayout = {
+    labelCol: { xs: { span: 24 }, sm: { span: 6 } },
+    wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
+  }
+const tailFormItemLayout = {
+wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
+}
 
+function _onFinish(values) {
+    const {msg}=values
+    console.log(`Recieved values ${values}`)
+}
+/**
+ * Contact form regarding specifique a lisiting
+ */
 function Messages(props) {
-  return ( 
-    <>
-      <p>This is where the messages page is displayed</p> 
-    </>
-  ); 
+    const context = useContext(UserContext)
+    console.log(context)
+    const _form =(
+        <Form{...formItemLayout}>
+
+        <Form.Item name="message" label="Message">
+            <TextArea showCount={true} maxLength={500} placeholder={`Enter you message...`}/>
+        </Form.Item>
+        <Form.Item {...tailFormItemLayout}>
+            <Button htmlType="submit" type="primary">Contact</Button>
+            {/* {buttons} */}
+        </Form.Item>
+        </Form>
+    )
+    return(
+        <Form {...formItemLayout} onFinish={_onFinish}>
+          {_form}  
+        </Form>
+    )    
 }
 
 export default Messages;

src/components/nav.js

@@ -6,6 +6,7 @@ import UserContext from '../contexts/user';
 
 function Nav(props) {
   const context = useContext(UserContext);
+	//Change the new dog section for admins only!!
   return (
         <>
           <div className="logo" />
@@ -15,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.role!=='admin'}><Link to="/newdog">Add Dog</Link></Menu.Item>
+            <Menu.Item key="6" disabled={!context.user.loggedIn}><Link to="/newdog">Add Dog</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

@@ -25,46 +25,32 @@ class NewDog extends React.Component {
   }
   handleBreedChange=event=>{
     this.setState({
-      breed: event.target.value
+      name: event.target.value
     })
   }
 
   handleAgeChange=event=>{
     this.setState({
-      age: event.target.value
+      about: event.target.value
     })
   }
-
-  handleSizeChange=event=>{
-    this.setState({
-      size: event.target.value
-    })
-  }
-
-  handleDescriptionChange=event=>{
-    this.setState({
-      description: event.target.value
-    })
-  }
-
+
   handleImageChange=event=>{
     this.setState({
-      selectedFile: event.target.files[0],
+      imageURL: event.target.files[0],
       loaded: 0,
     })
   }
 
   onClickHandler = () => {
     const data = new FormData() 
-    data.append('upload', this.state.selectedFile)
-    data.append('breed', this.state.breed)
-    data.append('age', this.state.age)
-    data.append('size', this.state.size)
-    data.append('description', this.state.description)
+    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, { 
       auth: {
-              username: 'daniel',
-              password: 'abc'
+              username: 'joe',
+              password: '1234'
         },
       headers: {
             'content-type': 'multipart/form-data'
@@ -79,18 +65,12 @@ class NewDog extends React.Component {
     return ( 
       <Form {...formItemLayout}>
         <Title level={2}> Insert a new dog</Title>
-        <Form.Item name="breed" label="Breed">
+        <Form.Item name="name" label="Name">
           <Input onChange={this.handleBreedChange}/>
         </Form.Item>
-        <Form.Item name="age" label="Age">
+        <Form.Item name="about" label="About">
           <Input onChange={this.handleAgeChange}/>
         </Form.Item>
-        <Form.Item name="size" label="Size">
-          <Input onChange={this.handleSizeChange}/>
-        </Form.Item>
-        <Form.Item name="description" label="Description">
-          <TextArea rows={3} onChange={this.handleDescriptionChange}/>
-        </Form.Item >
         <Form.Item label="Image">
           <Input type="file" name="file" onChange={this.handleImageChange}/>
         </Form.Item>