cleanup

src/actions/actionNavigate.tsx

@@ -57,8 +57,7 @@ export const actionGoToCollaborator = register({
 
     const background = getClientColor(clientId);
 
-    if (withName) {
-      return (
+    return withName ? (
       <DropdownMenu.Item
         onSelect={() => updateData({ ...collaborator, clientId })}
         icon={
@@ -73,10 +72,7 @@ export const actionGoToCollaborator = register({
       >
         {collaborator.username}
       </DropdownMenu.Item>
-      );
-    }
-
-    return (
+    ) : (
       <Avatar
         color={background}
         onClick={() => updateData({ ...collaborator, clientId })}

src/components/UserList.tsx

@@ -53,51 +53,6 @@ const sampleCollaborators = new Map([
   ],
 ]) as any as Map<string, Collaborator>;
 
-export const __UserList: React.FC<{
-  className?: string;
-  mobile?: boolean;
-  collaborators: AppState["collaborators"];
-}> = ({ className, mobile, collaborators }) => {
-  const actionManager = useExcalidrawActionManager();
-
-  const uniqueCollaborators = new Map<string, Collaborator>();
-  collaborators.forEach((collaborator, socketId) => {
-    uniqueCollaborators.set(
-      // filter on user id, else fall back on unique socketId
-      collaborator.id || socketId,
-      collaborator,
-    );
-  });
-
-  const avatars =
-    uniqueCollaborators.size > 0 &&
-    Array.from(uniqueCollaborators)
-      .filter(([_, client]) => Object.keys(client).length !== 0)
-      .map(([clientId, collaborator]) => {
-        const avatarJSX = actionManager.renderAction("goToCollaborator", [
-          clientId,
-          collaborator,
-        ]);
-
-        return mobile ? (
-          <Tooltip
-            label={collaborator.username || "Unknown user"}
-            key={clientId}
-          >
-            {avatarJSX}
-          </Tooltip>
-        ) : (
-          <React.Fragment key={clientId}>{avatarJSX}</React.Fragment>
-        );
-      });
-
-  return (
-    <div className={clsx("UserList", className, { UserList_mobile: mobile })}>
-      {avatars}
-    </div>
-  );
-};
-
 const FIRST_N_AVATARS = 3;
 
 const ConditionalTooltipWrapper = ({
@@ -140,6 +95,7 @@ const renderCollaborator = ({
 
   return (
     <ConditionalTooltipWrapper
+      key={clientId}
       clientId={clientId}
       username={collaborator.username}
       shouldWrap={shouldWrapWithTooltip}
@@ -195,8 +151,7 @@ export const UserList = ({
       }),
   );
 
-  if (mobile) {
-    return (
+  return mobile ? (
     <div className={clsx("UserList UserList_mobile", className)}>
       {uniqueCollaboratorsArray.map(([clientId, collaborator]) =>
         renderCollaborator({
@@ -207,11 +162,7 @@ export const UserList = ({
         }),
       )}
     </div>
-    );
-  }
-
-  return (
-    <>
+  ) : (
     <div className={clsx("UserList", className)}>
       {first3avatarsJSX}
 
@@ -245,6 +196,5 @@ export const UserList = ({
         </div>
       )}
     </div>
-    </>
   );
 };