diff --git a/web/core/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx b/web/core/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx index cd5d1ce9273..2dc1f0d3d99 100644 --- a/web/core/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx +++ b/web/core/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx @@ -1,5 +1,5 @@ "use client"; - +import { useState } from "react"; import sortBy from "lodash/sortBy"; import { observer } from "mobx-react"; import Link from "next/link"; @@ -63,6 +63,10 @@ const WIDGET_KEY = "recent_collaborators"; export const CollaboratorsList: React.FC = (props) => { const { dashboardId, searchQuery = "", workspaceSlug } = props; + + // state + const [visibleItems, setVisibleItems] = useState(16); + const [isExpanded, setIsExpanded] = useState(false); // store hooks const { fetchWidgetStats } = useDashboard(); const { getUserDetails } = useMember(); @@ -90,8 +94,10 @@ export const CollaboratorsList: React.FC = (props) => { const sortedStats = sortBy(widgetStats, [(user) => user?.user_id !== currentUser?.id]); const filteredStats = sortedStats.filter((user) => { - const { display_name, first_name, last_name } = getUserDetails(user?.user_id) || {}; - + if (!user) return false; + const userDetails = getUserDetails(user?.user_id); + if (!userDetails || userDetails.is_bot) return false; + const { display_name, first_name, last_name } = userDetails; const searchLower = searchQuery.toLowerCase(); return ( display_name?.toLowerCase().includes(searchLower) || @@ -100,16 +106,49 @@ export const CollaboratorsList: React.FC = (props) => { ); }); + // Update the displayedStats to always use the visibleItems limit + const handleLoadMore = () => { + setVisibleItems((prev) => { + const newValue = prev + 16; + if (newValue >= filteredStats.length) { + setIsExpanded(true); + return filteredStats.length; + } + return newValue; + }); + }; + + const handleHide = () => { + setVisibleItems(16); + setIsExpanded(false); + }; + + const displayedStats = filteredStats.slice(0, visibleItems); + return ( -
- {filteredStats?.map((user) => ( - - ))} -
+ <> +
+ {displayedStats?.map((user) => ( + + ))} +
+ {filteredStats.length > visibleItems && !isExpanded && ( +
+
+ Load more +
+
+ )} + {isExpanded && ( +
+
Hide
+
+ )} + ); };