cleanup

src/actions/actionNavigate.tsx

@@ -57,26 +57,22 @@ export const actionGoToCollaborator = register({
 
     const background = getClientColor(clientId);
 
-    if (withName) {
+    return withName ? (
-      return (
+      <DropdownMenu.Item
-        <DropdownMenu.Item
+        onSelect={() => updateData({ ...collaborator, clientId })}
-          onSelect={() => updateData({ ...collaborator, clientId })}
+        icon={
-          icon={
+          <Avatar
-            <Avatar
+            color={background}
-              color={background}
+            onClick={() => {}}
-              onClick={() => {}}
+            name={collaborator.username || ""}
-              name={collaborator.username || ""}
+            src={collaborator.avatarUrl}
-              src={collaborator.avatarUrl}
+            isBeingFollowed={appState.userToFollow?.clientId === clientId}
-              isBeingFollowed={appState.userToFollow?.clientId === clientId}
+          />
-            />
+        }
-          }
+      >
-        >
+        {collaborator.username}
-          {collaborator.username}
+      </DropdownMenu.Item>
-        </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,56 +151,50 @@ export const UserList = ({
       }),
   );
 
-  if (mobile) {
+  return mobile ? (
-    return (
+    <div className={clsx("UserList UserList_mobile", className)}>
-      <div className={clsx("UserList UserList_mobile", className)}>
+      {uniqueCollaboratorsArray.map(([clientId, collaborator]) =>
-        {uniqueCollaboratorsArray.map(([clientId, collaborator]) =>
+        renderCollaborator({
-          renderCollaborator({
+          actionManager,
-            actionManager,
+          collaborator,
-            collaborator,
+          clientId,
-            clientId,
+          shouldWrapWithTooltip: true,
-            shouldWrapWithTooltip: true,
+        }),
-          }),
+      )}
-        )}
+    </div>
-      </div>
+  ) : (
-    );
+    <div className={clsx("UserList", className)}>
-  }
+      {first3avatarsJSX}
 
-  return (
+      {uniqueCollaboratorsArray.length > FIRST_N_AVATARS && (
-    <>
+        <div style={{ position: "relative" }}>
-      <div className={clsx("UserList", className)}>
+          <DropdownMenu open={open}>
-        {first3avatarsJSX}
+            <DropdownMenu.Trigger
-
+              className="UserList__more"
-        {uniqueCollaboratorsArray.length > FIRST_N_AVATARS && (
+              onToggle={() => {
-          <div style={{ position: "relative" }}>
+                setOpen(!open);
-            <DropdownMenu open={open}>
+              }}
-              <DropdownMenu.Trigger
+            >
-                className="UserList__more"
+              +{uniqueCollaboratorsArray.length - FIRST_N_AVATARS}
-                onToggle={() => {
+            </DropdownMenu.Trigger>
-                  setOpen(!open);
+            <DropdownMenu.Content
-                }}
+              style={{ width: "10rem" }}
-              >
+              onClickOutside={() => {
-                +{uniqueCollaboratorsArray.length - FIRST_N_AVATARS}
+                setOpen(false);
-              </DropdownMenu.Trigger>
+              }}
-              <DropdownMenu.Content
+            >
-                style={{ width: "10rem" }}
+              {uniqueCollaboratorsArray.map(([clientId, collaborator]) =>
-                onClickOutside={() => {
+                renderCollaborator({
-                  setOpen(false);
+                  actionManager,
-                }}
+                  collaborator,
-              >
+                  clientId,
-                {uniqueCollaboratorsArray.map(([clientId, collaborator]) =>
+                  withName: true,
-                  renderCollaborator({
+                }),
-                    actionManager,
+              )}
-                    collaborator,
+            </DropdownMenu.Content>
-                    clientId,
+          </DropdownMenu>
-                    withName: true,
+        </div>
-                  }),
+      )}
-                )}
+    </div>
-              </DropdownMenu.Content>
-            </DropdownMenu>
-          </div>
-        )}
-      </div>
-    </>
   );
 };