Extract link handlers to hook

mastodon · Jun 18, 2024 · 6e80bca · 6e80bca
1 parent 6a1d94c
commit 6e80bca
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 149 deletions.
diff --git a/app/javascript/hooks/useLinks.ts b/app/javascript/hooks/useLinks.ts
@@ -0,0 +1,81 @@
+import { useEffect, useRef, useCallback } from 'react';
+
+import { useHistory } from 'react-router-dom';
+
+import { openURL } from 'mastodon/actions/search';
+import { useAppDispatch } from 'mastodon/store';
+
+export const useLinks = (canary: unknown) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const history = useHistory();
+  const dispatch = useAppDispatch();
+
+  const handleHashtagClick = useCallback(
+    (e: MouseEvent) => {
+      const { currentTarget } = e;
+      if (!(currentTarget instanceof HTMLElement)) return;
+
+      if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+        const { textContent } = currentTarget;
+        if (!textContent) return;
+
+        e.preventDefault();
+        history.push(`/tags/${textContent.replace(/^#/, '')}`);
+      }
+    },
+    [history],
+  );
+
+  const handleMentionClick = useCallback(
+    (e: MouseEvent) => {
+      const { currentTarget } = e;
+
+      if (!(currentTarget instanceof HTMLAnchorElement)) return;
+
+      if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+
+        dispatch(
+          openURL(currentTarget.href, history, () => {
+            window.location.href = currentTarget.href;
+          }),
+        );
+      }
+    },
+    [dispatch, history],
+  );
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const links = ref.current.querySelectorAll<HTMLAnchorElement>('a');
+
+    for (const link of links) {
+      if (
+        link.textContent?.[0] === '#' ||
+        link.previousSibling?.textContent?.endsWith('#')
+      ) {
+        link.addEventListener('click', handleHashtagClick, false);
+      } else if (link.classList.contains('mention')) {
+        link.addEventListener('click', handleMentionClick, false);
+      }
+    }
+
+    return () => {
+      for (const link of links) {
+        if (
+          link.textContent?.[0] === '#' ||
+          link.previousSibling?.textContent?.endsWith('#')
+        ) {
+          link.removeEventListener('click', handleHashtagClick);
+        } else if (link.classList.contains('mention')) {
+          link.removeEventListener('click', handleMentionClick);
+        }
+      }
+    };
+  }, [canary, handleHashtagClick, handleMentionClick]);
+
+  return ref;
+};
diff --git a/app/javascript/mastodon/components/account_bio.tsx b/app/javascript/mastodon/components/account_bio.tsx
@@ -1,81 +1,10 @@
-import { useEffect, useRef, useCallback } from 'react';
-
-import { useHistory } from 'react-router-dom';
-
-import { openURL } from 'mastodon/actions/search';
-import { useAppDispatch } from 'mastodon/store';
+import { useLinks } from 'mastodon/../hooks/useLinks';
 
 export const AccountBio: React.FC<{
   note: string;
   className: string;
 }> = ({ note, className }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const history = useHistory();
-  const dispatch = useAppDispatch();
-
-  const handleHashtagClick = useCallback(
-    (e: MouseEvent) => {
-      const { currentTarget } = e;
-      if (!(currentTarget instanceof HTMLElement)) return;
-      const { textContent } = currentTarget;
-
-      if (textContent && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-        e.preventDefault();
-        history.push(`/tags/${textContent.replace(/^#/, '')}`);
-      }
-    },
-    [history],
-  );
-
-  const handleMentionClick = useCallback(
-    (e: MouseEvent) => {
-      const { currentTarget } = e;
-      if (!(currentTarget instanceof HTMLAnchorElement)) return;
-
-      if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-        e.preventDefault();
-
-        dispatch(
-          openURL(currentTarget.href, history, () => {
-            window.location.href = currentTarget.href;
-          }),
-        );
-      }
-    },
-    [dispatch, history],
-  );
-
-  useEffect(() => {
-    if (ref.current === null) {
-      return;
-    }
-
-    const links = ref.current.querySelectorAll<HTMLAnchorElement>('a');
-
-    for (const link of links) {
-      if (
-        link.textContent?.[0] === '#' ||
-        link.previousSibling?.textContent?.endsWith('#')
-      ) {
-        link.addEventListener('click', handleHashtagClick, false);
-      } else if (link.classList.contains('mention')) {
-        link.addEventListener('click', handleMentionClick, false);
-      }
-    }
-
-    return () => {
-      for (const link of links) {
-        if (
-          link.textContent?.[0] === '#' ||
-          link.previousSibling?.textContent?.endsWith('#')
-        ) {
-          link.removeEventListener('click', handleHashtagClick);
-        } else if (link.classList.contains('mention')) {
-          link.removeEventListener('click', handleMentionClick);
-        }
-      }
-    };
-  }, [note, handleHashtagClick, handleMentionClick]);
+  const ref = useLinks(note);
 
   if (note.length === 0 || note === '<p></p>') {
     return null;

diff --git a/app/javascript/mastodon/components/account_fields.tsx b/app/javascript/mastodon/components/account_fields.tsx
@@ -1,87 +1,14 @@
-import { useEffect, useRef, useCallback } from 'react';
-
 import classNames from 'classnames';
-import { useHistory } from 'react-router-dom';
 
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
-import { openURL } from 'mastodon/actions/search';
+import { useLinks } from 'mastodon/../hooks/useLinks';
 import { Icon } from 'mastodon/components/icon';
 import type { Account } from 'mastodon/models/account';
-import { useAppDispatch } from 'mastodon/store';
 
 export const AccountFields: React.FC<{
   fields: Account['fields'];
 }> = ({ fields }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const history = useHistory();
-  const dispatch = useAppDispatch();
-
-  const handleHashtagClick = useCallback(
-    (e: MouseEvent) => {
-      const { currentTarget } = e;
-      if (!(currentTarget instanceof HTMLElement)) return;
-
-      if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-        const { textContent } = currentTarget;
-        if (!textContent) return;
-
-        e.preventDefault();
-        history.push(`/tags/${textContent.replace(/^#/, '')}`);
-      }
-    },
-    [history],
-  );
-
-  const handleMentionClick = useCallback(
-    (e: MouseEvent) => {
-      const { currentTarget } = e;
-
-      if (!(currentTarget instanceof HTMLAnchorElement)) return;
-
-      if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-        e.preventDefault();
-
-        dispatch(
-          openURL(currentTarget.href, history, () => {
-            window.location.href = currentTarget.href;
-          }),
-        );
-      }
-    },
-    [dispatch, history],
-  );
-
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    const links = ref.current.querySelectorAll<HTMLAnchorElement>('a');
-
-    for (const link of links) {
-      if (
-        link.textContent?.[0] === '#' ||
-        link.previousSibling?.textContent?.endsWith('#')
-      ) {
-        link.addEventListener('click', handleHashtagClick, false);
-      } else if (link.classList.contains('mention')) {
-        link.addEventListener('click', handleMentionClick, false);
-      }
-    }
-
-    return () => {
-      for (const link of links) {
-        if (
-          link.textContent?.[0] === '#' ||
-          link.previousSibling?.textContent?.endsWith('#')
-        ) {
-          link.removeEventListener('click', handleHashtagClick);
-        } else if (link.classList.contains('mention')) {
-          link.removeEventListener('click', handleMentionClick);
-        }
-      }
-    };
-  }, [fields, handleHashtagClick, handleMentionClick]);
+  const ref = useLinks(fields);
 
   if (fields.size === 0) {
     return null;

diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
@@ -60,7 +60,7 @@ $emojis-requiring-inversion: 'chains';
   --dropdown-border-color: #d9e1e8;
   --dropdown-background-color: #fff;
   --modal-border-color: #d9e1e8;
-  --modal-background-color: #fff;
+  --modal-background-color: var(--background-color-tint);
   --background-border-color: #d9e1e8;
   --background-color: #fff;
   --background-color-tint: rgba(255, 255, 255, 90%);