uncontrolled forms, added context css to every style.css, and rebased…

… the later steps on uncontrolled forms

01-no-frills-react/src/style.css

@@ -339,4 +339,9 @@ header {
   justify-content: center;
   display: flex;
   padding: 15px;
-}
+}
+
+form .pet {
+  float: unset;
+  margin: 0 auto;
+}

02-js-tools/src/style.css

@@ -339,4 +339,9 @@ header {
   justify-content: center;
   display: flex;
   padding: 15px;
-}
+}
+
+form .pet {
+  float: unset;
+  margin: 0 auto;
+}

03-jsx/src/style.css

@@ -339,4 +339,9 @@ header {
   justify-content: center;
   display: flex;
   padding: 15px;
-}
+}
+
+form .pet {
+  float: unset;
+  margin: 0 auto;
+}

04-hooks/src/style.css

@@ -339,4 +339,9 @@ header {
   justify-content: center;
   display: flex;
   padding: 15px;
-}
+}
+
+form .pet {
+  float: unset;
+  margin: 0 auto;
+}

05-useeffect/src/style.css

@@ -339,4 +339,9 @@ header {
   justify-content: center;
   display: flex;
   padding: 15px;
-}
+}
+
+form .pet {
+  float: unset;
+  margin: 0 auto;
+}

06-custom-hooks/src/style.css

@@ -339,4 +339,9 @@ header {
   justify-content: center;
   display: flex;
   padding: 15px;
-}
+}
+
+form .pet {
+  float: unset;
+  margin: 0 auto;
+}

07-component-composition/src/style.css

@@ -339,4 +339,9 @@ header {
   justify-content: center;
   display: flex;
   padding: 15px;
-}
+}
+
+form .pet {
+  float: unset;
+  margin: 0 auto;
+}

08-react-router/src/style.css

@@ -339,4 +339,9 @@ header {
   justify-content: center;
   display: flex;
   padding: 15px;
-}
+}
+
+form .pet {
+  float: unset;
+  margin: 0 auto;
+}

09-react-query/src/App.jsx

@@ -4,7 +4,14 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Details from "./Details";
 import SearchParams from "./SearchParams";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: Infinity,
