Make the today / tomorrow / all shows buttons work

metasyn · Mar 4, 2018 · 2272a85 · 2272a85
1 parent cf0b954
commit 2272a85
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 36 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,5 +3,8 @@ module.exports = {
   env: {
     "browser": true
   },
-  parser: "babel-eslint"
+  parser: "babel-eslint",
+  rules: {
+    "no-param-reassign": "off",
+  }
 }
diff --git a/src/css/stylish.css b/src/css/stylish.css
@@ -41,11 +41,8 @@ body {
 #date-selector-container {
   font-size: 16px;
   display: grid;
-  margin-left: 5%;
+  margin-left: 10%;
   margin-bottom: 5%;
-  grid-template-rows: repeat(5, auto);
-  grid-template-columns: auto auto;
-  grid-auto-flow: column;
   grid-auto-columns: 50% 50%;
 }
 
@@ -58,7 +55,7 @@ body {
 
 .mapboxgl-popup-content {
   font-family: 'Open Sans', sans-serif;
-  overflow: scroll;
+  overflow: auto;
 }
 
 .mapboxgl-popup-content h1 {

diff --git a/src/js/app.jsx b/src/js/app.jsx
@@ -20,7 +20,7 @@ const CLUSTER_RADIUS = 50;
 class Application extends Component {
   constructor(props) {
     super(props);
-    this.toggleCheckbox = this.toggleCheckbox.bind(this);
+
     this.state = {
       query: '',
       dates: [],
@@ -36,6 +36,10 @@ class Application extends Component {
     });
 
     this.bindMap = this.bindMap.bind(this);
+    this.filterAll = this.filterAll.bind(this);
+    this.filterToday = this.filterToday.bind(this);
+    this.filterTomorrow = this.filterTomorrow.bind(this);
+    this.toggleCheckbox = this.toggleCheckbox.bind(this);
 
     this.start = {
       lng: -122.416,
@@ -54,12 +58,6 @@ class Application extends Component {
       this.setState({ dates: data.dates });
       this.allShows = data.geojson.features;
 
-      // Add the dates
-      const dateEl = document.getElementById('date-selector-container');
-      render(<Dates
-        dates={this.state.dates}
-        handleCheckboxChange={this.toggleCheckbox}
-      />, dateEl);
 
       this.setupMap(data.geojson, this.state.dates);
 
@@ -96,6 +94,13 @@ class Application extends Component {
       const checkedDates = _.filter(this.state.dates, _.matches({ checked: true }));
       const checkedDatesList = _.map(checkedDates, 'date');
 
+      // Add the dates
+      const dateEl = document.getElementById('date-selector-container');
+      render(<Dates
+        dates={this.state.dates}
+        handleCheckboxChange={this.toggleCheckbox}
+      />, dateEl);
+
       // Set filter for points
       this.map.setFilter('shows', ['in', 'date'].concat(checkedDatesList));
 
@@ -198,14 +203,18 @@ class Application extends Component {
         });
       });
 
-      map.on('click', 'shows', e => this.addPopupAndEase(map, e));
-
-
-      $('#filter-all').on('click', () => {
-        // Util.toggleDates('all');
-        showAllShows(geojson);
-        // this.filterEl.value = '';
-        $('.close-filter-modal').click();
+      map.on('click', (e) => {
+        const m = 50;
+        const bbox = [[e.point.x - m, e.point.y - m], [e.point.x + m, e.point.y + m]];
+        const features = map.queryRenderedFeatures(bbox, { layers: ['shows'] });
+
+        this.popup.remove();
+        if (features.length) {
+          this.addPopupAndEase(map, { features });
+          // Hack to make popups work everytime
+          // eslint-disable-next-line
+          e.target._listeners['click'].pop();
+        }
       });
 
       map.addLayer({
@@ -289,13 +298,8 @@ class Application extends Component {
     const idx = dates.findIndex((obj => obj.date === date));
     dates[idx].checked = !dates[idx].checked;
 
-    const checkedDates = _.filter(dates, _.matches({ checked: true }));
-    const checkedDatesList = _.map(checkedDates, 'date');
-
-    const filteredByDate = this.allShows.filter(feature =>
-      _.includes(checkedDatesList, feature.properties.date));
-
-    this.setState({ dates, filteredByDate });
+    this.updateFilteredByDate(dates);
+    this.setState({ dates });
   }
 
   addPopupAndEase(map, e) {
@@ -321,6 +325,60 @@ class Application extends Component {
     }
   }
 
+  updateFilteredByDate(dates) {
+    const checkedDates = _.filter(dates, _.matches({ checked: true }));
+    const checkedDatesList = _.map(checkedDates, 'date');
+
+    const filteredByDate = this.allShows.filter(feature =>
+      _.includes(checkedDatesList, feature.properties.date));
+
+    this.setState({ filteredByDate });
+  }
+
+
+  filterAll() {
+    const { dates } = this.state;
+    const allDates = _.map(dates, (date) => {
+      date.checked = true; return date;
+    });
+
+    this.setState({
+      dates: allDates,
+      query: '',
+    });
+
+    this.updateFilteredByDate(dates);
+
+    $('#hide-filter-button').click();
+  }
+
+  filterDate(newDate) {
+    const { dates } = this.state;
+
+    const newDates = _.map(dates, (dateObj) => {
+      const someday = newDate.toString().slice(0, 10);
+      const somedayList = someday.split(' ');
+      somedayList[2] = String(parseInt(somedayList[2], 10));
+      const date = somedayList.join(' ');
+      dateObj.checked = dateObj.date === date;
+      return dateObj;
+    });
+
+    this.setState({ dates: newDates });
+    this.updateFilteredByDate(dates);
+    $('#hide-filter-button').click();
+  }
+
+  filterToday() {
+    this.filterDate(new Date());
+  }
+
+  filterTomorrow() {
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    this.filterDate(tomorrow);
+  }
+
   bindMap(el) {
     this.mapContainer = el;
   }
@@ -361,13 +419,13 @@ class Application extends Component {
 
         <div id="see-list-button-mobile">
           <div className="button-container">
-            <a href="#" id="open-list" className="button overlay-item">See List</a>
+            <button href="#" id="open-list" className="button overlay-item">See List</button>
           </div>
         </div>
 
 
         <div className="map-overlay">
-          <a href="javascript:void(0)" className="closebtn">&#215;</a>
+          <button className="closebtn">&#215;</button>
 
           <fieldset>
             <input
@@ -382,15 +440,15 @@ class Application extends Component {
 
 
           <div className="button-container">
-            <a href="#" id="filter-button" className="button overlay-item">Filter shows</a>
-            <a href="#" id="hide-filter-button" className="hidden button overlay-item">Hide filters</a>
+            <button id="filter-button" className="button overlay-item">Filter shows</button>
+            <button id="hide-filter-button" className="hidden button overlay-item">Hide filters</button>
           </div>
 
           <div id="filters" className="hidden">
             <div className="button-container">
-              <a href="#" id="filter-all" className="button">All Shows</a>
-              <a href="#" id="filter-today" className="button">Today</a>
-              <a href="#" id="filter-tomorrow" className="button">Tomorrow</a>
+              <button id="filter-today" onClick={this.filterToday} className="button">Today</button>
+              <button id="filter-tomorrow" onClick={this.filterTomorrow} className="button">Tomorrow</button>
+              <button id="filter-all" onClick={this.filterAll} className="button">All Shows</button>
             </div>
             <div>
               <div id="date-selector-container" />

diff --git a/src/js/components/dates/DateSelector.jsx b/src/js/components/dates/DateSelector.jsx
@@ -5,11 +5,16 @@ export default class DateSelector extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      isChecked: true,
+      isChecked: this.props.isChecked,
     };
     this.handleChange = this.handleChange.bind(this);
   }
 
+  componentWillReceiveProps(nextProps) {
+    const { isChecked } = nextProps;
+    this.setState({ isChecked });
+  }
+
   handleChange(e) {
     // Update dates in application for map to use
     this.props.handleCheckboxChange(e.target.value);
@@ -39,6 +44,7 @@ export default class DateSelector extends Component {
 
 DateSelector.propTypes = {
   date: PropTypes.string.isRequired,
+  isChecked: PropTypes.bool.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
 };
 
diff --git a/src/js/components/dates/Dates.jsx b/src/js/components/dates/Dates.jsx
@@ -15,6 +15,7 @@ export default class Dates extends Component {
       const selector = (<DateSelector
         date={dates[d].date}
         key={dates[d].id}
+        isChecked={dates[d].checked}
         handleCheckboxChange={this.props.handleCheckboxChange}
       />);
       selectors.push(selector);