Search area limit

src/App.js

@@ -16,6 +16,9 @@ const queryString = require('query-string');
 function App() {
   //List of events
   const [events, setEvents] = useState(null);
+  // Current range 
+  const [currRange, setCurrRange] = useState(75);
+
   //Current zip code search
   const [currZip, setCurrZip] = useState(() => {
     // check URL parameter on initialization
@@ -33,7 +36,7 @@ function App() {
   //Makes API call when zipcode entered
   useEffect(() => {
     if(currZip != null){
-      fetch("https://api.mobilize.us/v1/organizations/1316/events?timeslot_start=gte_now&zipcode=" + currZip)
+      fetch("https://api.mobilize.us/v1/organizations/1316/events?timeslot_start=gte_now&zipcode=" + currZip + "&max_dist=" + currRange)
       .then((res)=>res.json())
       .then((data)=>setEvents(data['data']));
 
@@ -51,7 +54,7 @@ function App() {
       });
 
     }
-  }, [currZip]);
+  }, [currZip, currRange]);
 
   //Card index utilizes the hoverEvent to highlight the card's respective marker
   useEffect(() => {
@@ -65,7 +68,7 @@ function App() {
 
   return (
     <div className="app">
-      <SearchBar currZip={currZip} updateZip={(newZip) => setCurrZip(newZip)} events={events} updatedHover={(newHover) => setHoverEvent(newHover)} locFilt={locFilt}/>
+      <SearchBar currZip={currZip} currRange={currRange} updateZip={(newZip) => setCurrZip(newZip)} updateRange={(newRange) => setCurrRange(newRange)} events={events} updatedHover={(newHover) => setHoverEvent(newHover)} locFilt={locFilt}/>
       {events === null && currZip == null &&
         <div id="startLoad">
           <h1 id="firstLine">SHE HAS</h1><h1 id="secondLine">EVENTS</h1><h1 id="thirdLine">FOR THAT <img src={gMark}></img></h1>

src/App.scss

@@ -88,7 +88,7 @@ html, body, #root, .app {
   left: 0;
   box-shadow: 0px 5px 5px rgba(0, 0, 0, .3);
   padding-top: 4%;
-  padding-bottom: 4% !important;
+  padding-bottom: 4%;
   touch-action: manipulation;
 
 
@@ -118,30 +118,55 @@ html, body, #root, .app {
 
   display: flex;
   align-items: flex-end;
-  justify-content: space-evenly;
+  justify-content: center;
   padding-left: 5%;
-  padding-right: 5%;
+  padding-right: 7%;
 
   #zipForm{
-    width: 70%;
+    display: flex;
+    flex-flow:row nowrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    background-color:#232444;
+    border-right: 1px solid white;
+    padding-right: 9%;
   }
 
   #zipInput{
-    width: 100%;
     height: 30%;
+    width: 80%;
     font-size: 24px;
+    margin-right: 13%;
     color: white;
-    margin: auto;
     display: block;
     background: none;
     border: none;
     border-bottom: 1px solid white;
     z-index:10;
   }
+
+  #rangeInput{
+    height: 30%;
+    min-width:105px;
+    font-size: 24px;
+    border: none;
+    background: none;
+
+  }
+
+  #submitZip{
+    height: 35px;
+    padding: 0;
+    font-size: 24px;
+    color: white;
+    background-color: #232444;
+    border: none;
+  }
 
   #locateMe {
     height: 35px;
-    width: 35px;
+    padding: 0;
+    padding-left: 7%;
     color: white;
     background-color: #232444;
     border: none;
@@ -151,10 +176,37 @@ html, body, #root, .app {
     }
   }
 
+
+}
+
+.searchRange{
+  font-size: 16px;
+  background-color: #f5f5f5;
+  height:30px;
+  line-height:30px;
+  text-align: center;
+  border-bottom: 1px solid #ccc;
+}
+
+.searchRange select{
+  background: none;
+  font-size: 16px;
+  background-color: #f5f5f5;
+  border: none;
+  padding: 0px 20px 0px 5px;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background-image: url(./downArrow.svg);
+  background-position: calc(100% - 8px) 85%;
+  background-size: 12px 12px;
+  background-repeat: no-repeat;
+
 }
 
 
 
+
 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: white;
   opacity: 1; /* Firefox */
@@ -175,6 +227,7 @@ html, body, #root, .app {
   overflow-y:scroll;
   margin-bottom: 0px;
   padding-left: 0px;
