Merge branch 'main' into add-nip-05-modal

src/api/MastodonClient.ts

@@ -90,6 +90,12 @@ export class MastodonClient {
       throw new HTTPError(response, request);
     }
 
+    // Fix for non-compliant browsers.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Response/body
+    if (response.status === 204 || request.method === 'HEAD') {
+      return new MastodonResponse(null, response);
+    }
+
     return new MastodonResponse(response.body, response);
   }
 

src/api/hooks/captcha/useCaptcha.ts

@@ -1,8 +1,8 @@
-import { AxiosError } from 'axios';
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals.ts';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
 import { useApi } from 'soapbox/hooks/useApi.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useInstance } from 'soapbox/hooks/useInstance.ts';
@@ -43,7 +43,7 @@ const useCaptcha = () => {
       setYPosition(topI);
       setXPosition(leftI);
     } catch (error) {
-      toast.error('Error loading captcha:');
+      toast.error('Error loading captcha');
     }
   };
 
@@ -72,11 +72,10 @@ const useCaptcha = () => {
           dispatch(closeModal('CAPTCHA'));
           toast.success(messages.sucessMessage);
         });
-      } catch (e) {
+      } catch (error) {
         setTryAgain(true);
-        const error = e as AxiosError;
-        const status = error.request?.status;
 
+        const status = error instanceof HTTPError ? error.response.status : undefined;
         let message;
 
         switch (status) {
@@ -88,8 +87,10 @@ const useCaptcha = () => {
             break;
           default:
             message = intl.formatMessage(messages.errorMessage);
+            console.error(error);
             break;
         }
+
         toast.error(message);
       }
       setIsSubmitting(false);

src/components/ui/emoji-selector.tsx

@@ -3,6 +3,7 @@ import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
+import { chooseEmoji } from 'soapbox/actions/emojis.ts';
 import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import EmojiComponent from 'soapbox/components/ui/emoji.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
@@ -96,6 +97,25 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
     }
   };
 
+  const handleReact = (emoji: string) => {
+    // Reverse lookup...
+    // This is hell.
+    const data = Object.values(emojiData.emojis).find((e) => e.skins.some((s) => s.native === emoji));
+    const skin = data?.skins.find((s) => s.native === emoji);
+
+    if (data && skin) {
+      dispatch(chooseEmoji({
+        id: data.id,
+        colons: `:${data.id}:`,
+        custom: false,
+        native: skin.native,
+        unified: skin.unified,
+      }));
+    }
+
+    onReact(emoji);
+  };
+
   const handlePickEmoji = (emoji: Emoji) => {
     onReact(emoji.custom ? emoji.id : emoji.native, emoji.custom ? emoji.imageUrl : undefined);
   };
@@ -155,7 +175,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
             <EmojiButton
               key={i}
               emoji={emoji}
-              onClick={onReact}
+              onClick={handleReact}
               tabIndex={visible ? 0 : -1}
             />
           ))}