Find page

webpage/src/App.css

@@ -1,3 +1,4 @@
+
 .App {
   text-align: left;
   position: relative;
@@ -60,11 +61,75 @@
   opacity: 0.7;
 }
 
-.Find {
+.Find-main {
+  background: none;
+  text-align: center;
+}
+
+section {
+  color: black;
+  text-align: center;
+}
+
+div {
+  height: 100%;
+}
+
+article {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  padding: 20px;
+}
+
+.container {
+  display: table;
+  width: 100%;
+}
+
+.left-half {
+  background-color: #ff9e2c;
+  position: absolute;
+  left: 0px;
+  width: 50%;
+}
+
+.Find-header {
+  text-align: center,
+}
+
+.Find-restaurant-list {
+  text-align: left;
+}
+
+.place_list_item {
+  text-align: center;
+}
+
+.place-list__item-name {
+  text-align: center;
+}
+
+.place-list_item-address {
+  text-align: center;
+}
+
+.right-half {
+  background-color: #b6701e;
+  position: absolute;
+  right: 0px;
+  width: 50%;
+}
+
+.Find-map{
+  text-align: right;
   background: black;
-  
+
 }
 
+
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

webpage/src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 import Find from './Find.js';
 import Upload from './Upload.js';
+import Map from './Upload.js';
 
 
 class App extends Component {
@@ -18,20 +19,25 @@ class App extends Component {
             {/*Logo Button*/}
             <ul>
               <li><Link to="/">
-                <button className="App-logo-button" onClick= "linkToHomepage()">
+                <button className="App-logo-button">
                   <img src={require('./Ok.png')}/>
                 </button>
               </Link></li>
-            <ul>
+            </ul>
+
               {/*Homepage Links to Find/Upload Pages*/}
+
+              <Route exact={true} path="/" render={()=>(
               <div className="App-links">
                 <ul>
-                  <div><li><Link to="/Find"><button className="App-find-button" onClick= "linkToFindPage()">Find Deals</button></Link></li></div>
-                  <div><li><Link to="/Upload"><button className="App-upload-button" onClick= "linkToFindPage()">Upload Deals</button></Link></li></div>
+                  <div className="Find">
+                    <li><Link to="/Find"><button className="App-find-button">Find Deals</button></Link></li>
+                  </div>
+                  <div><li><Link to="/Upload"><button className="App-upload-button">Upload Deals</button></Link></li></div>
                 </ul>
               </div>
-            </ul>
-            </ul>
+              )} />
+
             {/*Routing Paths*/}
             <Route exact path="/Find" component={Find} />
             <Route exact path="/Upload" component={Upload} />

webpage/src/Find.js

@@ -1,28 +1,94 @@
 import React, { Component } from 'react';
 import './App.css';
 import { BrowserRouter, Route, Link } from 'react-router-dom';
+import axios from 'axios';
+import Map from './Map';
 
-
+const API_KEY = 'AIzaSyCwQSyhr3MYLRYq35wCsEOqmqsUzcC39_s';
+const QUERY = 'restaurants+in+Charlottesville'
+const RADIUS = 500;
+var parameters = "?radius=" + RADIUS + "&key=" + API_KEY;
+const places = [];
 
 class Find extends Component {
 
     constructor(props) {
-      super (props);
-      this.state = ({
-        name: null, 
-        address: null, 
-        distance: null, 
-      });
+        super(props);
+        this.state = ({
+            places: [],
+        });
+    }
+
+    savedDate = response => {
+        const newState = {
+            places: response.data.results,
+        };
+
+        this.setState(newState);
+    };
+
+
+    componentWillMount() {
+        axios.get('https://maps.googleapis.com/maps/api/place/textsearch/json?' + "query=" + QUERY + "&key=" + API_KEY)
+            .then(this.savedDate)
     }
 
 
+
+
     render() {
-        return(
-            <div className="Main">
-                <h1>Find Page</h1>
+        const places = this.state.places;
+        return (
+            <div className="Find-main">
+                <div className="Find-header">
+                    <h1>Find Page</h1>
+                </div>
+
+                <section className="container">
+                    <div classname="left-half">
+                        <article>
+
+
+                            <div className="Find-restaurant-list">
+                                <h2>List of Restaurants:</h2>
+
+                                <div>{this.state.places.map(place => {
+                                    return (
+                                        <li key={place.id} className="place_list_item">
+                                            <div>
+                                                <div className="place-list__item-name">
+                                                    {place.name}
+                                                </div>
+                                                <div className="place-list_item-address">
+                                                    {place.formatted_address}
+                                                </div>
+                                            </div>
+                                        </li>
+                                    );
+                                })}</div>
+                            </div>
+
+
+                        </article>
+                    </div>
+
+                    <div classname="right-half">
+                        <article>
+
+                                <h2>Map</h2>
+                                {/*<Map />*/}
+
+
+                        </article>
+                    </div>
+                </section>
+
             </div>
         )
     }
 }
 
+
+
+
 export default Find;

webpage/src/Map.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
+
+const position = [38.0300531,-78.4863596];
+
+const map = ({ places}) => (
+  <Map center={position} zoom={13}>
+    <TileLayer
+      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+    />
+    <Marker position={position}>
+      <Popup>
+        <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
+      </Popup>
+    </Marker>
+  </Map>
+);
+
+
+export default map;

webpage/src/index.js

@@ -6,6 +6,7 @@ import './index.css';
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 import Find from './Find.js';
 import Upload from './Upload.js';
+import Map from './Map.js';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();