this repo has no description
Recode some nested modal closing logic
Seems more robust
+57
-35
+24
-20
src/components/account-info.jsx
+24
-20
src/components/account-info.jsx
···
550
550
tabIndex={0}
551
551
to={accountLink}
552
552
onClick={() => {
553
-
states.showAccount = false;
554
-
states.showGenericAccounts = {
555
-
heading: 'Followers',
556
-
fetchAccounts: fetchFollowers,
557
-
};
553
+
// states.showAccount = false;
554
+
setTimeout(() => {
555
+
states.showGenericAccounts = {
556
+
heading: 'Followers',
557
+
fetchAccounts: fetchFollowers,
558
+
};
559
+
}, 0);
558
560
}}
559
561
>
560
562
{!!familiarFollowers.length && (
···
581
583
tabIndex={0}
582
584
to={accountLink}
583
585
onClick={() => {
584
-
states.showAccount = false;
585
-
states.showGenericAccounts = {
586
-
heading: 'Following',
587
-
fetchAccounts: fetchFollowing,
588
-
};
586
+
// states.showAccount = false;
587
+
setTimeout(() => {
588
+
states.showGenericAccounts = {
589
+
heading: 'Following',
590
+
fetchAccounts: fetchFollowing,
591
+
};
592
+
}, 0);
589
593
}}
590
594
>
591
595
<span title={followingCount}>
···
597
601
<LinkOrDiv
598
602
class="insignificant"
599
603
to={accountLink}
600
-
onClick={
601
-
standalone
602
-
? undefined
603
-
: () => {
604
-
hideAllModals();
605
-
}
606
-
}
604
+
// onClick={
605
+
// standalone
606
+
// ? undefined
607
+
// : () => {
608
+
// hideAllModals();
609
+
// }
610
+
// }
607
611
>
608
612
<span title={statusesCount}>
609
613
{shortenNumber(statusesCount)}
···
626
630
<LinkOrDiv
627
631
to={accountLink}
628
632
class="account-metadata-box"
629
-
onClick={() => {
630
-
states.showAccount = false;
631
-
}}
633
+
// onClick={() => {
634
+
// states.showAccount = false;
635
+
// }}
632
636
>
633
637
<div class="shazam-container">
634
638
<div class="shazam-container-inner">
+3
-12
src/components/account-sheet.jsx
+3
-12
src/components/account-sheet.jsx
···
1
-
import { useEffect, useRef } from 'preact/hooks';
2
-
import { useLocation } from 'react-router-dom';
1
+
import { useEffect } from 'preact/hooks';
3
2
4
3
import { api } from '../utils/api';
5
4
import states from '../utils/states';
5
+
import useLocationChange from '../utils/useLocationChange';
6
6
7
7
import AccountInfo from './account-info';
8
8
import Icon from './icon';
···
17
17
}
18
18
}, [account]);
19
19
20
-
const location = useLocation();
21
-
const currentLocationRef = useRef(location.pathname);
22
-
useEffect(() => {
23
-
if (
24
-
currentLocationRef.current &&
25
-
location.pathname !== currentLocationRef.current
26
-
) {
27
-
onClose?.();
28
-
}
29
-
}, [location.pathname]);
20
+
useLocationChange(onClose);
30
21
31
22
return (
32
23
<div
+3
src/components/generic-accounts.jsx
+3
src/components/generic-accounts.jsx
···
5
5
import { useSnapshot } from 'valtio';
6
6
7
7
import states from '../utils/states';
8
+
import useLocationChange from '../utils/useLocationChange';
8
9
9
10
import AccountBlock from './account-block';
10
11
import Icon from './icon';
···
15
16
const [uiState, setUIState] = useState('default');
16
17
const [accounts, setAccounts] = useState([]);
17
18
const [showMore, setShowMore] = useState(false);
19
+
20
+
useLocationChange(onClose);
18
21
19
22
if (!snapStates.showGenericAccounts) {
20
23
return null;
+4
-3
src/components/modals.jsx
+4
-3
src/components/modals.jsx
···
117
117
instance={snapStates.showAccount?.instance}
118
118
onClose={({ destination } = {}) => {
119
119
states.showAccount = false;
120
-
if (destination) {
121
-
states.showAccounts = false;
122
-
}
120
+
// states.showGenericAccounts = false;
121
+
// if (destination) {
122
+
// states.showAccounts = false;
123
+
// }
123
124
}}
124
125
/>
125
126
</Modal>
+23
src/utils/useLocationChange.js
+23
src/utils/useLocationChange.js
···
1
+
import { useEffect, useRef } from 'preact/hooks';
2
+
import { useLocation } from 'react-router-dom';
3
+
4
+
// Hook that runs a callback when the location changes
5
+
// Won't run on the first render
6
+
7
+
export default function useLocationChange(fn) {
8
+
if (!fn) return;
9
+
const location = useLocation();
10
+
const currentLocationRef = useRef(location.pathname);
11
+
useEffect(() => {
12
+
// console.log('location', {
13
+
// current: currentLocationRef.current,
14
+
// next: location.pathname,
15
+
// });
16
+
if (
17
+
currentLocationRef.current &&
18
+
location.pathname !== currentLocationRef.current
19
+
) {
20
+
fn?.();
21
+
}
22
+
}, [location.pathname, fn]);
23
+
}