adding solution

react-props-and-state-lab-onl01-seng-pt-041320/src/components/App.js

@@ -1,20 +1,43 @@
-import React from 'react'
+import React from "react";
 
-import Filters from './Filters'
-import PetBrowser from './PetBrowser'
+import Filters from "./Filters";
+import PetBrowser from "./PetBrowser";
 
 class App extends React.Component {
   constructor() {
-    super()
+    super();
 
     this.state = {
       pets: [],
       filters: {
-        type: 'all'
-      }
-    }
+        type: "all",
+      },
+    };
   }
 
+  fetchPets = () => {
+    let endpoint = "/api/pets";
+
+    if (this.state.filters.type !== "all") {
+      endpoint += `?type=${this.state.filters.type}`;
+    }
+
+    fetch(endpoint)
+      .then((res) => res.json())
+      .then((pets) => this.setState({ pets }));
+  };
+
+  onChangeType = ({ target: { value } }) => {
+    this.setState({ filters: { ...this.state.filters, type: value } });
+  };
+
+  onAdoptPet = (petId) => {
+    const pets = this.state.pets.map((p) => {
+      return p.id === petId ? { ...p, isAdopted: true } : p;
+    });
+    this.setState({ pets });
+  };
+
   render() {
     return (
       <div className="ui container">
@@ -24,16 +47,19 @@ class App extends React.Component {
         <div className="ui container">
           <div className="ui grid">
             <div className="four wide column">
-              <Filters />
+              <Filters
+                onChangeType={this.onChangeType}
+                onFindPetsClick={this.fetchPets}
+              />
             </div>
             <div className="twelve wide column">
-              <PetBrowser />
+              <PetBrowser pets={this.state.pets} onAdoptPet={this.onAdoptPet} />
             </div>
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default App
+export default App;

react-props-and-state-lab-onl01-seng-pt-041320/src/components/Filters.js

@@ -1,12 +1,12 @@
-import React from 'react'
+import React from "react";
 
 class Filters extends React.Component {
   render() {
     return (
       <div className="ui form">
         <h3>Animal type</h3>
         <div className="field">
-          <select name="type" id="type">
+          <select name="type" id="type" onChange={this.props.onChangeType}>
             <option value="all">All</option>
             <option value="cat">Cats</option>
             <option value="dog">Dogs</option>
@@ -15,11 +15,16 @@ class Filters extends React.Component {
         </div>
 
         <div className="field">
-          <button className="ui secondary button">Find pets</button>
+          <button
+            className="ui secondary button"
+            onClick={this.props.onFindPetsClick}
+          >
+            Find pets
+          </button>
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default Filters
+export default Filters;

react-props-and-state-lab-onl01-seng-pt-041320/src/components/Pet.js

@@ -1,29 +1,37 @@
-import React from 'react'
+import React from "react";
 
 class Pet extends React.Component {
   render() {
     return (
       <div className="card">
         <div className="content">
           <a className="header">
-            {/*'♀' OR '♂' */}
-            PET NAME
+            {this.props.pet.name}{" "}
+            {this.props.pet.gender === "female" ? "♀" : "♂"}{" "}
           </a>
           <div className="meta">
-            <span className="date">PET TYPE</span>
+            <span className="date">{this.props.pet.type}</span>
           </div>
           <div className="description">
-            <p>Age: PET AGE</p>
-            <p>Weight: PET WEIGHT</p>
+            <p>Age: {this.props.pet.age}</p>
+            <p>Weight: {this.props.pet.weight}</p>
           </div>
         </div>
         <div className="extra content">
-          <button className="ui disabled button">Already adopted</button>
-          <button className="ui primary button">Adopt pet</button>
+          {this.props.pet.isAdopted ? (
+            <button className="ui disabled button">Already adopted</button>
+          ) : (
+            <button
+              className="ui primary button"
+              onClick={() => this.props.onAdoptPet(this.props.pet.id)}
+            >
+              Adopt pet
+            </button>
+          )}
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default Pet
+export default Pet;

react-props-and-state-lab-onl01-seng-pt-041320/src/components/PetBrowser.js

@@ -1,11 +1,15 @@
-import React from 'react'
+import React from "react";
 
-import Pet from './Pet'
+import Pet from "./Pet";
 
 class PetBrowser extends React.Component {
   render() {
-    return <div className="ui cards">PET COMPONENT SHOULD GO HERE</div>
+    const petCards = this.props.pets.map((pet) => (
+      <Pet pet={pet} key={pet.id} onAdoptPet={this.props.onAdoptPet} />
+    ));
+
+    return <div className="ui cards">{petCards}</div>;
   }
 }
 
-export default PetBrowser
+export default PetBrowser;