Merge pull request #18 from gaearon/fix-warnings

src/components/TemplateCover.js

@@ -51,9 +51,9 @@ class TemplateCover extends React.Component {
       featureLang === 0
         ? featureVideo
         : {
-          ...translations[featureLang - 1],
-          poster: featureVideo.poster,
-        };
+            ...translations[featureLang - 1],
+            poster: featureVideo.poster,
+          };
 
     return (
       <div>
@@ -64,6 +64,7 @@ class TemplateCover extends React.Component {
               if (featureLang !== langIdx) {
                 return (
                   <div
+                    key={trans.code}
                     onClick={() => this.setState({ featureLang: langIdx })}
                     className="trans-button"
                   >
@@ -73,6 +74,7 @@ class TemplateCover extends React.Component {
               } else {
                 return (
                   <div
+                    key="ENG"
                     onClick={() => this.setState({ featureLang: 0 })}
                     className="trans-button"
                   >
@@ -99,6 +101,7 @@ class TemplateCover extends React.Component {
       <div className="row">
         {headerVideos.slice(0, 2).map((media, index) => (
           <div
+            key={index}
             className="cell plain"
             onClick={() => this.setState({ video: index })}
           >
@@ -208,8 +211,9 @@ class TemplateCover extends React.Component {
           </div>
 
           {Array.isArray(this.props.cover.description) ? (
-            this.props.cover.description.map((e) => (
+            this.props.cover.description.map((e, index) => (
               <div
+                key={index}
                 className="md-container"
                 dangerouslySetInnerHTML={{ __html: marked(e) }}
               />
@@ -230,6 +234,7 @@ class TemplateCover extends React.Component {
                 {videos &&
                   videos.slice(0, 2).map((media, index) => (
                     <div
+                      key={index}
                       className="cell small"
                       onClick={this.onVideoClickHandler(index)}
                     >
@@ -243,6 +248,7 @@ class TemplateCover extends React.Component {
                 {videos.length > 2 &&
                   this.props.cover.videos.slice(2, 4).map((media, index) => (
                     <div
+                      key={index}
                       className="cell small"
                       onClick={this.onVideoClickHandler(index + 2)}
                     >

src/components/atoms/CoverIcon.js

@@ -8,7 +8,7 @@ const CoverIcon = ({ isActive, isDisabled, onClickHandler }) => {
 
   return (
     <button className={classes} onClick={onClickHandler}>
-      <i class="material-icons">info</i>
+      <i className="material-icons">home</i>
     </button>
   );
 };

src/components/atoms/SitesIcon.js

@@ -8,7 +8,7 @@ const SitesIcon = ({ isActive, isDisabled, onClickHandler }) => {
 
   return (
     <button className={classes} onClick={onClickHandler}>
-      <i class="material-icons">location_on</i>
+      <i className="material-icons">location_on</i>
     </button>
   );
 };

src/components/controls/FilterListPanel.js

@@ -59,11 +59,13 @@ function FilterListPanel({
           onClickCheckbox={() => onSelectFilter(key, matchingKeys)}
           color={assignedColor}
         />
-        {Object.keys(children).length > 0
-          ? Object.entries(children).map((filter) =>
+        {Object.keys(children).length > 0 ? (
+          <ul>
+            {Object.entries(children).map((filter) =>
               createNodeComponent(filter, depth + 1)
-            )
-          : null}
+            )}
+          </ul>
+        ) : null}
       </li>
     );
   }

src/components/controls/atoms/TelegramEmbed.js

@@ -68,7 +68,7 @@ class TelegramEmbed extends Component {
     );
   }
 
-  componentWillReceiveProps({ src }) {
+  UNSAFE_componentWillReceiveProps({ src }) {
     if (this.state.src !== src) {
       this.urlObj.href = src;
       const id = `telegram-post${this.urlObj.pathname.replace(

src/components/space/carto/Map.js

@@ -68,7 +68,7 @@ class Map extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!isIdentical(nextProps.domain.locations, this.props.domain.locations)) {
       this.loadClusterData(nextProps.domain.locations);
     }

src/components/space/carto/atoms/SatelliteOverlayToggle.js

@@ -17,7 +17,7 @@ const SatelliteOverlayToggle = ({
           style={{ backgroundImage: `url(${mapImg}` }}
           onClick={reset}
         >
-          <div class="label">{copy[language].tiles.default}</div>
+          <div className="label">{copy[language].tiles.default}</div>
         </button>
       ) : (
         <button
@@ -25,7 +25,7 @@ const SatelliteOverlayToggle = ({
           style={{ backgroundImage: `url(${satImg}` }}
           onClick={switchToSatellite}
         >
-          <div class="label">{copy[language].tiles.satellite}</div>
+          <div className="label">{copy[language].tiles.satellite}</div>
         </button>
       )}
     </div>

src/components/time/Categories.js

@@ -73,7 +73,10 @@ class TimelineCategories extends React.Component {
           className="drag-grabber"
           x={dims.marginLeft}
           y={dims.marginTop}
-          width={dims.width - dims.marginLeft - dims.width_controls}
+          width={Math.max(
+            0,
+            dims.width - dims.marginLeft - dims.width_controls
+          )}
           height={dims.contentHeight}
         />
       </g>

src/components/time/Timeline.js

@@ -44,7 +44,7 @@ class Timeline extends React.Component {
     this.addEventListeners();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (hash(nextProps) !== hash(this.props)) {
       this.setState({
         timerange: nextProps.timeline.range,

src/components/time/atoms/Clip.js

@@ -5,7 +5,7 @@ const TimelineClip = ({ dims }) => (
     <rect
       x={dims.marginLeft}
       y="0"
-      width={dims.width - dims.marginLeft - dims.width_controls}
+      width={Math.max(0, dims.width - dims.marginLeft - dims.width_controls)}
       height={dims.contentHeight}
     />
   </clipPath>

src/components/time/atoms/Labels.js

@@ -4,24 +4,24 @@ const TimelineLabels = ({ dims, timelabels }) => {
   return (
     <g>
       <line
-        class="axisBoundaries"
+        className="axisBoundaries"
         x1={dims.marginLeft}
         x2={dims.marginLeft}
         y1="10"
         y2="20"
       />
       <line
-        class="axisBoundaries"
+        className="axisBoundaries"
         x1={dims.width - dims.width_controls}
         x2={dims.width - dims.width_controls}
         y1="10"
         y2="20"
       />
-      <text class="timeLabel0 timeLabel" x="5" y="15">
+      <text className="timeLabel0 timeLabel" x="5" y="15">
         {timelabels[0]}
       </text>
       <text
-        class="timelabelF timeLabel"
+        className="timelabelF timeLabel"
         x={dims.width - dims.width_controls - 5}
         y="135"
         style={{ textAnchor: "end" }}