Ada pets api solution

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
     "bootstrap": "^4.4.1",
     "bootstrap-react": "^0.3.1",
     "json-server": "^0.15.1",

src/App.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import axios from 'axios';
 import PetList from './components/PetList';
 import PetDetails from './components/PetDetails';
 import SearchBar from './components/SearchBar';
@@ -14,12 +15,25 @@ class App extends Component {
     super(props);
 
     this.state = {
-      petList: pets,
+      petList: [],
       currentPet: undefined,
       searchTerm: '',
+      error: '',
     };
   }
 
+  componentDidMount () {
+    axios.get('http://localhost:3000/pets')
+      .then((response) => {
+        this.setState({
+          petList: response.data,
+        });
+      })
+      .catch((error) => {
+        // TODO
+      });
+  }
+
   filteredList = () => {
     return this.state.petList.filter((pet) => {
       const text = (`${ pet.name } ${ pet.about } ${ pet.location } ${ pet.species }`).toUpperCase();
@@ -40,27 +54,39 @@ class App extends Component {
   }
 
   deletePet = (petId) => {
-    const petList = this.state.petList.filter((pet) => {
-      return pet.id !== petId;
-    });
-
-    this.setState({
-      petList,
-      fullList: petList,
-    });
-  }
+    axios.delete(`http://localhost:3000/pets/${ petId }`)
+      .then((response) => {
+        const petList = this.state.petList.filter((pet) => pet.id !== petId);
+
+        this.setState({
+          petList,
+          fullList: petList
+        });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  };
 
   addPet = (pet) => {
-
-    const { petList } = this.state;
-    const petIds = petList.map((pet) => pet.id);
-    const maxId = Math.max(...petIds);
-    pet.id = maxId + 1;
-    petList.push(pet);
-
-    this.setState(petList);
+    console.log('pet = ', pet);
+    axios.post('http://localhost:3000/pets', pet)
+      .then((response) => {
+        // We can update the state so we don't need to make another GET request
+        const updatedData = this.state.petList;
+        updatedData.push(response.data);
+        this.setState({
+          petList: updatedData,
+          error: ''
+        });
+      })
+      .catch((error) => {
+        // Use the same idea we had in our GET request
+        this.setState({ error: error.message });
+      });
   }
 
+
   filterPets = (searchTerm) => {
     this.setState({
       searchTerm,
@@ -75,6 +101,7 @@ class App extends Component {
       <main className="App">
         <header className="app-header">
           <h1>Ada Pets</h1>
+          <p>{this.state.error ? `Error: ${ this.state.error }` : ''} </p>
         </header>
         <section className="search-bar-wrapper">
           { /* Wave 4:  Place to add the SearchBar component */}

src/components/test/NewPetForm.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react'
+import NewPetForm from '../NewPetForm';
+
+describe('NewPetForm', () => {
+  test('that it matches the existing snapshot', () => {
+    // Arrange-Act
+    const container = render(
+      <NewPetForm
+        addPetCallback={() => { }}
+      />
+    );
+
+    // Assert
+    expect(container.asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});

src/components/test/PetCard.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react'
+import PetCard from '../PetCard';
+
+describe('PetCard', () => {
+  afterEach(cleanup);
+
+  test('that it matches the existing snapshot', () => {
+    // Arrange-Act
+    const { asFragment } = render(<PetCard
+      id={1}
+      name={"Samson"}
+      species={"Cat"}
+      about={"A very awesome cat!  Don't touch the hair!"}
+      location={"Seattle, WA"}
+      deletePetCallback={() => { }}
+      selectPetCallback={() => { }}
+    />);
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('The "selectPetCallback" function is called when the `select` button is clicked on', () => {
+
+    // Arrange
+    // Create a mock callback function
+    const selectPet = jest.fn();
+
+    // Render a PetCard
+    const container = render(<PetCard
+      id={1}
+      name={"Samson"}
+      species={"Cat"}
+      about={"A very awesome cat!  Dont' touch the hair"}
+      location={"Seattle, WA"}
+      deletePetCallback={() => { }}
+      selectPetCallback={selectPet}
+    />);
+
+    // Act
+    // Find the "Select" button
+    const selectButton = container.getByText(/Select/);
+    // Trigger a 'click' event
+    selectButton.click();
+
+    // Assert
+    // Verify that the callback function was called.
+    expect(selectPet).toHaveBeenCalled();
+  });
+});

src/components/test/__snapshots__/NewPetForm.test.js.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewPetForm that it matches the existing snapshot 1`] = `
+<DocumentFragment>
+  <form
+    class="new-pet-form"
+  >
+    <h3>
+      Add a Pet
+    </h3>
+    <div>
+      <label
+        class="new-pet-form--label"
+        for="name"
+      >
+        Name: 
+      </label>
+      <input
+        id="name"
+        name="name"
+        value=""
+      />
+    </div>
+    <div>
+      <label
+        class="new-pet-form--label"
+        for="species"
+      >
+        Species: 
+      </label>
+      <select
+        id="species"
+        name="species"
+      >
+        <option
+          value=""
+        />
+        <option
+          value="dog"
+        >
+          Dog
+        </option>
+        <option
+          value="cat"
+        >
+          Cat
+        </option>
+      </select>
+    </div>
+    <div>
+      <label
+        class="new-pet-form--label"
+        for="image"
+      >
+        Image: 
+      </label>
+      <input
+        id="image"
+        name="image"
+        value=""
+      />
+    </div>
+    <div>
+      <label
+        class="new-pet-form--label"
+        for="location"
+      >
+        Location: 
+      </label>
+      <input
+        id="location"
+        name="location"
+        value=""
+      />
+    </div>
+    <div>
+      <label
+        class="new-pet-form--label"
+        for="about"
+      >
+        About: 
+      </label>
+    </div>
+    <div>
+      <textarea
+        class="new-pet-form--about"
+        id="about"
+        name="about"
+      />
+    </div>
+    <input
+      class="btn btn-success new-pet-form--submit"
+      name="submit"
+      type="submit"
+      value="Add a Pet"
+    />
+  </form>
+</DocumentFragment>
+`;

src/components/test/__snapshots__/PetCard.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PetCard that it matches the existing snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="card pet-card"
+  >
+    <section
+      class="pet-card--header"
+    >
+      ❓ 1 - Samson
+      <button
+        class="btn btn-primary pet-card--select-pet-btn"
+      >
+        Select
+      </button>
+      <button
+        aria-label="Close"
+        class="btn btn-danger pet-card--close-btn"
+        type="button"
+      >
+        Close
+      </button>
+    </section>
+    <section
+      class="pet-card--body"
+    >
+      A very awesome cat!  Don't touch the hair!
+    </section>
+    <section
+      class="pet-card--footer text-muted"
+    >
+      Seattle, WA
+    </section>
+  </div>
+</DocumentFragment>
+`;

src/data/pets.json

@@ -17,48 +17,65 @@
       "name": "Ethan B",
       "species": "dog",
       "about": "This is Ethan. He is a 12 week old Husky/spaniel mix. Right now he weighs about 14 pounds but will be a large dog when grown. Ethan is a love of a boy. He’s quiet and gentle. He is definitely the most easy going of his 8 siblings. His demeanor is playful yet not rambunctious like most puppies. This little charmer will win you over. He does have a partial blue eye which makes him look a little odd but I think it’s gorgeous. HS\n\n\n**It is rare that we know with certainty the ages or mixes that make up our wonderful dogs, but we do our best to be as accurate as possible based upon our many years in rescue.**\n\nAdoption: $325 which covers quarantine, shots, worming, food, medical records, spaying/neutering, microchip, and an Alabama State Health Certificate.\n\nTransport, if needed : $120.00 We consider the transport to be of great importance and, as such, take particular care of the dogs during the trip from Alabama. We make every effort to arrive with healthy and minimally stressed dogs.\n\nWeight Scale: Small = less than 25\n\nMedium = 26-60\n\nLarge = 61-100",
-      "images": ["/images/pet-2-img-1.jpg", "/images/pet-2-img-3.jpg"],
+      "images": [
+        "/images/pet-2-img-1.jpg",
+        "/images/pet-2-img-3.jpg"
+      ],
       "location": "Tacoma, WA"
     },
     {
       "id": 3,
       "name": "Baby Simba",
       "species": "cat",
       "about": "Baby Simba is a sweet 1 year old female. She came to the shelter because her owner could no longer care for her. Baby Simba weighs 6 pounds, gets along well with other cats, and she will be spayed before going to her forever home.\n\nReference Baby Simba's ID number A361601. For more information about adopting from Seminole County Animal Services contact Diane Gagliano at 407-665-5208 or DGagliano@seminolecountyfl.gov",
-      "images": ["/images/pet-3-img-1.jpg", "/images/pet-3-img-2.jpg"],
+      "images": [
+        "/images/pet-3-img-1.jpg",
+        "/images/pet-3-img-2.jpg"
+      ],
       "location": "Bellevue, WA"
     },
     {
       "id": 4,
       "name": "Ruth",
       "species": "cat",
       "about": "“Baby Ruth! Baby Ruth!” Our older girl Ruth here may be a little older but don’t count her out! Ruth is a timid older lady that would love a new home for the rest of her days. Ruth loves attention but is slow to warming up just to make sure that you are here to stay. Her favorite spot in a home would be either on your lap or laying is the sun that shines through the windows. Ruth would like a calmer home due to being older and timid. She would make a great companion for someone who enjoys having a calmer cat that will do her own thing but gives you plenty of attention! If your home sounds like the perfect match for Ruth, come and meet her today!",
-      "images": ["/images/pet-4-img-1.jpg", "/images/pet-4-img-2.jpg"],
+      "images": [
+        "/images/pet-4-img-1.jpg",
+        "/images/pet-4-img-2.jpg"
+      ],
       "location": "Seattle, WA"
     },
     {
       "id": 5,
       "name": "Sherry",
       "species": "dog",
       "about": "Hi, my name is Sherry. I am a lab mix and I was born June 8, 2018. I was about to be sent to a shelter when my foster mom saved me. Although my foster family loves me very much, they want me to find the best home possible. I have all of my shots up to date and I am already spayed. I’m still a puppy but I’m working really hard on being potty trained. I am sweet to everyone I meet and very playful. I get along with other dogs and children very well. I love hugs and kisses and hope to find a new home soon.",
-      "images": ["/images/pet-5-img-1.jpg", "/images/pet-5-img-2.jpg"],
+      "images": [
+        "/images/pet-5-img-1.jpg",
+        "/images/pet-5-img-2.jpg"
+      ],
       "location": "Seattle, WA"
     },
     {
       "id": 6,
       "name": "Coco",
       "species": "dog",
       "about": "This girl is a bundle of energy and ready to be your next adventure buddy! She is smart attentive and very tuned in to you. We think she would make an awesome agility dog. Coco is 11 months old and 32 lbs. She is spayed and UTD on her vaccines. Coco is a German Shepherd Fiest mix. So she has beauty and brains! She plays well with other dogs and loves children of all ages. She would love a home with room to run! Date in 11/25/18 Date available 11/25/18",
-      "images": ["/images/pet-6-img-1.jpg"],
+      "images": [
+        "/images/pet-6-img-1.jpg"
+      ],
       "location": "Redmond, WA"
     },
     {
       "id": 7,
       "name": "Rex",
       "species": "cat",
       "about": "Hi guys. My name is Rex. 2 weeks ago I was living outside however these nice ladies rescued me and my brother (Tex). I'm super sad now as my brother got adopted this past weekend (even though I'm super happy for him) and I have no one to play with. I'd love an indoor forever home for the holidays especially with a feline siblings to play with. I've been neutered, had my rabies, FVRCP and I'm chipped.  My adoption fee is $65",
-      "images": ["/images/pet-7-img-1.jpg", "/images/pet-7-img-2.jpg"],
+      "images": [
+        "/images/pet-7-img-1.jpg",
+        "/images/pet-7-img-2.jpg"
+      ],
       "location": "Redmond, WA"
     }
   ]
-}
+}