fix broken stuff

src/components/Converter.jsx

@@ -264,6 +264,7 @@ function Converter() {
           {
             ImageQuantizerKernels.map((strat) => (
               <option
+                key={strat}
                 value={strat}
               >{strat}</option>
             ))
@@ -334,6 +335,7 @@ function Converter() {
           {
             ColorDistanceCalculators.map((strat) => (
               <option
+                key={strat}
                 value={strat}
               >{strat}</option>
             ))

src/components/ModCanvastools.jsx

@@ -267,6 +267,7 @@ function ModCanvastools() {
       >
         {['build', 'protect', 'wipe'].map((opt) => (
           <option
+            key={opt}
             value={opt}
           >
             {opt}
@@ -330,6 +331,7 @@ function ModCanvastools() {
       >
         {['protect', 'unprotect'].map((opt) => (
           <option
+            key={opt}
             value={opt}
           >
             {opt}
@@ -485,6 +487,7 @@ function ModCanvastools() {
       >
         {['spare', 'spareext', 'spareextu'].map((opt) => (
           <option
+            key={opt}
             value={opt}
           >
             {opt}

src/components/Tab.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-const Tab = ({ onClick, activeTab, label }) => {
+const Tab = ({ onClick, active, label }) => {
   let className = 'tab-list-item';
-  if (activeTab === label) {
+  if (active) {
     className += ' tab-list-active';
   }
 

src/components/Tabs.jsx

@@ -1,39 +1,35 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import Tab from './Tab';
 
-const Tabs = ({ children }) => {
-  const [activeTab, setActiveTab] = useState(children[0].props.label);
+const Tabs = ({ children, activeTab, setActiveTab }) => (
+  <div className="tabs">
+    <ol className="tab-list">
+      {children.map((child) => {
+        if (!child.props) {
+          return undefined;
+        }
+        const { label } = child.props;
 
-  return (
-    <div className="tabs">
-      <ol className="tab-list">
-        {children.map((child) => {
-          if (!child.props) {
-            return undefined;
-          }
-          const { label } = child.props;
-
-          return (
-            <Tab
-              activeTab={activeTab}
-              key={label}
-              label={label}
-              onClick={(tab) => setActiveTab(tab)}
-            />
-          );
-        })}
-      </ol>
-      <div className="tab-content">
-        {children.map((child) => {
-          if (!child.props || child.props.label !== activeTab) {
-            return undefined;
-          }
-          return child.props.children;
-        })}
-      </div>
+        return (
+          <Tab
+            active={activeTab === label}
+            key={label}
+            label={label}
+            onClick={(tab) => setActiveTab(tab)}
+          />
+        );
+      })}
+    </ol>
+    <div className="tab-content">
+      {children.map((child) => {
+        if (!child.props || child.props.label !== activeTab) {
+          return undefined;
+        }
+        return child.props.children;
+      })}
     </div>
-  );
-};
+  </div>
+);
 
 export default Tabs;

src/components/windows/Chat.jsx

@@ -55,7 +55,7 @@ const Chat = ({
   const {
     chatChannel = 1,
     inputMessage = '',
-  } = useSelector((state) => state.windows.args[windowId]);
+  } = useSelector((state) => state.windows.args[windowId] || {});
 
   const { stayScrolled } = useStayScrolled(listRef, {
     initialScroll: Infinity,
@@ -101,7 +101,7 @@ const Chat = ({
     if (!inptMsg) return;
     // send message via websocket
     SocketClient.sendChatMessage(inptMsg, chatChannel);
-    dispatch(setChatInputMessage(''));
+    setChatInputMessage('');
   }
 
   /*
@@ -196,9 +196,7 @@ const Chat = ({
               }}
               id={`chtipt-${windowId}`}
               value={inputMessage}
-              onChange={(e) => dispatch(
-                setChatInputMessage(e.target.value),
-              )}
+              onChange={(e) => setChatInputMessage(e.target.value)}
               autoComplete="off"
               maxLength="200"
               type="text"

src/components/windows/UserArea.jsx

@@ -2,11 +2,14 @@
  *
  */
 
-import React, { Suspense } from 'react';
+import React, { Suspense, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { t } from 'ttag';
 
-import { fetchStats } from '../../store/actions';
+import {
+  fetchStats,
+  setWindowArgs,
+} from '../../store/actions';
 import useInterval from '../hooks/interval';
 import LogInArea from '../LogInArea';
 import Tabs from '../Tabs';
@@ -22,8 +25,17 @@ const UserArea = ({ windowId }) => {
   const name = useSelector((state) => state.user.name);
   const userlvl = useSelector((state) => state.user.userlvl);
   const lastStatsFetch = useSelector((state) => state.ranks.lastFetch);
+  const {
+    activeTab = t`Profile`,
+  } = useSelector((state) => state.windows.args[windowId] || {});
   const dispatch = useDispatch();
 
+  const setActiveTab = useCallback((label) => {
+    dispatch(setWindowArgs(windowId, {
+      activeTab: label,
+    }));
+  }, [dispatch]);
+
   useInterval(() => {
     if (Date.now() - 300000 > lastStatsFetch) {
       dispatch(fetchStats());
@@ -32,7 +44,7 @@ const UserArea = ({ windowId }) => {
 
   return (
     <div style={{ textAlign: 'center' }}>
-      <Tabs>
+      <Tabs activeTab={activeTab} setActiveTab={setActiveTab}>
         <div label={t`Profile`}>
           {(name) ? <UserAreaContent /> : <LogInArea windowId={windowId} />}
         </div>

src/store/actions/index.js

@@ -606,6 +606,7 @@ export function setWindowArgs(
 ) {
   return {
     type: 'SET_WINDOW_ARGS',
+    windowId,
     args,
   };
 }

src/store/reducers/windows.js

@@ -210,7 +210,9 @@ export default function windows(
         windows: newWindows,
         args: {
           ...state.args,
-          [windowId]: args,
+          [windowId]: {
+            ...args,
+          },
         },
       });
     }