index.tsx raw

   1  import HideUntrustedContentButton from '@/components/HideUntrustedContentButton'
   2  import NotificationList from '@/components/NotificationList'
   3  import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
   4  import { usePrimaryPage } from '@/PageManager'
   5  import { TPageRef } from '@/types'
   6  import { Bell } from 'lucide-react'
   7  import { forwardRef, useEffect, useRef } from 'react'
   8  import { useTranslation } from 'react-i18next'
   9  
  10  const NotificationListPage = forwardRef<TPageRef>((_, ref) => {
  11    const { current } = usePrimaryPage()
  12    const firstRenderRef = useRef(true)
  13    const notificationListRef = useRef<{ refresh: () => void }>(null)
  14  
  15    useEffect(() => {
  16      if (current === 'notifications' && !firstRenderRef.current) {
  17        notificationListRef.current?.refresh()
  18      }
  19      firstRenderRef.current = false
  20    }, [current])
  21  
  22    return (
  23      <PrimaryPageLayout
  24        ref={ref}
  25        pageName="notifications"
  26        titlebar={<NotificationListPageTitlebar />}
  27        displayScrollToTopButton
  28      >
  29        <NotificationList ref={notificationListRef} />
  30      </PrimaryPageLayout>
  31    )
  32  })
  33  NotificationListPage.displayName = 'NotificationListPage'
  34  export default NotificationListPage
  35  
  36  function NotificationListPageTitlebar() {
  37    const { t } = useTranslation()
  38  
  39    return (
  40      <div className="flex gap-2 items-center justify-between h-full pl-3">
  41        <div className="flex items-center gap-2">
  42          <Bell />
  43          <div className="text-lg font-semibold">{t('Notifications')}</div>
  44        </div>
  45        <HideUntrustedContentButton type="notifications" size="titlebar-icon" />
  46      </div>
  47    )
  48  }
  49