Populate target from hook and implement a new list item for activities

apps/app/src/client/components/RecentActivity/ActivityListItem.tsx

@@ -0,0 +1,25 @@
+import type { IPageHasId } from '@growi/core';
+
+import type { IActivityHasId } from '~/interfaces/activity';
+
+import { PageListItemS } from '../PageList/PageListItemS';
+
+// Define the component's props interface
+type ActivityWithPageTarget = IActivityHasId & { target: IPageHasId };
+
+export const ActivityListItem = ({ activity }: { activity: ActivityWithPageTarget }): JSX.Element => {
+
+  const action = activity.action;
+  const date = new Date(activity.createdAt).toLocaleString();
+
+
+  return (
+    <div className="activity-row">
+      <p className="text-muted small mb-1">
+        **{}** performed **{action}** on {date}
+      </p>
+
+      <PageListItemS page={activity.target} />
+    </div>
+  );
+};

apps/app/src/client/components/RecentActivity/RecentActivity.tsx

@@ -11,6 +11,9 @@ import loggerFactory from '~/utils/logger';
 
 import PaginationWrapper from '../PaginationWrapper';
 
+import { ActivityListItem } from './ActivityListItem';
+
+
 const logger = loggerFactory('growi:RecentActivity');
 
 type ActivityWithPageTarget = IActivityHasId & { target: IPageHasId };
@@ -23,13 +26,12 @@ const hasPageTarget = (activity: IActivityHasId): activity is ActivityWithPageTa
 
 export const RecentActivity = (): JSX.Element => {
 
-  const [activities, setActivities] = useState<IActivityHasId[]>([]);
+  const [activities, setActivities] = useState<ActivityWithPageTarget[]>([]);
   const [activePage, setActivePage] = useState(1);
   const [limit] = useState(10);
   const [offset, setOffset] = useState(0);
 
-  const { data: paginatedData, error, isLoading } = useSWRxRecentActivity(limit, offset);
-
+  const { data: paginatedData, error } = useSWRxRecentActivity(limit, offset);
 
   const handlePage = useCallback(async(selectedPage: number) => {
     const newOffset = (selectedPage - 1) * limit;
@@ -47,7 +49,7 @@ export const RecentActivity = (): JSX.Element => {
     }
 
     if (paginatedData) {
-      const activitiesWithPages: IActivityHasId[] = paginatedData.docs
+      const activitiesWithPages = paginatedData.docs
         .filter(hasPageTarget);
 
       setActivities(activitiesWithPages);
@@ -60,7 +62,6 @@ export const RecentActivity = (): JSX.Element => {
     <div className="page-list-container-activity">
       <ul className="page-list-ul page-list-ul-flat mb-3">
         {activities.map(activity => (
-          // REMINDER: make ActivityListItem component
           <li key={`recent-activity-view:${activity._id}`} className="mt-4">
             <ActivityListItem activity={activity} />
           </li>

apps/app/src/client/components/UsersHomepageFooter.tsx

@@ -2,6 +2,7 @@ import React, { useState, type JSX } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { RecentActivity } from '~/client/components/RecentActivity/RecentActivity';
 import { RecentCreated } from '~/client/components/RecentCreated/RecentCreated';
 import { useCurrentUser } from '~/stores-universal/context';
 
@@ -45,6 +46,9 @@ export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Elemen
         <div id="user-created-list" className={`page-list ${styles['page-list']}`}>
           <RecentCreated userId={creatorId} />
         </div>
+        <div id="user-created-list" className={`page-list ${styles['page-list']}`}>
+          <RecentActivity />
+        </div>
       </div>
     </div>
   );

apps/app/src/server/routes/apiv3/user-activities.ts

@@ -207,7 +207,20 @@ module.exports = (crowi: Crowi): Router => {
                 { $sort: { createdAt: -1 } },
                 { $skip: offset },
                 { $limit: limit },
-
+                {
+                  $lookup: {
+                    from: 'pages',
+                    localField: 'target',
+                    foreignField: '_id',
+                    as: 'target',
+                  },
+                },
+                {
+                  $unwind: {
+                    path: '$target',
+                    preserveNullAndEmptyArrays: true,
+                  },
+                },
                 {
                   $lookup: {
                     from: 'users',

apps/app/src/stores/recent-activity.ts

@@ -21,6 +21,7 @@ export const useSWRxRecentActivity = (
     const promise = apiv3Get<UserActivitiesResult>(endpoint, {
       limit: limitParam,
       offset: offsetParam,
+      populate: 'target',
     });
 
     return promise.then(result => result.data.serializedPaginationResult);