From d91c98b82ecd8211f071fdb2a356f8796ecc1306 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Mon, 18 Dec 2023 21:14:30 +0100
Subject: [PATCH] fix: incorrect types in `ActionNavigate` (#7462)

---
 packages/excalidraw/actions/actionNavigate.tsx |  8 ++++----
 packages/excalidraw/actions/types.ts           |  2 +-
 packages/excalidraw/components/UserList.tsx    | 16 ++++++++--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/excalidraw/actions/actionNavigate.tsx b/packages/excalidraw/actions/actionNavigate.tsx
index 8e8d3023..4ce79b96 100644
--- a/packages/excalidraw/actions/actionNavigate.tsx
+++ b/packages/excalidraw/actions/actionNavigate.tsx
@@ -39,15 +39,15 @@ export const actionGoToCollaborator = register({
     };
   },
   PanelComponent: ({ updateData, data, appState }) => {
-    const [socketId, collaborator, withName, isBeingFollowed] =
+    const { clientId, collaborator, withName, isBeingFollowed } =
       data as GoToCollaboratorComponentProps;
 
-    const background = getClientColor(socketId);
+    const background = getClientColor(clientId);
 
     return withName ? (
       <div
         className="dropdown-menu-item dropdown-menu-item-base UserList__collaborator"
-        onClick={() => updateData({ ...collaborator, socketId })}
+        onClick={() => updateData<Collaborator>(collaborator)}
       >
         <Avatar
           color={background}
@@ -71,7 +71,7 @@ export const actionGoToCollaborator = register({
       <Avatar
         color={background}
         onClick={() => {
-          updateData({ ...collaborator, socketId });
+          updateData(collaborator);
         }}
         name={collaborator.username || ""}
         src={collaborator.avatarUrl}
diff --git a/packages/excalidraw/actions/types.ts b/packages/excalidraw/actions/types.ts
index c74e1955..118a5b23 100644
--- a/packages/excalidraw/actions/types.ts
+++ b/packages/excalidraw/actions/types.ts
@@ -129,7 +129,7 @@ export type ActionName =
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
   appState: AppState;
-  updateData: (formData?: any) => void;
+  updateData: <T = any>(formData?: T) => void;
   appProps: ExcalidrawProps;
   data?: Record<string, any>;
   app: AppClassProperties;
diff --git a/packages/excalidraw/components/UserList.tsx b/packages/excalidraw/components/UserList.tsx
index 2791d9ef..ba01b52d 100644
--- a/packages/excalidraw/components/UserList.tsx
+++ b/packages/excalidraw/components/UserList.tsx
@@ -13,12 +13,12 @@ import { searchIcon } from "./icons";
 import { t } from "../i18n";
 import { isShallowEqual } from "../utils";
 
-export type GoToCollaboratorComponentProps = [
-  ClientId,
-  Collaborator,
-  boolean,
-  boolean,
-];
+export type GoToCollaboratorComponentProps = {
+  clientId: ClientId;
+  collaborator: Collaborator;
+  withName: boolean;
+  isBeingFollowed: boolean;
+};
 
 /** collaborator user id or socket id (fallback) */
 type ClientId = string & { _brand: "UserId" };
@@ -60,12 +60,12 @@ const renderCollaborator = ({
   shouldWrapWithTooltip?: boolean;
   isBeingFollowed: boolean;
 }) => {
-  const data: GoToCollaboratorComponentProps = [
+  const data: GoToCollaboratorComponentProps = {
     clientId,
     collaborator,
     withName,
     isBeingFollowed,
-  ];
+  };
   const avatarJSX = actionManager.renderAction("goToCollaborator", data);
 
   return (