8

Author: btholt

src/App.js

@@ -74,6 +74,11 @@ class App extends React.Component {
  <div>
  <header>
  <Link to="/">Adopt Me!</Link>
+ <Link to="/search-params">
+ <span aria-label="search" role="img">
+ 🔍
+ </span>
+ </Link>
  </header>
  <Provider value={this.state}>
  <Router>

src/Results.js

@@ -2,6 +2,7 @@ import React from "react";
 import pf from "petfinder-client";
 import Pet from "./Pet";
 import SearchBox from "./SearchBox";
+import { Consumer } from "./SearchContext";
 
 const petfinder = pf({
  key: process.env.API_KEY,
@@ -17,8 +18,16 @@ class Results extends React.Component {
  };
  }
  componentDidMount() {
+ this.search();
+ }
+ search = () => {
  petfinder.pet
- .find({ location: "Seattle, WA", output: "full" })
+ .find({
+ location: this.props.searchParams.location,
+ animal: this.props.searchParams.animal,
+ breed: this.props.searchParams.breed,
+ output: "full"
+ })
  .then(data => {
  let pets;
  if (data.petfinder.pets && data.petfinder.pets.pet) {
@@ -34,11 +43,11 @@ class Results extends React.Component {
  pets: pets
  });
  });
- }
+ };
  render() {
  return (
  <div className="search">
- <SearchBox />
+ <SearchBox search={this.search} />
  {this.state.pets.map(pet => {
  let breed;
  if (Array.isArray(pet.breeds.breed)) {
@@ -63,4 +72,10 @@ class Results extends React.Component {
  }
 }
 
-export default Results;
+export default function ResultsWithContext(props) {
+ return (
+ <Consumer>
+ {context => <Results {...props} searchParams={context} />}
+ </Consumer>
+ );
+}

src/SearchBox.js

@@ -3,12 +3,16 @@ import { ANIMALS } from "petfinder-client";
 import { Consumer } from "./SearchContext";
 
 class Search extends React.Component {
+ handleFormSubmit = event => {
+ event.preventDefault();
+ this.props.search();
+ };
  render() {
  return (
  <Consumer>
  {context => (
  <div className="search-params">
- <form>
+ <form onSubmit={this.handleFormSubmit}>
  <label htmlFor="location">
  Location
  <input

src/SearchParams.js

@@ -1,11 +1,15 @@
 import React from "react";
+import { navigate } from "@reach/router";
 import SearchBox from "./SearchBox";
 
 class Search extends React.Component {
+ search() {
+ navigate("/");
+ }
  render() {
  return (
  <div className="search-route">
- <SearchBox />
+ <SearchBox search={this.search} />
  </div>
  );
  }