Fix 404 when reacting with Keycap Number Sign #252

Merged

floatingghost merged 1 commit from fef/pleroma-fe:develop into develop

2022-12-14 12:07:28 +00:00

fef commented

2022-12-12 17:44:24 +00:00

Contributor

What is basically happening is that the Unicode sequence for #️⃣ consists of three individual code points, the first one of them being the ASCII # character. The browser's URL parser interprets that as a URI fragment separator, and truncates it from the URL before sending the request. See also the original comment on GitHub.

URL encoding the emoji fixed this issue on Mastodon and, since Akkoma uses a similar endpoint design, I am certain it will fix it for the Pleroma frontend as well.

Hi there! While I was working on an emoji reaction feature for glitch-soc, someone on GitHub pointed out that reacting with #️⃣ gives a 404. After some investigation, I found the underlying issue and noticed that the same bug is also present on Akkoma. This small patch *should* fix it (I haven't tested it to be perfectly honest, as I didn't want to set up a complete development environment just for two changed lines). What is basically happening is that the Unicode sequence for #️⃣ consists of three individual code points, the first one of them being the ASCII `#` character. The browser's URL parser interprets that as a URI fragment separator, and truncates it from the URL before sending the request. See also the [original comment on GitHub](https://github.com/glitch-soc/mastodon/pull/1980#issuecomment-1345538932). URL encoding the emoji fixed this issue on Mastodon and, since Akkoma uses a similar endpoint design, I am certain it will fix it for the Pleroma frontend as well.

Ghost requested changes 2022-12-12 17:56:21 +00:00

Ghost left a comment

First-time contributor

thanks for the fix!
i think it would look cleaner if instead of sanitizing the name inside of the constants, you did it in the functions that call them:

@@ -1335,7 +1335,7 @@ const fetchEmojiReactions = ({ id, credentials }) => {
 
 const reactWithEmoji = ({ id, emoji, credentials }) => {
   return promisedRequest({
-    url: PLEROMA_EMOJI_REACT_URL(id, emoji),
+    url: PLEROMA_EMOJI_REACT_URL(id, encodeURIComponent(emoji)),
     method: 'PUT',
     credentials
   }).then(parseStatus)

would fit more with how the rest of the file does it

thanks for the fix! i think it would look cleaner if instead of sanitizing the name inside of the constants, you did it in the functions that call them: ```diff @@ -1335,7 +1335,7 @@ const fetchEmojiReactions = ({ id, credentials }) => { const reactWithEmoji = ({ id, emoji, credentials }) => { return promisedRequest({ - url: PLEROMA_EMOJI_REACT_URL(id, emoji), + url: PLEROMA_EMOJI_REACT_URL(id, encodeURIComponent(emoji)), method: 'PUT', credentials }).then(parseStatus) ``` would fit more with how the rest of the file does it

fef commented

2022-12-12 18:01:50 +00:00

Author

Contributor

Sorry, I'm not really familiar with the Pleroma frontend. But I agree, I'll change it!

fef force-pushed develop from 4648535509 to 413acbc7dd

2022-12-12 18:02:07 +00:00

Compare

Ghost approved these changes 2022-12-12 18:06:44 +00:00

Ghost left a comment

First-time contributor

yeah tested locally and it works thanks :3