this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Recode some nested modal closing logic

Seems more robust

+57 -35
+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
··· 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
··· 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
··· 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
··· 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 + }