9

btholt · Apr 2, 2019 · 317dda0 · 317dda0
1 parent 6184daf
commit 317dda0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/src/Details.js b/src/Details.js
@@ -2,14 +2,15 @@ import React from "react";
 import pf from "petfinder-client";
 import { navigate } from "@reach/router";
 import Carousel from "./Carousel";
+import Modal from "./Modal";
 
 const petfinder = pf({
   key: process.env.API_KEY,
   secret: process.env.API_SECRET
 });
 
 class Details extends React.Component {
-  state = { loading: true };
+  state = { loading: true, showModal: false };
   componentDidMount() {
     petfinder.pet
       .get({
@@ -39,20 +40,39 @@ class Details extends React.Component {
         navigate("/");
       });
   }
+  toggleModal = () => this.setState({ showModal: !this.state.showModal });
   render() {
     if (this.state.loading) {
       return <h1>loading … </h1>;
     }
 
-    const { media, animal, breed, location, description, name } = this.state;
+    const {
+      media,
+      animal,
+      breed,
+      location,
+      description,
+      name,
+      showModal
+    } = this.state;
 
     return (
       <div className="details">
         <Carousel media={media} />
         <div>
           <h1>{name}</h1>
           <h2>{`${animal} — ${breed} — ${location}`}</h2>
+          <button onClick={this.toggleModal}>Adopt {name}</button>
           <p>{description}</p>
+          {showModal ? (
+            <Modal>
+              <h1>Would you like to adopt {name}?</h1>
+              <div className="buttons">
+                <button onClick={this.toggleModal}>Yes</button>
+                <button onClick={this.toggleModal}>No</button>
+              </div>
+            </Modal>
+          ) : null}
         </div>
       </div>
     );

diff --git a/src/Modal.js b/src/Modal.js
@@ -0,0 +1,26 @@
+// taken from React docs
+import React from "react";
+import { createPortal } from "react-dom";
+
+const modalRoot = document.getElementById("modal");
+
+class Modal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.el = document.createElement("div");
+  }
+
+  componentDidMount() {
+    modalRoot.appendChild(this.el);
+  }
+
+  componentWillUnmount() {
+    modalRoot.removeChild(this.el);
+  }
+
+  render() {
+    return createPortal(this.props.children, this.el);
+  }
+}
+
+export default Modal;
diff --git a/src/index.html b/src/index.html
@@ -10,6 +10,7 @@
 </head>
 
 <body>
+  <div id="modal"></div>
   <div id="root">not rendered</div>
   <script src="./App.js"></script>
 </body>