From 4612384a7d188af6c449c4e3395a8ba68de6a181 Mon Sep 17 00:00:00 2001
From: HF <hf@pixelplanet.fun>
Date: Mon, 11 Jul 2022 10:49:11 +0200
Subject: [PATCH] fix some key prop errors

---
 src/components/CanvasItem.jsx                   | 16 ++++++++--------
 src/components/Modtools.jsx                     |  2 +-
 src/components/Window.jsx                       | 11 ++++++++++-
 src/components/contextmenus/ChannelDropDown.jsx |  2 ++
 src/components/windows/Chat.jsx                 | 12 +++++++-----
 5 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/CanvasItem.jsx b/src/components/CanvasItem.jsx
index 31caa6b..96ebcea 100644
--- a/src/components/CanvasItem.jsx
+++ b/src/components/CanvasItem.jsx
@@ -26,17 +26,17 @@ const CanvasItem = ({
     <p className="modalcvtext">
       <span className="modaltitle">{canvas.title}</span><br />
       {(online) && (
-        <>
+        <React.Fragment key="online">
           {t`Online Users`}:&nbsp;
           <span className="modalinfo">{online}</span><br />
-        </>
+        </React.Fragment>
       )}
       <span className="modalinfo">{canvas.desc}</span><br />
       {t`Cooldown`}:&nbsp;
       <span className="modalinfo">
         {(canvas.pcd && canvas.bcd !== canvas.pcd)
-          ? <span> {canvas.bcd / 1000}s / {canvas.pcd / 1000}s</span>
-          : <span> {canvas.bcd / 1000}s</span>}
+          ? <span key="cdf"> {canvas.bcd / 1000}s / {canvas.pcd / 1000}s</span>
+          : <span key="cd"> {canvas.bcd / 1000}s</span>}
       </span><br />
       {t`Stacking till`}:&nbsp;
       <span className="modalinfo"> {canvas.cds / 1000}s</span><br />
@@ -46,7 +46,7 @@ const CanvasItem = ({
       }
       </span><br />
       {(canvas.req !== undefined) && (
-        <>
+        <React.Fragment key="req">
           <span>
             {t`Requirements`}:<br />
             <span className="modalinfo">
@@ -60,13 +60,13 @@ const CanvasItem = ({
             </span>
           </span>
           <br />
-        </>
+        </React.Fragment>
       )}
       {t`Dimensions`}:&nbsp;
       <span className="modalinfo"> {canvas.size} x {canvas.size}
         {(canvas.v)
-          ? <span> x {THREE_CANVAS_HEIGHT} Voxels</span>
-          : <span> Pixels</span>}
+          ? <span key="voxsize"> x {THREE_CANVAS_HEIGHT} Voxels</span>
+          : <span key="pxlsize"> Pixels</span>}
       </span>
     </p>
   </div>
diff --git a/src/components/Modtools.jsx b/src/components/Modtools.jsx
index eb8adb6..0134e9d 100644
--- a/src/components/Modtools.jsx
+++ b/src/components/Modtools.jsx
@@ -496,7 +496,7 @@ function Modtools() {
           <input
             type="date"
             value={date}
-            requiredPattern="\d{4}-\d{2}-\d{2}"
+            pattern="\d{4}-\d{2}-\d{2}"
             min={canvases[selectedCanvas].sd}
             max={maxDate}
             onChange={(evt) => {
diff --git a/src/components/Window.jsx b/src/components/Window.jsx
index 8612cd9..e5b1ec1 100644
--- a/src/components/Window.jsx
+++ b/src/components/Window.jsx
@@ -110,9 +110,11 @@ const Window = ({ id }) => {
     >
       <div
         className="win-topbar"
+        key="topbar"
       >
         <span
           className="win-topbtn"
+          key="clonebtn"
           onClick={clone}
           title={t`Clone`}
         >
@@ -120,6 +122,7 @@ const Window = ({ id }) => {
         </span>
         <span
           className="win-title"
+          key={`title-${name}-${title}`}
           ref={titleBarRef}
           title={t`Move`}
         >
@@ -127,6 +130,7 @@ const Window = ({ id }) => {
         </span>
         <span
           className="win-topbtn"
+          key="maxbtn"
           onClick={maximize}
           title={t`Maximize`}
         >
@@ -134,6 +138,7 @@ const Window = ({ id }) => {
         </span>
         <span
           className="win-topbtn close"
+          key="closebtn"
           onClick={close}
           title={t`Close`}
         >
@@ -144,10 +149,14 @@ const Window = ({ id }) => {
         className="win-resize"
         title={t`Resize`}
         ref={resizeRef}
+        key="winres"
       >
         ▨
       </div>
-      <div className="win-content">
+      <div 
+        className="win-content"
+        key="content"
+      >
         <Content windowId={id} />
       </div>
     </div>
diff --git a/src/components/contextmenus/ChannelDropDown.jsx b/src/components/contextmenus/ChannelDropDown.jsx
index 4e2a58f..625ab6d 100644
--- a/src/components/contextmenus/ChannelDropDown.jsx
+++ b/src/components/contextmenus/ChannelDropDown.jsx
@@ -116,6 +116,7 @@ const ChannelDropDown = ({
     >
       <div
         ref={buttonRef}
+        key="expbtn"
         role="button"
         tabIndex={-1}
         onClick={() => setShow(true)}
@@ -130,6 +131,7 @@ const ChannelDropDown = ({
         && (
         <div
           ref={wrapperRef}
+          key="dropdown"
           style={{
             position: 'absolute',
             bottom: offset,
diff --git a/src/components/windows/Chat.jsx b/src/components/windows/Chat.jsx
index 21b1ff1..f4f9b89 100644
--- a/src/components/windows/Chat.jsx
+++ b/src/components/windows/Chat.jsx
@@ -52,9 +52,11 @@ const Chat = ({
   });
 
   const channelMessages = messages[chatChannel] || [];
-  if (channels[chatChannel] && !messages[chatChannel] && !fetching) {
-    dispatch(fetchChatMessages(chatChannel));
-  }
+  useEffect(() => {
+    if (channels[chatChannel] && !messages[chatChannel] && !fetching) {
+      dispatch(fetchChatMessages(chatChannel));
+    }
+  }, [channels, messages, chatChannel]);
 
   useEffect(() => {
     if (channels[chatChannel]) {
@@ -175,7 +177,7 @@ const Chat = ({
         }}
       >
         {(ownName) ? (
-          <>
+          <React.Fragment key={`chtipt-${windowId}`}>
             <input
               style={{
                 flexGrow: 1,
@@ -198,7 +200,7 @@ const Chat = ({
             >
               ‣
             </button>
-          </>
+          </React.Fragment>
         ) : (
           <div
             className="modallink"