62 lines
2.2 KiB
JavaScript
62 lines
2.2 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, getSelectedNotificationType } from './data/selectors';
|
|
import { fetchNotificationList } from './data/thunks';
|
|
import { notificationTabsOptions } from './data/constants';
|
|
|
|
const NotificationTabs = () => {
|
|
const notificationUnseenCounts = useSelector(getNotificationTotalUnseenCounts());
|
|
const selectedNotificationType = useSelector(getSelectedNotificationType());
|
|
const [activeTab, setActiveTab] = useState(notificationTabsOptions[0].key);
|
|
const [loadMoreCount, setLoadMoreCount] = useState(10);
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchNotificationList({ notificationType: activeTab, notificationCount: loadMoreCount }));
|
|
}, [dispatch, activeTab, loadMoreCount]);
|
|
|
|
const handleActiveTab = useCallback((tab) => {
|
|
setActiveTab(tab);
|
|
}, []);
|
|
|
|
const handleLoadMoreNotification = useCallback((count) => {
|
|
setLoadMoreCount(count);
|
|
}, []);
|
|
|
|
const tabArray = useMemo(() => notificationTabsOptions.map((option) => (
|
|
<Tab
|
|
eventKey={option.key}
|
|
title={option.title}
|
|
notification={notificationUnseenCounts.countByAppName[option.key]}
|
|
tabClassName="pt-0 pb-2.5 px-2.5 d-flex flex-row align-items-center line-height-24"
|
|
>
|
|
{option.key === selectedNotificationType
|
|
&& <NotificationSections handleLoadMoreNotification={handleLoadMoreNotification} loadMoreCount={loadMoreCount} />}
|
|
</Tab>
|
|
)), [notificationUnseenCounts, handleLoadMoreNotification, loadMoreCount, selectedNotificationType]);
|
|
|
|
// This code is used to replace More... text to More to match the UI
|
|
const buttons = document.getElementsByClassName('dropdown-toggle');
|
|
for (let i = 0; i < buttons.length; i++) {
|
|
buttons[i].firstChild.nodeValue = 'More';
|
|
}
|
|
|
|
return (
|
|
<Tabs
|
|
variant="tabs"
|
|
defaultActiveKey={activeTab}
|
|
onSelect={handleActiveTab}
|
|
className="px-2.5"
|
|
>
|
|
{tabArray}
|
|
</Tabs>
|
|
);
|
|
};
|
|
|
|
export default NotificationTabs;
|