From c0c2bb45fe85d34cf31c2dd1270a63a2ba72ab10 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 19 Oct 2023 10:15:54 +0800
Subject: [PATCH] Auto-close account sheet when location path changes

Test this on account sheet first, probably useful for other sheets too
---
 src/components/account-sheet.jsx | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/account-sheet.jsx b/src/components/account-sheet.jsx
index 6a0d74f9..435cfa26 100644
--- a/src/components/account-sheet.jsx
+++ b/src/components/account-sheet.jsx
@@ -1,4 +1,5 @@
-import { useEffect } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
+import { useLocation } from 'react-router-dom';
 
 import { api } from '../utils/api';
 import states from '../utils/states';
@@ -16,17 +17,28 @@ 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]);
+
   return (
     <div
       class="sheet"
-      onClick={(e) => {
-        const accountBlock = e.target.closest('.account-block');
-        if (accountBlock) {
-          onClose({
-            destination: 'account-statuses',
-          });
-        }
-      }}
+      // onClick={(e) => {
+      //   const accountBlock = e.target.closest('.account-block');
+      //   if (accountBlock) {
+      //     onClose({
+      //       destination: 'account-statuses',
+      //     });
+      //   }
+      // }}
     >
       {!!onClose && (
         <button type="button" class="sheet-close outer" onClick={onClose}>