From b1a6116817d30127f39a70170855f6747004d7f2 Mon Sep 17 00:00:00 2001 From: Harmit Goswami Date: Wed, 15 Jan 2025 10:36:40 -0500 Subject: [PATCH] Decoupled badge and notification context --- translate/src/context/BadgeTooltip.tsx | 22 ++++++++++++---- translate/src/context/Notification.tsx | 26 +++---------------- ...useNotification.ts => useNotifications.ts} | 9 ++++--- .../batchactions/components/BatchActions.tsx | 2 +- .../editor/components/BadgeTooltip.tsx | 2 +- .../editor/hooks/useSendTranslation.ts | 3 ++- .../hooks/useUpdateTranslationStatus.ts | 3 ++- 7 files changed, 32 insertions(+), 35 deletions(-) rename translate/src/hooks/{useNotification.ts => useNotifications.ts} (80%) diff --git a/translate/src/context/BadgeTooltip.tsx b/translate/src/context/BadgeTooltip.tsx index fec2c43ce..b0f12a986 100644 --- a/translate/src/context/BadgeTooltip.tsx +++ b/translate/src/context/BadgeTooltip.tsx @@ -1,17 +1,29 @@ -import { createContext, useContext } from 'react'; -import { BadgeTooltipMessage, ShowBadgeTooltip } from './Notification'; +import { createContext } from 'react'; +import { useNotifications } from '~/hooks/useNotifications'; + +export type BadgeTooltipMessage = Readonly<{ + badgeName: string | null; + badgeLevel: number | null; +}>; + +export const BadgeTooltipMessage = createContext( + null, +); + +export const ShowBadgeTooltip = createContext< + (tooltip: BadgeTooltipMessage | null) => void +>(() => {}); export function BadgeTooltipProvider({ children, }: { children: React.ReactElement; }) { - const badgeMessage = useContext(BadgeTooltipMessage); - const setBadgeMessage = useContext(ShowBadgeTooltip); + const { badgeMessage, setBadgeMessage } = useNotifications(); return ( - + setBadgeMessage(tooltip)}> {children} diff --git a/translate/src/context/Notification.tsx b/translate/src/context/Notification.tsx index 7274df054..555dbaf5b 100644 --- a/translate/src/context/Notification.tsx +++ b/translate/src/context/Notification.tsx @@ -1,5 +1,5 @@ -import React, { createContext } from 'react'; -import { useNotifications } from '../hooks/useNotification'; +import { createContext } from 'react'; +import { useNotifications } from '~/hooks/useNotifications'; type NotificationType = 'debug' | 'error' | 'info' | 'success' | 'warning'; @@ -16,35 +16,17 @@ export const ShowNotification = createContext< (message: NotificationMessage | null) => void >(() => {}); -export type BadgeTooltipMessage = Readonly<{ - badgeName: string | null; - badgeLevel: number | null; -}>; - -export const BadgeTooltipMessage = createContext( - null, -); - -export const ShowBadgeTooltip = createContext< - (tooltip: BadgeTooltipMessage | null) => void ->(() => {}); - export function NotificationProvider({ children, }: { children: React.ReactElement; }) { - const { message, setMessage, badgeMessage, setBadgeMessage } = - useNotifications(); + const { message, setMessage } = useNotifications(); return ( - - - {children} - - + {children} ); diff --git a/translate/src/hooks/useNotification.ts b/translate/src/hooks/useNotifications.ts similarity index 80% rename from translate/src/hooks/useNotification.ts rename to translate/src/hooks/useNotifications.ts index afa3aa546..45f897cb2 100644 --- a/translate/src/hooks/useNotification.ts +++ b/translate/src/hooks/useNotifications.ts @@ -1,8 +1,6 @@ import { useState, useEffect } from 'react'; -import { - NotificationMessage, - BadgeTooltipMessage, -} from '../context/Notification'; +import { NotificationMessage } from '~/context/Notification'; +import { BadgeTooltipMessage } from '~/context/BadgeTooltip'; export function useNotifications() { const [message, setMessage] = useState(null); @@ -10,6 +8,9 @@ export function useNotifications() { null, ); + // If there's a notification in the DOM set by Django, show it. + // Note that we only show it once, and only when the UI has already + // been rendered, to make sure users do see it. useEffect(() => { const rootElt = document.getElementById('root'); if (rootElt?.dataset.notifications) { diff --git a/translate/src/modules/batchactions/components/BatchActions.tsx b/translate/src/modules/batchactions/components/BatchActions.tsx index 4022c7b88..86bf12e29 100644 --- a/translate/src/modules/batchactions/components/BatchActions.tsx +++ b/translate/src/modules/batchactions/components/BatchActions.tsx @@ -2,7 +2,7 @@ import { Localized } from '@fluent/react'; import React, { useCallback, useContext, useEffect, useRef } from 'react'; import { Location } from '~/context/Location'; -import { ShowBadgeTooltip } from '~/context/Notification'; +import { ShowBadgeTooltip } from '~/context/BadgeTooltip'; import { useAppDispatch, useAppSelector } from '~/hooks'; import { performAction, resetSelection, selectAll } from '../actions'; diff --git a/translate/src/modules/editor/components/BadgeTooltip.tsx b/translate/src/modules/editor/components/BadgeTooltip.tsx index d4e94801b..c68668c6e 100644 --- a/translate/src/modules/editor/components/BadgeTooltip.tsx +++ b/translate/src/modules/editor/components/BadgeTooltip.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useContext, useRef } from 'react'; import { Localized } from '@fluent/react'; import Pride from 'react-canvas-confetti/dist/presets/pride'; -import { BadgeTooltipMessage, ShowBadgeTooltip } from '~/context/Notification'; +import { BadgeTooltipMessage, ShowBadgeTooltip } from '~/context/BadgeTooltip'; import { useAppSelector } from '~/hooks'; import { useOnDiscard } from '~/utils'; diff --git a/translate/src/modules/editor/hooks/useSendTranslation.ts b/translate/src/modules/editor/hooks/useSendTranslation.ts index 3e5f4b971..aae03f6e5 100644 --- a/translate/src/modules/editor/hooks/useSendTranslation.ts +++ b/translate/src/modules/editor/hooks/useSendTranslation.ts @@ -11,6 +11,7 @@ import { EntityView } from '~/context/EntityView'; import { FailedChecksData } from '~/context/FailedChecksData'; import { Locale } from '~/context/Locale'; import { Location } from '~/context/Location'; +import { ShowNotification } from '~/context/Notification'; import { UnsavedActions } from '~/context/UnsavedChanges'; import { updateEntityTranslation } from '~/modules/entities/actions'; import { usePushNextTranslatable } from '~/modules/entities/hooks'; @@ -22,7 +23,7 @@ import { updateResource } from '~/modules/resource/actions'; import { updateStats } from '~/modules/stats/actions'; import { useAppDispatch, useAppSelector } from '~/hooks'; import { serializeEntry, getPlainMessage } from '~/utils/message'; -import { ShowBadgeTooltip, ShowNotification } from '~/context/Notification'; +import { ShowBadgeTooltip } from '~/context/BadgeTooltip'; /** * Return a function to send a translation to the server. diff --git a/translate/src/modules/editor/hooks/useUpdateTranslationStatus.ts b/translate/src/modules/editor/hooks/useUpdateTranslationStatus.ts index ac786e59a..2a00c46ff 100644 --- a/translate/src/modules/editor/hooks/useUpdateTranslationStatus.ts +++ b/translate/src/modules/editor/hooks/useUpdateTranslationStatus.ts @@ -7,7 +7,8 @@ import { EntityView } from '~/context/EntityView'; import { FailedChecksData } from '~/context/FailedChecksData'; import { HistoryData } from '~/context/HistoryData'; import { Location } from '~/context/Location'; -import { ShowBadgeTooltip, ShowNotification } from '~/context/Notification'; +import { ShowNotification } from '~/context/Notification'; +import { ShowBadgeTooltip } from '~/context/BadgeTooltip'; import { updateEntityTranslation } from '~/modules/entities/actions'; import { usePushNextTranslatable } from '~/modules/entities/hooks'; import {