import { useEffect } from "react"; import Link from "next/link"; import { observer } from "mobx-react-lite"; // hooks import { useDashboard, useMember, useUser } from "hooks/store"; // components import { RecentCollaboratorsEmptyState, WidgetLoader, WidgetProps } from "components/dashboard/widgets"; // ui import { Avatar } from "@plane/ui"; // types import { TRecentCollaboratorsWidgetResponse } from "@plane/types"; type CollaboratorListItemProps = { issueCount: number; userId: string; workspaceSlug: string; }; const WIDGET_KEY = "recent_collaborators"; const CollaboratorListItem: React.FC = observer((props) => { const { issueCount, userId, workspaceSlug } = props; // store hooks const { currentUser } = useUser(); const { getUserDetails } = useMember(); // derived values const userDetails = getUserDetails(userId); const isCurrentUser = userId === currentUser?.id; if (!userDetails) return null; return (
{isCurrentUser ? "You" : userDetails?.display_name}

{issueCount} active issue{issueCount > 1 ? "s" : ""}

); }); export const RecentCollaboratorsWidget: React.FC = observer((props) => { const { dashboardId, workspaceSlug } = props; // store hooks const { fetchWidgetStats, getWidgetStats } = useDashboard(); const widgetStats = getWidgetStats(workspaceSlug, dashboardId, WIDGET_KEY); useEffect(() => { fetchWidgetStats(workspaceSlug, dashboardId, { widget_key: WIDGET_KEY, }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); if (!widgetStats) return ; return (

Most active members

Top eight active members in your project by last activity

{widgetStats.length > 1 ? (
{widgetStats.map((user) => ( ))}
) : (
)}
); });