Decoupled badge and notification context

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<BadgeTooltipMessage | null>(
+  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 (
     <BadgeTooltipMessage.Provider value={badgeMessage}>
-      <ShowBadgeTooltip.Provider value={setBadgeMessage}>
+      <ShowBadgeTooltip.Provider value={(tooltip) => setBadgeMessage(tooltip)}>
         {children}
       </ShowBadgeTooltip.Provider>
     </BadgeTooltipMessage.Provider>

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<BadgeTooltipMessage | null>(
-  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 (
     <NotificationMessage.Provider value={message}>
       <ShowNotification.Provider value={setMessage}>
-        <BadgeTooltipMessage.Provider value={badgeMessage}>
-          <ShowBadgeTooltip.Provider value={setBadgeMessage}>
-            {children}
-          </ShowBadgeTooltip.Provider>
-        </BadgeTooltipMessage.Provider>
+        {children}
       </ShowNotification.Provider>
     </NotificationMessage.Provider>
   );

translate/src/hooks/useNotification.ts → translate/src/hooks/useNotifications.ts

@@ -1,15 +1,16 @@
 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<NotificationMessage | null>(null);
   const [badgeMessage, setBadgeMessage] = useState<BadgeTooltipMessage | null>(
     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) {

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';

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';
 

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.

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 {