+      cacheTime: Infinity,
+    },
+  },
+});
 
 const App = () => {
   return (

09-react-query/src/fetchBreedList.js

@@ -0,0 +1,17 @@
+async function fetchBreedList({ queryKey }) {
+  const animal = queryKey[1];
+
+  if (!animal) return [];
+
+  const res = await fetch(
+    `http://pets-v2.dev-apis.com/breeds?animal=${animal}`
+  );
+
+  if (!res.ok) {
+    throw new Error(`breeds ${animal} fetch not ok`);
+  }
+
+  return res.json();
+}
+
+export default fetchBreedList;

09-react-query/src/style.css

@@ -340,3 +340,9 @@ header {
   display: flex;
   padding: 15px;
 }
+
+form .pet {
+  float: unset;
+  margin: 0 auto;
+}
+

09-react-query/src/useBreedList.js

@@ -1,32 +1,8 @@
-import { useState, useEffect } from "react";
-
-const localCache = {};
+import { useQuery } from "@tanstack/react-query";
+import fetchBreedList from "./fetchBreedList";
 
 export default function useBreedList(animal) {
-  const [breedList, setBreedList] = useState([]);
-  const [status, setStatus] = useState("unloaded");
-
-  useEffect(() => {
-    if (!animal) {
-      setBreedList([]);
-    } else if (localCache[animal]) {
-      setBreedList(localCache[animal]);
-    } else {
-      requestBreedList();
-    }
-
-    async function requestBreedList() {
-      setBreedList([]);
-      setStatus("loading");
-      const res = await fetch(
-        `http://pets-v2.dev-apis.com/breeds?animal=${animal}`
-      );
-      const json = await res.json();
-      localCache[animal] = json.breeds || [];
-      setBreedList(localCache[animal]);
-      setStatus("loaded");
-    }
-  }, [animal]);
+  const results = useQuery(["breeds", animal], fetchBreedList);
 
-  return [breedList, status];
+  return [results?.data?.breeds ?? [], results.status];
 }

10-class-components/src/App.jsx → 10-uncontrolled-forms/src/App.jsx

@@ -4,7 +4,14 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Details from "./Details";
 import SearchParams from "./SearchParams";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: Infinity,
+      cacheTime: Infinity,
+    },
+  },
+});
 
 const App = () => {
   return (

10-uncontrolled-forms/src/Details.jsx

@@ -0,0 +1,32 @@
+import { useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { RingLoader } from "react-spinners";
+import fetchPet from "./fetchPet";
+
+const Details = () => {
+  const { id } = useParams();
+  const results = useQuery(["details", id], fetchPet);
+
+  if (results.isLoading) {
+    return (
+      <div className="loading-pane">
+        <RingLoader size={250} />
+      </div>
+    );
+  }
+
+  const pet = results.data.pets[0];
+
+  return (
+    <div className="details">
+      <div>
+        <h1>{pet.name}</h1>
+        <h2>{`${pet.animal} — ${pet.breed} — ${pet.city}, ${pet.state}`}</h2>
+        <button>Adopt {pet.name}</button>
+        <p>{pet.description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Details;

11-error-boundaries/src/SearchParams.jsx → 10-uncontrolled-forms/src/SearchParams.jsx

@@ -1,58 +1,51 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import Results from "./Results";
 import useBreedList from "./useBreedList";
+import fetchSearch from "./fetchSearch";
 const ANIMALS = ["bird", "cat", "dog", "rabbit", "reptile"];
 
 const SearchParams = () => {
-  const [pets, setPets] = useState([]);
-  const [location, updateLocation] = useState("");
-  const [animal, updateAnimal] = useState("");
-  const [breed, updateBreed] = useState("");
+  const [requestParams, setRequestParams] = useState({
+    location: "",
+    animal: "",
+    breed: "",
+  });
+  const [animal, setAnimal] = useState("");
   const [breeds] = useBreedList(animal);
 
-  useEffect(() => {
-    requestPets();
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  async function requestPets() {
-    const res = await fetch(
-      `http://pets-v2.dev-apis.com/pets?animal=${animal}&location=${location}&breed=${breed}`
-    );
-    const json = await res.json();
-
-    setPets(json.pets);
-  }
+  const results = useQuery(["search", requestParams], fetchSearch);
+  const pets = results?.data?.pets ?? [];
 
   return (
     <div className="search-params">
       <form
         onSubmit={(e) => {
           e.preventDefault();
-          requestPets();
+          const formData = new FormData(e.target);
+          const obj = {
+            animal: formData.get("animal") ?? "",
+            breed: formData.get("breed") ?? "",
+            location: formData.get("location") ?? "",
+          };
+          setRequestParams(obj);
         }}
       >
         <label htmlFor="location">
           Location
-          <input
-            id="location"
-            value={location}
-            placeholder="Location"
-            onChange={(e) => updateLocation(e.target.value)}
-          />
+          <input id="location" name="location" placeholder="Location" />
         </label>
 
         <label htmlFor="animal">
           Animal
           <select
             id="animal"
-            value={animal}
+            name="animal"
             onChange={(e) => {
-              updateAnimal(e.target.value);
-              updateBreed("");
+              setAnimal(e.target.value);
             }}
             onBlur={(e) => {
-              updateAnimal(e.target.value);
-              updateBreed("");
+              setAnimal(e.target.value);
             }}
           >
             <option />
@@ -66,13 +59,7 @@ const SearchParams = () => {
 
         <label htmlFor="breed">
           Breed
-          <select
-            disabled={!breeds.length}
-            id="breed"
-            value={breed}
-            onChange={(e) => updateBreed(e.target.value)}
-            onBlur={(e) => updateBreed(e.target.value)}
-          >
+          <select disabled={!breeds.length} id="breed" name="breed">
             <option />
             {breeds.map((breed) => (
               <option key={breed} value={breed}>

10-uncontrolled-forms/src/fetchBreedList.js

@@ -0,0 +1,17 @@
+async function fetchBreedList({ queryKey }) {
+  const animal = queryKey[1];
+
+  if (!animal) return [];
+
+  const res = await fetch(
+    `http://pets-v2.dev-apis.com/breeds?animal=${animal}`
+  );
+
+  if (!res.ok) {
+    throw new Error(`breeds ${animal} fetch not ok`);
+  }
+
+  return res.json();
+}
+
+export default fetchBreedList;

10-uncontrolled-forms/src/fetchSearch.js

@@ -0,0 +1,13 @@
+async function fetchSearch({ queryKey }) {
+  const { animal, location, breed } = queryKey[1];
+  const res = await fetch(
+    `http://pets-v2.dev-apis.com/pets?animal=${animal}&location=${location}&breed=${breed}`
+  );
+
+  if (!res.ok)
+    throw new Error(`pet search not okay: ${animal}, ${location}, ${breed}`);
+
+  return res.json();
+}
+
+export default fetchSearch;