Recode some nested modal closing logic

Seems more robust

src/components/account-info.jsx

@@ -550,11 +550,13 @@ function AccountInfo({
                     tabIndex={0}
                     to={accountLink}
                     onClick={() => {
-                      states.showAccount = false;
+                      // states.showAccount = false;
-                      states.showGenericAccounts = {
+                      setTimeout(() => {
-                        heading: 'Followers',
+                        states.showGenericAccounts = {
-                        fetchAccounts: fetchFollowers,
+                          heading: 'Followers',
-                      };
+                          fetchAccounts: fetchFollowers,
+                        };
+                      }, 0);
                     }}
                   >
                     {!!familiarFollowers.length && (
@@ -581,11 +583,13 @@ function AccountInfo({
                     tabIndex={0}
                     to={accountLink}
                     onClick={() => {
-                      states.showAccount = false;
+                      // states.showAccount = false;
-                      states.showGenericAccounts = {
+                      setTimeout(() => {
-                        heading: 'Following',
+                        states.showGenericAccounts = {
-                        fetchAccounts: fetchFollowing,
+                          heading: 'Following',
-                      };
+                          fetchAccounts: fetchFollowing,
+                        };
+                      }, 0);
                     }}
                   >
                     <span title={followingCount}>
@@ -597,13 +601,13 @@ function AccountInfo({
                   <LinkOrDiv
                     class="insignificant"
                     to={accountLink}
-                    onClick={
+                    // onClick={
-                      standalone
+                    //   standalone
-                        ? undefined
+                    //     ? undefined
-                        : () => {
+                    //     : () => {
-                            hideAllModals();
+                    //         hideAllModals();
-                          }
+                    //       }
-                    }
+                    // }
                   >
                     <span title={statusesCount}>
                       {shortenNumber(statusesCount)}
@@ -626,9 +630,9 @@ function AccountInfo({
                 <LinkOrDiv
                   to={accountLink}
                   class="account-metadata-box"
-                  onClick={() => {
+                  // onClick={() => {
-                    states.showAccount = false;
+                  //   states.showAccount = false;
-                  }}
+                  // }}
                 >
                   <div class="shazam-container">
                     <div class="shazam-container-inner">

src/components/account-sheet.jsx

@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'preact/hooks';
+import { useEffect } from 'preact/hooks';
-import { useLocation } from 'react-router-dom';
 
 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();
+  useLocationChange(onClose);
-  const currentLocationRef = useRef(location.pathname);
-  useEffect(() => {
-    if (
-      currentLocationRef.current &&
-      location.pathname !== currentLocationRef.current
-    ) {
-      onClose?.();
-    }
-  }, [location.pathname]);
 
   return (
     <div

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;
   }

src/components/modals.jsx

@@ -117,9 +117,10 @@ export default function Modals() {
             instance={snapStates.showAccount?.instance}
             onClose={({ destination } = {}) => {
               states.showAccount = false;
-              if (destination) {
+              // states.showGenericAccounts = false;
-                states.showAccounts = false;
+              // if (destination) {
-              }
+              //   states.showAccounts = false;
+              // }
             }}
           />
         </Modal>

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]);
+}