2020-09-26 02:48:45 +05:30
|
|
|
import "./UserList.scss";
|
2020-06-19 11:36:49 +01:00
|
|
|
|
|
|
|
import React from "react";
|
2020-10-19 17:14:28 +03:00
|
|
|
import clsx from "clsx";
|
2022-06-15 15:35:57 +02:00
|
|
|
import { AppState, Collaborator } from "../types";
|
|
|
|
import { Tooltip } from "./Tooltip";
|
2023-01-05 22:04:23 +05:30
|
|
|
import { useExcalidrawActionManager } from "./App";
|
2020-06-19 11:36:49 +01:00
|
|
|
|
2022-06-15 15:35:57 +02:00
|
|
|
export const UserList: React.FC<{
|
2020-06-19 11:36:49 +01:00
|
|
|
className?: string;
|
|
|
|
mobile?: boolean;
|
2022-06-15 15:35:57 +02:00
|
|
|
collaborators: AppState["collaborators"];
|
2023-01-05 22:04:23 +05:30
|
|
|
}> = ({ className, mobile, collaborators }) => {
|
|
|
|
const actionManager = useExcalidrawActionManager();
|
2022-06-15 15:35:57 +02:00
|
|
|
|
2023-01-05 22:04:23 +05:30
|
|
|
const uniqueCollaborators = new Map<string, Collaborator>();
|
2022-06-15 15:35:57 +02:00
|
|
|
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>
|
|
|
|
);
|
|
|
|
});
|
2020-06-19 11:36:49 +01:00
|
|
|
|
2020-10-19 17:14:28 +03:00
|
|
|
return (
|
|
|
|
<div className={clsx("UserList", className, { UserList_mobile: mobile })}>
|
2022-06-15 15:35:57 +02:00
|
|
|
{avatars}
|
2020-10-19 17:14:28 +03:00
|
|
|
</div>
|
|
|
|
);
|
2020-06-19 11:36:49 +01:00
|
|
|
};
|