From d502228558dac80ff4360ff168ccbb771f0e511f Mon Sep 17 00:00:00 2001
From: Xander Johnson <xjohnson@slack-corp.com>
Date: Fri, 8 Nov 2019 16:09:58 -0800
Subject: [PATCH] add the only button

---
 src/css/stylish.css                      |  9 +++++++++
 src/js/app.jsx                           | 16 ++++++++++++++--
 src/js/components/dates/DateSelector.jsx | 10 +++++++++-
 src/js/components/dates/Dates.jsx        |  2 ++
 src/js/components/parser.js              |  8 ++------
 src/js/components/util.js                |  7 +++----
 6 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/css/stylish.css b/src/css/stylish.css
index f5e2022..dff3d62 100644
--- a/src/css/stylish.css
+++ b/src/css/stylish.css
@@ -46,6 +46,12 @@ body {
   grid-auto-columns: 50% 50%;
 }
 
+#date-selector-container button {
+  margin-top: 0px;
+  float: right;
+  color: #888;
+}
+
 /* Mapbox GL Stuff */
 
 .mapboxgl-popup {
@@ -170,6 +176,9 @@ body {
     grid-template-columns: unset;  
   }
 
+
+
+
   .map-overlay .closebtn {
     position: absolute;
     display: block;
diff --git a/src/js/app.jsx b/src/js/app.jsx
index bdd7088..3a35ae2 100644
--- a/src/js/app.jsx
+++ b/src/js/app.jsx
@@ -37,6 +37,7 @@ class Application extends Component {
 
     this.bindMap = this.bindMap.bind(this);
     this.filterAll = this.filterAll.bind(this);
+    this.filterDate = this.filterDate.bind(this);
     this.filterToday = this.filterToday.bind(this);
     this.filterTomorrow = this.filterTomorrow.bind(this);
     this.toggleCheckbox = this.toggleCheckbox.bind(this);
@@ -98,6 +99,7 @@ class Application extends Component {
       render(<Dates
         dates={this.state.dates}
         handleCheckboxChange={this.toggleCheckbox}
+        handleOnlyIsolation={this.filterDate}
       />, dateEl);
 
       // Set filter for points
@@ -361,6 +363,13 @@ class Application extends Component {
   filterDate(newDate) {
     const { dates } = this.state;
 
+    if (typeof newDate === 'string') {
+      // this is such garbage
+      // because we're in PST, this will be one day behind
+      newDate = new Date(newDate);
+      newDate.setDate(newDate.getDate() + 1);
+    }
+
     // Seriously, fuck javascript so much
     // what the serious fuck is wrong with this language
     // this is the most garbage language JFC
@@ -408,13 +417,16 @@ class Application extends Component {
         const popupMouseOver = () => {
           // Highlight corresponding feature on the map
           this.popup.setLngLat(feature.geometry.coordinates)
-            .setHTML(venue + prop.showHTML)
+            .setHTML(venue + prop.showModalHTML)
             .addTo(this.map);
         };
 
         const item = (
           <p key={prop.sid} onMouseOver={popupMouseOver} onFocus={popupMouseOver} >
-            {prop.showString}
+            <div style={{ float: 'right' }}>{Util.formatDate(prop.date)}</div>
+            {prop.venue} <br />
+            {prop.artists.join(' | ')} <br />
+            {prop.details}
           </p>
         );
         listings.push(item);
diff --git a/src/js/components/dates/DateSelector.jsx b/src/js/components/dates/DateSelector.jsx
index 0681adf..d2fd5a2 100644
--- a/src/js/components/dates/DateSelector.jsx
+++ b/src/js/components/dates/DateSelector.jsx
@@ -9,6 +9,7 @@ export default class DateSelector extends Component {
       isChecked: this.props.isChecked,
     };
     this.handleChange = this.handleChange.bind(this);
+    this.handleOnly = this.handleOnly.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -27,6 +28,10 @@ export default class DateSelector extends Component {
     ));
   }
 
+  handleOnly(e) {
+    this.props.handleOnlyIsolation(e.target.value);
+  }
+
   render() {
     const { date } = this.props;
     return (
@@ -37,7 +42,9 @@ export default class DateSelector extends Component {
           value={date}
           checked={this.state.isChecked}
           onChange={this.handleChange}
-        /> {formatDate(date)}
+        />
+        {formatDate(date)}
+        <button onClick={this.handleOnly} value={date}>only</button>
       </div>
     );
   }
@@ -47,5 +54,6 @@ DateSelector.propTypes = {
   date: PropTypes.string.isRequired,
   isChecked: PropTypes.bool.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
+  handleOnlyIsolation: PropTypes.func.isRequired,
 };
 
diff --git a/src/js/components/dates/Dates.jsx b/src/js/components/dates/Dates.jsx
index 12a58e3..372cda6 100644
--- a/src/js/components/dates/Dates.jsx
+++ b/src/js/components/dates/Dates.jsx
@@ -17,6 +17,7 @@ export default class Dates extends Component {
         key={dates[d].id}
         isChecked={dates[d].checked}
         handleCheckboxChange={this.props.handleCheckboxChange}
+        handleOnlyIsolation={this.props.handleOnlyIsolation}
       />);
       selectors.push(selector);
     }
@@ -29,4 +30,5 @@ Dates.propTypes = {
   // eslint-disable-next-line
   dates: PropTypes.array.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
+  handleOnlyIsolation: PropTypes.func.isRequired,
 };
diff --git a/src/js/components/parser.js b/src/js/components/parser.js
index 32e617f..ba51a2b 100644
--- a/src/js/components/parser.js
+++ b/src/js/components/parser.js
@@ -104,13 +104,10 @@ export default class Parser {
         }
 
         const formattedDate = formatDate(dateKeys[i]);
-        const showString = `${formattedDate} - ${
-          showData.venue
-        } | ${showData.artists.join(' | ')} | ${showData.details}`;
         const artistsString = showData.artists
           .map(x => `- ${x} <br/>`)
           .join('');
-        const showHTML = `<h2> ${formattedDate} </h2><br/><h3> ${artistsString}<br/> ${showData.details}</h3>`;
+        const showModalHTML = `<h2> ${formattedDate} </h2><br/><h3> ${artistsString}<br/> ${showData.details}</h3>`;
 
         const show = {
           type: 'Feature',
@@ -124,8 +121,7 @@ export default class Parser {
             venue: showData.venue,
             artists: showData.artists,
             details: showData.details.replace(/ ,/g, ''), // fucking commas
-            showString,
-            showHTML,
+            showModalHTML,
           },
         };
 
diff --git a/src/js/components/util.js b/src/js/components/util.js
index 6e1ce22..ac44940 100644
--- a/src/js/components/util.js
+++ b/src/js/components/util.js
@@ -71,7 +71,7 @@ export function addPopup(map, venue, features, popup) {
     return key ? -1 : 1;
   });
 
-  const html = _.map(sortedFeatures, 'properties.showHTML').reverse().join('<hr><br/>');
+  const html = _.map(sortedFeatures, 'properties.showModalHTML').reverse().join('<hr><br/>');
   const point = features[0].geometry.coordinates;
   popup.setLngLat(point)
     .setHTML(venueHtml + html)
@@ -111,6 +111,5 @@ export function getWeekDay(date) {
 export function formatDate(dateString) {
   const date = DateTime.fromISO(dateString); // force pacific timezone
   date.setZone('America/Los_Angeles');
-  return `${date.weekdayShort}, ${date.month}-${date.day}`;
-}
-
+  return `${date.month}-${date.day} ${date.weekdayShort} `;
+}
\ No newline at end of file