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
Split 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 { EmptyStream } from './EmptyStream';
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 = [
'in_progress',
@ -21,7 +22,7 @@ export type UserStreamActivity = {
resourceSlug?: string;
isCustomResource?: boolean;
actionType: AllowedActivityActionType;
topicIds?: string[];
topicTitles?: string[];
createdAt: Date;
updatedAt: Date;
};
@ -38,7 +39,9 @@ export function ActivityStream(props: ActivityStreamProps) {
useState<UserStreamActivity | null>(null);
const sortedActivities = activities
.filter((activity) => activity?.topicIds && activity.topicIds.length > 0)
.filter(
(activity) => activity?.topicTitles && activity.topicTitles.length > 0,
)
.sort((a, b) => {
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
})
@ -57,8 +60,8 @@ export function ActivityStream(props: ActivityStreamProps) {
resourceId={selectedActivity.resourceId}
resourceType={selectedActivity.resourceType}
isCustomResource={selectedActivity.isCustomResource}
topicIds={selectedActivity.topicIds || []}
topicCount={selectedActivity.topicIds?.length || 0}
topicTitles={selectedActivity.topicTitles || []}
topicCount={selectedActivity.topicTitles?.length || 0}
actionType={selectedActivity.actionType}
/>
)}
@ -73,7 +76,7 @@ export function ActivityStream(props: ActivityStreamProps) {
resourceTitle,
actionType,
updatedAt,
topicIds,
topicTitles,
isCustomResource,
} = activity;
@ -96,7 +99,7 @@ export function ActivityStream(props: ActivityStreamProps) {
</a>
);
const topicCount = topicIds?.length || 0;
const topicCount = topicTitles?.length || 0;
const timeAgo = (
<span className="ml-1 text-xs text-gray-400">
@ -109,24 +112,20 @@ export function ActivityStream(props: ActivityStreamProps) {
{actionType === 'in_progress' && (
<>
Started{' '}
<button
className="font-medium underline underline-offset-2 hover:text-black"
onClick={() => setSelectedActivity(activity)}
>
{topicCount} topic{topicCount > 1 ? 's' : ''}
</button>{' '}
<ActivityTopicTitles
topicTitles={topicTitles || []}
onSelectActivity={() => setSelectedActivity(activity)}
/>{' '}
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>{' '}
<ActivityTopicTitles
topicTitles={topicTitles || []}
onSelectActivity={() => setSelectedActivity(activity)}
/>{' '}
in {resourceLinkComponent} {timeAgo}
</>
)}
@ -146,16 +145,20 @@ export function ActivityStream(props: ActivityStreamProps) {
{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"
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)}
>
{showAll ? <>
<ChevronsUp size={14} />
Show less
</> : <>
<ChevronsDown size={14} />
Show more
</>}
{showAll ? (
<>
<ChevronsUp size={14} />
Show less
</>
) : (
<>
<ChevronsDown size={14} />
Show more
</>
)}
</button>
)}
</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;
resourceType: ResourceType | 'question';
isCustomResource?: boolean;
topicIds: string[];
topicTitles: string[];
topicCount: number;
actionType: AllowedActivityActionType;
onClose: () => void;
@ -22,56 +22,12 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
resourceId,
resourceType,
isCustomResource,
topicIds = [],
topicTitles = [],
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}`;
@ -85,8 +41,6 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
<Modal
onClose={() => {
onClose();
setError(null);
setIsLoading(false);
}}
>
<div className={`popup-body relative rounded-lg bg-white p-4 shadow`}>
@ -108,9 +62,7 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
</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';
{topicTitles.map((topicTitle) => {
const ActivityIcon =
actionType === 'done'
? Check
@ -119,7 +71,7 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
: Check;
return (
<li key={topicId} className="flex items-start gap-2">
<li key={topicTitle} className="flex items-start gap-2">
<ActivityIcon
strokeWidth={3}
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 type { TeamStreamActivity } from './TeamActivityPage';
import { ChevronsDown, ChevronsUp } from 'lucide-react';
import { ActivityTopicTitles } from '../Activity/ActivityTopicTitles';
type TeamActivityItemProps = {
onTopicClick?: (activity: TeamStreamActivity) => void;
@ -72,8 +73,8 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
if (activities.length === 1) {
const activity = activities[0];
const { actionType, topicIds } = activity;
const topicCount = topicIds?.length || 0;
const { actionType, topicTitles } = activity;
const topicCount = topicTitles?.length || 0;
return (
<li
@ -83,12 +84,10 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
{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>{' '}
<ActivityTopicTitles
topicTitles={topicTitles || []}
onSelectActivity={() => onTopicClick?.(activity)}
/>{' '}
in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
</>
)}
@ -96,12 +95,10 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
{actionType === 'done' && (
<>
{username} completed{' '}
<button
className="font-medium underline underline-offset-2 hover:text-black"
onClick={() => onTopicClick?.(activity)}
>
{topicCount} topic{topicCount > 1 ? 's' : ''}
</button>{' '}
<ActivityTopicTitles
topicTitles={topicTitles || []}
onSelectActivity={() => onTopicClick?.(activity)}
/>{' '}
in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
</>
)}
@ -131,32 +128,28 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
<div className="py-3">
<ul className="ml-2 flex flex-col gap-2 sm:ml-[36px]">
{activities.slice(0, activityLimit).map((activity) => {
const { actionType, topicIds } = activity;
const topicCount = topicIds?.length || 0;
const { actionType, topicTitles } = activity;
const topicCount = topicTitles?.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>{' '}
<ActivityTopicTitles
topicTitles={topicTitles || []}
onSelectActivity={() => onTopicClick?.(activity)}
/>{' '}
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>{' '}
<ActivityTopicTitles
topicTitles={topicTitles || []}
onSelectActivity={() => onTopicClick?.(activity)}
/>{' '}
in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
</>
)}

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

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

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

@ -16,54 +16,10 @@ export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) {
resourceId,
resourceType,
isCustomResource,
topicIds = [],
topicTitles = [],
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}`;
@ -77,8 +33,6 @@ export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) {
<Modal
onClose={() => {
onClose();
setError(null);
setIsLoading(false);
}}
>
<div className={`popup-body relative rounded-lg bg-white p-4 shadow`}>
@ -100,9 +54,7 @@ export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) {
</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';
{topicTitles.map((topicTitle) => {
const ActivityIcon =
actionType === 'done'
? Check
@ -111,7 +63,7 @@ export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) {
: Check;
return (
<li key={topicId} className="flex items-start gap-2">
<li key={topicTitle} className="flex items-start gap-2">
<ActivityIcon
strokeWidth={3}
className="relative top-[4px] text-green-500"

Write Preview
Loading…
Cancel
Save