3 - part two

Author: btholt

package-lock.json

@@ -30,6 +30,7 @@
  "prettier": "^1.14.2"
  },
  "dependencies": {
+ "petfinder-client": "0.0.1",
  "react": "^16.4.2",
  "react-dom": "^16.4.2"
  }

package.json

@@ -1,15 +1,64 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import pf from "petfinder-client";
 import Pet from "./Pet";
 
+const petfinder = pf({
+ key: process.env.API_KEY,
+ secret: process.env.API_SECRET
+});
+
 class App extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ pets: []
+ };
+ }
+ componentDidMount() {
+ petfinder.pet
+ .find({ location: "Seattle, WA", output: "full" })
+ .then(data => {
+ let pets;
+ if (data.petfinder.pets && data.petfinder.pets.pet) {
+ if (Array.isArray(data.petfinder.pets.pet)) {
+ pets = data.petfinder.pets.pet;
+ } else {
+ pets = [data.petfinder.pets.pet];
+ }
+ } else {
+ pets = [];
+ }
+ this.setState({
+ pets: pets
+ });
+ });
+ }
  render() {
  return (
  <div>
  <h1>Adopt Me!</h1>
- <Pet name="Luna" animal="dog" breed="Havanese" />
- <Pet name="Pepper" animal="bird" breed="Cockatiel" />
- <Pet name="Doink" animal="cat" breed="Mix" />
+ <div className="search">
+ {this.state.pets.map(pet => {
+ let breed;
+ if (Array.isArray(pet.breeds.breed)) {
+ breed = pet.breeds.breed.join(", ");
+ } else {
+ breed = pet.breeds.breed;
+ }
+ return (
+ <Pet
+ animal={pet.animal}
+ key={pet.id}
+ name={pet.name}
+ breed={breed}
+ media={pet.media}
+ location={`${pet.contact.city}, ${pet.contact.state}`}
+ />
+ );
+ })}
+ </div>
  </div>
  );
  }

src/App.js

@@ -1,13 +1,30 @@
 import React from "react";
 
-const Pet = props => {
- return (
- <div>
- <h1>{props.name}</h1>
- <h2>{props.animal}</h2>
- <h2>{props.breed}</h2>
- </div>
- );
-};
+class Pet extends React.Component {
+ render() {
+ const { name, animal, breed, media, location } = this.props;
+ let photos = [];
+ if (media && media.photos && media.photos.photo) {
+ photos = media.photos.photo.filter(photo => photo["@size"] === "pn");
+ }
+
+ let hero = "http://placecorgi.com/300/300";
+ if (photos[0] && photos[0].value) {
+ hero = photos[0].value;
+ }
+
+ return (
+ <div className="pet">
+ <div className="image-container">
+ <img src={hero} alt={name} />
+ </div>
+ <div className="info">
+ <h1>{name}</h1>
+ <h2>{`${animal} — ${breed} — ${location}`}</h2>
+ </div>
+ </div>
+ );
+ }
+}
 
 export default Pet;

src/Pet.js

@@ -5,6 +5,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="./style.css">
  <title>Pet Adopter</title>
 </head>