From 965f948899236ac5822d9633081bfa013e614775 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 19 Oct 2023 16:06:55 +0800
Subject: [PATCH] Recode some nested modal closing logic

Seems more robust
---
 src/components/account-info.jsx     | 44 ++++++++++++++++-------------
 src/components/account-sheet.jsx    | 15 ++--------
 src/components/generic-accounts.jsx |  3 ++
 src/components/modals.jsx           |  7 +++--
 src/utils/useLocationChange.js      | 23 +++++++++++++++
 5 files changed, 57 insertions(+), 35 deletions(-)
 create mode 100644 src/utils/useLocationChange.js

diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 3e8bd86..36c33d1 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -550,11 +550,13 @@ function AccountInfo({
                     tabIndex={0}
                     to={accountLink}
                     onClick={() => {
-                      states.showAccount = false;
-                      states.showGenericAccounts = {
-                        heading: 'Followers',
-                        fetchAccounts: fetchFollowers,
-                      };
+                      // states.showAccount = false;
+                      setTimeout(() => {
+                        states.showGenericAccounts = {
+                          heading: 'Followers',
+                          fetchAccounts: fetchFollowers,
+                        };
+                      }, 0);
                     }}
                   >
                     {!!familiarFollowers.length && (
@@ -581,11 +583,13 @@ function AccountInfo({
                     tabIndex={0}
                     to={accountLink}
                     onClick={() => {
-                      states.showAccount = false;
-                      states.showGenericAccounts = {
-                        heading: 'Following',
-                        fetchAccounts: fetchFollowing,
-                      };
+                      // states.showAccount = false;
+                      setTimeout(() => {
+                        states.showGenericAccounts = {
+                          heading: 'Following',
+                          fetchAccounts: fetchFollowing,
+                        };
+                      }, 0);
                     }}
                   >
                     <span title={followingCount}>
@@ -597,13 +601,13 @@ function AccountInfo({
                   <LinkOrDiv
                     class="insignificant"
                     to={accountLink}
-                    onClick={
-                      standalone
-                        ? undefined
-                        : () => {
-                            hideAllModals();
-                          }
-                    }
+                    // onClick={
+                    //   standalone
+                    //     ? undefined
+                    //     : () => {
+                    //         hideAllModals();
+                    //       }
+                    // }
                   >
                     <span title={statusesCount}>
                       {shortenNumber(statusesCount)}
@@ -626,9 +630,9 @@ function AccountInfo({
                 <LinkOrDiv
                   to={accountLink}
                   class="account-metadata-box"
-                  onClick={() => {
-                    states.showAccount = false;
-                  }}
+                  // onClick={() => {
+                  //   states.showAccount = false;
+                  // }}
                 >
                   <div class="shazam-container">
                     <div class="shazam-container-inner">
diff --git a/src/components/account-sheet.jsx b/src/components/account-sheet.jsx
index 435cfa2..a6af1bf 100644
--- a/src/components/account-sheet.jsx
+++ b/src/components/account-sheet.jsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'preact/hooks';
-import { useLocation } from 'react-router-dom';
+import { useEffect } from 'preact/hooks';
 
 import { api } from '../utils/api';
 import states from '../utils/states';
+import useLocationChange from '../utils/useLocationChange';
 
 import AccountInfo from './account-info';
 import Icon from './icon';
@@ -17,16 +17,7 @@ function AccountSheet({ account, instance: propInstance, onClose }) {
     }
   }, [account]);
 
-  const location = useLocation();
-  const currentLocationRef = useRef(location.pathname);
-  useEffect(() => {
-    if (
-      currentLocationRef.current &&
-      location.pathname !== currentLocationRef.current
-    ) {
-      onClose?.();
-    }
-  }, [location.pathname]);
+  useLocationChange(onClose);
 
   return (
     <div
diff --git a/src/components/generic-accounts.jsx b/src/components/generic-accounts.jsx
index fbcb12a..11070c0 100644
--- a/src/components/generic-accounts.jsx
+++ b/src/components/generic-accounts.jsx
@@ -5,6 +5,7 @@ import { InView } from 'react-intersection-observer';
 import { useSnapshot } from 'valtio';
 
 import states from '../utils/states';
+import useLocationChange from '../utils/useLocationChange';
 
 import AccountBlock from './account-block';
 import Icon from './icon';
@@ -16,6 +17,8 @@ export default function GenericAccounts({ onClose = () => {} }) {
   const [accounts, setAccounts] = useState([]);
   const [showMore, setShowMore] = useState(false);
 
+  useLocationChange(onClose);
+
   if (!snapStates.showGenericAccounts) {
     return null;
   }
diff --git a/src/components/modals.jsx b/src/components/modals.jsx
index 4403cbe..7b5073b 100644
--- a/src/components/modals.jsx
+++ b/src/components/modals.jsx
@@ -117,9 +117,10 @@ export default function Modals() {
             instance={snapStates.showAccount?.instance}
             onClose={({ destination } = {}) => {
               states.showAccount = false;
-              if (destination) {
-                states.showAccounts = false;
-              }
+              // states.showGenericAccounts = false;
+              // if (destination) {
+              //   states.showAccounts = false;
+              // }
             }}
           />
         </Modal>
diff --git a/src/utils/useLocationChange.js b/src/utils/useLocationChange.js
new file mode 100644
index 0000000..d46ac46
--- /dev/null
+++ b/src/utils/useLocationChange.js
@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { useLocation } from 'react-router-dom';
+
+// Hook that runs a callback when the location changes
+// Won't run on the first render
+
+export default function useLocationChange(fn) {
+  if (!fn) return;
+  const location = useLocation();
+  const currentLocationRef = useRef(location.pathname);
+  useEffect(() => {
+    // console.log('location', {
+    //   current: currentLocationRef.current,
+    //   next: location.pathname,
+    // });
+    if (
+      currentLocationRef.current &&
+      location.pathname !== currentLocationRef.current
+    ) {
+      fn?.();
+    }
+  }, [location.pathname, fn]);
+}