+  margin-top: 0px;
 
   .eventCard{
     text-decoration: none;
@@ -214,6 +267,18 @@ html, body, #root, .app {
     }
 
   }
+
+  .kicker{
+    list-style-type: none;
+    padding-left: 10%;
+    padding-right: 10%;
+    padding-top: 5%;
+    padding-bottom: 5%;
+    border-top: 1px solid #E8E8E8;
+    border-bottom: 1px solid #E8E8E8;
+    position: relative;
+  }
+
 }
 
 .mobileList{
@@ -235,10 +300,6 @@ html, body, #root, .app {
     box-shadow: 1px 2px 5px rgba(0, 0, 0, .3);
     border: 1px solid #232444;
 
-
-
-
-
     h3{
       text-transform: uppercase;
     }
@@ -254,8 +315,6 @@ html, body, #root, .app {
       }
 
     }
-
-
   }
 
   button{

src/EventList.js

@@ -49,7 +49,9 @@ function EventTimes(props) {
 }
 
 export function EventList(props) {
-  const listEvents = props.events.map((event) => {
+  let listEvents;
+  if(props.events.length > 0){
+  listEvents = props.events.map((event) => {
 
     // Normalize Mobilize's time formatting into
     // easy-to-use moments
@@ -94,9 +96,17 @@ export function EventList(props) {
 
     )
   });
+} else {
+  listEvents = null;
+}
 
   return (
-    <ul className="eventList">{listEvents}</ul>
+    <ul className="eventList">{listEvents}
+    <div className="kicker">
+        <h4>Don't see an event near you?</h4>
+        <p><a href="https://events.elizabethwarren.com/?is_virtual=true">Join a virtual event</a> or <a href="https://events.elizabethwarren.com/event/create/">Host your own</a></p>
+    </div>
+    </ul>
   );
 }
 

src/Map.js

@@ -107,41 +107,45 @@ export function Map(props){
 
     if(props.events != null){
 
-      //Initiates map's focus at the first event (typically the closest to the provided zipcode) with a valid lat & long position
-      let first = 0;
-  		if (!('location' in props.events[first]) || !('location' in props.events[first]['location']) || !('latitude' in props.events[first]['location']['location'])) {
-  			first++;
-  		}
-
-      var lat = props.events[first]['location']['location']['latitude'];
-      var long = props.events[first]['location']['location']['longitude'];
+      if(props.events.length > 0){
+        //Initiates map's focus at the first event (typically the closest to the provided zipcode) with a valid lat & long position
+        let first = 0;
+        if (!('location' in props.events[first]) || !('location' in props.events[first]['location']) || !('latitude' in props.events[first]['location']['location'])) {
+          first++;
+        }
 
-      if(center[0] !== lat || center[0] !== long){
-        setCenter([lat, long]);
-        setNewCenter(true);
-      }
+        var lat = props.events[first]['location']['location']['latitude'];
+        var long = props.events[first]['location']['location']['longitude'];
 
-      var places = {};
+        if(center[0] !== lat || center[0] !== long){
+          setCenter([lat, long]);
+          setNewCenter(true);
+        }
 
-      props.events.forEach(function(event, index) {
+        var places = {};
 
-  			//If has longitude and latitute
-  			if ('location' in event && 'location' in event['location'] && 'latitude' in event['location']['location']) {
+        props.events.forEach(function(event, index) {
 
-  				//Creates string key for {places} dictionary
-  				let str = event['location']['location']['latitude'] + "&" + event['location']['location']['longitude'];
-  				//Creates or adds to a location - adds HTML code for event list for that location
-  				if (str in places) {
-  					places[str] = places[str] + 1;
-  				} else {
-  					places[str] = 1;
-  				}
+          //If has longitude and latitute
+          if ('location' in event && 'location' in event['location'] && 'latitude' in event['location']['location']) {
 
-  			}
-  		});
-      setLocations(places);
-    }
+            //Creates string key for {places} dictionary
+            let str = event['location']['location']['latitude'] + "&" + event['location']['location']['longitude'];
+            //Creates or adds to a location - adds HTML code for event list for that location
+            if (str in places) {
+              places[str] = places[str] + 1;
+            } else {
+              places[str] = 1;
+            }
 
+          }
+        });
+        setLocations(places);
+      } else {
+        markers.current.clearLayers();
+        map.current.setView([39.739, -104.9903], 4);
+      }
+    } 
   }, [props.events]);