import './notifications.css'; import { Link } from 'preact-router/match'; import { useEffect, useRef, useState } from 'preact/hooks'; import { useSnapshot } from 'valtio'; import Avatar from '../components/avatar'; import Icon from '../components/icon'; import Loader from '../components/loader'; import NameText from '../components/name-text'; import Status from '../components/status'; import states from '../utils/states'; import store from '../utils/store'; import useTitle from '../utils/useTitle'; /* Notification types ================== mention = Someone mentioned you in their status status = Someone you enabled notifications for has posted a status reblog = Someone boosted one of your statuses follow = Someone followed you follow_request = Someone requested to follow you favourite = Someone favourited one of your statuses poll = A poll you have voted in or created has ended update = A status you interacted with has been edited admin.sign_up = Someone signed up (optionally sent to admins) admin.report = A new report has been filed */ const contentText = { mention: 'mentioned you in their status.', status: 'posted a status.', reblog: 'boosted your status.', follow: 'followed you.', follow_request: 'requested to follow you.', favourite: 'favourited your status.', poll: 'A poll you have voted in or created has ended.', 'poll-self': 'A poll you have created has ended.', 'poll-voted': 'A poll you have voted in has ended.', update: 'A status you interacted with has been edited.', }; const LIMIT = 30; // 30 is the maximum limit :( function Notification({ notification }) { const { id, type, status, account, _accounts } = notification; // status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update const actualStatusID = status?.reblog?.id || status?.id; const currentAccount = store.session.get('currentAccount'); const isSelf = currentAccount === account?.id; const isVoted = status?.poll?.voted; const text = type === 'poll' ? contentText[isSelf ? 'poll-self' : isVoted ? 'poll-voted' : 'poll'] : contentText[type]; return ( <>
{type !== 'mention' && (

{!/poll|update/i.test(type) && ( <> {_accounts?.length > 1 ? ( <> {_accounts.length} people{' '} ) : ( <> {' '} )} )} {text} {type === 'mention' && ( {' '} •{' '} )}

)} {_accounts?.length > 1 && (

{_accounts.map((account, i) => ( <> { e.preventDefault(); states.showAccount = account; }} > {' '} ))}

)} {status && ( )}
); } function NotificationsList({ notifications, emptyCopy }) { if (!notifications.length && emptyCopy) { return

{emptyCopy}

; } // Create new flat list of notifications // Combine sibling notifications based on type and status id, ignore the id // Concat all notification.account into an array of _accounts const cleanNotifications = [ { ...notifications[0], _accounts: [notifications[0].account], }, ]; for (let i = 1, j = 0; i < notifications.length; i++) { const notification = notifications[i]; const cleanNotification = cleanNotifications[j]; const { status, account, type } = notification; if ( account && cleanNotification?.account && cleanNotification?.status?.id === status?.id && cleanNotification?.type === type ) { cleanNotification._accounts.push(account); } else { cleanNotifications[++j] = { ...notification, _accounts: [account], }; } } // console.log({ notifications, cleanNotifications }); return ( ); } function Notifications() { useTitle('Notifications'); const snapStates = useSnapshot(states); const [uiState, setUIState] = useState('default'); const [showMore, setShowMore] = useState(false); const [onlyMentions, setOnlyMentions] = useState(false); const notificationsIterator = useRef( masto.v1.notifications.list({ limit: LIMIT, }), ); async function fetchNotifications(firstLoad) { if (firstLoad) { // Reset iterator notificationsIterator.current = masto.v1.notifications.list({ limit: LIMIT, }); } const allNotifications = await notificationsIterator.current.next(); if (allNotifications.value <= 0) { return { done: true }; } const notificationsValues = allNotifications.value.map((notification) => { if (notification.status) { states.statuses.set(notification.status.id, notification.status); } return notification; }); if (firstLoad) { states.notifications = notificationsValues; } else { states.notifications.push(...notificationsValues); } states.notificationsLastFetchTime = Date.now(); return allNotifications; } const loadNotifications = (firstLoad) => { setUIState('loading'); (async () => { try { const { done } = await fetchNotifications(firstLoad); setShowMore(!done); setUIState('default'); } catch (e) { setUIState('error'); } })(); }; useEffect(() => { loadNotifications(true); states.notificationsNew = []; }, []); const scrollableRef = useRef(); // Group notifications by today, yesterday, and older const groupedNotifications = snapStates.notifications.reduce( (acc, notification) => { const date = new Date(notification.createdAt); const today = new Date(); const yesterday = new Date(); yesterday.setDate(today.getDate() - 1); if ( date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear() ) { acc.today.push(notification); } else if ( date.getDate() === yesterday.getDate() && date.getMonth() === yesterday.getMonth() && date.getFullYear() === yesterday.getFullYear() ) { acc.yesterday.push(notification); } else { acc.older.push(notification); } return acc; }, { today: [], yesterday: [], older: [] }, ); // console.log(groupedNotifications); return (
{ scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' }); }} >

Notifications

{snapStates.notificationsNew.length > 0 && ( )}
{snapStates.notifications.length ? ( <>

Today

{groupedNotifications.yesterday.length > 0 && ( <>

Yesterday

)} {groupedNotifications.older.length > 0 && ( <>

Older

)} {showMore && ( )} ) : ( <> {uiState === 'loading' && ( <>

Today

    {Array.from({ length: 5 }).map((_, i) => (
  • ███████████ ████

  • ))}
)} {uiState === 'error' && (

Error loading notifications

)} )}
); } export default Notifications;