From 2398d29f5fc7cdab70e17d39270e7b209dc741ec Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 3 Apr 2022 20:22:01 +0100
Subject: [PATCH 1/5] Fix li > li DOM nesting warning

---
 src/components/controls/FilterListPanel.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/controls/FilterListPanel.js b/src/components/controls/FilterListPanel.js
index 9d02e9b..52376da 100644
--- a/src/components/controls/FilterListPanel.js
+++ b/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>
     );
   }

From 3abac3ebadda31f16c4680cfd5176c0e9f2582f7 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 3 Apr 2022 20:26:43 +0100
Subject: [PATCH 2/5] Fix DOM property name warnings

---
 src/components/atoms/CoverIcon.js                         | 2 +-
 src/components/atoms/SitesIcon.js                         | 2 +-
 .../space/carto/atoms/SatelliteOverlayToggle.js           | 4 ++--
 src/components/time/atoms/Labels.js                       | 8 ++++----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/atoms/CoverIcon.js b/src/components/atoms/CoverIcon.js
index 1760793..0fee807 100644
--- a/src/components/atoms/CoverIcon.js
+++ b/src/components/atoms/CoverIcon.js
@@ -8,7 +8,7 @@ const CoverIcon = ({ isActive, isDisabled, onClickHandler }) => {
 
   return (
     <button className={classes} onClick={onClickHandler}>
-      <i class="material-icons">home</i>
+      <i className="material-icons">home</i>
     </button>
   );
 };
diff --git a/src/components/atoms/SitesIcon.js b/src/components/atoms/SitesIcon.js
index 4183ffc..ccb48a6 100644
--- a/src/components/atoms/SitesIcon.js
+++ b/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>
   );
 };
diff --git a/src/components/space/carto/atoms/SatelliteOverlayToggle.js b/src/components/space/carto/atoms/SatelliteOverlayToggle.js
index a08d4d9..226bf35 100644
--- a/src/components/space/carto/atoms/SatelliteOverlayToggle.js
+++ b/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>
diff --git a/src/components/time/atoms/Labels.js b/src/components/time/atoms/Labels.js
index 8f35fd9..60939fe 100644
--- a/src/components/time/atoms/Labels.js
+++ b/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" }}

From c5dad0ba577375ae1400d8428a9d9ba6fe94face Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 3 Apr 2022 20:48:53 +0100
Subject: [PATCH 3/5] Add missing keys

---
 src/components/TemplateCover.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/TemplateCover.js b/src/components/TemplateCover.js
index 151c326..c120f85 100644
--- a/src/components/TemplateCover.js
+++ b/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)}
                     >

From ad646a2a00b8fe4e0027b77c3ede904715c13aec Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 3 Apr 2022 20:52:25 +0100
Subject: [PATCH 4/5] Fix invalid <rect> width error

---
 src/components/time/Categories.js | 5 ++++-
 src/components/time/atoms/Clip.js | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/time/Categories.js b/src/components/time/Categories.js
index 74e7074..f5a8b41 100644
--- a/src/components/time/Categories.js
+++ b/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>
diff --git a/src/components/time/atoms/Clip.js b/src/components/time/atoms/Clip.js
index bb10a4a..6d82349 100644
--- a/src/components/time/atoms/Clip.js
+++ b/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>

From 5092a195fb56c7b8c7ac4557a94e3e8acc8ba60e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 3 Apr 2022 20:53:17 +0100
Subject: [PATCH 5/5] Rename unsafe lifecycle methods

---
 src/components/controls/atoms/TelegramEmbed.js | 2 +-
 src/components/space/carto/Map.js              | 2 +-
 src/components/time/Timeline.js                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/controls/atoms/TelegramEmbed.js b/src/components/controls/atoms/TelegramEmbed.js
index c874741..755bde1 100644
--- a/src/components/controls/atoms/TelegramEmbed.js
+++ b/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(
diff --git a/src/components/space/carto/Map.js b/src/components/space/carto/Map.js
index 51c619a..580249c 100644
--- a/src/components/space/carto/Map.js
+++ b/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);
     }
diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js
index 4eda796..aacc6f1 100644
--- a/src/components/time/Timeline.js
+++ b/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.app.timeline.range,