Merge pull request #47 from joziesands/search-area-limit

Search area limit
techforwarren · Nov 13, 2019 · 3e9bfac · 3e9bfac
2 parents 1417d25 + c7e2bf4
commit 3e9bfac
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 90 deletions.
diff --git a/src/App.js b/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>

diff --git a/src/App.scss b/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;
 
   #zipForm{
@@ -142,6 +142,24 @@ html, body, #root, .app {
     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;
+  }
 
   #submitZip{
     height: 35px;
@@ -166,10 +184,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 */
@@ -190,6 +235,7 @@ html, body, #root, .app {
   overflow-y:scroll;
   margin-bottom: 0px;
   padding-left: 0px;
+  margin-top: 0px;
 
   .eventCard{
     text-decoration: none;
@@ -229,6 +275,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{
@@ -250,10 +308,6 @@ html, body, #root, .app {
     box-shadow: 1px 2px 5px rgba(0, 0, 0, .3);
     border: 1px solid #232444;
 
-
-
-
-
     h3{
       text-transform: uppercase;
     }
@@ -269,8 +323,6 @@ html, body, #root, .app {
       }
 
     }
-
-
   }
 
   button{

diff --git a/src/EventList.js b/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>
   );
 }
 

diff --git a/src/Map.js b/src/Map.js
@@ -110,41 +110,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]);
 
 

diff --git a/src/MobileList.js b/src/MobileList.js
@@ -71,59 +71,74 @@ export function MobileList(props){
   }, [props.locFilt])
 
 
-
-  const listEvents = props.events.map((event, index) => {
-
-    // Normalize Mobilize's time formatting into
-    // easy-to-use moments
-    let rawTimes = event['timeslots'].map((timeslot) => {
-      let start = moment(timeslot.start_date * 1000);
-      let end = moment(timeslot.end_date * 1000);
-      return {
-        start, end,
-        range: start.twix(end)
-      }
-    })
-
-    return (
-      <a href={event['browser_url']}
-        className="eventCard"
-        target="_blank"
-        rel="noopener"
-        key={event['id']}
-        coord={('location' in event && 'location' in event['location'] && 'latitude' in event['location']['location']) ? "" + event['location']['location']['latitude'] + "&" + event['location']['location']['longitude'] : ""}
-        onMouseEnter={(event) => { props.updatedHover(event['currentTarget'].getAttribute('coord')) }}
-        onMouseLeave={(event) => { props.updatedHover(null) }}>
+  let listEvents = {};
+  if(props.events.length > 0){
+    listEvents = props.events.map((event, index) => {
+
+      // Normalize Mobilize's time formatting into
+      // easy-to-use moments
+      let rawTimes = event['timeslots'].map((timeslot) => {
+        let start = moment(timeslot.start_date * 1000);
+        let end = moment(timeslot.end_date * 1000);
+        return {
+          start, end,
+          range: start.twix(end)
+        }
+      })
+
+      return (
+        <a href={event['browser_url']}
+          className="eventCard"
+          target="_blank"
+          rel="noopener"
+          key={event['id']}
+          coord={('location' in event && 'location' in event['location'] && 'latitude' in event['location']['location']) ? "" + event['location']['location']['latitude'] + "&" + event['location']['location']['longitude'] : ""}
+          onMouseEnter={(event) => { props.updatedHover(event['currentTarget'].getAttribute('coord')) }}
+          onMouseLeave={(event) => { props.updatedHover(null) }}>
+          <div className="mobileInfo">
+            <h3>{event['title']}</h3>
+            <p><strong>{event['location']['venue']}</strong> in <strong>{event['location']['locality']}</strong></p>
+            <EventTimes rawTimes={rawTimes} />
+            <p className="eventRSVP">Click to RSVP</p>
+          </div>
+
+        </a>
+
+      )
+    }).filter((arrItem) => {
+      return arrItem != null;
+    });
+  } else {
+      return <div className="mobileList">
+      <div className="eventCard">
         <div className="mobileInfo">
-          <h3>{event['title']}</h3>
-          <p><strong>{event['location']['venue']}</strong> in <strong>{event['location']['locality']}</strong></p>
-          <EventTimes rawTimes={rawTimes} />
-          <p className="eventRSVP">Click to RSVP</p>
+          <h3>Don't see an event near you?</h3>
+          <p><a href="https://events.elizabethwarren.com/?is_virtual=true">Join a virtual event</a></p> 
+          <p><a href="https://events.elizabethwarren.com/event/create/">Host your own event</a></p>
         </div>
-
-      </a>
-
-    )
-  }).filter((arrItem) => {
-    return arrItem != null;
-  });
+      </div>
+    </div>
+
+  }
 
   //Conditional rendering for buttons, depending on position in list
-  return (
-    <div className="mobileList">
-      {listEvents[props.cardIndex]}
-      {
-        props.cardIndex > 0 &&
-        <button id="leftIndex" onClick={() => props.updateCardIndex(props.cardIndex-1)}>← </button>
-      }
-      <button id="mobileRSVP"><a href={props.events[props.cardIndex]['browser_url']} target="_blank" rel="noopener">RSVP</a></button>
-      {
-        props.cardIndex < listEvents.length-1 &&
-        <button id="rightIndex" onClick={() => props.updateCardIndex(props.cardIndex+1)}> →</button>
-      }
+  if(props.events.length > 0){
+    return (
+      <div className="mobileList">
+        {listEvents[props.cardIndex]}
+        {
+          props.cardIndex > 0 &&
+          <button id="leftIndex" onClick={() => props.updateCardIndex(props.cardIndex-1)}>← </button>
+        }
+        <button id="mobileRSVP"><a href={props.events[props.cardIndex]['browser_url']} target="_blank" rel="noopener">RSVP</a></button>
+        {
+          props.cardIndex < listEvents.length-1 &&
+          <button id="rightIndex" onClick={() => props.updateCardIndex(props.cardIndex+1)}> →</button>
+        }
 
-    </div>
-  );
+      </div>
+    );
+  }
 }
 
 export default MobileList;