finished development. App fully functional.

Author: sreyan-ghosh

README.md

@@ -4,20 +4,24 @@ The entire project is centered in the src directory with the configuration files
 
 This repository hosts the 'Adopt Pets' project taught by btholt in the Frontend Masters' Complete Intro to React course.
 
-#### Timeline:
+### Timeline:
 
-##### Commit 1:
+#### Commit 1:
 
-As of 02.09.20, I have set up the formatter and bundler and written raw React in the App.js and Pet.js files. Will be moving on to JSX next.
+As of 02.09.20, I have set up the formatter and bundler and written raw React in the <b>App.js</b> and <b>Pet.js</b> files. Will be moving on to JSX next.
 
-##### Commit 2:
+#### Commit 2:
 
 This is the second commit of 02.09.20. I have worked my way down with hooks using "useState" and also creating custom hooks like "useDropdown" in <b>useDropdown.js</b> to increase reusability of code. The other thing I did was include effects by calling "useEffects" that enabled me to call an external API and query it for data related to pet adoption. The locations for the search query are limited to <b>Seattle, WA</b> and <b>San Francisco, CA</b>.
 
-##### Commit 3:
+#### Commit 3:
 
 This is the third commit of 02.09.20. This commit does not have as much work going into it as the precious one but it is significant because the core idea of the 'Adopt Me!' project is now working. The application can now successfully query the external API for information and also display the results. I have used the <b>async-await</b> utility here to receive the data from the API. <b>Pet.js</b> was updated to make the results presentable and <b>Results.js</b> was created to display the results. The cross-env tool was used in the project so that it may work flawlessly on any OS. Also, the <b>dev:mock</b> script was written inside <b>package.json</b> to make the project render offline.
 
-##### Commit 4:
+#### Commit 4:
 
 This is the first commit of 03.09.20. At the end of this commit, I have a completely functional 'Adopt Me!' website for animal adoption. In this commit, I have created a details page which displays the details of the animal the user clicks on. The code for this is on <b>Details.js</b>. The details page also has a photo carousel that shows the photos of the animal. These pages used the fundamental idea of Classes in React and we had to reconfigure <b>.eslintrc.json</b> and create <b>.babelrc</b> to use the child class with readability. We also used the concept of <b>Routing</b> in React using the <b>Reach Router</b> and reconfigured a couple of js files. Will work on error handling and the completion of the project next.
+
+#### Commit 5:
+
+This the second commit of 03.09.20. The development of the project has now been successfully completed and the adoption app is fully functional. Among new additions we have <b>ErrorBoundary.js</b> for error handling in case the external API behaves erratically. I also have added global contexts in terms of the theme whcih is applicable throughout the application. The code for this is in <b>ThemeContext.js</b>. As a final step towards the completion of the app, I have added a functionality to the Submit button that results in the displaying of a modal which in turn, redirects to the adoption page. The code for the modal is in <b>Modal.js</b>. Will be working on the publishing of this app in the future via gh-pages and also explore publishing using React.

src/App.js

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { render } from "react-dom";
 import { Router, Link } from "@reach/router";
 import SearchParams from "./SearchParams";
 import Details from "./Details";
+import ThemeContext from "./ThemeContext";
 
 const App = () => {
   // return React.createElement("div", {}, [
@@ -24,17 +25,20 @@ const App = () => {
   //     }),
   //   ]);
   // };
+  const theme = useState("darkblue");
   return (
     <React.StrictMode>
-      <div>
-        <header>
-          <Link to="/">Adopt Me!</Link>
-        </header>
-        <Router>
-          <SearchParams path="/" />
-          <Details path="/details/:id" />
-        </Router>
-      </div>
+      <ThemeContext.Provider value={theme}>
+        <div>
+          <header>
+            <Link to="/">Adopt Me!</Link>
+          </header>
+          <Router>
+            <SearchParams path="/" />
+            <Details path="/details/:id" />
+          </Router>
+        </div>
+      </ThemeContext.Provider>
     </React.StrictMode>
   );
 };

src/Details.js

@@ -1,9 +1,13 @@
 import React from "react";
 import pet from "@frontendmasters/pet";
 import Carousel from "./Carousel";
+import ErrorBoundary from "./ErrorBoundary";
+import ThemeContext from "./ThemeContext";
+import { navigate } from "@reach/router";
+import Modal from "./Modal";
 
 class Details extends React.Component {
-  state = { loading: true };
+  state = { loading: true, showModal: false };
 
   componentDidMount() {
     pet
@@ -17,28 +21,67 @@ class Details extends React.Component {
           media: animal.photos,
           breed: animal.breeds.primary,
           loading: false,
+          url: animal.url,
         });
       })
       .catch((error) => this.setState({ error: error }));
   }
