54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
import React, {
|
|
useState, useCallback, useMemo, useEffect,
|
|
} from 'react';
|
|
import { Tabs, Tab } from '@edx/paragon';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import NotificationSections from './NotificationSections';
|
|
import { getNotificationTotalUnseenCounts } from './data/selectors';
|
|
import { fetchNotificationList } from './data/thunks';
|
|
import { notificationTabsOptions } from '../constants';
|
|
|
|
const NotificationTabs = () => {
|
|
const notificationUnseenCounts = useSelector(getNotificationTotalUnseenCounts());
|
|
const [activeTab, setActiveTab] = useState(notificationTabsOptions[0].key);
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchNotificationList({ notificationType: activeTab || 'reminders' }));
|
|
}, [dispatch, activeTab]);
|
|
|
|
useEffect(() => {
|
|
setActiveTab(activeTab || 'reminders');
|
|
}, [activeTab]);
|
|
|
|
const handleActiveTab = useCallback((tab) => {
|
|
setActiveTab(tab);
|
|
}, []);
|
|
|
|
const tabArray = useMemo(() => notificationTabsOptions.map((option) => (
|
|
<Tab
|
|
eventKey={option.key}
|
|
title={option.title}
|
|
notification={notificationUnseenCounts[option.title]}
|
|
tabClassName="notification-tab"
|
|
>
|
|
<NotificationSections />
|
|
</Tab>
|
|
)), [notificationUnseenCounts]);
|
|
|
|
return (
|
|
activeTab && (
|
|
<Tabs
|
|
defaultActiveKey={activeTab}
|
|
id="uncontrolled-tab-example"
|
|
className="notification-tabs"
|
|
onSelect={handleActiveTab}
|
|
>
|
|
{tabArray}
|
|
</Tabs>
|
|
)
|
|
);
|
|
};
|
|
|
|
export default NotificationTabs;
|