/
Goodreads.jsx
83 lines (77 loc) · 1.79 KB
/
Goodreads.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React, { Component } from "react";
import { graphql } from "gatsby";
export const testGoodreads = graphql`
fragment TestGoodreads on Query {
allGoodreadsShelf {
edges {
node {
id
name
reviews {
id
book {
id
title
authors {
id
name
books {
id
}
}
}
}
}
}
}
}
`;
class Goodreads extends Component {
componentDidMount() {}
getShelf(name) {
const shelves = this.props.reviewEdges;
for (let i = 0; i < shelves.length; i += 1) {
if (shelves[i].node.name === name) {
return shelves[i].node;
}
}
return null;
}
render() {
const currentBook = this.getShelf("currently-reading").reviews[0].book;
const lastBook = this.getShelf("read").reviews[0].book;
return (
<div>
<h3>Books</h3>
<h3>Currently Reading</h3>
<img
style={{ height: "160px" }}
alt={`${currentBook.title} cover`}
src={currentBook.image_url}
/>
<a href={currentBook.link}>
<h4>{currentBook.title}</h4>
</a>
<h4>
By{" "}
<a href={currentBook.authors[0].link}>
{currentBook.authors[0].name}
</a>
</h4>
<h3>Last Read</h3>
<img
style={{ height: "160px" }}
alt={`${lastBook.title} cover`}
src={lastBook.image_url}
/>
<a href={lastBook.link}>
<h4>{lastBook.title}</h4>
</a>
<h4>
By <a href={lastBook.authors[0].link}>{lastBook.authors[0].name}</a>
</h4>
</div>
);
}
}
export default Goodreads;