cleanup

Author: NicoHinderling

src/components/copyMarkdownButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {Fragment, useEffect, useRef, useState} from 'react';
+import {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 import {Clipboard} from 'react-feather';
 import Link from 'next/link';
@@ -24,7 +24,15 @@ export function CopyMarkdownButton({pathname}: CopyMarkdownButtonProps) {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const {emit} = usePlausibleEvent();
 
-
+  const fetchMarkdownContent = useCallback(async (): Promise<string> => {
+    // This doesn't work on local development since we need the generated markdown
+    // files, and we need to be aware of the origin since we have two different origins.
+    const response = await fetch(`${window.location.origin}/${pathname}.md`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch markdown content: ${response.status}`);
+    }
+    return await response.text();
+  }, [pathname]);
 
   const copyMarkdownToClipboard = async () => {
     setIsLoading(true);
@@ -36,18 +44,10 @@ export function CopyMarkdownButton({pathname}: CopyMarkdownButtonProps) {
 
     try {
       let content: string;
-
-      // Use pre-fetched content if available (for mobile)
       if (prefetchedContent) {
         content = prefetchedContent;
       } else {
-        // This doesn't work on local development since we need the generated markdown
-        // files, and we need to be aware of the origin since we have two different origins.
-        const response = await fetch(`${window.location.origin}/${pathname}.md`);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch markdown content: ${response.status}`);
-        }
-        content = await response.text();
+        content = await fetchMarkdownContent();
       }
 
       await navigator.clipboard.writeText(content);
@@ -94,21 +94,20 @@ export function CopyMarkdownButton({pathname}: CopyMarkdownButtonProps) {
   }, []);
 
   // Pre-fetch markdown content to avoid losing user gesture context
+  // On iOS we can't async fetch on tap because the user gesture is lost by the time we try to update the clipboard.
   useEffect(() => {
     if (!prefetchedContent) {
       const prefetchContent = async () => {
         try {
-          const response = await fetch(`${window.location.origin}/${pathname}.md`);
-          if (response.ok) {
-            setPrefetchedContent(await response.text());
-          }
+          const content = await fetchMarkdownContent();
+          setPrefetchedContent(content);
         } catch (err) {
           // Silently fail - we'll fall back to regular fetch on click
         }
       };
       prefetchContent();
     }
-  }, [pathname, prefetchedContent]);
+  }, [pathname, prefetchedContent, fetchMarkdownContent]);
 
   const getDropdownPosition = () => {
     if (!buttonRef.current) return {top: 0, left: 0};