Merge pull request #3 from elite-grub/boxtext

Implement MVP for Map Modal view

client/components/App.jsx

@@ -1,20 +1,61 @@
 import React from 'react';
-import Container from './Container';
+import axios from 'axios';
+import MapBox from './MapBox';
+import MapText from './MapText';
+import MapModal from './MapModal';
+import { Border, Font } from './style.js';
 
 class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-
+      data: [],
+      getRandomInt: function getRandomInt(max) {
+        return Math.floor(Math.random() * Math.floor(max) + 1);
+      },
+      toggleMap: 'none',
     };
+    this.handleClick = this.handleClick.bind(this);
+    this.closeClick = this.closeClick.bind(this);
+  }
+
+  componentDidMount() {
+    this.getRestaurant();
+  }
+
+  getRestaurant() {
+    axios.get(`/restaurant/${this.state.getRandomInt(100)}`)
+      .then((res) => {
+        const restaurant = res.data[0];
+        console.log('got data to CLient!!', restaurant);
+        this.setState({ data: restaurant });
+      })
+      .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 (
-      <div>
-        <h1>Hello from App!</h1>
-        <Container />
-      </div>
+      <Font>
+        <Border className="container">
+          <MapBox handleClick={this.handleClick} />
+          <MapText data={this.state.data} handleClick={this.handleClick} />
+          <MapModal toggleMap={this.state.toggleMap} closeClick={this.closeClick} />
+        </Border>
+      </Font>
     );
   }
 }

client/components/MapBox.jsx

@@ -11,7 +11,9 @@ class MapBox extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello from MapBox!</h1>
+        <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" />
+        </a>
       </div>
     );
   }

client/components/MapModal.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ModalStyle, CloseStyle } from './style.js';
+
+class MapModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+
+    };
+  }
+
+  render() {
+    return (
+
+      <ModalStyle style={{ display: this.props.toggleMap }}>
+        <div id="myModal" className="modal">
+
+          <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>
+    );
+  }
+}
+
+export default MapModal;

client/components/MapText.jsx

@@ -1,4 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  GetDirections, GetLocation, GetPhone, GetLink, GetCalendar, GetIphone, BlueLinks,
+} from './style.js';
 
 class MapText extends React.Component {
   constructor(props) {
@@ -9,27 +13,45 @@ class MapText extends React.Component {
   }
 
   render() {
+    const {
+      street, cityStateZip, phone, website,
+    } = this.props.data;
+
+    // const { } = this.props.handleClick;
+
     return (
       <div className="map-text">
-        <h1>Hello from MapText!</h1>
-        <ul>
-          <li>
-            Pier 39
-            <br />
-            Ste A-202
-            <br />
-            San Francisco, CA 94133
-            <br />
-            Fisherman's Wharf, North
-            <br />
-            Beach/Telegraph Hill
-          </li>
-          <li>Get Directions</li>
-          <li>(415) 421-2442</li>
-          <li>fogharbor.com</li>
-          <li>Make a Reservation</li>
-          <li>Send to your Phone</li>
-        </ul>
+
+        <GetLocation size="18" />
+        <b>{street}</b>
+        <br />
+        <b>{cityStateZip}</b>
+        <br />
+
+        <BlueLinks>
+          <GetDirections size="18" />
+          <a onClick={this.props.handleClick}>Get Directions</a>
+        </BlueLinks>
+
+        <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
+        </BlueLinks>
+
       </div>
     );
   }

client/components/style.js

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+import { Directions } from 'styled-icons/material/Directions';
+import { LocationOn } from 'styled-icons/material/LocationOn';
+import { Phone } from 'styled-icons/material/Phone';
+import { LinkExternal } from 'styled-icons/boxicons-regular/LinkExternal';
+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;
+`;
+
+export const GetLocation = styled(LocationOn)`
+  color: grey;
+`;
+
+export const GetPhone = styled(Phone)`
+  color: grey;
+`;
+
+export const GetLink = styled(LinkExternal)`
+  color: grey;
+`;
+
+export const GetCalendar = styled(CalendarEvent)`
+  color: grey;
+`;
+
+export const GetIphone = styled(PhoneIphone)`
+  color: grey;
+`;
+
+export const GetEdit = styled(Edit)`
+  color: grey;
+`;
+
+export const Border = styled.div`
+padding: 5px;
+background: #fff;
+border: 1px solid #ccc;
+width: 300px;
+height: 353px;
+`;
+
+export const BlueLinks = styled.div`
+  color: #0073bb;
+`;
+
+export const Font = styled.div`
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

+`;
+
+/* The Modal (background) */
+export const ModalStyle = styled.div`
+  
+  position: fixed; 
+  z-index: 1; 
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%; 
+  overflow: none; 
+  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;
+`;