Add error for failured to send reaction.

public/locales/en-GB/app.json

@@ -4,11 +4,14 @@
   },
   "action": {
     "close": "Close",
+    "close_search": "Close search",
     "copy_link": "Copy link",
     "edit": "Edit",
     "go": "Go",
     "invite": "Invite",
     "no": "No",
+    "open_search": "Open search",
+    "pick_reaction": "Pick reaction",
     "raise_hand_or_send_reaction": "Raise hand or send reaction",
     "register": "Register",
     "remove": "Remove",
@@ -58,6 +61,7 @@
     "preferences": "Preferences",
     "profile": "Profile",
     "raise_hand": "Raise hand",
+    "search": "Search",
     "settings": "Settings",
     "unencrypted": "Not encrypted",
     "username": "Username",
@@ -128,6 +132,7 @@
   "rageshake_sending": "Sending…",
   "rageshake_sending_logs": "Sending debug logs…",
   "rageshake_sent": "Thanks!",
+  "reaction_search": "Search reactions…",
   "recaptcha_caption": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
   "recaptcha_dismissed": "Recaptcha dismissed",
   "recaptcha_not_loaded": "Recaptcha not loaded",

src/button/ReactionToggleButton.module.css

@@ -64,3 +64,19 @@
 .searchForm > label {
   flex: auto;
 }
+
+.alert {
+  margin-bottom: var(--cpd-space-3x);
+  animation: grow-in 200ms;
+  height: 2.5em;
+}
+
+@keyframes grow-in {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: 2.5em;
+  }
+}

src/button/ReactionToggleButton.tsx

@@ -11,6 +11,7 @@ import {
   Separator,
   Search,
   Form,
+  Alert,
 } from "@vector-im/compound-web";
 import {
   SearchIcon,
@@ -25,6 +26,7 @@ import {
   KeyboardEventHandler,
   ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from "react";
@@ -72,9 +74,11 @@ export function ReactionPopupMenu({
   toggleRaisedHand,
   isHandRaised,
   canReact,
+  errorText,
 }: {
   sendReaction: (reaction: ReactionOption) => void;
   toggleRaisedHand: () => void;
+  errorText?: string;
   isHandRaised: boolean;
   canReact: boolean;
 }): ReactNode {
@@ -119,6 +123,16 @@ export function ReactionPopupMenu({
   );
   const label = isHandRaised ? t("common.raise_hand") : t("common.lower_hand");
   return (
+    <>
+      {errorText && (
+        <Alert
+          className={styles.alert}
+          type="critical"
+          title="Something went wrong"
+        >
+          {errorText}
+        </Alert>
+      )}
       <div className={styles.reactionPopupMenu}>
         <section className={styles.handRaiseSection}>
           <Tooltip label={label}>
@@ -141,7 +155,7 @@ export function ReactionPopupMenu({
                   required
                   value={searchText}
                   name="reactionSearch"
-                placeholder="Search reactions…"
+                  placeholder={t("reaction_search")}
                   onChange={onSearch}
                   onKeyDown={onSearchKeyDown}
                   // This is a reasonable use of autofocus, we are focusing when
@@ -151,7 +165,7 @@ export function ReactionPopupMenu({
                 />
                 <CpdButton
                   Icon={CloseIcon}
-                aria-label="close search"
+                  aria-label={t("action.close_search")}
                   size="sm"
                   kind="destructive"
                   onClick={() => setIsSearching(false)}
@@ -180,10 +194,10 @@ export function ReactionPopupMenu({
         {!isSearching ? (
           <section>
             <li key="search" className={styles.reactionPopupMenuItem}>
-            <Tooltip label="Search">
+              <Tooltip label={t("common.search")}>
                 <CpdButton
                   iconOnly
-                aria-label="Open reactions search"
+                  aria-label={t("action.open_search")}
                   Icon={SearchIcon}
                   kind="tertiary"
                   onClick={() => setIsSearching(true)}
@@ -193,6 +207,7 @@ export function ReactionPopupMenu({
           </section>
         ) : null}
       </div>
+    </>
   );
 }
 
@@ -205,24 +220,30 @@ export function ReactionToggleButton({
   client,
   rtcSession,
 }: ReactionToggleButtonProps): ReactNode {
+  const { t } = useTranslation();
   const { raisedHands, lowerHand, reactions } = useReactions();
   const [busy, setBusy] = useState(false);
   const userId = client.getUserId()!;
   const isHandRaised = !!raisedHands[userId];
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const [showReactionsMenu, setShowReactionsMenu] = useState(false);
+  const [errorText, setErrorText] = useState<string>();
+
+  useEffect(() => {
+    // Clear whenever the reactions menu state changes.
+    setErrorText(undefined);
+  }, [showReactionsMenu]);
 
   const canReact = !reactions[userId];
 
   const sendRelation = useCallback(
     async (reaction: ReactionOption) => {
+      try {
         const myMembership = memberships.find((m) => m.sender === userId);
         if (!myMembership?.eventId) {
-        logger.error("Cannot find own membership event");
+          throw new Error("Cannot find own membership event");
-        return;
         }
         const parentEventId = myMembership.eventId;
-      try {
         setBusy(true);
         await client.sendEvent(
           rtcSession.room.roomId,
@@ -236,12 +257,14 @@ export function ReactionToggleButton({
             name: reaction.name,
           },
         );
+        setErrorText(undefined);
+        setShowReactionsMenu(false);
         // Do NOT close the menu after this.
       } catch (ex) {
+        setErrorText(ex instanceof Error ? ex.message : "Unknown error");
         logger.error("Failed to send reaction", ex);
       } finally {
         setBusy(false);
-        setShowReactionsMenu(false);
       }
     },
     [memberships, client, userId, rtcSession],
@@ -258,13 +281,12 @@ export function ReactionToggleButton({
           setBusy(false);
         }
       } else {
+        try {
           const myMembership = memberships.find((m) => m.sender === userId);
           if (!myMembership?.eventId) {
-          logger.error("Cannot find own membership event");
+            throw new Error("Cannot find own membership event");
-          return;
           }
           const parentEventId = myMembership.eventId;
-        try {
           setBusy(true);
           const reaction = await client.sendEvent(
             rtcSession.room.roomId,
@@ -278,11 +300,13 @@ export function ReactionToggleButton({
             },
           );
           logger.debug("Sent raise hand event", reaction.event_id);
+          setErrorText(undefined);
+          setShowReactionsMenu(false);
         } catch (ex) {
-          logger.error("Failed to send reaction event", ex);
+          setErrorText(ex instanceof Error ? ex.message : "Unknown error");
+          logger.error("Failed to raise hand", ex);
         } finally {
           setBusy(false);
-          setShowReactionsMenu(false);
         }
       }
     };
@@ -307,12 +331,13 @@ export function ReactionToggleButton({
       />
       <Modal
         open={showReactionsMenu}
-        title="Pick reaction"
+        title={t("action.pick_reaction")}
         hideHeader
         classNameModal={styles.reactionPopupMenuModal}
         onDismiss={() => setShowReactionsMenu(false)}
       >
         <ReactionPopupMenu
+          errorText={errorText}
           isHandRaised={isHandRaised}
           canReact={canReact}
           sendReaction={(reaction) => void sendRelation(reaction)}