Skip to content

Commit

Permalink
Info about the dogs appears when Card is clicked
Browse files Browse the repository at this point in the history
novaisea committed May 13, 2021
1 parent 9d4b5f9 commit 16432c4
Showing 2 changed files with 44 additions and 6 deletions.
47 changes: 41 additions & 6 deletions src/components/dog.js
Original file line number Diff line number Diff line change
@@ -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>

);
}

3 changes: 3 additions & 0 deletions src/components/dogcard.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
}

0 comments on commit 16432c4

Please sign in to comment.