From 18b33389b516c61b95633c1b720a9ddce5a200a6 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 18 Jan 2025 22:41:49 -0600
Subject: [PATCH] Dismiss share modals when clicking links

---
 src/share/ShareModal.tsx       |  3 +++
 src/utility/useOnPathChange.ts | 14 ++++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 src/utility/useOnPathChange.ts

diff --git a/src/share/ShareModal.tsx b/src/share/ShareModal.tsx
index 67ee3953..97d42c92 100644
--- a/src/share/ShareModal.tsx
+++ b/src/share/ShareModal.tsx
@@ -11,6 +11,7 @@ import { PiXLogo } from 'react-icons/pi';
 import { SHOW_SOCIAL } from '@/site/config';
 import { generateXPostText } from '@/utility/social';
 import { useAppState } from '@/state/AppState';
+import useOnPathChange from '@/utility/useOnPathChange';
 
 export default function ShareModal({
   title,
@@ -44,6 +45,8 @@ export default function ShareModal({
       {icon}
     </div>;
 
+  useOnPathChange(() => setShareModalProps?.(undefined));
+
   return (
     <Modal onClose={() => setShareModalProps?.(undefined)}>
       <div className="space-y-3 md:space-y-4 w-full">
diff --git a/src/utility/useOnPathChange.ts b/src/utility/useOnPathChange.ts
new file mode 100644
index 00000000..34aa6875
--- /dev/null
+++ b/src/utility/useOnPathChange.ts
@@ -0,0 +1,14 @@
+import { usePathname } from 'next/navigation';
+import { useEffect, useRef } from 'react';
+
+export default function useOnPathChange(onPathChange: () => void) {
+  const path = usePathname();
+
+  const initialPath = useRef(path);
+
+  useEffect(() => {
+    if (initialPath.current !== path) {
+      onPathChange();
+    }
+  }, [path, onPathChange]);
+}