127 lines
3.8 KiB
TypeScript
127 lines
3.8 KiB
TypeScript
import React, { useMemo, useCallback } from 'react';
|
|
import { Card, Segmented, Skeleton, Empty, Typography, Alert } from 'antd';
|
|
import { ClockCircleOutlined, UnorderedListOutlined } from '@ant-design/icons';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
|
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
|
import { ActivityFeedType } from '@/types/home/user-activity.types';
|
|
import { setActiveTab } from '@/features/home-page/user-activity.slice';
|
|
import {
|
|
useGetUserRecentTasksQuery,
|
|
useGetUserTimeLoggedTasksQuery,
|
|
} from '@/api/home-page/user-activity.api.service';
|
|
import TaskActivityList from './task-activity-list';
|
|
import TimeLoggedTaskList from './time-logged-task-list';
|
|
|
|
const { Title } = Typography;
|
|
|
|
const UserActivityFeed: React.FC = () => {
|
|
const { t } = useTranslation('home');
|
|
const dispatch = useAppDispatch();
|
|
const { activeTab } = useAppSelector(state => state.userActivityReducer);
|
|
|
|
const {
|
|
data: recentTasksData,
|
|
isLoading: loadingRecentTasks,
|
|
error: recentTasksError,
|
|
} = useGetUserRecentTasksQuery(
|
|
{ limit: 10 },
|
|
{ skip: activeTab !== ActivityFeedType.RECENT_TASKS }
|
|
);
|
|
|
|
const {
|
|
data: timeLoggedTasksData,
|
|
isLoading: loadingTimeLoggedTasks,
|
|
error: timeLoggedTasksError,
|
|
} = useGetUserTimeLoggedTasksQuery(
|
|
{ limit: 10 },
|
|
{ skip: activeTab !== ActivityFeedType.TIME_LOGGED_TASKS }
|
|
);
|
|
|
|
const recentTasks = useMemo(() => {
|
|
if (!recentTasksData) return [];
|
|
return Array.isArray(recentTasksData) ? recentTasksData : [];
|
|
}, [recentTasksData]);
|
|
|
|
const timeLoggedTasks = useMemo(() => {
|
|
if (!timeLoggedTasksData) return [];
|
|
return Array.isArray(timeLoggedTasksData) ? timeLoggedTasksData : [];
|
|
}, [timeLoggedTasksData]);
|
|
|
|
const segmentOptions = useMemo(
|
|
() => [
|
|
{
|
|
value: ActivityFeedType.RECENT_TASKS,
|
|
label: (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<UnorderedListOutlined />
|
|
<span>{t('Recent Tasks')}</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
value: ActivityFeedType.TIME_LOGGED_TASKS,
|
|
label: (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<ClockCircleOutlined />
|
|
<span>{t('Time Logged Tasks')}</span>
|
|
</div>
|
|
),
|
|
},
|
|
],
|
|
[t]
|
|
);
|
|
|
|
const handleTabChange = useCallback(
|
|
(value: ActivityFeedType) => {
|
|
dispatch(setActiveTab(value));
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
const renderContent = () => {
|
|
if (activeTab === ActivityFeedType.RECENT_TASKS) {
|
|
if (recentTasksError) {
|
|
return <Alert message={t('Error Loading Recent Tasks')} type="error" showIcon />;
|
|
}
|
|
if (loadingRecentTasks) {
|
|
return <Skeleton active />;
|
|
}
|
|
if (recentTasks.length === 0) {
|
|
return <Empty description={t('No Recent Tasks')} />;
|
|
}
|
|
return <TaskActivityList tasks={recentTasks} />;
|
|
} else {
|
|
if (timeLoggedTasksError) {
|
|
return <Alert message={t('Error Loading Time Logged Tasks')} type="error" showIcon />;
|
|
}
|
|
if (loadingTimeLoggedTasks) {
|
|
return <Skeleton active />;
|
|
}
|
|
if (timeLoggedTasks.length === 0) {
|
|
return <Empty description={t('No Time Logged Tasks')} />;
|
|
}
|
|
return <TimeLoggedTaskList tasks={timeLoggedTasks} />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<div style={{ marginBottom: 16 }}>
|
|
<Title level={5} style={{ marginBottom: 12 }}>
|
|
{t('Recent Activity')}
|
|
</Title>
|
|
<Segmented
|
|
options={segmentOptions}
|
|
value={activeTab}
|
|
onChange={handleTabChange}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</div>
|
|
{renderContent()}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default React.memo(UserActivityFeed);
|