From 16432c497111411de687e04a716abcca39499582 Mon Sep 17 00:00:00 2001
From: Andre Emiliano <novaisea@coventry.ac.uk>
Date: Thu, 13 May 2021 16:26:37 +0000
Subject: [PATCH] Info about the dogs appears when Card is clicked

---
 src/components/dog.js     | 47 ++++++++++++++++++++++++++++++++++-----
 src/components/dogcard.js |  3 +++
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/components/dog.js b/src/components/dog.js
index e3a0404..1622652 100644
--- a/src/components/dog.js
+++ b/src/components/dog.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { withRouter } from 'react-router';
-import { Image, Row, Col, Typography } from 'antd'
+import { Image, Row, Col, Typography, Space, Button } from 'antd'
 import DogIcon from './dogicon';
 import { status, json } from '../utilities/requestHandlers';
 
@@ -10,8 +10,9 @@ class Dog extends React.Component {
 
   constructor(props) {
     super(props);
+		this.deleteHandler = this.deleteHandler.bind(this)
     this.state = {
-      dog: undefined
+      dog: {}
     }
     this.toggleLike = this.toggleLike.bind(this);
   }
@@ -23,6 +24,7 @@ class Dog extends React.Component {
     .then(status)
     .then(json)
     .then(dog => {
+			console.log(dog)
       this.setState({dog:dog})
     })
     .catch(err => {
@@ -37,12 +39,44 @@ class Dog extends React.Component {
     // 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}`, {
+      method: "DELETE",
+      headers: {
+      "Authorization": "Basic " + btoa(username + ":" + password)
+      }
+    })
+    .then(status)
+    .then(user => {
+      console.log(`Deleted dog ${this.state.dog.ID}`);
+      this.props.history.push('/')
+    })
+    .catch(error => {
+      console.log('Delete failed' + error);
+    });
+  }
 
   render() {
-    if (!this.state.dog) {
+		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'){
+        adminSpace = <Space>
+                      <Button onClick={this.deleteHandler}>Delete dog</Button>
+                      <Button href={'/edit/'+ dog.Id}>Update dog</Button>
+                     </Space>
+      }
+		*/
+		
+		 if (!this.state.dog) {
       return <h3>Loading dogs...</h3>
     }
-    const dog = this.state.dog;
 
     const icons = (
       <div>
@@ -51,8 +85,8 @@ class Dog extends React.Component {
       </div>
     );
 
-    return (
-      <div>
+     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} />
@@ -66,6 +100,7 @@ class Dog extends React.Component {
           </Col>
         </Row>
       </div>
+
     );
   }
 
diff --git a/src/components/dogcard.js b/src/components/dogcard.js
index 27bde71..0f6bc0a 100644
--- a/src/components/dogcard.js
+++ b/src/components/dogcard.js
@@ -2,6 +2,7 @@ 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;
 
@@ -21,6 +22,7 @@ class DogCard extends React.Component {
   render() {
     const dogID = this.props.ID;
     return (
+			<Link to={`/dog/${dogID}`}>
       <Card
         style={{ width: 320 }}
         cover={<NavImage alt={`Dog ${dogID}`} src={this.props.imageURL} to={`/dogs/${dogID}`} />}
@@ -32,6 +34,7 @@ class DogCard extends React.Component {
         
         <Meta title={this.props.name} description={this.props.about} />
       </Card>
+			</Link>
     );
   }
 }