github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: change `topicIds` to `topicTitles` (#5588)

Browse Source 
* fix: change `topicIds` to `topicTitles`

* fix: comma and gap
fix/activity-gap
Arik Chakma 7 months ago committed by GitHub
parent 71d84faf73
commit cd35c77df1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 102 additions and 161 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 57
      src/components/Activity/ActivityStream.tsx
  2. 41
      src/components/Activity/ActivityTopicTitles.tsx
  3. 56
      src/components/Activity/ActivityTopicsModal.tsx
  4. 49
      src/components/TeamActivity/TeamActivityItem.tsx
  5. 6
      src/components/TeamActivity/TeamActivityPage.tsx
  6. 54
      src/components/TeamActivity/TeamActivityTopicsModal.tsx

57
src/components/Activity/ActivityStream.tsx
Unescape View File

@ -3,7 +3,8 @@ import { getRelativeTimeString } from '../../lib/date';
import type { ResourceType } from '../../lib/resource-progress'; import type { ResourceType } from '../../lib/resource-progress';
import { EmptyStream } from './EmptyStream'; import { EmptyStream } from './EmptyStream';
import { ActivityTopicsModal } from './ActivityTopicsModal.tsx'; import { ActivityTopicsModal } from './ActivityTopicsModal.tsx';
import {Book, BookOpen, ChevronsDown, ChevronsDownUp, ChevronsUp, ChevronsUpDown} from 'lucide-react'; import { ChevronsDown, ChevronsUp } from 'lucide-react';
import { ActivityTopicTitles } from './ActivityTopicTitles.tsx';
export const allowedActivityActionType = [ export const allowedActivityActionType = [
'in_progress', 'in_progress',
@ -21,7 +22,7 @@ export type UserStreamActivity = {
resourceSlug?: string; resourceSlug?: string;
isCustomResource?: boolean; isCustomResource?: boolean;
actionType: AllowedActivityActionType; actionType: AllowedActivityActionType;
topicIds?: string[]; topicTitles?: string[];
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
}; };
@ -38,7 +39,9 @@ export function ActivityStream(props: ActivityStreamProps) {
useState<UserStreamActivity | null>(null); useState<UserStreamActivity | null>(null);
const sortedActivities = activities const sortedActivities = activities
.filter((activity) => activity?.topicIds && activity.topicIds.length > 0) .filter(
(activity) => activity?.topicTitles && activity.topicTitles.length > 0,
)
.sort((a, b) => { .sort((a, b) => {
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(); return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
}) })
@ -57,8 +60,8 @@ export function ActivityStream(props: ActivityStreamProps) {
resourceId={selectedActivity.resourceId} resourceId={selectedActivity.resourceId}
resourceType={selectedActivity.resourceType} resourceType={selectedActivity.resourceType}
isCustomResource={selectedActivity.isCustomResource} isCustomResource={selectedActivity.isCustomResource}
topicIds={selectedActivity.topicIds || []} topicTitles={selectedActivity.topicTitles || []}
topicCount={selectedActivity.topicIds?.length || 0} topicCount={selectedActivity.topicTitles?.length || 0}
actionType={selectedActivity.actionType} actionType={selectedActivity.actionType}
/> />
)} )}
@ -73,7 +76,7 @@ export function ActivityStream(props: ActivityStreamProps) {
resourceTitle, resourceTitle,
actionType, actionType,
updatedAt, updatedAt,
topicIds, topicTitles,
isCustomResource, isCustomResource,
} = activity; } = activity;
@ -96,7 +99,7 @@ export function ActivityStream(props: ActivityStreamProps) {
</a> </a>
); );
const topicCount = topicIds?.length || 0; const topicCount = topicTitles?.length || 0;
const timeAgo = ( const timeAgo = (
<span className="ml-1 text-xs text-gray-400"> <span className="ml-1 text-xs text-gray-400">
@ -109,24 +112,20 @@ export function ActivityStream(props: ActivityStreamProps) {
{actionType === 'in_progress' && ( {actionType === 'in_progress' && (
<> <>
Started{' '} Started{' '}
<button <ActivityTopicTitles
className="font-medium underline underline-offset-2 hover:text-black" topicTitles={topicTitles || []}
onClick={() => setSelectedActivity(activity)} onSelectActivity={() => setSelectedActivity(activity)}
> />{' '}
{topicCount} topic{topicCount > 1 ? 's' : ''}
</button>{' '}
in {resourceLinkComponent} {timeAgo} in {resourceLinkComponent} {timeAgo}
</> </>
)} )}
{actionType === 'done' && ( {actionType === 'done' && (
<> <>
Completed{' '} Completed{' '}
<button <ActivityTopicTitles
className="font-medium underline underline-offset-2 hover:text-black" topicTitles={topicTitles || []}
onClick={() => setSelectedActivity(activity)} onSelectActivity={() => setSelectedActivity(activity)}
> />{' '}
{topicCount} topic{topicCount > 1 ? 's' : ''}
</button>{' '}
in {resourceLinkComponent} {timeAgo} in {resourceLinkComponent} {timeAgo}
</> </>
)} )}
@ -146,16 +145,20 @@ export function ActivityStream(props: ActivityStreamProps) {
{activities.length > 10 && ( {activities.length > 10 && (
<button <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" className="mt-3 flex items-center gap-2 rounded-md border border-black py-1 pl-1.5 pr-2 text-xs uppercase tracking-wide text-black transition-colors hover:border-black hover:bg-black hover:text-white"
onClick={() => setShowAll(!showAll)} onClick={() => setShowAll(!showAll)}
> >
{showAll ? <> {showAll ? (
<ChevronsUp size={14} /> <>
Show less <ChevronsUp size={14} />
</> : <> Show less
<ChevronsDown size={14} /> </>
Show more ) : (
</>} <>
<ChevronsDown size={14} />
Show more
</>
)}
</button> </button>
)} )}
</div> </div>

41
src/components/Activity/ActivityTopicTitles.tsx
Unescape View File

@ -0,0 +1,41 @@
type ActivityTopicTitlesProps = {
topicTitles: string[];
onSelectActivity?: () => void;
};
export function ActivityTopicTitles(props: ActivityTopicTitlesProps) {
const { topicTitles, onSelectActivity } = props;
const firstThreeTopics = topicTitles?.slice(0, 3);
const remainingTopics = topicTitles?.slice(3);
return (
<>
{firstThreeTopics.map((topicTitle, index) => {
return (
<span className="font-medium">
<>
{index > 0 && ', '}
{index === firstThreeTopics.length - 1 &&
firstThreeTopics.length > 1 &&
'and '}
{topicTitle}
</>
</span>
);
})}
{remainingTopics?.length > 0 && (
<>
&nbsp;and&nbsp;
<button
className="font-medium underline underline-offset-2 hover:text-black"
onClick={onSelectActivity}
>
{remainingTopics.length} more topic
{remainingTopics.length > 1 ? 's' : ''}
</button>
</>
)}
</>
);
}

56
src/components/Activity/ActivityTopicsModal.tsx
Unescape View File

@ -11,7 +11,7 @@ type ActivityTopicDetailsProps = {
resourceId: string; resourceId: string;
resourceType: ResourceType | 'question'; resourceType: ResourceType | 'question';
isCustomResource?: boolean; isCustomResource?: boolean;
topicIds: string[]; topicTitles: string[];
topicCount: number; topicCount: number;
actionType: AllowedActivityActionType; actionType: AllowedActivityActionType;
onClose: () => void; onClose: () => void;
@ -22,56 +22,12 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
resourceId, resourceId,
resourceType, resourceType,
isCustomResource, isCustomResource,
topicIds = [], topicTitles = [],
topicCount, topicCount,
actionType, actionType,
onClose, onClose,
} = props; } = 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 = ''; let pageUrl = '';
if (resourceType === 'roadmap') { if (resourceType === 'roadmap') {
pageUrl = isCustomResource ? `/r/${resourceId}` : `/${resourceId}`; pageUrl = isCustomResource ? `/r/${resourceId}` : `/${resourceId}`;
@ -85,8 +41,6 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
<Modal <Modal
onClose={() => { onClose={() => {
onClose(); onClose();
setError(null);
setIsLoading(false);
}} }}
> >
<div className={`popup-body relative rounded-lg bg-white p-4 shadow`}> <div className={`popup-body relative rounded-lg bg-white p-4 shadow`}>
@ -108,9 +62,7 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
</a> </a>
</span> </span>
<ul className="flex max-h-[50vh] flex-col gap-1 overflow-y-auto max-md:max-h-full"> <ul className="flex max-h-[50vh] flex-col gap-1 overflow-y-auto max-md:max-h-full">
{topicIds.map((topicId) => { {topicTitles.map((topicTitle) => {
const topicTitle = topicTitles[topicId] || 'Unknown Topic';
const ActivityIcon = const ActivityIcon =
actionType === 'done' actionType === 'done'
? Check ? Check
@ -119,7 +71,7 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
: Check; : Check;
return ( return (
<li key={topicId} className="flex items-start gap-2"> <li key={topicTitle} className="flex items-start gap-2">
<ActivityIcon <ActivityIcon
strokeWidth={3} strokeWidth={3}
className="relative top-[4px] text-green-500" className="relative top-[4px] text-green-500"

49
src/components/TeamActivity/TeamActivityItem.tsx
Unescape View File

@ -2,6 +2,7 @@ import { useState } from 'react';
import { getRelativeTimeString } from '../../lib/date'; import { getRelativeTimeString } from '../../lib/date';
import type { TeamStreamActivity } from './TeamActivityPage'; import type { TeamStreamActivity } from './TeamActivityPage';
import { ChevronsDown, ChevronsUp } from 'lucide-react'; import { ChevronsDown, ChevronsUp } from 'lucide-react';
import { ActivityTopicTitles } from '../Activity/ActivityTopicTitles';
type TeamActivityItemProps = { type TeamActivityItemProps = {
onTopicClick?: (activity: TeamStreamActivity) => void; onTopicClick?: (activity: TeamStreamActivity) => void;
@ -72,8 +73,8 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
if (activities.length === 1) { if (activities.length === 1) {
const activity = activities[0]; const activity = activities[0];
const { actionType, topicIds } = activity; const { actionType, topicTitles } = activity;
const topicCount = topicIds?.length || 0; const topicCount = topicTitles?.length || 0;
return ( return (
<li <li
@ -83,12 +84,10 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
{actionType === 'in_progress' && ( {actionType === 'in_progress' && (
<> <>
{username} started{' '} {username} started{' '}
<button <ActivityTopicTitles
className="font-medium underline underline-offset-2 hover:text-black" topicTitles={topicTitles || []}
onClick={() => onTopicClick?.(activity)} onSelectActivity={() => onTopicClick?.(activity)}
> />{' '}
{topicCount} topic{topicCount > 1 ? 's' : ''}
</button>{' '}
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
</> </>
)} )}
@ -96,12 +95,10 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
{actionType === 'done' && ( {actionType === 'done' && (
<> <>
{username} completed{' '} {username} completed{' '}
<button <ActivityTopicTitles
className="font-medium underline underline-offset-2 hover:text-black" topicTitles={topicTitles || []}
onClick={() => onTopicClick?.(activity)} onSelectActivity={() => onTopicClick?.(activity)}
> />{' '}
{topicCount} topic{topicCount > 1 ? 's' : ''}
</button>{' '}
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
</> </>
)} )}
@ -131,32 +128,28 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
<div className="py-3"> <div className="py-3">
<ul className="ml-2 flex flex-col gap-2 sm:ml-[36px]"> <ul className="ml-2 flex flex-col gap-2 sm:ml-[36px]">
{activities.slice(0, activityLimit).map((activity) => { {activities.slice(0, activityLimit).map((activity) => {
const { actionType, topicIds } = activity; const { actionType, topicTitles } = activity;
const topicCount = topicIds?.length || 0; const topicCount = topicTitles?.length || 0;
return ( return (
<li key={activity._id} className="text-sm text-gray-600"> <li key={activity._id} className="text-sm text-gray-600">
{actionType === 'in_progress' && ( {actionType === 'in_progress' && (
<> <>
Started{' '} Started{' '}
<button <ActivityTopicTitles
className="font-medium underline underline-offset-2 hover:text-black" topicTitles={topicTitles || []}
onClick={() => onTopicClick?.(activity)} onSelectActivity={() => onTopicClick?.(activity)}
> />{' '}
{topicCount} topic{topicCount > 1 ? 's' : ''}
</button>{' '}
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
</> </>
)} )}
{actionType === 'done' && ( {actionType === 'done' && (
<> <>
Completed{' '} Completed{' '}
<button <ActivityTopicTitles
className="font-medium underline underline-offset-2 hover:text-black" topicTitles={topicTitles || []}
onClick={() => onTopicClick?.(activity)} onSelectActivity={() => onTopicClick?.(activity)}
> />{' '}
{topicCount} topic{topicCount > 1 ? 's' : ''}
</button>{' '}
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
</> </>
)} )}

6
src/components/TeamActivity/TeamActivityPage.tsx
Unescape View File

@ -18,7 +18,7 @@ export type TeamStreamActivity = {
resourceSlug?: string; resourceSlug?: string;
isCustomResource?: boolean; isCustomResource?: boolean;
actionType: AllowedActivityActionType; actionType: AllowedActivityActionType;
topicIds?: string[]; topicTitles?: string[];
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
}; };
@ -102,7 +102,7 @@ export function TeamActivityPage() {
return activities?.filter((activity) => { return activities?.filter((activity) => {
return ( return (
activity.activity.length > 0 && activity.activity.length > 0 &&
activity.activity.some((t) => (t?.topicIds?.length || 0) > 0) activity.activity.some((t) => (t?.topicTitles?.length || 0) > 0)
); );
}); });
}, [activities]); }, [activities]);
@ -137,7 +137,7 @@ export function TeamActivityPage() {
const userActivities = uniqueActivities const userActivities = uniqueActivities
.filter((activity) => activity.userId === user._id) .filter((activity) => activity.userId === user._id)
.flatMap((activity) => activity.activity) .flatMap((activity) => activity.activity)
.filter((activity) => (activity?.topicIds?.length || 0) > 0) .filter((activity) => (activity?.topicTitles?.length || 0) > 0)
.sort((a, b) => { .sort((a, b) => {
return ( return (
new Date(b.updatedAt).getTime() - new Date(b.updatedAt).getTime() -

54
src/components/TeamActivity/TeamActivityTopicsModal.tsx
Unescape View File

@ -16,54 +16,10 @@ export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) {
resourceId, resourceId,
resourceType, resourceType,
isCustomResource, isCustomResource,
topicIds = [], topicTitles = [],
actionType, actionType,
} = activity; } = 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 = ''; let pageUrl = '';
if (resourceType === 'roadmap') { if (resourceType === 'roadmap') {
pageUrl = isCustomResource ? `/r/${resourceId}` : `/${resourceId}`; pageUrl = isCustomResource ? `/r/${resourceId}` : `/${resourceId}`;
@ -77,8 +33,6 @@ export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) {
<Modal <Modal
onClose={() => { onClose={() => {
onClose(); onClose();
setError(null);
setIsLoading(false);
}} }}
> >
<div className={`popup-body relative rounded-lg bg-white p-4 shadow`}> <div className={`popup-body relative rounded-lg bg-white p-4 shadow`}>
@ -100,9 +54,7 @@ export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) {
</a> </a>
</span> </span>
<ul className="flex max-h-[50vh] flex-col gap-1 overflow-y-auto max-md:max-h-full"> <ul className="flex max-h-[50vh] flex-col gap-1 overflow-y-auto max-md:max-h-full">
{topicIds.map((topicId) => { {topicTitles.map((topicTitle) => {
const topicTitle = topicTitles[topicId] || 'Unknown Topic';
const ActivityIcon = const ActivityIcon =
actionType === 'done' actionType === 'done'
? Check ? Check
@ -111,7 +63,7 @@ export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) {
: Check; : Check;
return ( return (
<li key={topicId} className="flex items-start gap-2"> <li key={topicTitle} className="flex items-start gap-2">
<ActivityIcon <ActivityIcon
strokeWidth={3} strokeWidth={3}
className="relative top-[4px] text-green-500" className="relative top-[4px] text-green-500"

Write Preview
Loading…
Cancel
Save