Show activity in table

packages/app/src/components/Admin/AuditLog.tsx

@@ -1,17 +1,22 @@
 import React, { FC } from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import { useSWRxActivityList } from '~/stores/activity';
 
+import ActivityTable from './AuditLog/ActivityTable';
+
 const AuditLog: FC = () => {
-  const { data: activityListData } = useSWRxActivityList(5, 0);
+  const { t } = useTranslation();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { data: activityListData } = useSWRxActivityList(10, 0);
   const activityList = activityListData?.docs != null ? activityListData.docs : [];
 
-  console.log(activityList);
-
   return (
-    <>Hello, AuditLog</>
+    <div data-testid="admin-auditlog">
+      <h2>{t('AuditLog')}</h2>
+      <ActivityTable activityList={activityList} />
+    </div>
   );
 };
 

packages/app/src/components/Admin/AuditLog/ActivityTable.tsx

@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+
+import { format } from 'date-fns';
+
+import { IActivityHasId } from '~/interfaces/activity';
+
+type Props = {
+  activityList: IActivityHasId[]
+}
+
+const formatDate = (date) => {
+  return format(new Date(date), 'yyyy/MM/dd HH:mm:ss');
+};
+
+const ActivityTable: FC<Props> = (props: Props) => {
+  return (
+    <div className="table-responsive text-nowrap h-100">
+      <table className="table table-default table-bordered table-user-list">
+        <thead>
+          <tr>
+            <th scope="col">username</th>
+            <th scope="col">targetModel</th>
+            <th scope="col">action</th>
+            <th scope="col">createdAt</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.activityList.map((activity) => {
+            return (
+              <tr data-testid="user-table-tr" key={activity._id}>
+                <td>{activity.user?.username}</td>
+                <td>{activity.targetModel}</td>
+                <td>{activity.action}</td>
+                <td>{formatDate(activity.createdAt)}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ActivityTable;

packages/app/src/components/Admin/UserGroup/UserGroupTable.tsx

@@ -2,13 +2,13 @@ import React, {
   FC, useState, useCallback, useEffect,
 } from 'react';
 
-import { useTranslation } from 'react-i18next';
-import { TFunctionResult } from 'i18next';
 import dateFnsFormat from 'date-fns/format';
+import { TFunctionResult } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
-import Xss from '~/services/xss';
-import { IUserGroupHasId, IUserGroupRelation, IUserHasId } from '~/interfaces/user';
 import { CustomWindow } from '~/interfaces/global';
+import { IUserGroupHasId, IUserGroupRelation, IUserHasId } from '~/interfaces/user';
+import Xss from '~/services/xss';
 
 type Props = {
   headerLabel?: TFunctionResult,
@@ -183,7 +183,7 @@ const UserGroupTable: FC<Props> = (props: Props) => {
                     })}
                   </ul>
                 </td>
-                <td>{dateFnsFormat(new Date(group.createdAt), 'yyyy-MM-dd')}</td>
+                <td>{dateFnsFormat(new Date(group.createdAt), 'yyyy-MM-dd HH:mm')}</td>
                 {props.isAclEnabled
                   ? (
                     <td>

packages/app/src/interfaces/activity.ts

@@ -1,3 +1,4 @@
+import { HasObjectId } from './has-object-id';
 import { IUser } from './user';
 
 // Model
@@ -54,3 +55,5 @@ export type IActivity = {
   action: supportedActionType
   createdAt: Date
 }
+
+export type IActivityHasId = IActivity & HasObjectId;

packages/app/src/stores/activity.ts

@@ -2,12 +2,12 @@ import { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
 import { apiv3Get } from '../client/util/apiv3-client';
-import { IActivity } from '../interfaces/activity';
+import { IActivityHasId } from '../interfaces/activity';
 import { PaginateResult } from '../interfaces/mongoose-utils';
 
-export const useSWRxActivityList = (limit?: number, offset?: number): SWRResponse<PaginateResult<IActivity>, Error> => {
+export const useSWRxActivityList = (limit?: number, offset?: number): SWRResponse<PaginateResult<IActivityHasId>, Error> => {
   return useSWRImmutable(
     ['/activity', limit, offset],
-    (endpoint, limit, offset) => apiv3Get(endpoint, { limit, offset }).then(result => result.data.paginatedActivity),
+    (endpoint, limit, offset) => apiv3Get(endpoint, { limit, offset }).then(result => result.data.serializedPaginationResult),
   );
 };