Update dependencies

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@color2k/compat": "^1.0.0-rc.5",
-    "@scripters/use-socket.io": "git+https://github.com/jrmi/use-socket.io.git#updated",
+    "@scripters/use-socket.io": "github:jrmi/use-socket.io#updated-v2",
     "@sentry/react": "^6.18.2",
     "@sentry/tracing": "^6.18.2",
     "chota": "^0.8.0",
@@ -20,33 +20,33 @@
     "marked": "^4.0.12",
     "memoizee": "^0.4.14",
     "nanoid": "^3.3.0",
-    "openvidu-browser": "^2.17.0",
+    "openvidu-browser": "~2.17.0",
     "randomcolor": "^0.5.4",
     "rc-slider": "^9.7.2",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-color": "^2.19.3",
     "react-confirm-alert": "^2.6.1",
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.0.1",
-    "react-final-form": "^6.5.0",
+    "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.3",
     "react-i18next": "^11.7.0",
     "react-query": "^3.13.4",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-sync-board": "^0.5.6",
+    "react-sync-board": "^0.6.0",
     "react-toastify": "^6.1.0",
     "react-useportal": "^1.0.14",
-    "recoil": "^0.5.2",
+    "recoil": "^0.7.0",
     "socket.io-client": "^4.1.2",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "use-async-effect": "^2.2.3"
   },
   "scripts": {
     "dev": "vite",
     "start": "npm run dev -- --open",
     "build": "vite build",
-    "serve": "vite preview --open",
+    "serve": "vite preview --open --port=5000",
     "lint": "eslint src/",
     "prettier": "prettier --write src/",
     "check": "node ./checkConfig.mjs",

src/gameComponents/ActionList.jsx

@@ -98,7 +98,7 @@ const Action = ({ name, onUp, onDown, onRemove }) => {
   );
 };
 
-const ActionList = ({ name, initialValue, availableActions = [] }) => {
+const ActionList = ({ name, initialValue, availableActions }) => {
   const { t } = useTranslation();
   const { actionMap } = useGameItemActions();
 
@@ -133,7 +133,7 @@ const ActionList = ({ name, initialValue, availableActions = [] }) => {
             <option key={name} value={""}>
               {t("Select an action to add...")}
             </option>
-            {availableActions.map((name) => {
+            {(availableActions || []).map((name) => {
               return (
                 <option key={name} value={name}>
                   {actionMap[name].genericLabel || actionMap[name].label()}

src/gameComponents/ItemForm.jsx

@@ -58,25 +58,15 @@ const toInt = (val) => {
 const ItemForm = ({ items, types, extraExcludeFields = {} }) => {
   const { t } = useTranslation();
 
-  let FieldsComponent;
   const oneType = types.length === 1;
 
-  if (items.length === 1) {
-    FieldsComponent = getFormFieldComponent(items[0].type);
-  } else {
+  const FieldsComponent = React.useMemo(() => {
     if (oneType) {
-      FieldsComponent = getFormFieldComponent(types[0]);
+      return getFormFieldComponent(types[0]);
     } else {
-      FieldsComponent = () => null;
+      return () => null;
     }
-  }
-
-  const defaultActions = React.useMemo(() => {
-    if (oneType) {
-      return getDefaultActionsFromItem(items[0]);
-    }
-    return undefined;
-  }, [items, oneType]);
+  }, [oneType, types]);
 
   const availableActions = React.useMemo(() => {
     if (oneType) {
@@ -88,12 +78,13 @@ const ItemForm = ({ items, types, extraExcludeFields = {} }) => {
   // Merge extra excluded fields and all item excluded fields
   const excludeFields = { ...getExcludedFields(types), ...extraExcludeFields };
 
-  let initialValues;
+  const initialValues = React.useMemo(() => {
+    const defaultActions = oneType ? getDefaultActionsFromItem(items[0]) : [];
 
     // Set initial values to item values only if one element selected
     // Empty object otherwise
     if (items.length === 1) {
-    initialValues = { ...items[0] };
+      const initialValues = { ...items[0] };
       if (items.length === 1) {
         initialValues.actions = (initialValues.actions || defaultActions).map(
           (action) => {
@@ -104,9 +95,11 @@ const ItemForm = ({ items, types, extraExcludeFields = {} }) => {
           }
         );
       }
+      return initialValues;
     } else {
-    initialValues = {};
+      return {};
     }
+  }, [items, oneType]);
 
   return (
     <>
@@ -233,7 +226,6 @@ const ItemForm = ({ items, types, extraExcludeFields = {} }) => {
           </Field>
         </Label>
       </div>
-
       {oneType && (
         <>
           <h3>{t("Item actions")}</h3>

src/ui/formUtils/AutoSave.jsx

@@ -5,6 +5,7 @@ const diff = (o1, o2) => {
   const keys = [...new Set([...Object.keys(o1), ...Object.keys(o2)])];
   const result = keys.reduce((diff, key) => {
     if (o1[key] === o2[key]) return diff;
+    if (JSON.stringify(o1[key]) === JSON.stringify(o2[key])) return diff;
     return {
       ...diff,
       [key]: o2[key],