feat: implement activity stream (#5485)
* wip: implement activity stream * feat: add empty stream * fix: filter empty topic ids * fix: update progress group * fix: update icon * feat: add topic titles * fix: update topic title * fix: update http call * Redesign activity stream * Add activity stream --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/5542/head
Arik Chakma
7 months ago
committed by
GitHub
parent
4db353e017
commit
dccbe683fd
11 changed files with 553 additions and 172 deletions
@ -0,0 +1,163 @@ |
||||
import { useMemo, useState } from 'react'; |
||||
import { getRelativeTimeString } from '../../lib/date'; |
||||
import type { ResourceType } from '../../lib/resource-progress'; |
||||
import { EmptyStream } from './EmptyStream'; |
||||
import { ActivityTopicsModal } from './ActivityTopicsModal.tsx'; |
||||
import {Book, BookOpen, ChevronsDown, ChevronsDownUp, ChevronsUp, ChevronsUpDown} from 'lucide-react'; |
||||
|
||||
export const allowedActivityActionType = [ |
||||
'in_progress', |
||||
'done', |
||||
'answered', |
||||
] as const; |
||||
export type AllowedActivityActionType = |
||||
(typeof allowedActivityActionType)[number]; |
||||
|
||||
export type UserStreamActivity = { |
||||
_id?: string; |
||||
resourceType: ResourceType | 'question'; |
||||
resourceId: string; |
||||
resourceTitle: string; |
||||
resourceSlug?: string; |
||||
isCustomResource?: boolean; |
||||
actionType: AllowedActivityActionType; |
||||
topicIds?: string[]; |
||||
createdAt: Date; |
||||
updatedAt: Date; |
||||
}; |
||||
|
||||
type ActivityStreamProps = { |
||||
activities: UserStreamActivity[]; |
||||
}; |
||||
|
||||
export function ActivityStream(props: ActivityStreamProps) { |
||||
const { activities } = props; |
||||
|
||||
const [showAll, setShowAll] = useState(false); |
||||
const [selectedActivity, setSelectedActivity] = |
||||
useState<UserStreamActivity | null>(null); |
||||
|
||||
const sortedActivities = activities |
||||
.filter((activity) => activity?.topicIds && activity.topicIds.length > 0) |
||||
.sort((a, b) => { |
||||
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(); |
||||
}) |
||||
.slice(0, showAll ? activities.length : 10); |
||||
|
||||
return ( |
||||
<div className="mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8"> |
||||
<h2 className="mb-3 text-xs uppercase text-gray-400"> |
||||
Learning Activity |
||||
</h2> |
||||
|
||||
{selectedActivity && ( |
||||
<ActivityTopicsModal |
||||
onClose={() => setSelectedActivity(null)} |
||||
activityId={selectedActivity._id!} |
||||
resourceId={selectedActivity.resourceId} |
||||
resourceType={selectedActivity.resourceType} |
||||
isCustomResource={selectedActivity.isCustomResource} |
||||
topicIds={selectedActivity.topicIds || []} |
||||
topicCount={selectedActivity.topicIds?.length || 0} |
||||
actionType={selectedActivity.actionType} |
||||
/> |
||||
)} |
||||
|
||||
{activities.length > 0 ? ( |
||||
<ul className="divide-y divide-gray-100"> |
||||
{sortedActivities.map((activity) => { |
||||
const { |
||||
_id, |
||||
resourceType, |
||||
resourceId, |
||||
resourceTitle, |
||||
actionType, |
||||
updatedAt, |
||||
topicIds, |
||||
isCustomResource, |
||||
} = activity; |
||||
|
||||
const resourceUrl = |
||||
resourceType === 'question' |
||||
? `/questions/${resourceId}` |
||||
: resourceType === 'best-practice' |
||||
? `/best-practices/${resourceId}` |
||||
: isCustomResource && resourceType === 'roadmap' |
||||
? `/r/${resourceId}` |
||||
: `/${resourceId}`; |
||||
|
||||
const resourceLinkComponent = ( |
||||
<a |
||||
className="font-medium underline transition-colors hover:cursor-pointer hover:text-black" |
||||
target="_blank" |
||||
href={resourceUrl} |
||||
> |
||||
{resourceTitle} |
||||
</a> |
||||
); |
||||
|
||||
const topicCount = topicIds?.length || 0; |
||||
|
||||
const timeAgo = ( |
||||
<span className="ml-1 text-xs text-gray-400"> |
||||
{getRelativeTimeString(new Date(updatedAt).toISOString())} |
||||
</span> |
||||
); |
||||
|
||||
return ( |
||||
<li key={_id} className="py-2 text-sm text-gray-600"> |
||||
{actionType === 'in_progress' && ( |
||||
<> |
||||
Started{' '} |
||||
<button |
||||
className="font-medium underline underline-offset-2 hover:text-black" |
||||
onClick={() => setSelectedActivity(activity)} |
||||
> |
||||
{topicCount} topic{topicCount > 1 ? 's' : ''} |
||||
</button>{' '} |
||||
in {resourceLinkComponent} {timeAgo} |
||||
</> |
||||
)} |
||||
{actionType === 'done' && ( |
||||
<> |
||||
Completed{' '} |
||||
<button |
||||
className="font-medium underline underline-offset-2 hover:text-black" |
||||
onClick={() => setSelectedActivity(activity)} |
||||
> |
||||
{topicCount} topic{topicCount > 1 ? 's' : ''} |
||||
</button>{' '} |
||||
in {resourceLinkComponent} {timeAgo} |
||||
</> |
||||
)} |
||||
{actionType === 'answered' && ( |
||||
<> |
||||
Answered {topicCount} question{topicCount > 1 ? 's' : ''} in{' '} |
||||
{resourceLinkComponent} {timeAgo} |
||||
</> |
||||
)} |
||||
</li> |
||||
); |
||||
})} |
||||
</ul> |
||||
) : ( |
||||
<EmptyStream /> |
||||
)} |
||||
|
||||
{activities.length > 10 && ( |
||||
<button |
||||
className="mt-3 gap-2 flex items-center rounded-md border border-black pl-1.5 pr-2 py-1 text-xs uppercase tracking-wide text-black transition-colors hover:border-black hover:bg-black hover:text-white" |
||||
onClick={() => setShowAll(!showAll)} |
||||
> |
||||
{showAll ? <> |
||||
<ChevronsUp size={14} /> |
||||
Show less |
||||
</> : <> |
||||
<ChevronsDown size={14} /> |
||||
Show all |
||||
</>} |
||||
</button> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,136 @@ |
||||
import { useEffect, useState } from 'react'; |
||||
import type { ResourceType } from '../../lib/resource-progress'; |
||||
import type { AllowedActivityActionType } from './ActivityStream'; |
||||
import { httpPost } from '../../lib/http'; |
||||
import { Modal } from '../Modal.tsx'; |
||||
import { ModalLoader } from '../UserProgress/ModalLoader.tsx'; |
||||
import { ArrowUpRight, BookOpen, Check } from 'lucide-react'; |
||||
|
||||
type ActivityTopicDetailsProps = { |
||||
activityId: string; |
||||
resourceId: string; |
||||
resourceType: ResourceType | 'question'; |
||||
isCustomResource?: boolean; |
||||
topicIds: string[]; |
||||
topicCount: number; |
||||
actionType: AllowedActivityActionType; |
||||
onClose: () => void; |
||||
}; |
||||
|
||||
export function ActivityTopicsModal(props: ActivityTopicDetailsProps) { |
||||
const { |
||||
resourceId, |
||||
resourceType, |
||||
isCustomResource, |
||||
topicIds = [], |
||||
topicCount, |
||||
actionType, |
||||
onClose, |
||||
} = props; |
||||
|
||||
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 flex-col gap-1"> |
||||
{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,31 @@ |
||||
import { List } from 'lucide-react'; |
||||
|
||||
export function EmptyStream() { |
||||
return ( |
||||
<div className="rounded-md"> |
||||
<div className="flex flex-col items-center p-7 text-center"> |
||||
<List className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]" /> |
||||
|
||||
<h2 className="text-lg font-bold sm:text-xl">No Activities</h2> |
||||
<p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base"> |
||||
Activities will appear here as you start tracking your |
||||
<a href="/roadmaps" className="mt-4 text-blue-500 hover:underline"> |
||||
Roadmaps |
||||
</a> |
||||
, |
||||
<a |
||||
href="/best-practices" |
||||
className="mt-4 text-blue-500 hover:underline" |
||||
> |
||||
Best Practices |
||||
</a> |
||||
or |
||||
<a href="/questions" className="mt-4 text-blue-500 hover:underline"> |
||||
Questions |
||||
</a> |
||||
progress. |
||||
</p> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,132 @@ |
||||
import { MoreVertical, X } from 'lucide-react'; |
||||
import { useRef, useState } from 'react'; |
||||
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||
import { useKeydown } from '../../hooks/use-keydown'; |
||||
import { ProgressShareButton } from '../UserProgress/ProgressShareButton'; |
||||
import type { ResourceType } from '../../lib/resource-progress'; |
||||
import { httpPost } from '../../lib/http'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
|
||||
type ResourceProgressActionsType = { |
||||
userId: string; |
||||
resourceType: ResourceType; |
||||
resourceId: string; |
||||
isCustomResource: boolean; |
||||
showClearButton?: boolean; |
||||
onCleared?: () => void; |
||||
}; |
||||
|
||||
export function ResourceProgressActions(props: ResourceProgressActionsType) { |
||||
const { |
||||
userId, |
||||
resourceType, |
||||
resourceId, |
||||
isCustomResource, |
||||
showClearButton = true, |
||||
onCleared, |
||||
} = props; |
||||
|
||||
const toast = useToast(); |
||||
const dropdownRef = useRef<HTMLDivElement>(null); |
||||
|
||||
const [isOpen, setIsOpen] = useState(false); |
||||
const [isClearing, setIsClearing] = useState(false); |
||||
const [isConfirming, setIsConfirming] = useState(false); |
||||
|
||||
async function clearProgress() { |
||||
setIsClearing(true); |
||||
const { error, response } = await httpPost( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-clear-resource-progress`, |
||||
{ |
||||
resourceId, |
||||
resourceType, |
||||
}, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
toast.error('Error clearing progress. Please try again.'); |
||||
console.error(error); |
||||
setIsClearing(false); |
||||
return; |
||||
} |
||||
|
||||
localStorage.removeItem(`${resourceType}-${resourceId}-${userId}-favorite`); |
||||
localStorage.removeItem(`${resourceType}-${resourceId}-${userId}-progress`); |
||||
|
||||
setIsClearing(false); |
||||
setIsConfirming(false); |
||||
if (onCleared) { |
||||
onCleared(); |
||||
} |
||||
} |
||||
|
||||
useOutsideClick(dropdownRef, () => { |
||||
setIsOpen(false); |
||||
}); |
||||
|
||||
useKeydown('Escape', () => { |
||||
setIsOpen(false); |
||||
}); |
||||
|
||||
return ( |
||||
<div className="relative h-full" ref={dropdownRef}> |
||||
<button |
||||
className="h-full text-gray-400 hover:text-gray-700" |
||||
onClick={() => setIsOpen(!isOpen)} |
||||
> |
||||
<MoreVertical size={16} /> |
||||
</button> |
||||
|
||||
{isOpen && ( |
||||
<div className="absolute right-0 top-8 z-10 w-48 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg"> |
||||
<ProgressShareButton |
||||
resourceType={resourceType} |
||||
resourceId={resourceId} |
||||
isCustomResource={isCustomResource} |
||||
className="w-full gap-1.5 p-2 hover:bg-gray-100" |
||||
/> |
||||
{showClearButton && ( |
||||
<> |
||||
{!isConfirming && ( |
||||
<button |
||||
className="flex w-full items-center gap-1.5 p-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-black disabled:cursor-not-allowed disabled:opacity-70" |
||||
onClick={() => setIsConfirming(true)} |
||||
disabled={isClearing} |
||||
> |
||||
{!isClearing ? ( |
||||
<> |
||||
<X className="h-3.5 w-3.5" /> |
||||
Clear Progress |
||||
</> |
||||
) : ( |
||||
'Processing...' |
||||
)} |
||||
</button> |
||||
)} |
||||
|
||||
{isConfirming && ( |
||||
<span className="flex w-full items-center justify-between gap-1.5 p-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-black disabled:cursor-not-allowed disabled:opacity-70"> |
||||
Are you sure? |
||||
<div className="flex items-center gap-2"> |
||||
<button |
||||
onClick={clearProgress} |
||||
className="text-red-500 underline hover:text-red-800" |
||||
> |
||||
Yes |
||||
</button> |
||||
<button |
||||
onClick={() => setIsConfirming(false)} |
||||
className="text-red-500 underline hover:text-red-800" |
||||
> |
||||
No |
||||
</button> |
||||
</div> |
||||
</span> |
||||
)} |
||||
</> |
||||
)} |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,38 @@ |
||||
import { ErrorIcon } from '../ReactIcons/ErrorIcon'; |
||||
import { Spinner } from '../ReactIcons/Spinner'; |
||||
|
||||
type ModalLoaderProps = { |
||||
isLoading: boolean; |
||||
error?: string; |
||||
text: string; |
||||
}; |
||||
|
||||
export function ModalLoader(props: ModalLoaderProps) { |
||||
const { isLoading, text, error } = props; |
||||
|
||||
return ( |
||||
<div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"> |
||||
<div className="relative mx-auto flex h-full w-full items-center justify-center"> |
||||
<div className="popup-body relative rounded-lg bg-white p-5 shadow"> |
||||
<div className="flex items-center"> |
||||
{isLoading && ( |
||||
<> |
||||
<Spinner className="h-6 w-6" isDualRing={false} /> |
||||
<span className="ml-3 text-lg font-semibold"> |
||||
{text || 'Loading...'} |
||||
</span> |
||||
</> |
||||
)} |
||||
|
||||
{error && ( |
||||
<> |
||||
<ErrorIcon additionalClasses="h-6 w-6 text-red-500" /> |
||||
<span className="ml-3 text-lg font-semibold">{error}</span> |
||||
</> |
||||
)} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,37 +0,0 @@ |
||||
import { ErrorIcon } from "../ReactIcons/ErrorIcon"; |
||||
import { Spinner } from "../ReactIcons/Spinner"; |
||||
|
||||
type ProgressLoadingErrorProps = { |
||||
isLoading: boolean; |
||||
error: string; |
||||
} |
||||
|
||||
export function ProgressLoadingError(props: ProgressLoadingErrorProps) { |
||||
const { isLoading, error } = props; |
||||
|
||||
return ( |
||||
<div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"> |
||||
<div className="relative mx-auto flex h-full w-full items-center justify-center"> |
||||
<div className="popup-body relative rounded-lg bg-white p-5 shadow"> |
||||
<div className="flex items-center"> |
||||
{isLoading && ( |
||||
<> |
||||
<Spinner className="h-6 w-6" isDualRing={false} /> |
||||
<span className="ml-3 text-lg font-semibold"> |
||||
Loading user progress... |
||||
</span> |
||||
</> |
||||
)} |
||||
|
||||
{error && ( |
||||
<> |
||||
<ErrorIcon additionalClasses="h-6 w-6 text-red-500" /> |
||||
<span className="ml-3 text-lg font-semibold">{error}</span> |
||||
</> |
||||
)} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue