hamid
42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
'use client';
|
|
import { FunctionComponent } from 'react';
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { useRouter } from 'next/navigation';
|
|
import { notificationsPath } from '@/constants';
|
|
import { useUnreadCount } from '@/services/notifications';
|
|
import NotificationBellView from './NotificationBellView';
|
|
|
|
export interface NotificationBellProps {
|
|
/** The shell the bell lives in — decides which notification center it opens. */
|
|
role: 'customer' | 'nurse' | 'admin';
|
|
}
|
|
|
|
/**
|
|
* The notification bell **container** mounted in the app chrome. It subscribes to the polling
|
|
* `useUnreadCount` (stale-while-revalidate) — the only thing in this component that re-renders on a
|
|
* count change, so the shell around it never does (§5 isolation).
|
|
*
|
|
* It always navigates to the notification center. The nurse-on-desktop popover preview it used to open
|
|
* branched on `useMediaQuery(md)`, and the app no longer has a desktop layout to branch on: every
|
|
* viewport renders the same phone-width frame, so that branch only made the same nurse behave
|
|
* differently on the same app. `NotificationBellPopover` stays exported for a surface that genuinely
|
|
* wants an inline preview.
|
|
* @component NotificationBell
|
|
*/
|
|
const NotificationBell: FunctionComponent<NotificationBellProps> = ({ role }) => {
|
|
const count = useUnreadCount();
|
|
const router = useRouter();
|
|
const locale = useLocale();
|
|
const t = useTranslations('notifications');
|
|
|
|
return (
|
|
<NotificationBellView
|
|
count={count}
|
|
label={t('bell_aria', { count })}
|
|
onClick={() => router.push(`/${locale}${notificationsPath(role)}`)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default NotificationBell;
|