feat: implement team activity stream (#5565)
* wip * feat: implement team activity page * feat: add pagination * fix: add max height * Team activity updates * Remove invalid activityes * Team activity page * fix: team roadmap versions not working * Add team activity items --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/5578/head
Arik Chakma
7 months ago
committed by
GitHub
parent
8ceedadd22
commit
f2a2ac9ec8
22 changed files with 2891 additions and 2270 deletions
@ -0,0 +1,195 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { getRelativeTimeString } from '../../lib/date'; |
||||||
|
import type { TeamStreamActivity } from './TeamActivityPage'; |
||||||
|
import { ChevronsDown, ChevronsUp } from 'lucide-react'; |
||||||
|
|
||||||
|
type TeamActivityItemProps = { |
||||||
|
onTopicClick?: (activity: TeamStreamActivity) => void; |
||||||
|
user: { |
||||||
|
activities: TeamStreamActivity[]; |
||||||
|
_id: string; |
||||||
|
name: string; |
||||||
|
avatar?: string | undefined; |
||||||
|
username?: string | undefined; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
export function TeamActivityItem(props: TeamActivityItemProps) { |
||||||
|
const { user, onTopicClick } = props; |
||||||
|
const { activities } = user; |
||||||
|
|
||||||
|
const [showAll, setShowAll] = useState(false); |
||||||
|
|
||||||
|
const resourceLink = (activity: TeamStreamActivity) => { |
||||||
|
const { |
||||||
|
resourceId, |
||||||
|
resourceTitle, |
||||||
|
resourceType, |
||||||
|
isCustomResource, |
||||||
|
resourceSlug, |
||||||
|
} = activity; |
||||||
|
|
||||||
|
const resourceUrl = |
||||||
|
resourceType === 'question' |
||||||
|
? `/questions/${resourceId}` |
||||||
|
: resourceType === 'best-practice' |
||||||
|
? `/best-practices/${resourceId}` |
||||||
|
: isCustomResource && resourceType === 'roadmap' |
||||||
|
? `/r/${resourceSlug}` |
||||||
|
: `/${resourceId}`; |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
className="font-medium underline transition-colors hover:cursor-pointer hover:text-black" |
||||||
|
target="_blank" |
||||||
|
href={resourceUrl} |
||||||
|
> |
||||||
|
{resourceTitle} |
||||||
|
</a> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const timeAgo = (date: string | Date) => ( |
||||||
|
<span className="ml-1 text-xs text-gray-400"> |
||||||
|
{getRelativeTimeString(new Date(date).toISOString())} |
||||||
|
</span> |
||||||
|
); |
||||||
|
const userAvatar = user.avatar |
||||||
|
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}` |
||||||
|
: '/images/default-avatar.png'; |
||||||
|
|
||||||
|
const username = ( |
||||||
|
<> |
||||||
|
<img |
||||||
|
className="mr-1 inline-block h-5 w-5 rounded-full" |
||||||
|
src={userAvatar} |
||||||
|
alt={user.name} |
||||||
|
/> |
||||||
|
<span className="font-medium">{user?.name || 'Unknown'}</span>{' '} |
||||||
|
</> |
||||||
|
); |
||||||
|
|
||||||
|
if (activities.length === 1) { |
||||||
|
const activity = activities[0]; |
||||||
|
const { actionType, topicIds } = activity; |
||||||
|
const topicCount = topicIds?.length || 0; |
||||||
|
|
||||||
|
return ( |
||||||
|
<li |
||||||
|
key={user._id} |
||||||
|
className="flex items-center flex-wrap gap-1 rounded-md border px-2 py-2.5 text-sm" |
||||||
|
> |
||||||
|
{actionType === 'in_progress' && ( |
||||||
|
<> |
||||||
|
{username} started{' '} |
||||||
|
<button |
||||||
|
className="font-medium underline underline-offset-2 hover:text-black" |
||||||
|
onClick={() => onTopicClick?.(activity)} |
||||||
|
> |
||||||
|
{topicCount} topic{topicCount > 1 ? 's' : ''} |
||||||
|
</button>{' '} |
||||||
|
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
{actionType === 'done' && ( |
||||||
|
<> |
||||||
|
{username} completed{' '} |
||||||
|
<button |
||||||
|
className="font-medium underline underline-offset-2 hover:text-black" |
||||||
|
onClick={() => onTopicClick?.(activity)} |
||||||
|
> |
||||||
|
{topicCount} topic{topicCount > 1 ? 's' : ''} |
||||||
|
</button>{' '} |
||||||
|
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
{actionType === 'answered' && ( |
||||||
|
<> |
||||||
|
{username} answered {topicCount} question |
||||||
|
{topicCount > 1 ? 's' : ''} in {resourceLink(activity)}{' '} |
||||||
|
{timeAgo(activity.updatedAt)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
</li> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const uniqueResourcesCount = new Set( |
||||||
|
activities.map((activity) => activity.resourceId), |
||||||
|
).size; |
||||||
|
|
||||||
|
const activityLimit = showAll ? activities.length : 5; |
||||||
|
|
||||||
|
return ( |
||||||
|
<li key={user._id} className="rounded-md border overflow-hidden"> |
||||||
|
<h3 className="flex flex-wrap items-center gap-1 bg-gray-100 px-2 py-2.5 text-sm"> |
||||||
|
{username} has {activities.length} updates in {uniqueResourcesCount}{' '} |
||||||
|
resources |
||||||
|
</h3> |
||||||
|
<div className="py-3"> |
||||||
|
<ul className="flex flex-col gap-2 ml-2 sm:ml-[36px]"> |
||||||
|
{activities.slice(0, activityLimit).map((activity) => { |
||||||
|
const { actionType, topicIds } = activity; |
||||||
|
const topicCount = topicIds?.length || 0; |
||||||
|
|
||||||
|
return ( |
||||||
|
<li key={activity._id} className="text-sm text-gray-600"> |
||||||
|
{actionType === 'in_progress' && ( |
||||||
|
<> |
||||||
|
Started{' '} |
||||||
|
<button |
||||||
|
className="font-medium underline underline-offset-2 hover:text-black" |
||||||
|
onClick={() => onTopicClick?.(activity)} |
||||||
|
> |
||||||
|
{topicCount} topic{topicCount > 1 ? 's' : ''} |
||||||
|
</button>{' '} |
||||||
|
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
{actionType === 'done' && ( |
||||||
|
<> |
||||||
|
Completed{' '} |
||||||
|
<button |
||||||
|
className="font-medium underline underline-offset-2 hover:text-black" |
||||||
|
onClick={() => onTopicClick?.(activity)} |
||||||
|
> |
||||||
|
{topicCount} topic{topicCount > 1 ? 's' : ''} |
||||||
|
</button>{' '} |
||||||
|
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
{actionType === 'answered' && ( |
||||||
|
<> |
||||||
|
Answered {topicCount} question |
||||||
|
{topicCount > 1 ? 's' : ''} in {resourceLink(activity)}{' '} |
||||||
|
{timeAgo(activity.updatedAt)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
|
||||||
|
{activities.length > 5 && ( |
||||||
|
<button |
||||||
|
className="mt-3 flex items-center gap-2 rounded-md border border-gray-300 p-1 text-xs uppercase tracking-wide text-gray-600 transition-colors hover:border-black hover:bg-black hover:text-white" |
||||||
|
onClick={() => setShowAll(!showAll)} |
||||||
|
> |
||||||
|
{showAll ? ( |
||||||
|
<> |
||||||
|
<ChevronsUp size={14} /> |
||||||
|
Show less |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<ChevronsDown size={14} /> |
||||||
|
Show more |
||||||
|
</> |
||||||
|
)} |
||||||
|
</button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,189 @@ |
|||||||
|
import { useEffect, useState, useMemo } from 'react'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { getUrlParams } from '../../lib/browser'; |
||||||
|
import { httpGet } from '../../lib/http'; |
||||||
|
import type { ResourceType } from '../../lib/resource-progress'; |
||||||
|
import type { AllowedActivityActionType } from '../Activity/ActivityStream'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import { TeamActivityItem } from './TeamActivityItem'; |
||||||
|
import { TeamActivityTopicsModal } from './TeamActivityTopicsModal'; |
||||||
|
import { TeamEmptyStream } from './TeamEmptyStream'; |
||||||
|
import { Pagination } from '../Pagination/Pagination'; |
||||||
|
|
||||||
|
export type TeamStreamActivity = { |
||||||
|
_id?: string; |
||||||
|
resourceType: ResourceType | 'question'; |
||||||
|
resourceId: string; |
||||||
|
resourceTitle: string; |
||||||
|
resourceSlug?: string; |
||||||
|
isCustomResource?: boolean; |
||||||
|
actionType: AllowedActivityActionType; |
||||||
|
topicIds?: string[]; |
||||||
|
createdAt: Date; |
||||||
|
updatedAt: Date; |
||||||
|
}; |
||||||
|
|
||||||
|
export interface TeamActivityStreamDocument { |
||||||
|
_id?: string; |
||||||
|
teamId: string; |
||||||
|
userId: string; |
||||||
|
activity: TeamStreamActivity[]; |
||||||
|
createdAt: Date; |
||||||
|
updatedAt: Date; |
||||||
|
} |
||||||
|
|
||||||
|
type GetTeamActivityResponse = { |
||||||
|
data: { |
||||||
|
users: { |
||||||
|
_id: string; |
||||||
|
name: string; |
||||||
|
avatar?: string; |
||||||
|
username?: string; |
||||||
|
}[]; |
||||||
|
activities: TeamActivityStreamDocument[]; |
||||||
|
}; |
||||||
|
totalCount: number; |
||||||
|
totalPages: number; |
||||||
|
currPage: number; |
||||||
|
perPage: number; |
||||||
|
}; |
||||||
|
|
||||||
|
export function TeamActivityPage() { |
||||||
|
const { t: teamId } = getUrlParams(); |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
const [selectedActivity, setSelectedActivity] = |
||||||
|
useState<TeamStreamActivity | null>(null); |
||||||
|
const [teamActivities, setTeamActivities] = useState<GetTeamActivityResponse>( |
||||||
|
{ |
||||||
|
data: { |
||||||
|
users: [], |
||||||
|
activities: [], |
||||||
|
}, |
||||||
|
totalCount: 0, |
||||||
|
totalPages: 0, |
||||||
|
currPage: 1, |
||||||
|
perPage: 21, |
||||||
|
}, |
||||||
|
); |
||||||
|
const [currPage, setCurrPage] = useState(1); |
||||||
|
|
||||||
|
const getTeamProgress = async (currPage: number = 1) => { |
||||||
|
const { response, error } = await httpGet<GetTeamActivityResponse>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-team-activity/${teamId}`, |
||||||
|
{ |
||||||
|
currPage, |
||||||
|
}, |
||||||
|
); |
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Failed to get team activity'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setTeamActivities(response); |
||||||
|
setCurrPage(response.currPage); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!teamId) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
getTeamProgress().then(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
setIsLoading(false); |
||||||
|
}); |
||||||
|
}, [teamId]); |
||||||
|
|
||||||
|
const { users, activities } = teamActivities?.data; |
||||||
|
const usersWithActivities = useMemo(() => { |
||||||
|
const validActivities = activities.filter((activity) => { |
||||||
|
return ( |
||||||
|
activity.activity.length > 0 && |
||||||
|
activity.activity.some((t) => (t?.topicIds?.length || 0) > 0) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
return users |
||||||
|
.map((user) => { |
||||||
|
const userActivities = validActivities |
||||||
|
.filter((activity) => activity.userId === user._id) |
||||||
|
.flatMap((activity) => activity.activity) |
||||||
|
.filter((activity) => (activity?.topicIds?.length || 0) > 0) |
||||||
|
.sort((a, b) => { |
||||||
|
return ( |
||||||
|
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime() |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
return { |
||||||
|
...user, |
||||||
|
activities: userActivities, |
||||||
|
}; |
||||||
|
}) |
||||||
|
.filter((user) => user.activities.length > 0) |
||||||
|
.sort((a, b) => { |
||||||
|
return ( |
||||||
|
new Date(b.activities[0].updatedAt).getTime() - |
||||||
|
new Date(a.activities[0].updatedAt).getTime() |
||||||
|
); |
||||||
|
}); |
||||||
|
}, [users, activities]); |
||||||
|
|
||||||
|
if (!teamId) { |
||||||
|
window.location.href = '/'; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (isLoading) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{selectedActivity && ( |
||||||
|
<TeamActivityTopicsModal |
||||||
|
activity={selectedActivity} |
||||||
|
onClose={() => setSelectedActivity(null)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
{usersWithActivities.length > 0 ? ( |
||||||
|
<> |
||||||
|
<h3 className="mb-4 flex w-full items-center justify-between text-xs uppercase text-gray-400"> |
||||||
|
Team Activity |
||||||
|
</h3> |
||||||
|
<ul className="mb-4 mt-2 flex flex-col gap-3"> |
||||||
|
{usersWithActivities.map((user) => { |
||||||
|
return ( |
||||||
|
<TeamActivityItem |
||||||
|
key={user._id} |
||||||
|
user={user} |
||||||
|
onTopicClick={setSelectedActivity} |
||||||
|
/> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
|
||||||
|
<Pagination |
||||||
|
currPage={currPage} |
||||||
|
totalPages={teamActivities.totalPages} |
||||||
|
totalCount={teamActivities.totalCount} |
||||||
|
perPage={teamActivities.perPage} |
||||||
|
onPageChange={(page) => { |
||||||
|
setCurrPage(page); |
||||||
|
pageProgressMessage.set('Loading...'); |
||||||
|
getTeamProgress(page).finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<TeamEmptyStream teamId={teamId} /> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,128 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { httpPost } from '../../lib/http'; |
||||||
|
import { Modal } from '../Modal.tsx'; |
||||||
|
import { ModalLoader } from '../UserProgress/ModalLoader.tsx'; |
||||||
|
import { ArrowUpRight, BookOpen, Check } from 'lucide-react'; |
||||||
|
import type { TeamStreamActivity } from './TeamActivityPage.tsx'; |
||||||
|
|
||||||
|
type TeamActivityTopicsModalProps = { |
||||||
|
activity: TeamStreamActivity; |
||||||
|
onClose: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) { |
||||||
|
const { activity, onClose } = props; |
||||||
|
const { |
||||||
|
resourceId, |
||||||
|
resourceType, |
||||||
|
isCustomResource, |
||||||
|
topicIds = [], |
||||||
|
actionType, |
||||||
|
} = activity; |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
const [topicTitles, setTopicTitles] = useState<Record<string, string>>({}); |
||||||
|
const [error, setError] = useState<string | null>(null); |
||||||
|
|
||||||
|
const loadTopicTitles = async () => { |
||||||
|
setIsLoading(true); |
||||||
|
setError(null); |
||||||
|
|
||||||
|
const { response, error } = await httpPost( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-topic-titles`, |
||||||
|
{ |
||||||
|
resourceId, |
||||||
|
resourceType, |
||||||
|
isCustomResource, |
||||||
|
topicIds, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
setError(error?.message || 'Failed to load topic titles'); |
||||||
|
setIsLoading(false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setTopicTitles(response); |
||||||
|
setIsLoading(false); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadTopicTitles().finally(() => { |
||||||
|
setIsLoading(false); |
||||||
|
}); |
||||||
|
}, []); |
||||||
|
|
||||||
|
if (isLoading || error) { |
||||||
|
return ( |
||||||
|
<ModalLoader |
||||||
|
error={error!} |
||||||
|
text={'Loading topics..'} |
||||||
|
isLoading={isLoading} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
let pageUrl = ''; |
||||||
|
if (resourceType === 'roadmap') { |
||||||
|
pageUrl = isCustomResource ? `/r/${resourceId}` : `/${resourceId}`; |
||||||
|
} else if (resourceType === 'best-practice') { |
||||||
|
pageUrl = `/best-practices/${resourceId}`; |
||||||
|
} else { |
||||||
|
pageUrl = `/questions/${resourceId}`; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
onClose={() => { |
||||||
|
onClose(); |
||||||
|
setError(null); |
||||||
|
setIsLoading(false); |
||||||
|
}} |
||||||
|
> |
||||||
|
<div className={`popup-body relative rounded-lg bg-white p-4 shadow`}> |
||||||
|
<span className="mb-2 flex items-center justify-between text-lg font-semibold capitalize"> |
||||||
|
<span className="flex items-center gap-2"> |
||||||
|
{actionType.replace('_', ' ')} |
||||||
|
</span> |
||||||
|
<a |
||||||
|
href={pageUrl} |
||||||
|
target="_blank" |
||||||
|
className="flex items-center gap-1 rounded-md border border-transparent py-0.5 pl-2 pr-1 text-sm font-normal text-gray-400 transition-colors hover:border-black hover:bg-black hover:text-white" |
||||||
|
> |
||||||
|
Visit Page{' '} |
||||||
|
<ArrowUpRight |
||||||
|
size={16} |
||||||
|
strokeWidth={2} |
||||||
|
className="relative top-px" |
||||||
|
/> |
||||||
|
</a> |
||||||
|
</span> |
||||||
|
<ul className="flex max-h-[50vh] flex-col gap-1 overflow-y-auto max-md:max-h-full"> |
||||||
|
{topicIds.map((topicId) => { |
||||||
|
const topicTitle = topicTitles[topicId] || 'Unknown Topic'; |
||||||
|
|
||||||
|
const ActivityIcon = |
||||||
|
actionType === 'done' |
||||||
|
? Check |
||||||
|
: actionType === 'in_progress' |
||||||
|
? BookOpen |
||||||
|
: Check; |
||||||
|
|
||||||
|
return ( |
||||||
|
<li key={topicId} className="flex items-start gap-2"> |
||||||
|
<ActivityIcon |
||||||
|
strokeWidth={3} |
||||||
|
className="relative top-[4px] text-green-500" |
||||||
|
size={16} |
||||||
|
/> |
||||||
|
{topicTitle} |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
import { Activity, List, ListTodo } from 'lucide-react'; |
||||||
|
|
||||||
|
type TeamActivityItemProps = { |
||||||
|
teamId: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function TeamEmptyStream(props: TeamActivityItemProps) { |
||||||
|
const { teamId } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="rounded-md"> |
||||||
|
<div className="flex flex-col items-center p-7 text-center sm:p-14"> |
||||||
|
<ListTodo className="mb-4 h-[60px] w-[60px] opacity-10 sm:h-[60px] sm:w-[60px]" /> |
||||||
|
|
||||||
|
<h2 className="text-lg font-semibold sm:text-lg">No Activity</h2> |
||||||
|
<p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base"> |
||||||
|
Team activity will appear here once members start tracking their |
||||||
|
progress. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,15 @@ |
|||||||
|
--- |
||||||
|
import { TeamSidebar } from '../../components/TeamSidebar'; |
||||||
|
import { TeamActivityPage } from '../../components/TeamActivity/TeamActivityPage'; |
||||||
|
import AccountLayout from '../../layouts/AccountLayout.astro'; |
||||||
|
--- |
||||||
|
|
||||||
|
<AccountLayout |
||||||
|
title='Team Activities' |
||||||
|
noIndex={true} |
||||||
|
initialLoadingMessage='Loading activity' |
||||||
|
> |
||||||
|
<TeamSidebar activePageId='activity' client:load> |
||||||
|
<TeamActivityPage client:only='react' /> |
||||||
|
</TeamSidebar> |
||||||
|
</AccountLayout> |
||||||
Loading…
Reference in new issue