From e49fafad9fafe3a3c691618a1ee0e066240c63af Mon Sep 17 00:00:00 2001
From: Daniel Demmel <dain@danieldemmel.me>
Date: Fri, 2 Jun 2017 17:14:51 +0100
Subject: [PATCH] fix: going through the app and fixing React errors / warnings

---
 src/app/components/app/index.js                |  4 ++--
 src/app/components/events/index.js             |  6 ++++--
 src/app/components/hero/index.js               |  1 -
 src/app/components/join-us/index.js            |  2 +-
 src/app/components/loader-wrapper/index.js     |  6 +++++-
 src/app/components/navigation-overlay/index.js |  2 +-
 src/app/components/related-content/index.js    |  4 ++--
 src/app/components/studio-contact/index.js     | 18 ++++++++----------
 src/app/components/video/index.js              |  6 ++----
 src/app/components/work-process/index.js       |  2 +-
 src/app/components/work/index.js               |  3 ++-
 11 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/app/components/app/index.js b/src/app/components/app/index.js
index 8b7e3a02..a3d2b914 100644
--- a/src/app/components/app/index.js
+++ b/src/app/components/app/index.js
@@ -102,9 +102,9 @@ const App = React.createClass({
     this.getViewportDimensions();
 
     /* Get dimensions of viewport to calculte mousePosition and scrollPosition (for example) */
-    window.addEventListener('scroll', this.getDocumentScrollPosition.bind(this), false);
+    window.addEventListener('scroll', this.getDocumentScrollPosition, false);
     /* Get new dimensions when device orientationchange etc */
-    window.addEventListener('resize', this.getViewportDimensions.bind(this), false);
+    window.addEventListener('resize', this.getViewportDimensions, false);
 
     Store.on('change', this.onChangeStore);
 
diff --git a/src/app/components/events/index.js b/src/app/components/events/index.js
index b3b40d5d..32b427b6 100644
--- a/src/app/components/events/index.js
+++ b/src/app/components/events/index.js
@@ -115,6 +115,7 @@ const PageEvents = React.createClass({
               className="events-list"
               featured={index === 0}
               data={eventData}
+              key={eventData.slug}
             />
           );
         });
@@ -139,11 +140,12 @@ const PageEvents = React.createClass({
     let output, events;
     if (archivedEvents) {
       if (archivedEvents.length) {
-        events = archivedEvents.map((archivedEventData, index) => {
+        events = archivedEvents.map(archivedEventData => {
           return (
             <ArchivedEventsListItem
               className='archived-events-list'
               data={archivedEventData}
+              key={archivedEventData.slug}
             />
           );
         });
@@ -182,7 +184,7 @@ const PageEvents = React.createClass({
       archivedEventsPaginationTotal,
       currentPage,
       footer,
-      documentScrollPosition, 
+      documentScrollPosition,
       viewportDimensions } = this.props;
     const classes = classnames('page-events', this.props.className, {
       loading: isLoadingInitialEvents || isLoadingStudioEvents
diff --git a/src/app/components/hero/index.js b/src/app/components/hero/index.js
index 9069a5d5..e2886e01 100644
--- a/src/app/components/hero/index.js
+++ b/src/app/components/hero/index.js
@@ -46,7 +46,6 @@ class Hero extends Component {
     if (this.props.showDownIndicator) {
       indicator = (
         <DownIndicator
-          ref="downIndicator"
           onClick={this.onClickDownIndicator}
         />
       );
diff --git a/src/app/components/join-us/index.js b/src/app/components/join-us/index.js
index 61cefec1..d80bb439 100644
--- a/src/app/components/join-us/index.js
+++ b/src/app/components/join-us/index.js
@@ -138,7 +138,7 @@ const PageJoinUs = React.createClass({
           aria-selected={studioSlug === selectedStudioSlug}
           className={`tab ${studioSlug} ${studioSlug === selectedStudioSlug ? 'active' : ''}`}
           ref={(ref) => studioSlug === selectedStudioSlug ? this.activeTab = ref : ''}
-          onClick={this.handleClick.bind(this)}
+          onClick={this.handleClick}
           style={studioSelectedColor}>
           <a
             href={uri}
diff --git a/src/app/components/loader-wrapper/index.js b/src/app/components/loader-wrapper/index.js
index 63ce1bf3..13ab27f9 100644
--- a/src/app/components/loader-wrapper/index.js
+++ b/src/app/components/loader-wrapper/index.js
@@ -15,12 +15,16 @@ class LoaderWrapper extends Component {
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.loaded) {
-      setTimeout(() => {
+      this.hideTimeout = window.setTimeout(() => {
         this.setState({ hide: true });
       }.bind(this), 500);
     }
   }
 
+  componentWillUnmount() {
+    window.clearTimeout(this.hideTimeout);
+  }
+
   render() {
     const { currentPage, homeLoaderShown, loaded, viewportDimensions } = this.props;
 
diff --git a/src/app/components/navigation-overlay/index.js b/src/app/components/navigation-overlay/index.js
index 5ea29204..abc4208f 100644
--- a/src/app/components/navigation-overlay/index.js
+++ b/src/app/components/navigation-overlay/index.js
@@ -83,7 +83,7 @@ const NavigationOverlay = React.createClass({
         hovered: slug === this.state.hoveredItem
       })
       return (
-        <div className={classes}></div>
+        <div className={classes} key={link.id}></div>
       );
     });
   },
diff --git a/src/app/components/related-content/index.js b/src/app/components/related-content/index.js
index 556db4bc..c790f644 100644
--- a/src/app/components/related-content/index.js
+++ b/src/app/components/related-content/index.js
@@ -22,10 +22,10 @@ export default class RelatedContent extends React.Component {
   renderItem(data) {
     let item;
     if(data.type === 'post') {
-      item = <div className="related-content-item"><BlogPostListItem data={data} /></div>;
+      item = <div className="related-content-item" key={data.id}><BlogPostListItem data={data} /></div>;
     } else {
       let image = get(data, '_embedded.wp:attachment.1');
-      item = <div className="related-content-item"><WorkItem data={data} image={image} /></div>;
+      item = <div className="related-content-item" key={data.id}><WorkItem data={data} image={image} /></div>;
     }
     return item;
   }
diff --git a/src/app/components/studio-contact/index.js b/src/app/components/studio-contact/index.js
index cce49fe3..1c1e6dfa 100644
--- a/src/app/components/studio-contact/index.js
+++ b/src/app/components/studio-contact/index.js
@@ -7,13 +7,6 @@ import kebabCase from 'lodash/string/kebabCase';
 
 import StudioClock from 'app/components/studio-clock';
 
-const phoneNumbers = {
-  'Sydney': '+61 2 8188 3900',
-  'London': '+44 (0)20 7613 0433',
-  'New York': '+1 212-518-4900',
-  'Malmö': '+46 (0)40-330480'
-};
-
 const StudioContact = React.createClass({
   getInitialState: function() {
     var date = moment();
@@ -22,12 +15,17 @@ const StudioContact = React.createClass({
   componentDidMount: function() {
     this.startClock();
   },
+  componentWillUnmount: function() {
+    this.stopClock();
+  },
   startClock: function() {
-    var self = this;
-    window.setInterval(function () {
-      self.setState({ date: moment() });
+    this.clockInterval = window.setInterval(function () {
+      this.setState({ date: moment() });
     }.bind(this), 60000);
   },
+  stopClock() {
+    window.clearInterval(this.clockInterval);
+  },
   onClick() {
     this.props.onClick && this.props.onClick();
   },
diff --git a/src/app/components/video/index.js b/src/app/components/video/index.js
index c6740317..1b7db67d 100644
--- a/src/app/components/video/index.js
+++ b/src/app/components/video/index.js
@@ -78,11 +78,9 @@ class Video extends Component {
           src={src}
           width="1280"
           height="720"
-          frameborder="0"
+          frameBorder="0"
           title="Video"
-          webkitallowfullscreen
-          mozallowfullscreen
-          allowfullscreen>
+          allowFullScreen>
         </iframe>
       </div>
     );
diff --git a/src/app/components/work-process/index.js b/src/app/components/work-process/index.js
index 0b5454e1..7cc50d65 100644
--- a/src/app/components/work-process/index.js
+++ b/src/app/components/work-process/index.js
@@ -38,7 +38,7 @@ class WorkProcess extends Component {
 
     const workProcess = data.map(item => {
       return (
-        <div className={`work-process-item ${kebabCase(item.title)}`}>
+        <div className={`work-process-item ${kebabCase(item.title)}`} key={item.name}>
           <img src={item.image} alt={`${item.title} icon`} />
           <h2 onClick={() => goToCapability(item.name)}>{item.title}</h2>
           <p>{item.text}</p>
diff --git a/src/app/components/work/index.js b/src/app/components/work/index.js
index b7cf3cf0..6d15c2d1 100644
--- a/src/app/components/work/index.js
+++ b/src/app/components/work/index.js
@@ -43,7 +43,8 @@ class PageWork extends Component {
 
   renderWhatWeDo() {
     const { isMobile } = this.props;
-    const workIntroExtra = workData.intro.extra.map(item => <p className="work-intro-extra">{item}</p>);
+
+    const workIntroExtra = workData.intro.extra.map(item => <p className="work-intro-extra" key={item}>{item}</p>);
 
     return (
       <div className="work-whatwedo-wrapper">