Recode some nested modal closing logic

Seems more robust
This commit is contained in:
Lim Chee Aun 2023-10-19 16:06:55 +08:00
parent c0c2bb45fe
commit 965f948899
5 changed files with 57 additions and 35 deletions

View file

@ -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">

View file

@ -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

View file

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

View file

@ -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>

View file

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