Implement MVP for Map Modal

elite-grub · Mar 2, 2019 · 3ad95da · 3ad95da
1 parent c08e5a4
commit 3ad95da
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 124 deletions.
diff --git a/client/components/App.jsx b/client/components/App.jsx
@@ -13,18 +13,10 @@ class App extends React.Component {
       getRandomInt: function getRandomInt(max) {
         return Math.floor(Math.random() * Math.floor(max) + 1);
       },
-      // btn.onclick = function() {
-        //   modal.style.display = "block";
-        // }
+      toggleMap: 'none',
     };
     this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    this.setState(state => ({
-      toggleMapOn: !state.toggleMapOn,
-    }));
-    console.log('The link was clicked from APP!!!');
+    this.closeClick = this.closeClick.bind(this);
   }
 
   componentDidMount() {
@@ -41,13 +33,27 @@ class App extends React.Component {
       .catch(err => err);
   }
 
+  handleClick() {
+    this.setState(state => ({
+      toggleMap: 'block',
+    }));
+    console.log('The link was clicked from APP!!!');
+  }
+
+  closeClick() {
+    this.setState(state => ({
+      toggleMap: 'none',
+    }));
+    console.log('Close Button clicked in Modal View');
+  }
+
   render() {
     return (
       <Font>
         <Border className="container">
           <MapBox handleClick={this.handleClick} />
           <MapText data={this.state.data} handleClick={this.handleClick} />
-          <MapModal />
+          <MapModal toggleMap={this.state.toggleMap} closeClick={this.closeClick} />
         </Border>
       </Font>
     );

diff --git a/client/components/MapBox.jsx b/client/components/MapBox.jsx
@@ -4,23 +4,15 @@ class MapBox extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      toggleMapOn: false,
+
     };
-    // this.handleClick = this.handleClick.bind(this);
   }
 
-  // handleClick() {
-  //   this.setState(state => ({
-  //     toggleMapOn: !state.toggleMapOn,
-  //   }));
-  //   console.log('The link was clicked from Map.');
-  // }
-
   render() {
     return (
       <div>
         <a onClick={this.props.handleClick}>
-        <img src="https://s3-us-west-1.amazonaws.com/placeholders-kt/mapSample.png" alt="Map Placeholder" height="135" width="286" />
+          <img src="https://s3-us-west-1.amazonaws.com/placeholders-kt/mapSample.png" alt="Map Placeholder" height="135" width="286" />
         </a>
       </div>
     );

diff --git a/client/components/MapModal.jsx b/client/components/MapModal.jsx
@@ -1,95 +1,32 @@
 import React from 'react';
-import { ModalStyle } from './style.js';
+import { ModalStyle, CloseStyle } from './style.js';
 
 class MapModal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      // btn.onclick = function() {
-        //   modal.style.display = "block";
-        // }
+
     };
   }
 
-  /*
-on map click
-OR
-"Get Directions" click
-  event handler opens MapModal
-*/
   render() {
-    // const {
-    //   street, cityStateZip, phone, website,
-    // } = this.props.data;
-
     return (
 
-      // <!-- The Modal -->
-      <ModalStyle>
+      <ModalStyle style={{ display: this.props.toggleMap }}>
         <div id="myModal" className="modal">
 
-        <span className="close">Close &times;</span>
-        {/* <!-- Modal content --> */}
-        <div className="modal-content">
-          <img src="https://s3-us-west-1.amazonaws.com/placeholders-kt/mapModal.png" alt="Map Placeholder" height="100%" width="100%" />
-        </div>
+          <CloseStyle className="close">
+            <a onClick={this.props.closeClick}>
+              Close &times;
+            </a>
+          </CloseStyle>
+          <div className="modal-content">
+            <img src="https://s3-us-west-1.amazonaws.com/placeholders-kt/mapModal.png" alt="Map Placeholder" height="100%" width="100%" />
+          </div>
         </div>
       </ModalStyle>
     );
   }
 }
 