+
+  toggleModal = () => this.setState({ showModal: !this.state.showModal });
+  adopt = () => navigate(this.state.url);
+
   render() {
     if (this.state.loading) {
       return <h1>loading...</h1>;
     }
-    const { animal, breed, location, description, media, name } = this.state;
+    const {
+      animal,
+      breed,
+      location,
+      description,
+      media,
+      name,
+      showModal,
+    } = this.state;
 
     return (
       <div className="details">
         <Carousel media={media} />
         <div>
           <h1>{name}</h1>
           <h2>{`${animal} - ${breed} - ${location}`}</h2>
-          <button>Adopt {name}</button>
+          <ThemeContext.Consumer>
+            {([theme]) => (
+              <button
+                style={{ backgroundColor: theme }}
+                onClick={this.toggleModal}
+              >
+                Adopt {name}
+              </button>
+            )}
+          </ThemeContext.Consumer>
           <p>{description}</p>
+          {showModal ? (
+            <Modal>
+              <div>
+                <h1>Would you like to adopt {name}?</h1>
+                <div className="buttons">
+                  <button onClick={this.adopt}>Yes</button>
+                  <button onClick={this.toggleModal}>No</button>
+                </div>
+              </div>
+            </Modal>
+          ) : null}
         </div>
       </div>
     );
   }
 }
 
-export default Details;
+export default function DetailsErrorBoundary(props) {
+  return (
+    <ErrorBoundary>
+      <Details {...props} />
+    </ErrorBoundary>
+  );
+}

src/ErrorBoundary.js

@@ -0,0 +1,43 @@
+// mostly code from reactjs.org/docs/error-boundaries.html
+
+import React from "react";
+import { Link, Redirect } from "@reach/router";
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, redirect: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    console.error("Error Boundary caught an error", error, info);
+  }
+
+  componentDidUpdate() {
+    if (this.state.hasError) {
+      setTimeout(() => this.state({ redirect: true }), 5000);
+    }
+  }
+
+  render() {
+    if (this.state.redirect) {
+      return <Redirect to="/" />;
+    }
+    if (this.state.hasError) {
+      return (
+        <h1>
+          There was an error with this listing. <Link to="/">Click Here</Link>{" "}
+          to go back to the home page or wait 5 seconds...
+        </h1>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/Modal.js

@@ -0,0 +1,20 @@
+import React, { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+const modalRoot = document.getElementById("modal");
+
+const Modal = ({ children }) => {
+  const elRef = useRef(null);
+  if (!elRef.current) {
+    elRef.current = document.createElement("div");
+  }
+
+  useEffect(() => {
+    modalRoot.appendChild(elRef.current);
+    return () => modalRoot.removeChild(elRef.current);
+  }, []);
+
+  return createPortal(<div>{children}</div>, elRef.current);
+};
+
+export default Modal;

src/SearchParams.js

@@ -1,14 +1,16 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import pet, { ANIMALS } from "@frontendmasters/pet";
 import Results from "./Results";
 import useDropdown from "./useDropdown";
+import ThemeContext from "./ThemeContext";
 
 const SearchParams = () => {
   const [location, setLocation] = useState("Seattle, WA");
   const [breeds, setBreeds] = useState([]);
   const [animal, AnimalDropdown] = useDropdown("Animal", "dog", ANIMALS);
   const [breed, BreedDropdown, setBreed] = useDropdown("Breed", "", breeds);
   const [pets, setPets] = useState([]);
+  const [theme, setTheme] = useContext(ThemeContext);
 
   async function requestPets() {
     const { animals } = await pet.animals({
@@ -49,7 +51,20 @@ const SearchParams = () => {
         </label>
         <AnimalDropdown />
         <BreedDropdown />
-        <button>Submit</button>
+        <label htmlFor="location">
+          Theme
+          <select
+            value="theme"
+            onChange={(e) => setTheme(e.target.value)}
+            onBlur={(e) => setTheme(e.target.value)}
+          >
+            <option value="peru">Peru</option>
+            <option value="darkblue">Dark Blue</option>
+            <option value="chartreuse">Chartreuse</option>
+            <option value="mediumorchid">Medium Orchid</option>
+          </select>
+        </label>
+        <button style={{ backgroundColor: theme }}>Submit</button>
       </form>
       <Results pets={pets} />
     </div>

src/ThemeContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const ThemeContext = createContext(["green", () => {}]);
+
+export default ThemeContext;

src/index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
+    <div id="modal"></div>
     <div id="root">not rendered</div>
     <script src="./App.js"></script>
   </body>