import { useEffect } from "react"; import Link from "next/link"; import { observer } from "mobx-react-lite"; import { Plus } from "lucide-react"; // hooks import { useApplication, useDashboard, useProject, useUser } from "hooks/store"; // components import { WidgetLoader, WidgetProps } from "components/dashboard/widgets"; // ui import { Avatar, AvatarGroup } from "@plane/ui"; // helpers import { renderEmoji } from "helpers/emoji.helper"; // types import { TRecentProjectsWidgetResponse } from "@plane/types"; // constants import { EUserWorkspaceRoles } from "constants/workspace"; import { PROJECT_BACKGROUND_COLORS } from "constants/dashboard"; const WIDGET_KEY = "recent_projects"; type ProjectListItemProps = { projectId: string; workspaceSlug: string; }; const ProjectListItem: React.FC = observer((props) => { const { projectId, workspaceSlug } = props; // store hooks const { getProjectById } = useProject(); const projectDetails = getProjectById(projectId); const randomBgColor = PROJECT_BACKGROUND_COLORS[Math.floor(Math.random() * PROJECT_BACKGROUND_COLORS.length)]; if (!projectDetails) return null; return (
{projectDetails.emoji ? ( {renderEmoji(projectDetails.emoji)} ) : projectDetails.icon_prop ? (
{renderEmoji(projectDetails.icon_prop)}
) : ( {projectDetails.name.charAt(0)} )}
{projectDetails.name}
{projectDetails.members?.map((member) => ( ))}
); }); export const RecentProjectsWidget: React.FC = observer((props) => { const { dashboardId, workspaceSlug } = props; // store hooks const { commandPalette: { toggleCreateProjectModal }, } = useApplication(); const { membership: { currentWorkspaceRole }, } = useUser(); const { fetchWidgetStats, widgetStats: allWidgetStats } = useDashboard(); // derived values const widgetStats = allWidgetStats?.[workspaceSlug]?.[dashboardId]?.[WIDGET_KEY] as TRecentProjectsWidgetResponse; const canCreateProject = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN; useEffect(() => { if (!widgetStats) fetchWidgetStats(workspaceSlug, dashboardId, { widget_key: WIDGET_KEY, }); }, [dashboardId, fetchWidgetStats, widgetStats, workspaceSlug]); if (!widgetStats) return ; return (

My projects

{canCreateProject && ( )} {widgetStats.map((projectId) => ( ))}
); });