-
-/* Modal Content */
-// .modal-content {
-
-// }
-
-// /* The Close Button */
-// .close {
-//   color: #aaaaaa;
-
-//   font-size: 15px;
-//   font-weight: normal;
-//   padding: .05px;
-
-// }
-
-// .close:hover,
-// .close:focus {
-//   color: white;
-//   text-decoration: none;
-//   cursor: pointer;
-// }
-
-// // <!-- Trigger/Open The Modal -->
-// <button id="myBtn">Get Directions</button>
-
-
-// // Get the modal
-// var modal = document.getElementById('myModal');
-
-// // Get the button that opens the modal
-// var btn = document.getElementById("myBtn");
-
-// // Get the <span> element that closes the modal
-// var span = document.getElementsByClassName("close")[0];
-
-// // When the user clicks the button, open the modal
-// btn.onclick = function() {
-//   modal.style.display = "block";
-// }
-
-// // When the user clicks on <span> (x), close the modal
-// span.onclick = function() {
-//   modal.style.display = "none";
-// }
-
-// // When the user clicks anywhere outside of the modal, close it
-// window.onclick = function(event) {
-//   if (event.target == modal) {
-//     modal.style.display = "none";
-//   }
-// }
-
 export default MapModal;
diff --git a/client/components/MapText.jsx b/client/components/MapText.jsx
@@ -8,25 +8,10 @@ class MapText extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isToggleOn: false,
+
     };
-    // this.handleClick = this.handleClick.bind(this);
   }
 
-  // handleClick() {
-  //   this.setState(state => ({
-  //     isToggleOn: !state.isToggleOn,
-  //   }));
-  //   console.log('The link was clicked from Get Directions.');
-  // }
-
-  /*
-on map click
-OR
-"Get Directions" click
-  event handler opens MapModal
-*/
-
   render() {
     const {
       street, cityStateZip, phone, website,
@@ -43,8 +28,6 @@ OR
         <b>{cityStateZip}</b>
         <br />
 
-        {/* click sends to map modal */}
-
         <BlueLinks>
           <GetDirections size="18" />
           <a onClick={this.props.handleClick}>Get Directions</a>
@@ -53,26 +36,25 @@ OR
         <GetPhone size="18" />
         {phone}
         <br />
+
         <BlueLinks>
           <GetLink size="18" />
           {website}
         </BlueLinks>
+
         <BlueLinks>
           <GetCalendar size="18" />
             Make a Reservation
         </BlueLinks>
+
         <BlueLinks>
           <GetIphone size="18" />
-          Send to your Phone
+            Send to your Phone
         </BlueLinks>
 
       </div>
     );
   }
 }
 
-// MapText.propTypes = {
-//   props.data: PropTypes.object,
-// };
-
 export default MapText;
diff --git a/client/components/style.js b/client/components/style.js
@@ -7,6 +7,7 @@ import { CalendarEvent } from 'styled-icons/boxicons-regular/CalendarEvent';
 import { PhoneIphone } from 'styled-icons/material/PhoneIphone';
 import { Edit } from 'styled-icons/material/Edit';
 
+// ICON STYLES
 export const GetDirections = styled(Directions)`
   color: grey;
 `;
@@ -53,10 +54,9 @@ export const Font = styled.div`
 
 /* The Modal (background) */
 export const ModalStyle = styled.div`
-  display: none; 
+  
   position: fixed; 
   z-index: 1; 
-   
   left: 0;
   top: 0;
   width: 100%; 
@@ -65,3 +65,11 @@ export const ModalStyle = styled.div`
   background-color: rgb(0,0,0); 
   background-color: rgba(0,0,0,0.8); 
 `;
+
+/* The Close Button */
+export const CloseStyle = styled.div`
+  color: white;
+  font-size: 15px;
+  font-weight: normal;
+  padding: .05px;
+`;