From 20025dac57b10fe3f75d38b6c0d4f1d36b571de5 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Thu, 3 Mar 2022 13:00:31 -0500
Subject: [PATCH] Remove warnings

---
 src/components/Toolbar.js                     |  2 +-
 src/components/controls/CardStack.js          |  3 ++-
 .../space/carto/atoms/SelectedEvents.js       | 17 +++++++++-----
 src/components/time/atoms/Markers.js          | 22 +++++++++----------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index e0b7611..897ce65 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -217,7 +217,7 @@ class Toolbar extends React.Component {
     return (
       <div className={classes}>
         {this.renderClosePanel()}
-        <Tabs selectedIndex={this.state._selected}>
+        <Tabs onSelect={() => null} selectedIndex={this.state._selected}>
           {narratives && narratives.length !== 0
             ? this.renderToolbarNarrativePanel()
             : null}
diff --git a/src/components/controls/CardStack.js b/src/components/controls/CardStack.js
index 3c6c841..f5faab5 100644
--- a/src/components/controls/CardStack.js
+++ b/src/components/controls/CardStack.js
@@ -8,6 +8,7 @@ import {
 import * as selectors from "../../selectors";
 import { getFilterIdxFromColorSet } from "../../common/utilities";
 import copy from "../../common/data/copy.json";
+import hash from "object-hash";
 
 class CardStack extends React.Component {
   constructor() {
@@ -80,7 +81,7 @@ class CardStack extends React.Component {
       return (
         <Card
           ref={thisRef}
-          key={idx}
+          key={hash(content)}
           content={content}
           language={this.props.language}
           isLoading={this.props.isLoading}
diff --git a/src/components/space/carto/atoms/SelectedEvents.js b/src/components/space/carto/atoms/SelectedEvents.js
index 6d341c5..d56db3a 100644
--- a/src/components/space/carto/atoms/SelectedEvents.js
+++ b/src/components/space/carto/atoms/SelectedEvents.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { Portal } from "react-portal";
 import colors from "../../../../common/global";
+import hash from "object-hash";
 
 class MapSelectedEvents extends React.Component {
   renderMarker(marker) {
@@ -11,15 +12,19 @@ class MapSelectedEvents extends React.Component {
     const styles = this.props.styles;
     const r = marker.radius ? marker.radius + 5 : 24;
     return (
-      <g className="location-marker" transform={`translate(${x - r}, ${y})`}>
+      <g
+        key={hash(marker)}
+        className="location-marker"
+        transform={`translate(${x - r}, ${y})`}
+      >
         <path
           className="leaflet-interactive"
           stroke={styles ? styles.stroke : colors.primaryHighlight}
-          stroke-opacity="1"
-          stroke-width={styles ? styles["stroke-width"] : 2}
-          stroke-linecap=""
-          stroke-linejoin="round"
-          stroke-dasharray={styles ? styles["stroke-dasharray"] : "2,2"}
+          strokeOpacity="1"
+          strokeWidth={styles ? styles["stroke-width"] : 2}
+          strokeLinecap=""
+          strokeLinejoin="round"
+          strokeDasharray={styles ? styles["stroke-dasharray"] : "2,2"}
           fill="none"
           d={`M0,0a${r},${r} 0 1,0 ${r * 2},0 a${r},${r} 0 1,0 -${r * 2},0 `}
         />
diff --git a/src/components/time/atoms/Markers.js b/src/components/time/atoms/Markers.js
index e0c06ff..5211c61 100644
--- a/src/components/time/atoms/Markers.js
+++ b/src/components/time/atoms/Markers.js
@@ -1,5 +1,6 @@
 import React from "react";
 import colors from "../../../common/global";
+import hash from "object-hash";
 import {
   getEventCategories,
   isLatitude,
@@ -22,20 +23,19 @@ const TimelineMarkers = ({
     function renderCircle(y) {
       return (
         <circle
+          key={hash(event)}
           className="timeline-marker"
           cx={0}
           cy={0}
           stroke={styles ? styles.stroke : colors.primaryHighlight}
-          stroke-opacity="1"
-          stroke-width={styles ? styles["stroke-width"] : 1}
-          stroke-linejoin="round"
-          stroke-dasharray={styles ? styles["stroke-dasharray"] : "2,2"}
+          strokeOpacity="1"
+          strokeWidth={styles ? styles["stroke-width"] : 1}
+          strokeLinejoin="round"
+          strokeDasharray={styles ? styles["stroke-dasharray"] : "2,2"}
           style={{
             transform: `translate(${getEventX(event)}px, ${y}px)`,
-            "-webkit-transition": `transform ${
-              transitionDuration / 1000
-            }s ease`,
-            "-moz-transition": "none",
+            WebkitTransition: `transform ${transitionDuration / 1000}s ease`,
+            MozTransition: "none",
             opacity: 1,
           }}
           r={eventRadius * 2}
@@ -51,9 +51,9 @@ const TimelineMarkers = ({
           width={eventRadius / 1.5}
           height={dims.contentHeight - 55}
           stroke={styles ? styles.stroke : colors.primaryHighlight}
-          stroke-opacity="1"
-          stroke-width={styles ? styles["stroke-width"] : 1}
-          stroke-dasharray={styles ? styles["stroke-dasharray"] : "2,2"}
+          strokeOpacity="1"
+          strokeWidth={styles ? styles["stroke-width"] : 1}
+          strokeDasharray={styles ? styles["stroke-dasharray"] : "2,2"}
           style={{
             transform: `translate(${getEventX(event)}px)`,
             opacity: 0.7,