Randomly pulsate brewery icon

Also, remove interactivity from BreweryPage map
Aturberv · Jan 31, 2017 · 6962dda · 6962dda
1 parent a6f4804
commit 6962dda
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 37 deletions.
diff --git a/src/BreweryInfo/BreweryInfo.js b/src/BreweryInfo/BreweryInfo.js
@@ -17,6 +17,7 @@ const BreweryInfo = ({ info }) => {
         }
         <div className="brewery-hours">
         {
+          info.humanReadableHours &&
           info.humanReadableHours.map((day) =>
             <div key={day}><h5>{day}</h5></div>
           )

diff --git a/src/BreweryMap/BreweryMap.js b/src/BreweryMap/BreweryMap.js
@@ -1,36 +1,78 @@
-import React from 'react';
+import React, {Component} from 'react';
 import GoogleMap from 'google-map-react';
+import autoBind from 'react-autobind';
 import BreweryMarker from '../BreweryMarker/BreweryMarker';
 
-const BreweryMap = ({
-  googleMapsApiKey,
-  mapCenter,
-  mapZoom,
-  breweries,
-  activeCity
-}) => {
-
-  return (
-    <GoogleMap
-      bootstrapURLKeys={{ key: googleMapsApiKey, language: 'en' }}
-      center={ mapCenter }
-      zoom={ mapZoom }
-      defaultZoom={ 12 }
-    >
-      {
-        Object.keys(breweries).map((breweryKey) =>
-            <BreweryMarker
-               key={ breweryKey }
-               lat={ breweries[breweryKey].location.lat }
-               lng={ breweries[breweryKey].location.lng }
-               pageUrl={ `/${activeCity}/${breweryKey}` }
-               breweryKey={ breweryKey }
-               brewery={ breweries[breweryKey] }
-            />
-        )
-      }
-    </GoogleMap>
-  );
+class BreweryMap extends Component {
+
+  constructor(props) {
+    super(props);
+    autoBind(this);
+    this.state = {
+      pulsing: null
+    }
+  }
+
+  componentWillMount() {
+    var interval = setInterval(this.randomBrewery, 7000);
+    this.setState({
+      interval: interval
+    })
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.state.interval);
+  }
+
+  randomBrewery() {
+    this.setState({
+      pulsing: Math.floor(Math.random() * Object.keys(this.props.breweries).length)
+    });
+  }
+
+  render() {
+    const {
+      googleMapsApiKey,
+      mapCenter,
+      mapZoom,
+      breweries,
+      activeCity,
+      interactive = true,
+    } = this.props;
+
+    return (
+      <GoogleMap
+        bootstrapURLKeys={{ key: googleMapsApiKey, language: 'en' }}
+        center={ mapCenter }
+        zoom={ mapZoom }
+        options={!interactive && 
+                  {
+                    disableDefaultUI:true,
+                    draggable: false,
+                    zoomControl: false,
+                    scrollwheel: false,
+                    disableDoubleClickZoom: true
+                  }
+                }
+        defaultZoom={ 12 }
+      >
+        {
+          Object.keys(breweries).map((breweryKey, idx) =>
+              <BreweryMarker
+                 key={ breweryKey }
+                 lat={ breweries[breweryKey].location.lat }
+                 lng={ breweries[breweryKey].location.lng }
+                 pageUrl={ `/${activeCity}/${breweryKey}` }
+                 breweryKey={ breweryKey }
+                 brewery={ breweries[breweryKey] }
+                 pulsing={ interactive && idx === this.state.pulsing }
+              />
+          )
+        }
+      </GoogleMap>
+    );
+  }
 }
 
+
 export default BreweryMap;
diff --git a/src/BreweryMarker/BreweryMarker.css b/src/BreweryMarker/BreweryMarker.css
@@ -6,5 +6,30 @@
 	border-radius: 50%;
 	width: auto;
 	height: 30px;
-    box-shadow: 1px 1px 1px 1px #9fd2f6
-}
+    box-shadow: 1px 1px 1px 1px #9fd2f6;
+}
+
+.brewery-logo-ring {
+    border: 4px solid #9fd2f6;
+    -webkit-border-radius: 50px;
+    height: 50px;
+    width: 50px;
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    -webkit-animation: pulsate 1.5s ease-out;
+    -webkit-animation-iteration-count: infinite; 
+    opacity: 0.0
+}
+
+.brewery-logo-pulsate {
+    -webkit-animation: pulsate 1.5s ease-out;
+    -webkit-animation-iteration-count: infinite; 
+}
+
+@-webkit-keyframes pulsate {
+    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+    50% {opacity: 1.0;}
+    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
+}
+
diff --git a/src/BreweryMarker/BreweryMarker.js b/src/BreweryMarker/BreweryMarker.js
@@ -8,8 +8,10 @@ import './BreweryMarker.css';
 const BreweryMarker = ({
   brewery,
   breweryKey,
-  pageUrl
+  pageUrl,
+  pulsing
 }) => {
+  // TODO: show aggregate rating and open info
   const popoverHoverFocus = (
       <Popover id="popover-trigger-hover-focus" title={brewery.name}>
         <BreweryRating ratings={brewery.breweryRating} />
@@ -22,10 +24,13 @@ const BreweryMarker = ({
           <OverlayTrigger trigger={['hover', 'focus']} 
                           placement="top" 
                           overlay={popoverHoverFocus}>
-            <img
-              className="brewery-logo" 
-              src={brewery.breweryLogo ? brewery.breweryLogo : require('../images/beer_pin-3.png')} 
-              role="presentation" />
+            <div>
+              { pulsing && <div className="brewery-logo-ring"></div> }
+              <img
+                className="brewery-logo" 
+                src={brewery.breweryLogo ? brewery.breweryLogo : require('../images/beer_pin-3.png')} 
+                role="presentation" />
+            </div>
           </OverlayTrigger>
         </div>
       </Link>

diff --git a/src/BreweryPage/BreweryPage.js b/src/BreweryPage/BreweryPage.js
@@ -66,6 +66,7 @@ const BreweryPage = (
                                         mapZoom={ 15 }
                                         breweries={ activeCityBreweries }
                                         activeCity={ activeCity }
+                                        interactive={ false }
                             />
                         </div>
                     </Col>