fix: change topicIds to topicTitles (#5588)

* fix: change `topicIds` to `topicTitles`

* fix: comma and gap

src/components/Activity/ActivityStream.tsx

@@ -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>

src/components/Activity/ActivityTopicTitles.tsx

@@ -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>
+        </>
+      )}
+    </>
+  );
+}

src/components/Activity/ActivityTopicsModal.tsx

@@ -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"

src/components/TeamActivity/TeamActivityItem.tsx

@@ -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)}
                   </>
                 )}

src/components/TeamActivity/TeamActivityPage.tsx

@@ -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() -

src/components/TeamActivity/TeamActivityTopicsModal.tsx

@@ -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"