import PropTypes from 'prop-types'; import { useRef, useCallback, useEffect } from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { Helmet } from 'react-helmet'; import { useSelector, useDispatch } from 'react-redux'; import ArchiveIcon from '@/material-icons/400-24px/archive.svg?react'; import { fetchNotificationRequests, expandNotificationRequests } from 'flavours/glitch/actions/notifications'; import Column from 'flavours/glitch/components/column'; import ColumnHeader from 'flavours/glitch/components/column_header'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; import { NotificationRequest } from './components/notification_request'; const messages = defineMessages({ title: { id: 'notification_requests.title', defaultMessage: 'Filtered notifications' }, }); export const NotificationRequests = ({ multiColumn }) => { const columnRef = useRef(); const intl = useIntl(); const dispatch = useDispatch(); const isLoading = useSelector(state => state.getIn(['notificationRequests', 'isLoading'])); const notificationRequests = useSelector(state => state.getIn(['notificationRequests', 'items'])); const hasMore = useSelector(state => !!state.getIn(['notificationRequests', 'next'])); const handleHeaderClick = useCallback(() => { columnRef.current?.scrollTop(); }, [columnRef]); const handleLoadMore = useCallback(() => { dispatch(expandNotificationRequests()); }, [dispatch]); useEffect(() => { dispatch(fetchNotificationRequests()); }, [dispatch]); return ( } > {notificationRequests.map(request => ( ))} {intl.formatMessage(messages.title)} ); }; NotificationRequests.propTypes = { multiColumn: PropTypes.bool, }; export default NotificationRequests;