import { useLocation, useNavigate } from 'react-router-dom'; import { subscribe, useSnapshot } from 'valtio'; import Accounts from '../pages/accounts'; import Settings from '../pages/settings'; import focusDeck from '../utils/focus-deck'; import showToast from '../utils/show-toast'; import states from '../utils/states'; import AccountSheet from './account-sheet'; import Compose from './compose'; import Drafts from './drafts'; import GenericAccounts from './generic-accounts'; import MediaModal from './media-modal'; import Modal from './modal'; import ShortcutsSettings from './shortcuts-settings'; subscribe(states, (changes) => { for (const [action, path, value, prevValue] of changes) { // When closing modal, focus on deck if (/^show/i.test(path) && !value) { focusDeck(); } } }); export default function Modals() { const snapStates = useSnapshot(states); const navigate = useNavigate(); const location = useLocation(); return ( <> {!!snapStates.showCompose && ( { const { newStatus, instance } = results || {}; states.showCompose = false; window.__COMPOSE__ = null; if (newStatus) { states.reloadStatusPage++; showToast({ text: 'Post published. Check it out.', delay: 1000, duration: 10_000, // 10 seconds onClick: (toast) => { toast.hideToast(); states.prevLocation = location; navigate( instance ? `/${instance}/s/${newStatus.id}` : `/s/${newStatus.id}`, ); }, }); } }} /> )} {!!snapStates.showSettings && ( { if (e.target === e.currentTarget) { states.showSettings = false; } }} > { states.showSettings = false; }} /> )} {!!snapStates.showAccounts && ( { if (e.target === e.currentTarget) { states.showAccounts = false; } }} > { states.showAccounts = false; }} /> )} {!!snapStates.showAccount && ( { if (e.target === e.currentTarget) { states.showAccount = false; } }} > { states.showAccount = false; if (destination) { states.showAccounts = false; } }} /> )} {!!snapStates.showDrafts && ( { if (e.target === e.currentTarget) { states.showDrafts = false; } }} > (states.showDrafts = false)} /> )} {!!snapStates.showMediaModal && ( { if ( e.target === e.currentTarget || e.target.classList.contains('media') ) { states.showMediaModal = false; } }} > { states.showMediaModal = false; }} /> )} {!!snapStates.showShortcutsSettings && ( { if (e.target === e.currentTarget) { states.showShortcutsSettings = false; } }} > (states.showShortcutsSettings = false)} /> )} {!!snapStates.showGenericAccounts && ( { if (e.target === e.currentTarget) { states.showGenericAccounts = false; } }} > (states.showGenericAccounts = false)} /> )} ); }