Quote Replies: Enable quoting mentions (#901)

Co-authored-by: April Sylph <28949509+AprilSylph@users.noreply.github.com>

src/scripts/quote_replies.js

@@ -6,6 +6,7 @@ import { notify } from '../util/notifications.js';
 import { getPreferences } from '../util/preferences.js';
 import { buildSvg } from '../util/remixicon.js';
 import { apiFetch } from '../util/tumblr_helpers.js';
+import { userBlogs } from '../util/user.js';
 
 const storageKey = 'quote_replies.currentResponseId';
 const buttonClass = 'xkit-quote-replies';
@@ -23,26 +24,19 @@ const getNotificationProps = function () {
   let fiber = notificationElement[reactKey];
 
   while (fiber !== null) {
-    const { notification } = fiber.memoizedProps || {};
-    if (notification !== undefined) {
-      return notification;
+    const props = fiber.memoizedProps || {};
+    if (props?.notification !== undefined) {
+      return props;
     } else {
       fiber = fiber.return;
     }
   }
 };
 
 const processNotifications = notifications => notifications.forEach(async notification => {
-  const {
-    targetPostId: id,
-    targetPostSummary: summary,
-    targetTumblelogName: name,
-    targetTumblelogUuid: uuid,
-    timestamp,
-    type
-  } = await inject(getNotificationProps, [], notification);
+  const { notification: notificationProps, tumblelogName } = await inject(getNotificationProps, [], notification);
 
-  if (type !== 'reply') return;
+  if (!['reply', 'note_mention'].includes(notificationProps.type)) return;
 
   const activityElement = notification.querySelector(activitySelector);
   if (!activityElement) return;
@@ -53,7 +47,7 @@ const processNotifications = notifications => notifications.forEach(async notifi
     {
       click () {
         this.disabled = true;
-        quoteReply({ id, summary, name, uuid, timestamp })
+        quoteReply(tumblelogName, notificationProps)
           .catch(showError)
           .finally(() => { this.disabled = false; });
       }
@@ -62,9 +56,13 @@ const processNotifications = notifications => notifications.forEach(async notifi
   ));
 });
 
-const quoteReply = async ({ id, summary, name, uuid, timestamp }) => {
+const quoteReply = async (tumblelogName, notificationProps) => {
+  const uuid = userBlogs.find(({ name }) => name === tumblelogName).uuid;
+  const { type, targetPostId, targetPostSummary, targetTumblelogName, targetTumblelogUuid, timestamp } = notificationProps;
+
+  const isReply = type === 'reply';
   const { response } = await apiFetch(
-    `/v2/blog/${uuid}/post/${id}/notes/timeline`,
+    `/v2/blog/${targetTumblelogUuid}/post/${targetPostId}/notes/timeline`,
     { queryParams: { mode: 'replies', before_timestamp: `${timestamp + 1}000000` } }
   );
 
@@ -73,10 +71,12 @@ const quoteReply = async ({ id, summary, name, uuid, timestamp }) => {
   if (!reply) throw new Error('No replies found on target post.');
   if (Math.floor(reply.timestamp) !== timestamp) throw new Error('Reply not found.');
 
-  const text = `@${reply.blog.name} replied to your post \u201C${summary.replace(/\n/g, ' ')}\u201D:`;
+  const text = isReply
+    ? `@${reply.blog.name} replied to your post \u201C${targetPostSummary.replace(/\n/g, ' ')}\u201D:`
+    : `@${reply.blog.name} mentioned you on a post \u201C${targetPostSummary.replace(/\n/g, ' ')}\u201D:`;
   const formatting = [
     { start: 0, end: reply.blog.name.length + 1, type: 'mention', blog: { uuid: reply.blog.uuid } },
-    { start: text.indexOf('\u201C'), end: text.length - 1, type: 'link', url: `https://${name}.tumblr.com/post/${id}` }
+    { start: text.indexOf('\u201C'), end: text.length - 1, type: 'link', url: `https://${targetTumblelogName}.tumblr.com/post/${targetPostId}` }
   ];
 
   const content = [
@@ -92,7 +92,7 @@ const quoteReply = async ({ id, summary, name, uuid, timestamp }) => {
   const { response: { id: responseId, displayText } } = await apiFetch(`/v2/blog/${uuid}/posts`, { method: 'POST', body: { content, state: 'draft', tags } });
   await browser.storage.local.set({ [storageKey]: responseId });
 
-  const openedTab = window.open(`/blog/${name}/drafts`);
+  const openedTab = window.open(`/blog/${tumblelogName}/drafts`);
   if (openedTab === null) {
     browser.storage.local.remove(storageKey);
     notify(displayText);