From ea8624664739d659252ea2ac1571eec00a3ff74c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Wed, 22 Oct 2025 21:42:11 +0200 Subject: [PATCH] pl-fe: use more specific zustand selectors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- packages/pl-fe/src/actions/admin.ts | 2 +- packages/pl-fe/src/actions/compose.ts | 18 +-- packages/pl-fe/src/actions/moderation.tsx | 8 +- packages/pl-fe/src/actions/reports.ts | 2 +- packages/pl-fe/src/actions/statuses.ts | 4 +- .../src/components/account-hover-card.tsx | 5 +- .../src/components/attachment-thumbs.tsx | 4 +- .../dropdown-menu/dropdown-menu.tsx | 8 +- .../src/components/dropdown-navigation.tsx | 5 +- .../src/components/hover-account-wrapper.tsx | 4 +- .../src/components/hover-status-wrapper.tsx | 4 +- packages/pl-fe/src/components/modal-root.tsx | 4 +- .../src/components/polls/poll-footer.tsx | 4 +- packages/pl-fe/src/components/polls/poll.tsx | 10 +- .../src/components/sidebar-navigation.tsx | 4 +- .../src/components/status-action-bar.tsx | 20 +-- .../pl-fe/src/components/status-content.tsx | 6 +- .../src/components/status-hover-card.tsx | 6 +- .../src/components/status-language-picker.tsx | 7 +- .../pl-fe/src/components/status-media.tsx | 4 +- .../src/components/status-reactions-bar.tsx | 4 +- .../src/components/status-reply-mentions.tsx | 4 +- packages/pl-fe/src/components/status.tsx | 8 +- .../statuses/sensitive-content-overlay.tsx | 7 +- .../pl-fe/src/components/thumb-navigation.tsx | 9 +- .../pl-fe/src/components/translate-button.tsx | 6 +- packages/pl-fe/src/components/upload.tsx | 4 +- .../features/account/components/header.tsx | 4 +- .../components/registration-form.tsx | 4 +- .../chats/components/chat-composer.tsx | 4 +- .../chats/components/chat-list-item.tsx | 4 +- .../chats/components/chat-list-shoutbox.tsx | 4 +- .../features/chats/components/chat-list.tsx | 4 +- .../chats/components/chat-message.tsx | 4 +- .../chat-page/components/chat-page-main.tsx | 4 +- .../chats/components/chat-pane/chat-pane.tsx | 4 +- .../features/chats/components/chat-upload.tsx | 4 +- .../components/chat-widget/chat-settings.tsx | 4 +- .../components/shoutbox-message-list.tsx | 5 +- .../compose/components/compose-form.tsx | 4 +- .../components/interaction-policy-button.tsx | 4 +- .../compose/components/reply-mentions.tsx | 4 +- .../compose/editor/nodes/image-component.tsx | 4 +- .../components/crypto-address.tsx | 4 +- .../components/draft-status-action-bar.tsx | 4 +- .../edit-profile/components/avatar-picker.tsx | 4 +- .../edit-profile/components/header-picker.tsx | 4 +- .../event/components/event-action-button.tsx | 4 +- .../event/components/event-header.tsx | 4 +- .../group/components/group-action-button.tsx | 4 +- .../group/components/group-header.tsx | 4 +- .../components/group-member-list-item.tsx | 4 +- .../group/components/group-options-button.tsx | 4 +- .../notifications/components/notification.tsx | 8 +- .../scheduled-status-action-bar.tsx | 4 +- .../components/status-interaction-bar.tsx | 4 +- .../src/features/status/components/thread.tsx | 8 +- .../features/ui/components/action-button.tsx | 4 +- .../features/ui/components/compose-button.tsx | 4 +- .../src/features/ui/components/modal-root.tsx | 5 +- .../components/panels/group-media-panel.tsx | 4 +- .../panels/instance-moderation-panel.tsx | 4 +- .../ui/components/panels/new-group-panel.tsx | 4 +- .../components/panels/profile-media-panel.tsx | 4 +- .../components/profile-familiar-followers.tsx | 4 +- packages/pl-fe/src/features/ui/index.tsx | 4 +- .../src/features/ui/util/global-hotkeys.tsx | 4 +- packages/pl-fe/src/init/pl-fe-head.tsx | 4 +- packages/pl-fe/src/modals/compose-modal.tsx | 4 +- .../src/pages/accounts/account-gallery.tsx | 4 +- packages/pl-fe/src/pages/auth/login.tsx | 4 +- .../src/pages/dashboard/announcements.tsx | 6 +- .../pl-fe/src/pages/dashboard/domains.tsx | 6 +- packages/pl-fe/src/pages/dashboard/report.tsx | 4 +- packages/pl-fe/src/pages/dashboard/rules.tsx | 6 +- packages/pl-fe/src/pages/fun/circle.tsx | 4 +- .../pl-fe/src/pages/groups/group-gallery.tsx | 4 +- packages/pl-fe/src/pages/groups/groups.tsx | 4 +- .../pl-fe/src/pages/groups/manage-group.tsx | 4 +- .../src/pages/settings/auth-token-list.tsx | 4 +- .../src/pages/status-lists/bookmarks.tsx | 4 +- .../src/pages/statuses/event-information.tsx | 4 +- .../src/pages/timelines/circle-timeline.tsx | 4 +- .../src/pages/timelines/list-timeline.tsx | 4 +- packages/pl-fe/src/pages/utils/new-status.tsx | 4 +- .../statuses/use-status-interactions.ts | 4 +- .../pl-fe/src/stores/account-hover-card.ts | 38 +++--- packages/pl-fe/src/stores/modals.ts | 60 +++++---- packages/pl-fe/src/stores/settings.ts | 4 +- packages/pl-fe/src/stores/shoutbox.ts | 45 ++++--- .../pl-fe/src/stores/status-hover-card.ts | 38 +++--- packages/pl-fe/src/stores/status-meta.ts | 119 +++++++++--------- packages/pl-fe/src/stores/ui.ts | 20 ++- 93 files changed, 398 insertions(+), 349 deletions(-) diff --git a/packages/pl-fe/src/actions/admin.ts b/packages/pl-fe/src/actions/admin.ts index ff578df8a..4fc495e84 100644 --- a/packages/pl-fe/src/actions/admin.ts +++ b/packages/pl-fe/src/actions/admin.ts @@ -129,7 +129,7 @@ const redactStatus = (statusId: string) => (dispatch: AppDispatch, getState: () return getClient(state).statuses.getStatusSource(statusId).then(response => { dispatch(setComposeToStatus(status, poll, response.text, response.spoiler_text, response.content_type, false, undefined, undefined, true)); - useModalsStore.getState().openModal('COMPOSE'); + useModalsStore.getState().actions.openModal('COMPOSE'); }).catch(error => { dispatch({ type: STATUS_FETCH_SOURCE_FAIL, error }); }); diff --git a/packages/pl-fe/src/actions/compose.ts b/packages/pl-fe/src/actions/compose.ts index b84a066a7..e049b99a9 100644 --- a/packages/pl-fe/src/actions/compose.ts +++ b/packages/pl-fe/src/actions/compose.ts @@ -211,7 +211,7 @@ const replyCompose = ( approvalRequired, conversationScope: features.createStatusConversationScope, }); - useModalsStore.getState().openModal('COMPOSE'); + useModalsStore.getState().actions.openModal('COMPOSE'); }; const cancelReplyCompose = () => ({ @@ -243,7 +243,7 @@ const quoteCompose = (status: ComposeQuoteAction['status']) => explicitAddressing, conversationScope: createStatusConversationScope, }); - useModalsStore.getState().openModal('COMPOSE'); + useModalsStore.getState().actions.openModal('COMPOSE'); }; const cancelQuoteCompose = (composeId: string) => ({ @@ -256,7 +256,7 @@ const groupComposeModal = (group: Pick) => const composeId = `group:${group.id}`; dispatch(groupCompose(composeId, group.id)); - useModalsStore.getState().openModal('COMPOSE', { composeId }); + useModalsStore.getState().actions.openModal('COMPOSE', { composeId }); }; const resetCompose = (composeId = 'compose-modal') => ({ @@ -279,7 +279,7 @@ const mentionCompose = (account: ComposeMentionAction['account']) => composeId: 'compose-modal', account: account, }); - useModalsStore.getState().openModal('COMPOSE'); + useModalsStore.getState().actions.openModal('COMPOSE'); }; interface ComposeDirectAction { @@ -295,7 +295,7 @@ const directCompose = (account: ComposeDirectAction['account']) => composeId: 'compose-modal', account, }); - useModalsStore.getState().openModal('COMPOSE'); + useModalsStore.getState().actions.openModal('COMPOSE'); }; const handleComposeSubmit = (dispatch: AppDispatch, getState: () => RootState, composeId: string, data: BaseStatus | ScheduledStatus, status: string, edit?: boolean, redact?: boolean) => { @@ -377,9 +377,9 @@ const submitCompose = (composeId: string, opts: SubmitComposeOpts = {}, preview } if (!force && needsDescriptions(state, composeId)) { - useModalsStore.getState().openModal('MISSING_DESCRIPTION', { + useModalsStore.getState().actions.openModal('MISSING_DESCRIPTION', { onContinue: () => { - useModalsStore.getState().closeModal('MISSING_DESCRIPTION'); + useModalsStore.getState().actions.closeModal('MISSING_DESCRIPTION'); dispatch(submitCompose(composeId, { history, force: true, onSuccess })); }, }); @@ -397,7 +397,7 @@ const submitCompose = (composeId: string, opts: SubmitComposeOpts = {}, preview if (!preview) { dispatch(submitComposeRequest(composeId)); - useModalsStore.getState().closeModal('COMPOSE'); + useModalsStore.getState().actions.closeModal('COMPOSE'); if (compose.language && !statusId && !preview) { useSettingsStore.getState().rememberLanguageUse(compose.language); @@ -877,7 +877,7 @@ const changePollSettings = (composeId: string, expiresIn?: number, isMultiple?: const openComposeWithText = (composeId: string, text = '') => (dispatch: AppDispatch) => { dispatch(resetCompose(composeId)); - useModalsStore.getState().openModal('COMPOSE'); + useModalsStore.getState().actions.openModal('COMPOSE'); dispatch(changeCompose(composeId, text)); }; diff --git a/packages/pl-fe/src/actions/moderation.tsx b/packages/pl-fe/src/actions/moderation.tsx index 24984d159..a129fca31 100644 --- a/packages/pl-fe/src/actions/moderation.tsx +++ b/packages/pl-fe/src/actions/moderation.tsx @@ -54,7 +54,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm = ); - useModalsStore.getState().openModal('CONFIRM', { + useModalsStore.getState().actions.openModal('CONFIRM', { heading: intl.formatMessage(messages.deactivateUserHeading, { acct }), message, confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }), @@ -91,7 +91,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () = const confirm = intl.formatMessage(messages.deleteUserConfirm, { name }); const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false; - useModalsStore.getState().openModal('CONFIRM', { + useModalsStore.getState().actions.openModal('CONFIRM', { heading: intl.formatMessage(messages.deleteUserHeading, { acct }), message, confirm, @@ -112,7 +112,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti const state = getState(); const acct = state.statuses[statusId]!.account.acct; - useModalsStore.getState().openModal('CONFIRM', { + useModalsStore.getState().actions.openModal('CONFIRM', { heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading), message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }), confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm), @@ -131,7 +131,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = () const state = getState(); const acct = state.statuses[statusId]!.account.acct; - useModalsStore.getState().openModal('CONFIRM', { + useModalsStore.getState().actions.openModal('CONFIRM', { heading: intl.formatMessage(messages.deleteStatusHeading), message: intl.formatMessage(messages.deleteStatusPrompt, { acct: {acct} }), confirm: intl.formatMessage(messages.deleteStatusConfirm), diff --git a/packages/pl-fe/src/actions/reports.ts b/packages/pl-fe/src/actions/reports.ts index acc9be787..bc7b505f6 100644 --- a/packages/pl-fe/src/actions/reports.ts +++ b/packages/pl-fe/src/actions/reports.ts @@ -18,7 +18,7 @@ type ReportedEntity = { const initReport = (entityType: ReportableEntities, account: Pick, entities?: ReportedEntity) => (dispatch: AppDispatch) => { const { status } = entities || {}; - return useModalsStore.getState().openModal('REPORT', { + return useModalsStore.getState().actions.openModal('REPORT', { accountId: account.id, entityType, statusIds: status ? [status.id] : [], diff --git a/packages/pl-fe/src/actions/statuses.ts b/packages/pl-fe/src/actions/statuses.ts index 75f6216a8..4894a5dc7 100644 --- a/packages/pl-fe/src/actions/statuses.ts +++ b/packages/pl-fe/src/actions/statuses.ts @@ -98,7 +98,7 @@ const editStatus = (statusId: string) => (dispatch: AppDispatch, getState: () => return getClient(state).statuses.getStatusSource(statusId).then(response => { dispatch({ type: STATUS_FETCH_SOURCE_SUCCESS }); dispatch(setComposeToStatus(status, poll, response.text, response.spoiler_text, response.content_type, false)); - useModalsStore.getState().openModal('COMPOSE'); + useModalsStore.getState().actions.openModal('COMPOSE'); }).catch(error => { dispatch({ type: STATUS_FETCH_SOURCE_FAIL, error }); }); @@ -137,7 +137,7 @@ const deleteStatus = (statusId: string, groupId?: string, withRedraft = false) = if (withRedraft) { dispatch(setComposeToStatus(status, poll, response.text || '', response.spoiler_text, (response as StatusSource).content_type, withRedraft)); - useModalsStore.getState().openModal('COMPOSE'); + useModalsStore.getState().actions.openModal('COMPOSE'); } }) .catch(error => { diff --git a/packages/pl-fe/src/components/account-hover-card.tsx b/packages/pl-fe/src/components/account-hover-card.tsx index 15b1d57dd..87058afd3 100644 --- a/packages/pl-fe/src/components/account-hover-card.tsx +++ b/packages/pl-fe/src/components/account-hover-card.tsx @@ -19,7 +19,7 @@ import { UserPanel } from 'pl-fe/features/ui/util/async-components'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { accountScrobbleQueryOptions } from 'pl-fe/queries/accounts/account-scrobble'; -import { useAccountHoverCardStore } from 'pl-fe/stores/account-hover-card'; +import { useAccountHoverCardActions, useAccountHoverCardStore } from 'pl-fe/stores/account-hover-card'; import AccountLocalTime from './account-local-time'; import { showAccountHoverCard } from './hover-account-wrapper'; @@ -57,7 +57,8 @@ const AccountHoverCard: React.FC = ({ visible = true }) => { const history = useHistory(); const intl = useIntl(); - const { accountId, ref, updateAccountHoverCard, closeAccountHoverCard } = useAccountHoverCardStore(); + const { accountId, ref } = useAccountHoverCardStore(); + const { updateAccountHoverCard, closeAccountHoverCard } = useAccountHoverCardActions(); const me = useAppSelector(state => state.me); const { account } = useAccount(accountId || undefined, { withRelationship: true }); diff --git a/packages/pl-fe/src/components/attachment-thumbs.tsx b/packages/pl-fe/src/components/attachment-thumbs.tsx index 7790e4aef..3ef96e6df 100644 --- a/packages/pl-fe/src/components/attachment-thumbs.tsx +++ b/packages/pl-fe/src/components/attachment-thumbs.tsx @@ -2,7 +2,7 @@ import React, { Suspense } from 'react'; import { MediaGallery } from 'pl-fe/features/ui/util/async-components'; import { useSettings } from 'pl-fe/hooks/use-settings'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { useMediaVisible } from './statuses/sensitive-content-overlay'; @@ -16,7 +16,7 @@ interface IAttachmentThumbs { const AttachmentThumbs = ({ status, onClick }: IAttachmentThumbs) => { const { displayMedia } = useSettings(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const fallback =
; const onOpenMedia = (media: Array, index: number) => openModal('MEDIA', { media, index }); diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx index b15691aeb..a9c9fe444 100644 --- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx +++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx @@ -9,8 +9,8 @@ import HStack from 'pl-fe/components/ui/hstack'; import IconButton from 'pl-fe/components/ui/icon-button'; import Portal from 'pl-fe/components/ui/portal'; import { userTouching } from 'pl-fe/is-mobile'; -import { useModalsStore } from 'pl-fe/stores/modals'; -import { useUiStore } from 'pl-fe/stores/ui'; +import { useModalsActions } from 'pl-fe/stores/modals'; +import { useUiStoreActions } from 'pl-fe/stores/ui'; import DropdownMenuItem, { MenuItem } from './dropdown-menu-item'; @@ -202,8 +202,8 @@ const DropdownMenu = (props: IDropdownMenu) => { width, } = props; - const { openDropdownMenu, closeDropdownMenu } = useUiStore(); - const { openModal, closeModal } = useModalsStore(); + const { openDropdownMenu, closeDropdownMenu } = useUiStoreActions(); + const { openModal, closeModal } = useModalsActions(); const [isOpen, setIsOpen] = useState(false); const [isDisplayed, setIsDisplayed] = useState(false); diff --git a/packages/pl-fe/src/components/dropdown-navigation.tsx b/packages/pl-fe/src/components/dropdown-navigation.tsx index ac7e197ed..87febe5df 100644 --- a/packages/pl-fe/src/components/dropdown-navigation.tsx +++ b/packages/pl-fe/src/components/dropdown-navigation.tsx @@ -24,7 +24,7 @@ import { useDraftStatusesCountQuery } from 'pl-fe/queries/statuses/use-draft-sta import { useInteractionRequestsCount } from 'pl-fe/queries/statuses/use-interaction-requests'; import { makeGetOtherAccounts } from 'pl-fe/selectors'; import { useSettingsStore } from 'pl-fe/stores/settings'; -import { useUiStore } from 'pl-fe/stores/ui'; +import { useIsSidebarOpen, useUiStoreActions } from 'pl-fe/stores/ui'; import sourceCode from 'pl-fe/utils/code'; import type { Account as AccountEntity } from 'pl-fe/normalizers/account'; @@ -66,7 +66,8 @@ const DropdownNavigationLink: React.FC = React.memo(({ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => { const dispatch = useAppDispatch(); - const { isSidebarOpen, closeSidebar } = useUiStore(); + const isSidebarOpen = useIsSidebarOpen(); + const { closeSidebar } = useUiStoreActions(); const me = useAppSelector((state) => state.me); diff --git a/packages/pl-fe/src/components/hover-account-wrapper.tsx b/packages/pl-fe/src/components/hover-account-wrapper.tsx index f61294ba1..3781ef7d1 100644 --- a/packages/pl-fe/src/components/hover-account-wrapper.tsx +++ b/packages/pl-fe/src/components/hover-account-wrapper.tsx @@ -5,7 +5,7 @@ import React, { useRef } from 'react'; import { fetchAccount } from 'pl-fe/actions/accounts'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { isMobile } from 'pl-fe/is-mobile'; -import { useAccountHoverCardStore } from 'pl-fe/stores/account-hover-card'; +import { useAccountHoverCardActions } from 'pl-fe/stores/account-hover-card'; const showAccountHoverCard = debounce((openAccountHoverCard, ref, accountId) => { openAccountHoverCard(ref, accountId); @@ -22,7 +22,7 @@ interface IHoverAccountWrapper { const HoverAccountWrapper: React.FC = React.memo(({ accountId, children, element: Elem = 'div', className }) => { const dispatch = useAppDispatch(); - const { openAccountHoverCard, closeAccountHoverCard } = useAccountHoverCardStore(); + const { openAccountHoverCard, closeAccountHoverCard } = useAccountHoverCardActions(); const ref = useRef(null); diff --git a/packages/pl-fe/src/components/hover-status-wrapper.tsx b/packages/pl-fe/src/components/hover-status-wrapper.tsx index 95502b2e9..4a0f016c0 100644 --- a/packages/pl-fe/src/components/hover-status-wrapper.tsx +++ b/packages/pl-fe/src/components/hover-status-wrapper.tsx @@ -3,7 +3,7 @@ import debounce from 'lodash/debounce'; import React, { useRef } from 'react'; import { isMobile } from 'pl-fe/is-mobile'; -import { useStatusHoverCardStore } from 'pl-fe/stores/status-hover-card'; +import { useStatusHoverCardActions } from 'pl-fe/stores/status-hover-card'; const showStatusHoverCard = debounce((openStatusHoverCard, ref, statusId) => { openStatusHoverCard(ref, statusId); @@ -18,7 +18,7 @@ interface IHoverStatusWrapper { /** Makes a status hover card appear when the wrapped element is hovered. */ const HoverStatusWrapper: React.FC = ({ statusId, children, inline = false, className }) => { - const { openStatusHoverCard, closeStatusHoverCard } = useStatusHoverCardStore(); + const { openStatusHoverCard, closeStatusHoverCard } = useStatusHoverCardActions(); const ref = useRef(null); const Elem: keyof JSX.IntrinsicElements = inline ? 'span' : 'div'; diff --git a/packages/pl-fe/src/components/modal-root.tsx b/packages/pl-fe/src/components/modal-root.tsx index e64f5cc46..da04ec6a9 100644 --- a/packages/pl-fe/src/components/modal-root.tsx +++ b/packages/pl-fe/src/components/modal-root.tsx @@ -7,7 +7,7 @@ import { cancelReplyCompose } from 'pl-fe/actions/compose'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { usePrevious } from 'pl-fe/hooks/use-previous'; import { usePersistDraftStatus } from 'pl-fe/queries/statuses/use-draft-statuses'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { ModalType } from 'pl-fe/features/ui/components/modal-root'; import type { Compose } from 'pl-fe/reducers/compose'; @@ -39,7 +39,7 @@ const ModalRoot: React.FC = ({ children, onCancel, onClose, type }) const dispatch = useAppDispatch(); const persistDraftStatus = usePersistDraftStatus(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const [revealed, setRevealed] = useState(!!children); diff --git a/packages/pl-fe/src/components/polls/poll-footer.tsx b/packages/pl-fe/src/components/polls/poll-footer.tsx index aee671c05..26b532c78 100644 --- a/packages/pl-fe/src/components/polls/poll-footer.tsx +++ b/packages/pl-fe/src/components/polls/poll-footer.tsx @@ -8,7 +8,7 @@ import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import Tooltip from 'pl-fe/components/ui/tooltip'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useStatusMetaActions } from 'pl-fe/stores/status-meta'; import RelativeTimestamp from '../relative-timestamp'; @@ -31,7 +31,7 @@ const PollFooter: React.FC = ({ poll, showResults, selected, status const dispatch = useAppDispatch(); const intl = useIntl(); - const { toggleShowPollResults } = useStatusMetaStore(); + const { toggleShowPollResults } = useStatusMetaActions(); const handleVote = () => dispatch(vote(poll.id, Object.keys(selected) as any as number[])); diff --git a/packages/pl-fe/src/components/polls/poll.tsx b/packages/pl-fe/src/components/polls/poll.tsx index 983038c6d..a9b71ca0d 100644 --- a/packages/pl-fe/src/components/polls/poll.tsx +++ b/packages/pl-fe/src/components/polls/poll.tsx @@ -6,8 +6,8 @@ import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useModalsStore } from 'pl-fe/stores/modals'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useModalsActions } from 'pl-fe/stores/modals'; +import { useStatusMeta } from 'pl-fe/stores/status-meta'; import PollFooter from './poll-footer'; import PollOption from './poll-option'; @@ -24,15 +24,13 @@ interface IPoll { } const Poll: React.FC = ({ id, status, language, truncate }): JSX.Element | null => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const dispatch = useAppDispatch(); const isLoggedIn = useAppSelector((state) => state.me); const poll = useAppSelector((state) => state.polls[id]); - const { statuses: statusesMeta } = useStatusMetaStore(); - - const showPollResults = !!statusesMeta[status.id]?.showPollResults; + const { showPollResults } = useStatusMeta(status.id); const [selected, setSelected] = useState({} as Selected); diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx index 3c6d599f1..171276a19 100644 --- a/packages/pl-fe/src/components/sidebar-navigation.tsx +++ b/packages/pl-fe/src/components/sidebar-navigation.tsx @@ -19,7 +19,7 @@ import { usePendingReportsCount } from 'pl-fe/queries/admin/use-reports'; import { scheduledStatusesCountQueryOptions } from 'pl-fe/queries/statuses/scheduled-statuses'; import { useDraftStatusesCountQuery } from 'pl-fe/queries/statuses/use-draft-statuses'; import { useInteractionRequestsCount } from 'pl-fe/queries/statuses/use-interaction-requests'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import sourceCode from 'pl-fe/utils/code'; import Account from './account'; @@ -55,7 +55,7 @@ interface ISidebarNavigation { const SidebarNavigation: React.FC = React.memo(({ shrink }) => { const intl = useIntl(); const { unreadChatsCount } = useStatContext(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const instance = useInstance(); const features = useFeatures(); diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx index bb635e8ac..5869b92c7 100644 --- a/packages/pl-fe/src/components/status-action-bar.tsx +++ b/packages/pl-fe/src/components/status-action-bar.tsx @@ -31,8 +31,8 @@ import { useBlockGroupUserMutation } from 'pl-fe/queries/groups/use-group-blocks import { useCustomEmojis } from 'pl-fe/queries/instance/use-custom-emojis'; import { useTranslationLanguages } from 'pl-fe/queries/instance/use-translation-languages'; import { useBookmarkStatus, useDislikeStatus, useFavouriteStatus, usePinStatus, useReblogStatus, useUnbookmarkStatus, useUndislikeStatus, useUnfavouriteStatus, useUnpinStatus, useUnreblogStatus } from 'pl-fe/queries/statuses/use-status-interactions'; -import { useModalsStore } from 'pl-fe/stores/modals'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useModalsActions } from 'pl-fe/stores/modals'; +import { useStatusMeta, useStatusMetaActions } from 'pl-fe/stores/status-meta'; import toast from 'pl-fe/toast'; import copy from 'pl-fe/utils/copy'; @@ -287,7 +287,7 @@ const ReblogButton: React.FC = ({ const intl = useIntl(); const { boostModal } = useSettings(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const canReblog = useCanInteract(status, 'can_reblog'); const { mutate: reblogStatus } = useReblogStatus(status.id); @@ -393,7 +393,7 @@ const FavouriteButton: React.FC = ({ const features = useFeatures(); const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const canFavourite = useCanInteract(status, 'can_favourite'); const { mutate: favouriteStatus } = useFavouriteStatus(status.id); @@ -455,7 +455,7 @@ const DislikeButton: React.FC = ({ const features = useFeatures(); const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { mutate: dislikeStatus } = useDislikeStatus(status.id); const { mutate: undislikeStatus } = useUndislikeStatus(status.id); @@ -506,7 +506,7 @@ const WrenchButton: React.FC = ({ const intl = useIntl(); const features = useFeatures(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { showWrenchButton } = useSettings(); const { data: hasLongerWrench } = useCustomEmojis(getLongerWrench); @@ -590,9 +590,9 @@ const MenuButton: React.FC = ({ const { boostModal } = useSettings(); const client = useClient(); - const { statuses: statusesMeta, fetchTranslation, hideTranslation } = useStatusMetaStore(); - const targetLanguage = statusesMeta[status.id]?.targetLanguage; - const { openModal } = useModalsStore(); + const { fetchTranslation, hideTranslation } = useStatusMetaActions(); + const { targetLanguage } = useStatusMeta(status.id); + const { openModal } = useModalsActions(); const { group } = useGroup((status.group as Group)?.id as string); const { mutate: blockGroupMember } = useBlockGroupUserMutation(status.group?.id as string, status.account.id); const { getOrCreateChatByAccountId } = useChats(); @@ -1137,7 +1137,7 @@ const StatusActionBar: React.FC = ({ rebloggedBy, }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const me = useAppSelector(state => state.me); diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx index 6d45c1f2a..dc2a756d6 100644 --- a/packages/pl-fe/src/components/status-content.tsx +++ b/packages/pl-fe/src/components/status-content.tsx @@ -11,7 +11,7 @@ import QuotedStatus from 'pl-fe/features/status/containers/quoted-status-contain import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; import { useSettings } from 'pl-fe/hooks/use-settings'; import { useStatusTranslation } from 'pl-fe/queries/statuses/use-status-translation'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useStatusMeta, useStatusMetaActions } from 'pl-fe/stores/status-meta'; import { onlyEmoji as isOnlyEmoji } from 'pl-fe/utils/rich-content'; import { getTextDirection } from '../utils/rtl'; @@ -93,8 +93,8 @@ const StatusContent: React.FC = React.memo(({ const node = useRef(null); const spoilerNode = useRef(null); - const { statuses: statusesMeta, collapseStatuses, expandStatuses } = useStatusMetaStore(); - const statusMeta = statusesMeta[status.id] || {}; + const { collapseStatuses, expandStatuses } = useStatusMetaActions(); + const statusMeta = useStatusMeta(status.id); const { data: translation } = useStatusTranslation(status.id, statusMeta.targetLanguage); const withSpoiler = status.spoiler_text?.length > 0; diff --git a/packages/pl-fe/src/components/status-hover-card.tsx b/packages/pl-fe/src/components/status-hover-card.tsx index e0c6824d7..ad544e57a 100644 --- a/packages/pl-fe/src/components/status-hover-card.tsx +++ b/packages/pl-fe/src/components/status-hover-card.tsx @@ -9,7 +9,7 @@ import { showStatusHoverCard } from 'pl-fe/components/hover-status-wrapper'; import StatusContainer from 'pl-fe/containers/status-container'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useStatusHoverCardStore } from 'pl-fe/stores/status-hover-card'; +import { useStatusHoverCardActions, useStatusHoverCardStore } from 'pl-fe/stores/status-hover-card'; interface IStatusHoverCard { visible?: boolean; @@ -21,7 +21,9 @@ const StatusHoverCard: React.FC = ({ visible = true }) => { const intl = useIntl(); const history = useHistory(); - const { statusId, ref, closeStatusHoverCard, updateStatusHoverCard } = useStatusHoverCardStore(); + const { statusId, ref } = useStatusHoverCardStore(); + const { closeStatusHoverCard, updateStatusHoverCard } = useStatusHoverCardActions(); + const status = useAppSelector(state => state.statuses[statusId!]); diff --git a/packages/pl-fe/src/components/status-language-picker.tsx b/packages/pl-fe/src/components/status-language-picker.tsx index 479876c16..806a74213 100644 --- a/packages/pl-fe/src/components/status-language-picker.tsx +++ b/packages/pl-fe/src/components/status-language-picker.tsx @@ -5,7 +5,7 @@ import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; import Text from 'pl-fe/components/ui/text'; import { type Language, languages } from 'pl-fe/features/preferences'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useStatusMeta, useStatusMetaActions } from 'pl-fe/stores/status-meta'; import DropdownMenu from './dropdown-menu'; @@ -23,9 +23,8 @@ interface IStatusLanguagePicker { const StatusLanguagePicker: React.FC = React.memo(({ status, showLabel }) => { const intl = useIntl(); - const { statuses, setStatusLanguage } = useStatusMetaStore(); - - const { currentLanguage } = statuses[status.id] || {}; + const { currentLanguage } = useStatusMeta(status.id); + const { setStatusLanguage } = useStatusMetaActions(); if (!status.content_map || Object.keys(status.content_map).length < 2) return null; diff --git a/packages/pl-fe/src/components/status-media.tsx b/packages/pl-fe/src/components/status-media.tsx index 6d18322f2..21198c07f 100644 --- a/packages/pl-fe/src/components/status-media.tsx +++ b/packages/pl-fe/src/components/status-media.tsx @@ -5,7 +5,7 @@ import PreviewCard from 'pl-fe/components/preview-card'; import PlaceholderCard from 'pl-fe/features/placeholder/components/placeholder-card'; import { MediaGallery, Video, Audio } from 'pl-fe/features/ui/util/async-components'; import { useSettings } from 'pl-fe/hooks/use-settings'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { useMediaVisible } from './statuses/sensitive-content-overlay'; @@ -27,7 +27,7 @@ const StatusMedia: React.FC = ({ muted = false, onClick, }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { displayMedia } = useSettings(); const [visible] = useMediaVisible(status, displayMedia); diff --git a/packages/pl-fe/src/components/status-reactions-bar.tsx b/packages/pl-fe/src/components/status-reactions-bar.tsx index 49a6c1400..e83c236b3 100644 --- a/packages/pl-fe/src/components/status-reactions-bar.tsx +++ b/packages/pl-fe/src/components/status-reactions-bar.tsx @@ -14,7 +14,7 @@ import { useFeatures } from 'pl-fe/hooks/use-features'; import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { useLongPress } from 'pl-fe/hooks/use-long-press'; import { useSettings } from 'pl-fe/hooks/use-settings'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import AnimatedNumber from './animated-number'; @@ -43,7 +43,7 @@ const StatusReaction: React.FC = ({ reaction, statusId, obfusca const dispatch = useAppDispatch(); const intl = useIntl(); const features = useFeatures(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const bind = useLongPress((e) => { if (!features.emojiReactsList || e.type !== 'touchstart') return; diff --git a/packages/pl-fe/src/components/status-reply-mentions.tsx b/packages/pl-fe/src/components/status-reply-mentions.tsx index c6355a0d1..895793943 100644 --- a/packages/pl-fe/src/components/status-reply-mentions.tsx +++ b/packages/pl-fe/src/components/status-reply-mentions.tsx @@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'; import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper'; import HoverStatusWrapper from 'pl-fe/components/hover-status-wrapper'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { Status } from 'pl-fe/normalizers/status'; @@ -14,7 +14,7 @@ interface IStatusReplyMentions { } const StatusReplyMentions: React.FC = ({ status, hoverable = true }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const handleOpenMentionsModal: React.MouseEventHandler = (e) => { e.stopPropagation(); diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx index e8417ceac..e268c6155 100644 --- a/packages/pl-fe/src/components/status.tsx +++ b/packages/pl-fe/src/components/status.tsx @@ -18,8 +18,8 @@ import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useSettings } from 'pl-fe/hooks/use-settings'; import { useFavouriteStatus, useReblogStatus, useUnfavouriteStatus, useUnreblogStatus } from 'pl-fe/queries/statuses/use-status-interactions'; import { makeGetStatus, type SelectedStatus } from 'pl-fe/selectors'; -import { useModalsStore } from 'pl-fe/stores/modals'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useModalsActions } from 'pl-fe/stores/modals'; +import { useStatusMetaActions } from 'pl-fe/stores/status-meta'; import { textForScreenReader } from 'pl-fe/utils/status'; import EventPreview from './event-preview'; @@ -78,8 +78,8 @@ const Status: React.FC = (props) => { const history = useHistory(); const dispatch = useAppDispatch(); - const { toggleStatusesMediaHidden } = useStatusMetaStore(); - const { openModal } = useModalsStore(); + const { toggleStatusesMediaHidden } = useStatusMetaActions(); + const { openModal } = useModalsActions(); const { boostModal } = useSettings(); const didShowCard = useRef(false); const node = useRef(null); diff --git a/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx b/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx index 36f7fd0e6..778b4999b 100644 --- a/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx +++ b/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx @@ -6,14 +6,13 @@ import Button from 'pl-fe/components/ui/button'; import HStack from 'pl-fe/components/ui/hstack'; import Text from 'pl-fe/components/ui/text'; import { useSettings } from 'pl-fe/hooks/use-settings'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useStatusMeta, useStatusMetaActions } from 'pl-fe/stores/status-meta'; import type { FilterResult } from 'pl-api'; import type { Status } from 'pl-fe/normalizers/status'; const useMediaVisible = (status: Pick & Partial>, displayMedia: 'default' | 'show_all' | 'hide_all'): [boolean, Array] => { - const statusesMeta = useStatusMetaStore().statuses; - const mediaVisible = status.id ? statusesMeta[status.id]?.mediaVisible : undefined; + const { mediaVisible } = useStatusMeta(status.id as string); return useMemo(() => { let visible = !status.sensitive; @@ -64,7 +63,7 @@ const SensitiveContentOverlay = React.forwardRef filters.map(({ filter }) => filter.title), [filters]); - const { hideStatusesMedia, revealStatusesMedia } = useStatusMetaStore(); + const { hideStatusesMedia, revealStatusesMedia } = useStatusMetaActions(); const toggleVisibility = (event: React.MouseEvent) => { event.stopPropagation(); diff --git a/packages/pl-fe/src/components/thumb-navigation.tsx b/packages/pl-fe/src/components/thumb-navigation.tsx index b75a87d23..e33d719cc 100644 --- a/packages/pl-fe/src/components/thumb-navigation.tsx +++ b/packages/pl-fe/src/components/thumb-navigation.tsx @@ -11,8 +11,8 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; -import { useModalsStore } from 'pl-fe/stores/modals'; -import { useUiStore } from 'pl-fe/stores/ui'; +import { useModalsActions } from 'pl-fe/stores/modals'; +import { useIsSidebarOpen, useUiStoreActions } from 'pl-fe/stores/ui'; import { isStandalone } from 'pl-fe/utils/state'; const messages = defineMessages({ @@ -33,8 +33,9 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => { const match = useRouteMatch<{ groupId: string }>('/groups/:groupId'); - const { openSidebar, closeSidebar, isSidebarOpen } = useUiStore(); - const { openModal } = useModalsStore(); + const isSidebarOpen = useIsSidebarOpen(); + const { openSidebar, closeSidebar } = useUiStoreActions(); + const { openModal } = useModalsActions(); const { unreadChatsCount } = useStatContext(); const standalone = useAppSelector(isStandalone); diff --git a/packages/pl-fe/src/components/translate-button.tsx b/packages/pl-fe/src/components/translate-button.tsx index 8d4a59658..07452dee7 100644 --- a/packages/pl-fe/src/components/translate-button.tsx +++ b/packages/pl-fe/src/components/translate-button.tsx @@ -10,7 +10,7 @@ import { useInstance } from 'pl-fe/hooks/use-instance'; import { useSettings } from 'pl-fe/hooks/use-settings'; import { useTranslationLanguages } from 'pl-fe/queries/instance/use-translation-languages'; import { useStatusTranslation } from 'pl-fe/queries/statuses/use-status-translation'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useStatusMeta, useStatusMetaActions } from 'pl-fe/stores/status-meta'; import type { Status } from 'pl-fe/normalizers/status'; @@ -28,9 +28,9 @@ const TranslateButton: React.FC = ({ status }) => { const me = useAppSelector((state) => state.me); const { translationLanguages } = useTranslationLanguages(); - const { statuses: statusesMeta, fetchTranslation, hideTranslation } = useStatusMetaStore(); + const { fetchTranslation, hideTranslation } = useStatusMetaActions(); + const { targetLanguage } = useStatusMeta(status.id); - const targetLanguage = statusesMeta[status.id]?.targetLanguage; const translationQuery = useStatusTranslation(status.id, targetLanguage); const { diff --git a/packages/pl-fe/src/components/upload.tsx b/packages/pl-fe/src/components/upload.tsx index 5ad7d4c06..311a6e37f 100644 --- a/packages/pl-fe/src/components/upload.tsx +++ b/packages/pl-fe/src/components/upload.tsx @@ -31,7 +31,7 @@ import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; import IconButton from 'pl-fe/components/ui/icon-button'; import Motion from 'pl-fe/features/ui/util/optional-motion'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { MediaAttachment } from 'pl-api'; @@ -102,7 +102,7 @@ const Upload: React.FC = ({ withPreview = true, }) => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const handleUndoClick: React.MouseEventHandler = e => { if (onDelete) { diff --git a/packages/pl-fe/src/features/account/components/header.tsx b/packages/pl-fe/src/features/account/components/header.tsx index 63247fb19..e7d6aa92e 100644 --- a/packages/pl-fe/src/features/account/components/header.tsx +++ b/packages/pl-fe/src/features/account/components/header.tsx @@ -34,7 +34,7 @@ import { useSettings } from 'pl-fe/hooks/use-settings'; import { useChats } from 'pl-fe/queries/chats'; import { queryClient } from 'pl-fe/queries/client'; import { blockDomainMutationOptions, unblockDomainMutationOptions } from 'pl-fe/queries/settings/domain-blocks'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; import { isDefaultHeader } from 'pl-fe/utils/accounts'; import copy from 'pl-fe/utils/copy'; @@ -135,7 +135,7 @@ const Header: React.FC = ({ account }) => { const features = useFeatures(); const { account: ownAccount } = useOwnAccount(); const { follow } = useFollow(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const settings = useSettings(); const { software } = features.version; diff --git a/packages/pl-fe/src/features/auth-login/components/registration-form.tsx b/packages/pl-fe/src/features/auth-login/components/registration-form.tsx index b3261ba82..11ed1b08f 100644 --- a/packages/pl-fe/src/features/auth-login/components/registration-form.tsx +++ b/packages/pl-fe/src/features/auth-login/components/registration-form.tsx @@ -19,7 +19,7 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useInstance } from 'pl-fe/hooks/use-instance'; import { useSettings } from 'pl-fe/hooks/use-settings'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { CreateAccountParams } from 'pl-api'; @@ -53,7 +53,7 @@ const RegistrationForm: React.FC = ({ inviteToken }) => { const { locale } = useSettings(); const features = useFeatures(); const instance = useInstance(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const needsConfirmation = instance.pleroma.metadata.account_activation_required; const needsApproval = instance.registrations.approval_required; diff --git a/packages/pl-fe/src/features/chats/components/chat-composer.tsx b/packages/pl-fe/src/features/chats/components/chat-composer.tsx index 11a37538f..b55d442d4 100644 --- a/packages/pl-fe/src/features/chats/components/chat-composer.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-composer.tsx @@ -14,7 +14,7 @@ import UploadButton from 'pl-fe/features/compose/components/upload-button'; import emojiSearch from 'pl-fe/features/emoji/search'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useInstance } from 'pl-fe/hooks/use-instance'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { textAtCursorMatchesToken } from 'pl-fe/utils/suggestions'; import ChatTextarea from './chat-textarea'; @@ -78,7 +78,7 @@ const ChatComposer = React.forwardRef const intl = useIntl(); const dispatch = useAppDispatch(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { chat } = useChatContext(); const { relationship } = useRelationship(chat?.account.id, { enabled: !!chat }); diff --git a/packages/pl-fe/src/features/chats/components/chat-list-item.tsx b/packages/pl-fe/src/features/chats/components/chat-list-item.tsx index c9aad1184..349ce5745 100644 --- a/packages/pl-fe/src/features/chats/components/chat-list-item.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-list-item.tsx @@ -15,7 +15,7 @@ import VerificationBadge from 'pl-fe/components/verification-badge'; import { useChatContext } from 'pl-fe/contexts/chat-context'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useChatActions } from 'pl-fe/queries/chats'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { Chat } from 'pl-api'; import type { Menu } from 'pl-fe/components/dropdown-menu'; @@ -34,7 +34,7 @@ interface IChatListItemInterface { } const ChatListItem: React.FC = ({ chat, onClick }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const intl = useIntl(); const features = useFeatures(); const history = useHistory(); diff --git a/packages/pl-fe/src/features/chats/components/chat-list-shoutbox.tsx b/packages/pl-fe/src/features/chats/components/chat-list-shoutbox.tsx index ce11a80ce..1fd6f8e84 100644 --- a/packages/pl-fe/src/features/chats/components/chat-list-shoutbox.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-list-shoutbox.tsx @@ -9,7 +9,7 @@ import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import { useInstance } from 'pl-fe/hooks/use-instance'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; -import { useShoutboxStore } from 'pl-fe/stores/shoutbox'; +import { useShoutboxMessages } from 'pl-fe/stores/shoutbox'; import type { Chat } from 'pl-api'; @@ -20,7 +20,7 @@ interface IChatListShoutboxInterface { const ChatListShoutbox: React.FC = ({ onClick }) => { const instance = useInstance(); const { logo } = usePlFeConfig(); - const messages = useShoutboxStore().messages; + const messages = useShoutboxMessages(); const handleKeyDown: React.KeyboardEventHandler = (event) => { if (event.key === 'Enter' || event.key === ' ') { diff --git a/packages/pl-fe/src/features/chats/components/chat-list.tsx b/packages/pl-fe/src/features/chats/components/chat-list.tsx index e6db023af..83d2d0f80 100644 --- a/packages/pl-fe/src/features/chats/components/chat-list.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-list.tsx @@ -7,7 +7,7 @@ import Spinner from 'pl-fe/components/ui/spinner'; import Stack from 'pl-fe/components/ui/stack'; import PlaceholderChat from 'pl-fe/features/placeholder/components/placeholder-chat'; import { useChats } from 'pl-fe/queries/chats'; -import { useShoutboxStore } from 'pl-fe/stores/shoutbox'; +import { useShoutboxIsLoading } from 'pl-fe/stores/shoutbox'; import ChatListItem from './chat-list-item'; import ChatListShoutbox from './chat-list-shoutbox'; @@ -20,7 +20,7 @@ interface IChatList { } const ChatList: React.FC = ({ onClickChat, useWindowScroll = false }) => { - const showShoutbox = !useShoutboxStore().isLoading; + const showShoutbox = !useShoutboxIsLoading(); const { chatsQuery: { data: chats, isFetching, hasNextPage, fetchNextPage, refetch } } = useChats(); diff --git a/packages/pl-fe/src/features/chats/components/chat-message.tsx b/packages/pl-fe/src/features/chats/components/chat-message.tsx index af44feb62..a873e7816 100644 --- a/packages/pl-fe/src/features/chats/components/chat-message.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-message.tsx @@ -14,7 +14,7 @@ import { MediaGallery } from 'pl-fe/features/ui/util/async-components'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { ChatKeys, useChatActions } from 'pl-fe/queries/chats'; import { queryClient } from 'pl-fe/queries/client'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { stripHTML } from 'pl-fe/utils/html'; import { onlyEmoji } from 'pl-fe/utils/rich-content'; @@ -49,7 +49,7 @@ interface IChatMessage { const ChatMessage = (props: IChatMessage) => { const { chat, chatMessage } = props; - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const intl = useIntl(); const me = useAppSelector((state) => state.me); diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx index 11763318d..20b2b1c4a 100644 --- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx @@ -16,7 +16,7 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useChat, useChatActions, useChats } from 'pl-fe/queries/chats'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import Chat from '../../chat'; @@ -48,7 +48,7 @@ const ChatPageMain = () => { const { chatId } = useParams<{ chatId: string }>(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data: chat } = useChat(chatId); const { currentChatId } = useChatContext(); const { chatsQuery: { data: chats, isLoading } } = useChats(); diff --git a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx index f16557bd9..b64692c09 100644 --- a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx @@ -5,7 +5,7 @@ import Stack from 'pl-fe/components/ui/stack'; import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context'; import { useStatContext } from 'pl-fe/contexts/stat-context'; import { useChats } from 'pl-fe/queries/chats'; -import { useShoutboxStore } from 'pl-fe/stores/shoutbox'; +import { useShoutboxIsLoading } from 'pl-fe/stores/shoutbox'; import ChatList from '../chat-list'; import ChatSearch from '../chat-search/chat-search'; @@ -21,7 +21,7 @@ import type { Chat } from 'pl-api'; const ChatPane = () => { const { unreadChatsCount } = useStatContext(); - const showShoutbox = !useShoutboxStore().isLoading; + const showShoutbox = !useShoutboxIsLoading(); const { screen, changeScreen, isOpen, toggleChatPane } = useChatContext(); const { chatsQuery: { data: chats, isLoading } } = useChats(); diff --git a/packages/pl-fe/src/features/chats/components/chat-upload.tsx b/packages/pl-fe/src/features/chats/components/chat-upload.tsx index 368ac0c25..959661af5 100644 --- a/packages/pl-fe/src/features/chats/components/chat-upload.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-upload.tsx @@ -3,7 +3,7 @@ import React from 'react'; import Blurhash from 'pl-fe/components/blurhash'; import Icon from 'pl-fe/components/ui/icon'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import ChatUploadPreview from './chat-upload-preview'; @@ -16,7 +16,7 @@ interface IChatUpload { /** An attachment uploaded to the chat composer, before sending. */ const ChatUpload: React.FC = ({ attachment, onDelete }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const clickable = attachment.type !== 'unknown'; const handleOpenModal = () => { diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx index f52315f42..91e1ba9ca 100644 --- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx @@ -13,7 +13,7 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useChatActions } from 'pl-fe/queries/chats'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import ChatPaneHeader from './chat-pane-header'; @@ -40,7 +40,7 @@ const ChatSettings = () => { const intl = useIntl(); const features = useFeatures(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { chat, changeScreen, toggleChatPane } = useChatContext(); const { deleteChat } = useChatActions(chat?.id as string); diff --git a/packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx b/packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx index 73f20f04b..b0f6dc4d8 100644 --- a/packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx +++ b/packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx @@ -13,7 +13,7 @@ import Text from 'pl-fe/components/ui/text'; import Emojify from 'pl-fe/features/emoji/emojify'; import PlaceholderChatMessage from 'pl-fe/features/placeholder/components/placeholder-chat-message'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useShoutboxStore, type ShoutMessage } from 'pl-fe/stores/shoutbox'; +import { useShoutboxIsLoading, useShoutboxMessages, type ShoutMessage } from 'pl-fe/stores/shoutbox'; import { ChatMessageListList, ChatMessageListScroller } from './chat-message-list'; @@ -98,7 +98,8 @@ const ShoutboxMessageList: React.FC = () => { const [firstItemIndex, setFirstItemIndex] = useState(START_INDEX - 20); const me = useAppSelector(state => state.me); - const { messages: shoutboxMessages = [], isLoading } = useShoutboxStore(); + const shoutboxMessages = useShoutboxMessages() || []; + const isLoading = useShoutboxIsLoading(); const lastShoutboxMessage = shoutboxMessages?.at(-1) || null; diff --git a/packages/pl-fe/src/features/compose/components/compose-form.tsx b/packages/pl-fe/src/features/compose/components/compose-form.tsx index 2f7825cdc..3ecd9345e 100644 --- a/packages/pl-fe/src/features/compose/components/compose-form.tsx +++ b/packages/pl-fe/src/features/compose/components/compose-form.tsx @@ -32,7 +32,7 @@ import { useDraggedFiles } from 'pl-fe/hooks/use-dragged-files'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useInstance } from 'pl-fe/hooks/use-instance'; import { usePersistDraftStatus } from 'pl-fe/queries/statuses/use-draft-statuses'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; import PreviewComposeContainer from '../containers/preview-compose-container'; @@ -129,7 +129,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab const intl = useIntl(); const dispatch = useAppDispatch(); const { configuration } = useInstance(); - const { closeModal } = useModalsStore(); + const { closeModal } = useModalsActions(); const compose = useCompose(id); const maxTootChars = configuration.statuses.max_characters; diff --git a/packages/pl-fe/src/features/compose/components/interaction-policy-button.tsx b/packages/pl-fe/src/features/compose/components/interaction-policy-button.tsx index d7c6e4e07..5b5879e15 100644 --- a/packages/pl-fe/src/features/compose/components/interaction-policy-button.tsx +++ b/packages/pl-fe/src/features/compose/components/interaction-policy-button.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useCompose } from 'pl-fe/hooks/use-compose'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import ComposeFormButton from './compose-form-button'; @@ -17,7 +17,7 @@ interface IInteractionPolicyButton { const InteractionPolicyButton: React.FC = ({ composeId }) => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const handleClick = () => { openModal('COMPOSE_INTERACTION_POLICY', { diff --git a/packages/pl-fe/src/features/compose/components/reply-mentions.tsx b/packages/pl-fe/src/features/compose/components/reply-mentions.tsx index bdf0385e8..a53099df8 100644 --- a/packages/pl-fe/src/features/compose/components/reply-mentions.tsx +++ b/packages/pl-fe/src/features/compose/components/reply-mentions.tsx @@ -3,7 +3,7 @@ import { FormattedList, FormattedMessage } from 'react-intl'; import { useCompose } from 'pl-fe/hooks/use-compose'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { useSettingsStore } from 'pl-fe/stores/settings'; interface IReplyMentions { @@ -11,7 +11,7 @@ interface IReplyMentions { } const ReplyMentions: React.FC = ({ composeId }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const features = useFeatures(); const compose = useCompose(composeId); const to = compose.to; diff --git a/packages/pl-fe/src/features/compose/editor/nodes/image-component.tsx b/packages/pl-fe/src/features/compose/editor/nodes/image-component.tsx index 5d82e3f37..9e47ace71 100644 --- a/packages/pl-fe/src/features/compose/editor/nodes/image-component.tsx +++ b/packages/pl-fe/src/features/compose/editor/nodes/image-component.tsx @@ -32,7 +32,7 @@ import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; import IconButton from 'pl-fe/components/ui/icon-button'; import { useSettings } from 'pl-fe/hooks/use-settings'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { $isImageNode } from './image-node'; @@ -95,7 +95,7 @@ const ImageComponent = ({ src: string; }): JSX.Element => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { missingDescriptionModal } = useSettings(); const imageRef = useRef(null); diff --git a/packages/pl-fe/src/features/crypto-donate/components/crypto-address.tsx b/packages/pl-fe/src/features/crypto-donate/components/crypto-address.tsx index d470257f3..622e6cff1 100644 --- a/packages/pl-fe/src/features/crypto-donate/components/crypto-address.tsx +++ b/packages/pl-fe/src/features/crypto-donate/components/crypto-address.tsx @@ -6,7 +6,7 @@ import Icon from 'pl-fe/components/ui/icon'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import { CryptoIcon } from 'pl-fe/features/ui/util/async-components'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { getTitle } from '../utils/coin-db'; @@ -19,7 +19,7 @@ interface ICryptoAddress { const CryptoAddress: React.FC = (props): JSX.Element => { const { address, ticker, note } = props; - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const handleModalClick = (e: React.MouseEvent): void => { openModal('CRYPTO_DONATE', props); diff --git a/packages/pl-fe/src/features/draft-statuses/components/draft-status-action-bar.tsx b/packages/pl-fe/src/features/draft-statuses/components/draft-status-action-bar.tsx index dc49e9ddc..5ee6baab8 100644 --- a/packages/pl-fe/src/features/draft-statuses/components/draft-status-action-bar.tsx +++ b/packages/pl-fe/src/features/draft-statuses/components/draft-status-action-bar.tsx @@ -7,7 +7,7 @@ import Button from 'pl-fe/components/ui/button'; import HStack from 'pl-fe/components/ui/hstack'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useCancelDraftStatus } from 'pl-fe/queries/statuses/use-draft-statuses'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { useSettingsStore } from 'pl-fe/stores/settings'; import type { Status as StatusEntity } from 'pl-fe/normalizers/status'; @@ -27,7 +27,7 @@ interface IDraftStatusActionBar { const DraftStatusActionBar: React.FC = ({ source, status }) => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { settings } = useSettingsStore(); const dispatch = useAppDispatch(); const cancelDraftStatus = useCancelDraftStatus(); diff --git a/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx b/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx index 3c91d375e..e204897d7 100644 --- a/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx +++ b/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx @@ -7,7 +7,7 @@ import Avatar from 'pl-fe/components/ui/avatar'; import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; import { useDraggedFiles } from 'pl-fe/hooks/use-dragged-files'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; const messages = defineMessages({ changeDescriptionHeading: { id: 'group.upload_avatar.alt.heading', defaultMessage: 'Change avatar description' }, @@ -28,7 +28,7 @@ interface IMediaInput { const AvatarPicker = React.forwardRef(({ className, src, onChange, accept, disabled, description, onChangeDescription, }, ref) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const intl = useIntl(); const picker = useRef(null); diff --git a/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx b/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx index f4cc4cbb4..2fedb43dd 100644 --- a/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx +++ b/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx @@ -8,7 +8,7 @@ import Icon from 'pl-fe/components/ui/icon'; import IconButton from 'pl-fe/components/ui/icon-button'; import Text from 'pl-fe/components/ui/text'; import { useDraggedFiles } from 'pl-fe/hooks/use-dragged-files'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; const messages = defineMessages({ title: { id: 'group.upload_banner.title', defaultMessage: 'Upload background picture' }, @@ -30,7 +30,7 @@ interface IMediaInput { const HeaderPicker = React.forwardRef(({ src, onChange, onClear, accept, disabled, description, onChangeDescription, }, ref) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const intl = useIntl(); const picker = useRef(null); diff --git a/packages/pl-fe/src/features/event/components/event-action-button.tsx b/packages/pl-fe/src/features/event/components/event-action-button.tsx index 9fb5163d0..70e8da89e 100644 --- a/packages/pl-fe/src/features/event/components/event-action-button.tsx +++ b/packages/pl-fe/src/features/event/components/event-action-button.tsx @@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import Button from 'pl-fe/components/ui/button'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useJoinEventMutation, useLeaveEventMutation } from 'pl-fe/queries/statuses/use-event-interactions'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { ButtonThemes } from 'pl-fe/components/ui/button/useButtonStyles'; import type { Status as StatusEntity } from 'pl-fe/normalizers/status'; @@ -23,7 +23,7 @@ interface IEventAction { const EventActionButton: React.FC = ({ status, theme = 'secondary' }) => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const me = useAppSelector((state) => state.me); const { mutate: joinEvent } = useJoinEventMutation(status.id); diff --git a/packages/pl-fe/src/features/event/components/event-header.tsx b/packages/pl-fe/src/features/event/components/event-header.tsx index c9aa6d9d9..5371eaed0 100644 --- a/packages/pl-fe/src/features/event/components/event-header.tsx +++ b/packages/pl-fe/src/features/event/components/event-header.tsx @@ -24,7 +24,7 @@ import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { useSettings } from 'pl-fe/hooks/use-settings'; import { useChats } from 'pl-fe/queries/chats'; import { useBookmarkStatus, usePinStatus, useReblogStatus, useUnbookmarkStatus, useUnpinStatus, useUnreblogStatus } from 'pl-fe/queries/statuses/use-status-interactions'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import copy from 'pl-fe/utils/copy'; import { download } from 'pl-fe/utils/download'; import { shortNumberFormat } from 'pl-fe/utils/numbers'; @@ -80,7 +80,7 @@ const EventHeader: React.FC = ({ status }) => { const dispatch = useAppDispatch(); const history = useHistory(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { getOrCreateChatByAccountId } = useChats(); const features = useFeatures(); diff --git a/packages/pl-fe/src/features/group/components/group-action-button.tsx b/packages/pl-fe/src/features/group/components/group-action-button.tsx index 838ebff91..1c6ff5557 100644 --- a/packages/pl-fe/src/features/group/components/group-action-button.tsx +++ b/packages/pl-fe/src/features/group/components/group-action-button.tsx @@ -8,7 +8,7 @@ import Button from 'pl-fe/components/ui/button'; import { importEntities } from 'pl-fe/entity-store/actions'; import { Entities } from 'pl-fe/entity-store/entities'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; import type { Group, GroupRelationship } from 'pl-api'; @@ -30,7 +30,7 @@ const GroupActionButton = ({ group }: IGroupActionButton) => { const dispatch = useAppDispatch(); const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const joinGroup = useJoinGroup(group); const leaveGroup = useLeaveGroup(group); diff --git a/packages/pl-fe/src/features/group/components/group-header.tsx b/packages/pl-fe/src/features/group/components/group-header.tsx index 829e90cbc..aa3f4d9ed 100644 --- a/packages/pl-fe/src/features/group/components/group-header.tsx +++ b/packages/pl-fe/src/features/group/components/group-header.tsx @@ -11,7 +11,7 @@ import Icon from 'pl-fe/components/ui/icon'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import Emojify from 'pl-fe/features/emoji/emojify'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { isDefaultHeader } from 'pl-fe/utils/accounts'; import GroupActionButton from './group-action-button'; @@ -32,7 +32,7 @@ interface IGroupHeader { const GroupHeader: React.FC = ({ group }) => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const [isHeaderMissing, setIsHeaderMissing] = useState(false); diff --git a/packages/pl-fe/src/features/group/components/group-member-list-item.tsx b/packages/pl-fe/src/features/group/components/group-member-list-item.tsx index cbc89bf63..a9dd795f8 100644 --- a/packages/pl-fe/src/features/group/components/group-member-list-item.tsx +++ b/packages/pl-fe/src/features/group/components/group-member-list-item.tsx @@ -15,7 +15,7 @@ import PlaceholderAccount from 'pl-fe/features/placeholder/components/placeholde import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useBlockGroupUserMutation } from 'pl-fe/queries/groups/use-group-blocks'; import { useKickGroupMemberMutation, type MinifiedGroupMember } from 'pl-fe/queries/groups/use-group-members'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; import type { Menu as IMenu } from 'pl-fe/components/dropdown-menu'; @@ -50,7 +50,7 @@ interface IGroupMemberListItem { const GroupMemberListItem = ({ member, group }: IGroupMemberListItem) => { const dispatch = useAppDispatch(); const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { mutate: blockGroupMember } = useBlockGroupUserMutation(group.id, member.account_id); const { mutate: kickGroupMember } = useKickGroupMemberMutation(group.id, member.account_id); diff --git a/packages/pl-fe/src/features/group/components/group-options-button.tsx b/packages/pl-fe/src/features/group/components/group-options-button.tsx index 558bee285..a47a3d551 100644 --- a/packages/pl-fe/src/features/group/components/group-options-button.tsx +++ b/packages/pl-fe/src/features/group/components/group-options-button.tsx @@ -5,7 +5,7 @@ import { defineMessages, useIntl } from 'react-intl'; import { useLeaveGroup } from 'pl-fe/api/hooks/groups/use-leave-group'; import DropdownMenu, { Menu } from 'pl-fe/components/dropdown-menu'; import IconButton from 'pl-fe/components/ui/icon-button'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; const messages = defineMessages({ @@ -22,7 +22,7 @@ interface IGroupActionButton { } const GroupOptionsButton = ({ group }: IGroupActionButton) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const intl = useIntl(); const leaveGroup = useLeaveGroup(group); diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx index 8fd4747e5..f62a3ac9a 100644 --- a/packages/pl-fe/src/features/notifications/components/notification.tsx +++ b/packages/pl-fe/src/features/notifications/components/notification.tsx @@ -18,9 +18,9 @@ import { useInstance } from 'pl-fe/hooks/use-instance'; import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { useFavouriteStatus, useUnfavouriteStatus, useReblogStatus, useUnreblogStatus } from 'pl-fe/queries/statuses/use-status-interactions'; import { makeGetNotification } from 'pl-fe/selectors'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { useSettingsStore } from 'pl-fe/stores/settings'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useStatusMetaActions } from 'pl-fe/stores/status-meta'; import { NotificationType } from 'pl-fe/utils/notification'; import type { NotificationGroup } from 'pl-api'; @@ -214,8 +214,8 @@ const Notification: React.FC = (props) => { const getNotification = useCallback(makeGetNotification(), []); const { me } = useLoggedIn(); - const { toggleStatusesMediaHidden } = useStatusMetaStore(); - const { openModal } = useModalsStore(); + const { toggleStatusesMediaHidden } = useStatusMetaActions(); + const { openModal } = useModalsActions(); const { settings } = useSettingsStore(); const node = useRef(null); diff --git a/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx index c43317682..838c9dba1 100644 --- a/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx +++ b/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx @@ -5,7 +5,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import Button from 'pl-fe/components/ui/button'; import HStack from 'pl-fe/components/ui/hstack'; import { cancelScheduledStatusMutationOptions } from 'pl-fe/queries/statuses/scheduled-statuses'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { useSettingsStore } from 'pl-fe/stores/settings'; import type { Status as StatusEntity } from 'pl-fe/normalizers/status'; @@ -25,7 +25,7 @@ const ScheduledStatusActionBar: React.FC = ({ status const intl = useIntl(); const { mutate: cancelScheduledStatus } = useMutation(cancelScheduledStatusMutationOptions(status.id)); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { settings } = useSettingsStore(); const handleCancelClick = () => { diff --git a/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx b/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx index dd47f33d3..f8d672e06 100644 --- a/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx +++ b/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx @@ -7,7 +7,7 @@ import AnimatedNumber from 'pl-fe/components/animated-number'; import HStack from 'pl-fe/components/ui/hstack'; import Text from 'pl-fe/components/ui/text'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { Status } from 'pl-fe/normalizers/status'; @@ -16,7 +16,7 @@ interface IStatusInteractionBar { } const StatusInteractionBar: React.FC = ({ status }): JSX.Element | null => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const features = useFeatures(); const { account } = status; diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx index 1efcaf2a7..02a8c2876 100644 --- a/packages/pl-fe/src/features/status/components/thread.tsx +++ b/packages/pl-fe/src/features/status/components/thread.tsx @@ -17,9 +17,9 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFavouriteStatus, useReblogStatus, useUnfavouriteStatus, useUnreblogStatus } from 'pl-fe/queries/statuses/use-status-interactions'; import { RootState } from 'pl-fe/store'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { useSettingsStore } from 'pl-fe/stores/settings'; -import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; +import { useStatusMetaActions } from 'pl-fe/stores/status-meta'; import { selectChild } from 'pl-fe/utils/scroll-utils'; import { textForScreenReader } from 'pl-fe/utils/status'; @@ -140,8 +140,8 @@ const Thread = ({ const history = useHistory(); const intl = useIntl(); - const { expandStatuses, revealStatusesMedia, toggleStatusesMediaHidden } = useStatusMetaStore(); - const { openModal } = useModalsStore(); + const { expandStatuses, revealStatusesMedia, toggleStatusesMediaHidden } = useStatusMetaActions(); + const { openModal } = useModalsActions(); const { settings: { boostModal, threads: { displayMode } } } = useSettingsStore(); const { mutate: favouriteStatus } = useFavouriteStatus(status.id); diff --git a/packages/pl-fe/src/features/ui/components/action-button.tsx b/packages/pl-fe/src/features/ui/components/action-button.tsx index de6292a74..51cd01a1f 100644 --- a/packages/pl-fe/src/features/ui/components/action-button.tsx +++ b/packages/pl-fe/src/features/ui/components/action-button.tsx @@ -17,7 +17,7 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { useAcceptFollowRequestMutation, useRejectFollowRequestMutation } from 'pl-fe/queries/accounts/use-follow-requests'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; import type { Account } from 'pl-fe/normalizers/account'; @@ -60,7 +60,7 @@ const ActionButton: React.FC = ({ account, actionType, small = tr const features = useFeatures(); const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { isLoggedIn, me } = useLoggedIn(); const { follow, unfollow } = useFollow(); diff --git a/packages/pl-fe/src/features/ui/components/compose-button.tsx b/packages/pl-fe/src/features/ui/components/compose-button.tsx index e99e10289..3a909c011 100644 --- a/packages/pl-fe/src/features/ui/components/compose-button.tsx +++ b/packages/pl-fe/src/features/ui/components/compose-button.tsx @@ -8,7 +8,7 @@ import Avatar from 'pl-fe/components/ui/avatar'; import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; interface IComposeButton { /** Whether the button should shrink to fit in a smaller space. */ @@ -30,7 +30,7 @@ const ComposeButton: React.FC = ({ shrink }) => { }; const HomeComposeButton: React.FC = ({ shrink }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const onOpenCompose = () => openModal('COMPOSE'); return ( diff --git a/packages/pl-fe/src/features/ui/components/modal-root.tsx b/packages/pl-fe/src/features/ui/components/modal-root.tsx index f48d0b558..91791f79f 100644 --- a/packages/pl-fe/src/features/ui/components/modal-root.tsx +++ b/packages/pl-fe/src/features/ui/components/modal-root.tsx @@ -3,7 +3,7 @@ import React, { Suspense, lazy } from 'react'; import { cancelReplyCompose } from 'pl-fe/actions/compose'; import Base from 'pl-fe/components/modal-root'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModals, useModalsActions } from 'pl-fe/stores/modals'; import ModalLoading from './modal-loading'; @@ -61,7 +61,8 @@ const ModalRoot: React.FC = () => { const renderLoading = (modalId: string) => !['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM'].includes(modalId) ? : null; const dispatch = useAppDispatch(); - const { modals, closeModal } = useModalsStore(); + const modals = useModals(); + const { closeModal } = useModalsActions(); const { modalType: type, modalProps: props } = modals.at(-1) || { modalProps: {}, modalType: null }; const onClickClose = (type?: ModalType) => { diff --git a/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx index 18c215f25..de8ad01f6 100644 --- a/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx @@ -6,7 +6,7 @@ import Text from 'pl-fe/components/ui/text'; import Widget from 'pl-fe/components/ui/widget'; import { type AccountGalleryAttachment, useGroupGallery } from 'pl-fe/hooks/use-account-gallery'; import { MediaItem } from 'pl-fe/pages/accounts/account-gallery'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { Group } from 'pl-fe/normalizers/group'; @@ -15,7 +15,7 @@ interface IGroupMediaPanel { } const GroupMediaPanel: React.FC = ({ group }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data: attachments, isLoading } = useGroupGallery(group.id); diff --git a/packages/pl-fe/src/features/ui/components/panels/instance-moderation-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/instance-moderation-panel.tsx index aca0db0c0..76177b811 100644 --- a/packages/pl-fe/src/features/ui/components/panels/instance-moderation-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/instance-moderation-panel.tsx @@ -7,7 +7,7 @@ import InstanceRestrictions from 'pl-fe/features/federation-restrictions/compone import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { makeGetRemoteInstance } from 'pl-fe/selectors'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; const getRemoteInstance = makeGetRemoteInstance(); @@ -23,7 +23,7 @@ interface IInstanceModerationPanel { /** Widget for moderators to manage a remote instance. */ const InstanceModerationPanel: React.FC = ({ host }) => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { account } = useOwnAccount(); const remoteInstance = useAppSelector(state => getRemoteInstance(state, host)); diff --git a/packages/pl-fe/src/features/ui/components/panels/new-group-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/new-group-panel.tsx index f16e920dc..6c6671a40 100644 --- a/packages/pl-fe/src/features/ui/components/panels/new-group-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/new-group-panel.tsx @@ -4,10 +4,10 @@ import { FormattedMessage } from 'react-intl'; import Button from 'pl-fe/components/ui/button'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; const NewGroupPanel = () => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const createGroup = () => { openModal('CREATE_GROUP'); diff --git a/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx index 772e4a02d..b7871ab7a 100644 --- a/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx @@ -6,7 +6,7 @@ import Text from 'pl-fe/components/ui/text'; import Widget from 'pl-fe/components/ui/widget'; import { type AccountGalleryAttachment, useAccountGallery } from 'pl-fe/hooks/use-account-gallery'; import { MediaItem } from 'pl-fe/pages/accounts/account-gallery'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { Account } from 'pl-fe/normalizers/account'; @@ -15,7 +15,7 @@ interface IProfileMediaPanel { } const ProfileMediaPanel: React.FC = ({ account }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data: attachments, isLoading } = useAccountGallery(account?.id!); diff --git a/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx b/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx index ff68c9f43..f9ef9c333 100644 --- a/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx +++ b/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx @@ -11,7 +11,7 @@ import Emojify from 'pl-fe/features/emoji/emojify'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFamiliarFollowers } from 'pl-fe/queries/accounts/use-familiar-followers'; import { makeGetAccount } from 'pl-fe/selectors'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { Account } from 'pl-fe/normalizers/account'; @@ -22,7 +22,7 @@ interface IProfileFamiliarFollowers { } const ProfileFamiliarFollowers: React.FC = ({ account }) => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data: familiarFollowerIds = [] } = useFamiliarFollowers(account.id); const familiarFollowers = useAppSelector(state => familiarFollowerIds.slice(0, 2).map(accountId => getAccount(state, accountId))); diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx index 4841d6ab8..250e3eb48 100644 --- a/packages/pl-fe/src/features/ui/index.tsx +++ b/packages/pl-fe/src/features/ui/index.tsx @@ -44,7 +44,7 @@ import { queryClient } from 'pl-fe/queries/client'; import { prefetchCustomEmojis } from 'pl-fe/queries/instance/use-custom-emojis'; import { scheduledStatusesQueryOptions } from 'pl-fe/queries/statuses/scheduled-statuses'; import { useShoutboxSubscription } from 'pl-fe/stores/shoutbox'; -import { useUiStore } from 'pl-fe/stores/ui'; +import { useIsDropdownMenuOpen } from 'pl-fe/stores/ui'; import { getVapidKey } from 'pl-fe/utils/auth'; import { isStandalone } from 'pl-fe/utils/state'; @@ -396,7 +396,7 @@ const UI: React.FC = React.memo(({ children }) => { const instance = useInstance(); const { theme } = useSettings(); - const { isDropdownMenuOpen } = useUiStore(); + const isDropdownMenuOpen = useIsDropdownMenuOpen(); const standalone = useAppSelector(isStandalone); useShoutboxSubscription(); diff --git a/packages/pl-fe/src/features/ui/util/global-hotkeys.tsx b/packages/pl-fe/src/features/ui/util/global-hotkeys.tsx index cd1e85593..b2566ba1b 100644 --- a/packages/pl-fe/src/features/ui/util/global-hotkeys.tsx +++ b/packages/pl-fe/src/features/ui/util/global-hotkeys.tsx @@ -5,7 +5,7 @@ import { resetCompose } from 'pl-fe/actions/compose'; import { FOCUS_EDITOR_COMMAND } from 'pl-fe/features/compose/editor/plugins/focus-plugin'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { Hotkeys } from '../components/hotkeys'; @@ -46,7 +46,7 @@ const GlobalHotkeys: React.FC = ({ children, node }) => { const history = useHistory(); const dispatch = useAppDispatch(); const { account } = useOwnAccount(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const handlers = useMemo(() => { const handleHotkeyNew = (e?: KeyboardEvent) => { diff --git a/packages/pl-fe/src/init/pl-fe-head.tsx b/packages/pl-fe/src/init/pl-fe-head.tsx index ad8e44b3c..7352947f8 100644 --- a/packages/pl-fe/src/init/pl-fe-head.tsx +++ b/packages/pl-fe/src/init/pl-fe-head.tsx @@ -8,7 +8,7 @@ import { useSettings } from 'pl-fe/hooks/use-settings'; import { useTheme } from 'pl-fe/hooks/use-theme'; import { useThemeCss } from 'pl-fe/hooks/use-theme-css'; import { startSentry } from 'pl-fe/sentry'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useHasModals } from 'pl-fe/stores/modals'; const Helmet = React.lazy(() => import('pl-fe/components/helmet')); @@ -20,7 +20,7 @@ const PlFeHead = () => { const plFeConfig = usePlFeConfig(); const theme = useTheme(); - const withModals = useModalsStore().modals.length > 0; + const withModals = useHasModals(); const themeCss = useThemeCss(); const dsn = plFeConfig.sentryDsn; diff --git a/packages/pl-fe/src/modals/compose-modal.tsx b/packages/pl-fe/src/modals/compose-modal.tsx index 7460f45cc..b4f8ec048 100644 --- a/packages/pl-fe/src/modals/compose-modal.tsx +++ b/packages/pl-fe/src/modals/compose-modal.tsx @@ -10,7 +10,7 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useCompose } from 'pl-fe/hooks/use-compose'; import { useDraggedFiles } from 'pl-fe/hooks/use-dragged-files'; import { usePersistDraftStatus } from 'pl-fe/queries/statuses/use-draft-statuses'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root'; @@ -29,7 +29,7 @@ const ComposeModal: React.FC = ({ onClose, c const dispatch = useAppDispatch(); const node = useRef(null); const compose = useCompose(composeId); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const persistDraftStatus = usePersistDraftStatus(); const { id: statusId, privacy, in_reply_to: inReplyTo, quote, group_id: groupId } = compose; diff --git a/packages/pl-fe/src/pages/accounts/account-gallery.tsx b/packages/pl-fe/src/pages/accounts/account-gallery.tsx index b7c886d40..fc6edb8db 100644 --- a/packages/pl-fe/src/pages/accounts/account-gallery.tsx +++ b/packages/pl-fe/src/pages/accounts/account-gallery.tsx @@ -15,7 +15,7 @@ import Spinner from 'pl-fe/components/ui/spinner'; import { type AccountGalleryAttachment, useAccountGallery } from 'pl-fe/hooks/use-account-gallery'; import { useSettings } from 'pl-fe/hooks/use-settings'; import { isIOS } from 'pl-fe/is-mobile'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; interface IMediaItem { attachment: AccountGalleryAttachment; @@ -143,7 +143,7 @@ const MediaItem: React.FC = ({ attachment, onOpenMedia, isLast }) => const AccountGalleryPage = () => { const { username } = useParams<{ username: string }>(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { account, diff --git a/packages/pl-fe/src/pages/auth/login.tsx b/packages/pl-fe/src/pages/auth/login.tsx index 175c36257..f9722995e 100644 --- a/packages/pl-fe/src/pages/auth/login.tsx +++ b/packages/pl-fe/src/pages/auth/login.tsx @@ -13,7 +13,7 @@ import LoginForm from 'pl-fe/features/auth-login/components/login-form'; import OtpAuthForm from 'pl-fe/features/auth-login/components/otp-auth-form'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import { getRedirectUrl } from 'pl-fe/utils/redirect'; import { isStandalone } from 'pl-fe/utils/state'; @@ -21,7 +21,7 @@ import type { PlfeResponse } from 'pl-fe/api'; const LoginPage = () => { const dispatch = useAppDispatch(); - const { closeModal } = useModalsStore(); + const { closeModal } = useModalsActions(); const me = useAppSelector((state) => state.me); const standalone = useAppSelector((state) => isStandalone(state)); diff --git a/packages/pl-fe/src/pages/dashboard/announcements.tsx b/packages/pl-fe/src/pages/dashboard/announcements.tsx index 988bc1450..cdf61b66b 100644 --- a/packages/pl-fe/src/pages/dashboard/announcements.tsx +++ b/packages/pl-fe/src/pages/dashboard/announcements.tsx @@ -9,7 +9,7 @@ import HStack from 'pl-fe/components/ui/hstack'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import { useAnnouncements, useDeleteAnnouncementMutation } from 'pl-fe/queries/admin/use-announcements'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; import type { AdminAnnouncement } from 'pl-api'; @@ -29,7 +29,7 @@ interface IAnnouncement { const Announcement: React.FC = ({ announcement }) => { const intl = useIntl(); const { mutate: deleteAnnouncement } = useDeleteAnnouncementMutation(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const handleEditAnnouncement = () => { openModal('EDIT_ANNOUNCEMENT', { announcement }); @@ -94,7 +94,7 @@ const Announcement: React.FC = ({ announcement }) => { const AdminAnnouncementsPage: React.FC = () => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data: announcements = [], isLoading, isPending } = useAnnouncements(); diff --git a/packages/pl-fe/src/pages/dashboard/domains.tsx b/packages/pl-fe/src/pages/dashboard/domains.tsx index 01e24113e..cab7ac381 100644 --- a/packages/pl-fe/src/pages/dashboard/domains.tsx +++ b/packages/pl-fe/src/pages/dashboard/domains.tsx @@ -10,7 +10,7 @@ import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import Indicator from 'pl-fe/features/developers/components/indicator'; import { useDomains } from 'pl-fe/queries/admin/use-domains'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; import type { AdminDomain as DomainEntity } from 'pl-api'; @@ -31,7 +31,7 @@ interface IDomain { const Domain: React.FC = ({ domain }) => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { deleteDomain } = useDomains(); const handleEditDomain = (domain: DomainEntity) => () => { @@ -104,7 +104,7 @@ const Domain: React.FC = ({ domain }) => { const AdminDomainsPage: React.FC = () => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data: domains, isFetching, refetch } = useDomains(); const handleCreateDomain = () => { diff --git a/packages/pl-fe/src/pages/dashboard/report.tsx b/packages/pl-fe/src/pages/dashboard/report.tsx index 8d82f357a..95d84f60b 100644 --- a/packages/pl-fe/src/pages/dashboard/report.tsx +++ b/packages/pl-fe/src/pages/dashboard/report.tsx @@ -19,7 +19,7 @@ import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useReopenReport, useReport, useResolveReport, useSelfAssignReport, useUnassignReport } from 'pl-fe/queries/admin/use-reports'; import { makeGetReport } from 'pl-fe/selectors'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; const messages = defineMessages({ @@ -87,7 +87,7 @@ const ReportPage: React.FC = (props) => { const features = useFeatures(); const intl = useIntl(); const { data: minifiedReport } = useReport(reportId); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const getReport = useCallback(makeGetReport(), []); diff --git a/packages/pl-fe/src/pages/dashboard/rules.tsx b/packages/pl-fe/src/pages/dashboard/rules.tsx index be94e8572..e5ad93189 100644 --- a/packages/pl-fe/src/pages/dashboard/rules.tsx +++ b/packages/pl-fe/src/pages/dashboard/rules.tsx @@ -8,7 +8,7 @@ import HStack from 'pl-fe/components/ui/hstack'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import { useRules } from 'pl-fe/queries/admin/use-rules'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; import type { AdminRule } from 'pl-api'; @@ -27,7 +27,7 @@ interface IRule { const Rule: React.FC = ({ rule }) => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { deleteRule } = useRules(); const handleEditRule = (rule: AdminRule) => () => { @@ -75,7 +75,7 @@ const Rule: React.FC = ({ rule }) => { const RulesPage: React.FC = () => { const intl = useIntl(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data, isLoading } = useRules(); const handleCreateRule = () => { diff --git a/packages/pl-fe/src/pages/fun/circle.tsx b/packages/pl-fe/src/pages/fun/circle.tsx index 5436f03ae..fca439fdf 100644 --- a/packages/pl-fe/src/pages/fun/circle.tsx +++ b/packages/pl-fe/src/pages/fun/circle.tsx @@ -17,7 +17,7 @@ import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; const toRad = (x: number) => x * (Math.PI / 180); @@ -51,7 +51,7 @@ const CirclePage: React.FC = () => { const dispatch = useAppDispatch(); const canvasRef = useRef(null); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { account } = useOwnAccount(); useEffect(() => { diff --git a/packages/pl-fe/src/pages/groups/group-gallery.tsx b/packages/pl-fe/src/pages/groups/group-gallery.tsx index ec20c7928..b1e649df0 100644 --- a/packages/pl-fe/src/pages/groups/group-gallery.tsx +++ b/packages/pl-fe/src/pages/groups/group-gallery.tsx @@ -8,7 +8,7 @@ import Column from 'pl-fe/components/ui/column'; import Spinner from 'pl-fe/components/ui/spinner'; import { type AccountGalleryAttachment, useGroupGallery } from 'pl-fe/hooks/use-account-gallery'; import { MediaItem } from 'pl-fe/pages/accounts/account-gallery'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; interface IGroupGallery { params: { groupId: string }; @@ -17,7 +17,7 @@ interface IGroupGallery { const GroupGallery: React.FC = (props) => { const { groupId } = props.params; - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { group, isLoading: groupIsLoading } = useGroup(groupId); diff --git a/packages/pl-fe/src/pages/groups/groups.tsx b/packages/pl-fe/src/pages/groups/groups.tsx index 7c9236ae3..93d1972a9 100644 --- a/packages/pl-fe/src/pages/groups/groups.tsx +++ b/packages/pl-fe/src/pages/groups/groups.tsx @@ -9,10 +9,10 @@ import Button from 'pl-fe/components/ui/button'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import PlaceholderGroupCard from 'pl-fe/features/placeholder/components/placeholder-group-card'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; const Groups: React.FC = () => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { groups, isLoading, hasNextPage, fetchNextPage } = useGroups(); diff --git a/packages/pl-fe/src/pages/groups/manage-group.tsx b/packages/pl-fe/src/pages/groups/manage-group.tsx index c86380cb3..e653605bb 100644 --- a/packages/pl-fe/src/pages/groups/manage-group.tsx +++ b/packages/pl-fe/src/pages/groups/manage-group.tsx @@ -12,7 +12,7 @@ import Spinner from 'pl-fe/components/ui/spinner'; import Text from 'pl-fe/components/ui/text'; import Emojify from 'pl-fe/features/emoji/emojify'; import ColumnForbidden from 'pl-fe/features/ui/components/column-forbidden'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; type RouteParams = { groupId: string }; @@ -38,7 +38,7 @@ interface IManageGroup { const ManageGroup: React.FC = ({ params }) => { const { groupId: id } = params; - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const history = useHistory(); const intl = useIntl(); diff --git a/packages/pl-fe/src/pages/settings/auth-token-list.tsx b/packages/pl-fe/src/pages/settings/auth-token-list.tsx index b7b832628..a8edf6658 100644 --- a/packages/pl-fe/src/pages/settings/auth-token-list.tsx +++ b/packages/pl-fe/src/pages/settings/auth-token-list.tsx @@ -13,7 +13,7 @@ import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { oauthTokensQueryOptions, revokeOauthTokenMutationOptions } from 'pl-fe/queries/security/oauth-tokens'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import type { OauthToken } from 'pl-api'; @@ -35,7 +35,7 @@ const AuthToken: React.FC = ({ token, isCurrent }) => { const revokeMutation = useMutation(revokeOauthTokenMutationOptions(token.id)); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const handleRevoke = () => { if (isCurrent) diff --git a/packages/pl-fe/src/pages/status-lists/bookmarks.tsx b/packages/pl-fe/src/pages/status-lists/bookmarks.tsx index 15811a1c8..6ea93d4c1 100644 --- a/packages/pl-fe/src/pages/status-lists/bookmarks.tsx +++ b/packages/pl-fe/src/pages/status-lists/bookmarks.tsx @@ -8,7 +8,7 @@ import StatusList from 'pl-fe/components/status-list'; import Column from 'pl-fe/components/ui/column'; import { useBookmarks } from 'pl-fe/queries/status-lists/use-bookmarks'; import { useBookmarkFolder, useDeleteBookmarkFolder } from 'pl-fe/queries/statuses/use-bookmark-folders'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast from 'pl-fe/toast'; const messages = defineMessages({ @@ -34,7 +34,7 @@ const BookmarksPage: React.FC = ({ params }) => { const folderId = params?.id; - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data: folder } = useBookmarkFolder(folderId); const { mutate: deleteBookmarkFolder } = useDeleteBookmarkFolder(); diff --git a/packages/pl-fe/src/pages/statuses/event-information.tsx b/packages/pl-fe/src/pages/statuses/event-information.tsx index 1e4f533da..a6ca1c004 100644 --- a/packages/pl-fe/src/pages/statuses/event-information.tsx +++ b/packages/pl-fe/src/pages/statuses/event-information.tsx @@ -12,7 +12,7 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; import { makeGetStatus } from 'pl-fe/selectors'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; type RouteParams = { statusId: string }; @@ -27,7 +27,7 @@ const EventInformationPage: React.FC = ({ params }) => { const status = useAppSelector(state => getStatus(state, { id: params.statusId }))!; - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { tileServer } = usePlFeConfig(); const [isLoaded, setIsLoaded] = useState(!!status); diff --git a/packages/pl-fe/src/pages/timelines/circle-timeline.tsx b/packages/pl-fe/src/pages/timelines/circle-timeline.tsx index 836c62d40..02060daa8 100644 --- a/packages/pl-fe/src/pages/timelines/circle-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/circle-timeline.tsx @@ -11,7 +11,7 @@ import Spinner from 'pl-fe/components/ui/spinner'; import Timeline from 'pl-fe/features/ui/components/timeline'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useCircle, useDeleteCircle } from 'pl-fe/queries/accounts/use-circles'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; const messages = defineMessages({ deleteHeading: { id: 'confirmations.delete_circle.heading', defaultMessage: 'Delete circle' }, @@ -25,7 +25,7 @@ const CircleTimelinePage: React.FC = () => { const intl = useIntl(); const dispatch = useAppDispatch(); const { id } = useParams<{ id: string }>(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data: circle, isFetching } = useCircle(id); const { mutate: deleteCircle } = useDeleteCircle(); diff --git a/packages/pl-fe/src/pages/timelines/list-timeline.tsx b/packages/pl-fe/src/pages/timelines/list-timeline.tsx index 61a11720a..8a859ccde 100644 --- a/packages/pl-fe/src/pages/timelines/list-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/list-timeline.tsx @@ -12,7 +12,7 @@ import Spinner from 'pl-fe/components/ui/spinner'; import Timeline from 'pl-fe/features/ui/components/timeline'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useDeleteList, useList } from 'pl-fe/queries/accounts/use-lists'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; const messages = defineMessages({ deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' }, @@ -26,7 +26,7 @@ const ListTimelinePage: React.FC = () => { const intl = useIntl(); const dispatch = useAppDispatch(); const { id } = useParams<{ id: string }>(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); const { data: list, isFetching } = useList(id); const { mutate: deleteList } = useDeleteList(); diff --git a/packages/pl-fe/src/pages/utils/new-status.tsx b/packages/pl-fe/src/pages/utils/new-status.tsx index 17c6c7589..fc46fef8c 100644 --- a/packages/pl-fe/src/pages/utils/new-status.tsx +++ b/packages/pl-fe/src/pages/utils/new-status.tsx @@ -1,10 +1,10 @@ import React, { useEffect } from 'react'; import { Redirect } from 'react-router-dom'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; const NewStatusPage = () => { - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); useEffect(() => { openModal('COMPOSE'); diff --git a/packages/pl-fe/src/queries/statuses/use-status-interactions.ts b/packages/pl-fe/src/queries/statuses/use-status-interactions.ts index 1a11f7299..7f19b5448 100644 --- a/packages/pl-fe/src/queries/statuses/use-status-interactions.ts +++ b/packages/pl-fe/src/queries/statuses/use-status-interactions.ts @@ -9,7 +9,7 @@ import { useFeatures } from 'pl-fe/hooks/use-features'; import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { makePaginatedResponseQuery } from 'pl-fe/queries/utils/make-paginated-response-query'; import { minifyAccountList } from 'pl-fe/queries/utils/minify-list'; -import { useModalsStore } from 'pl-fe/stores/modals'; +import { useModalsActions } from 'pl-fe/stores/modals'; import toast, { IToastOptions } from 'pl-fe/toast'; import { filterById } from '../utils/filter-id'; @@ -161,7 +161,7 @@ const useBookmarkStatus = (statusId: string) => { const dispatch = useAppDispatch(); const queryClient = useQueryClient(); const features = useFeatures(); - const { openModal } = useModalsStore(); + const { openModal } = useModalsActions(); let previouslyBookmarked = false; let previousFolder: string | null; diff --git a/packages/pl-fe/src/stores/account-hover-card.ts b/packages/pl-fe/src/stores/account-hover-card.ts index f1390b4db..a639dbed8 100644 --- a/packages/pl-fe/src/stores/account-hover-card.ts +++ b/packages/pl-fe/src/stores/account-hover-card.ts @@ -4,28 +4,34 @@ type State = { ref: React.MutableRefObject | null; accountId: string | null; hovered: boolean; - openAccountHoverCard: (ref: React.MutableRefObject, accountId: string) => void; - updateAccountHoverCard: () => void; - closeAccountHoverCard: (force?: boolean) => void; + actions: { + openAccountHoverCard: (ref: React.MutableRefObject, accountId: string) => void; + updateAccountHoverCard: () => void; + closeAccountHoverCard: (force?: boolean) => void; + }; } const useAccountHoverCardStore = create((set) => ({ ref: null, accountId: null, hovered: false, - openAccountHoverCard: (ref, accountId) => set({ - ref, - accountId, - }), - updateAccountHoverCard: () => set({ - hovered: true, - }), - closeAccountHoverCard: (force = false) => set((state) => state.hovered && !force ? {} : { - ref: null, - accountId: null, - hovered: false, - }), + actions: { + openAccountHoverCard: (ref, accountId) => set({ + ref, + accountId, + }), + updateAccountHoverCard: () => set({ + hovered: true, + }), + closeAccountHoverCard: (force = false) => set((state) => state.hovered && !force ? {} : { + ref: null, + accountId: null, + hovered: false, + }), + }, })); -export { useAccountHoverCardStore }; +const useAccountHoverCardActions = () => useAccountHoverCardStore((state) => state.actions); + +export { useAccountHoverCardStore, useAccountHoverCardActions }; diff --git a/packages/pl-fe/src/stores/modals.ts b/packages/pl-fe/src/stores/modals.ts index b485abe04..d8a3871a9 100644 --- a/packages/pl-fe/src/stores/modals.ts +++ b/packages/pl-fe/src/stores/modals.ts @@ -85,37 +85,45 @@ type Modals = Array<{ type State = { modals: Modals; - /** Open a modal of the given type */ - openModal: (...[modalType, modalProps]: OpenModalProps) => void; - /** Close the modal */ - closeModal: (modalType?: ModalType) => void; + actions: { + /** Open a modal of the given type */ + openModal: (...[modalType, modalProps]: OpenModalProps) => void; + /** Close the modal */ + closeModal: (modalType?: ModalType) => void; + }; }; const useModalsStore = create()(mutative((set) => ({ modals: [], - openModal: (...[modalType, modalProps]) => set((state: State) => { - state.modals.push({ modalType, modalProps }); - }), - closeModal: (modalType) => set((state: State) => { - if (state.modals.length === 0) { - return; - } - let closedModal: Record | undefined; - if (modalType === undefined) { - closedModal = state.modals[state.modals.length - 1].modalProps; - state.modals = state.modals.slice(0, -1); - } else if (state.modals.some((modal) => modalType === modal.modalType)) { - const lastIndex = state.modals.findLastIndex((modal) => modalType === modal.modalType); - closedModal = state.modals[lastIndex].modalProps; - state.modals = state.modals.slice(0, lastIndex); - } - if (closedModal?.element) { - const element = closedModal.element; - setTimeout(() => element.focus(), 0); - } - }), + actions: { + openModal: (...[modalType, modalProps]) => set((state: State) => { + state.modals.push({ modalType, modalProps }); + }), + closeModal: (modalType) => set((state: State) => { + if (state.modals.length === 0) { + return; + } + let closedModal: Record | undefined; + if (modalType === undefined) { + closedModal = state.modals[state.modals.length - 1].modalProps; + state.modals = state.modals.slice(0, -1); + } else if (state.modals.some((modal) => modalType === modal.modalType)) { + const lastIndex = state.modals.findLastIndex((modal) => modalType === modal.modalType); + closedModal = state.modals[lastIndex].modalProps; + state.modals = state.modals.slice(0, lastIndex); + } + if (closedModal?.element) { + const element = closedModal.element; + setTimeout(() => element.focus(), 0); + } + }), + }, }), { enableAutoFreeze: false, })); -export { useModalsStore }; +const useModalsActions = () => useModalsStore((state) => state.actions); +const useModals = () => useModalsStore((state) => state.modals); +const useHasModals = () => useModals().length > 0; + +export { useModalsStore, useModalsActions, useModals, useHasModals }; diff --git a/packages/pl-fe/src/stores/settings.ts b/packages/pl-fe/src/stores/settings.ts index a3792834f..bdfa2171e 100644 --- a/packages/pl-fe/src/stores/settings.ts +++ b/packages/pl-fe/src/stores/settings.ts @@ -181,4 +181,6 @@ const useSettingsStore = create()(mutative((set) => ({ }), }), { enableAutoFreeze: true })); -export { useSettingsStore }; +const useSettings = () => useSettingsStore().settings; + +export { useSettingsStore, useSettings }; diff --git a/packages/pl-fe/src/stores/shoutbox.ts b/packages/pl-fe/src/stores/shoutbox.ts index 7bc79504a..676752aa3 100644 --- a/packages/pl-fe/src/stores/shoutbox.ts +++ b/packages/pl-fe/src/stores/shoutbox.ts @@ -24,36 +24,45 @@ type State = { socket: ReturnType<(InstanceType)['shoutbox']['connect']> | null; messages: Array; isLoading: boolean; - setMessages: (messages: Array) => void; - pushMessage: (message: BaseShoutMessage) => void; - setSocket: (socket: State['socket']) => void; + actions: { + setMessages: (messages: Array) => void; + pushMessage: (message: BaseShoutMessage) => void; + setSocket: (socket: State['socket']) => void; + }; }; const useShoutboxStore = create()(mutative((set) => ({ socket: null, messages: [], isLoading: true, - setMessages: (messages) => set((state: State) => { - lazyStore?.dispatch(importEntities({ accounts: messages.map((msg) => msg.author) }, { override: false }) as any); - state.messages = messages.map(minifyMessage); - state.isLoading = false; - }), - pushMessage: (message) => set((state: State) => { - lazyStore?.dispatch(importEntities({ accounts: [message.author] }) as any); - state.messages.push(minifyMessage(message)); - }), - setSocket: (socket) => set((state: State) => { - state.socket = socket; - }), + actions: { + setMessages: (messages) => set((state: State) => { + lazyStore?.dispatch(importEntities({ accounts: messages.map((msg) => msg.author) }, { override: false }) as any); + state.messages = messages.map(minifyMessage); + state.isLoading = false; + }), + pushMessage: (message) => set((state: State) => { + lazyStore?.dispatch(importEntities({ accounts: [message.author] }) as any); + state.messages.push(minifyMessage(message)); + }), + setSocket: (socket) => set((state: State) => { + state.socket = socket; + }), + }, }), { enableAutoFreeze: false, })); +const useShoutboxMessages = () => useShoutboxStore((state) => state.messages); +const useShoutboxIsLoading = () => useShoutboxStore((state) => state.isLoading); +const useShoutboxSocket = () => useShoutboxStore((state) => state.socket); +const useShoutboxActions = () => useShoutboxStore((state) => state.actions); + const useShoutboxSubscription = () => { const client = useClient(); const { shoutbox: shoutboxAvailable } = useFeatures(); const { isLoggedIn } = useLoggedIn(); - const shoutboxStore = useShoutboxStore(); + const shoutboxStore = useShoutboxActions(); useEffect(() => { if (!(shoutboxAvailable && isLoggedIn)) return; @@ -78,8 +87,8 @@ const useShoutboxSubscription = () => { }; const useCreateShoutboxMessage = () => { - const { socket } = useShoutboxStore(); + const socket = useShoutboxSocket(); return { mutate: socket?.message }; }; -export { useShoutboxStore, useShoutboxSubscription, useCreateShoutboxMessage, type ShoutMessage }; +export { useShoutboxStore, useShoutboxMessages, useShoutboxIsLoading, useShoutboxSubscription, useCreateShoutboxMessage, type ShoutMessage }; diff --git a/packages/pl-fe/src/stores/status-hover-card.ts b/packages/pl-fe/src/stores/status-hover-card.ts index d2b5be5a6..8abae14e6 100644 --- a/packages/pl-fe/src/stores/status-hover-card.ts +++ b/packages/pl-fe/src/stores/status-hover-card.ts @@ -4,28 +4,34 @@ type State = { ref: React.MutableRefObject | null; statusId: string | null; hovered: boolean; - openStatusHoverCard: (ref: React.MutableRefObject, statusId: string) => void; - updateStatusHoverCard: () => void; - closeStatusHoverCard: (force?: boolean) => void; + actions: { + openStatusHoverCard: (ref: React.MutableRefObject, statusId: string) => void; + updateStatusHoverCard: () => void; + closeStatusHoverCard: (force?: boolean) => void; + }; } const useStatusHoverCardStore = create((set) => ({ ref: null, statusId: null, hovered: false, - openStatusHoverCard: (ref, statusId) => set({ - ref, - statusId, - }), - updateStatusHoverCard: () => set({ - hovered: true, - }), - closeStatusHoverCard: (force = false) => set((state) => state.hovered && !force ? {} : { - ref: null, - statusId: null, - hovered: false, - }), + actions: { + openStatusHoverCard: (ref, statusId) => set({ + ref, + statusId, + }), + updateStatusHoverCard: () => set({ + hovered: true, + }), + closeStatusHoverCard: (force = false) => set((state) => state.hovered && !force ? {} : { + ref: null, + statusId: null, + hovered: false, + }), + }, })); -export { useStatusHoverCardStore }; +const useStatusHoverCardActions = () => useStatusHoverCardStore((state) => state.actions); + +export { useStatusHoverCardStore, useStatusHoverCardActions }; diff --git a/packages/pl-fe/src/stores/status-meta.ts b/packages/pl-fe/src/stores/status-meta.ts index 63182b852..bcf1e5a9d 100644 --- a/packages/pl-fe/src/stores/status-meta.ts +++ b/packages/pl-fe/src/stores/status-meta.ts @@ -9,74 +9,81 @@ type State = { targetLanguage?: string; showPollResults?: boolean; }>; - expandStatuses: (statusIds: Array) => void; - collapseStatuses: (statusIds: Array) => void; - revealStatusesMedia: (statusIds: Array) => void; - hideStatusesMedia: (statusIds: Array) => void; - toggleStatusesMediaHidden: (statusIds: Array) => void; - fetchTranslation: (statusId: string, targetLanguage: string) => void; - hideTranslation: (statusId: string) => void; - setStatusLanguage: (statusId: string, language: string) => void; - toggleShowPollResults: (statusId: string) => void; + actions: { + expandStatuses: (statusIds: Array) => void; + collapseStatuses: (statusIds: Array) => void; + revealStatusesMedia: (statusIds: Array) => void; + hideStatusesMedia: (statusIds: Array) => void; + toggleStatusesMediaHidden: (statusIds: Array) => void; + fetchTranslation: (statusId: string, targetLanguage: string) => void; + hideTranslation: (statusId: string) => void; + setStatusLanguage: (statusId: string, language: string) => void; + toggleShowPollResults: (statusId: string) => void; + }; }; const useStatusMetaStore = create()(mutative((set) => ({ statuses: {}, - expandStatuses: (statusIds) => set((state: State) => { - for (const statusId of statusIds) { + actions: { + expandStatuses: (statusIds) => set((state: State) => { + for (const statusId of statusIds) { + if (!state.statuses[statusId]) state.statuses[statusId] = {}; + + state.statuses[statusId].expanded = true; + } + }), + collapseStatuses: (statusIds) => set((state: State) => { + for (const statusId of statusIds) { + if (!state.statuses[statusId]) state.statuses[statusId] = {}; + + state.statuses[statusId].expanded = false; + } + }), + revealStatusesMedia: (statusIds) => set((state: State) => { + for (const statusId of statusIds) { + if (!state.statuses[statusId]) state.statuses[statusId] = {}; + + state.statuses[statusId].mediaVisible = true; + } + }), + hideStatusesMedia: (statusIds) => set((state: State) => { + for (const statusId of statusIds) { + if (!state.statuses[statusId]) state.statuses[statusId] = {}; + + state.statuses[statusId].mediaVisible = false; + } + }), + toggleStatusesMediaHidden: (statusIds) => (state: State) => { + for (const statusId of statusIds) { + if (!state.statuses[statusId]) state.statuses[statusId] = {}; + + state.statuses[statusId].mediaVisible = !state.statuses[statusId].mediaVisible; + } + }, + fetchTranslation: (statusId, targetLanguage) => set((state: State) => { if (!state.statuses[statusId]) state.statuses[statusId] = {}; - state.statuses[statusId].expanded = true; - } - }), - collapseStatuses: (statusIds) => set((state: State) => { - for (const statusId of statusIds) { + state.statuses[statusId].targetLanguage = targetLanguage; + }), + hideTranslation: (statusId) => set((state: State) => { if (!state.statuses[statusId]) state.statuses[statusId] = {}; - state.statuses[statusId].expanded = false; - } - }), - revealStatusesMedia: (statusIds) => set((state: State) => { - for (const statusId of statusIds) { + state.statuses[statusId].targetLanguage = undefined; + }), + setStatusLanguage: (statusId, language) => set((state: State) => { if (!state.statuses[statusId]) state.statuses[statusId] = {}; - state.statuses[statusId].mediaVisible = true; - } - }), - hideStatusesMedia: (statusIds) => set((state: State) => { - for (const statusId of statusIds) { + state.statuses[statusId].currentLanguage = language; + }), + toggleShowPollResults: (statusId) => set((state: State) => { if (!state.statuses[statusId]) state.statuses[statusId] = {}; - state.statuses[statusId].mediaVisible = false; - } - }), - toggleStatusesMediaHidden: (statusIds) => (state: State) => { - for (const statusId of statusIds) { - if (!state.statuses[statusId]) state.statuses[statusId] = {}; - - state.statuses[statusId].mediaVisible = !state.statuses[statusId].mediaVisible; - } + state.statuses[statusId].showPollResults = !state.statuses[statusId].showPollResults; + }), }, - fetchTranslation: (statusId, targetLanguage) => set((state: State) => { - if (!state.statuses[statusId]) state.statuses[statusId] = {}; - - state.statuses[statusId].targetLanguage = targetLanguage; - }), - hideTranslation: (statusId) => set((state: State) => { - if (!state.statuses[statusId]) state.statuses[statusId] = {}; - - state.statuses[statusId].targetLanguage = undefined; - }), - setStatusLanguage: (statusId, language) => set((state: State) => { - if (!state.statuses[statusId]) state.statuses[statusId] = {}; - - state.statuses[statusId].currentLanguage = language; - }), - toggleShowPollResults: (statusId) => set((state: State) => { - if (!state.statuses[statusId]) state.statuses[statusId] = {}; - - state.statuses[statusId].showPollResults = !state.statuses[statusId].showPollResults; - }), }))); -export { useStatusMetaStore }; +const useStatusMeta = (statusId: string) => useStatusMetaStore((state) => state.statuses[statusId] || {}); +const useStatusMetaActions = () => useStatusMetaStore((state) => state.actions); + +export { useStatusMetaStore, useStatusMeta, useStatusMetaActions }; diff --git a/packages/pl-fe/src/stores/ui.ts b/packages/pl-fe/src/stores/ui.ts index 1e57b00b4..e0fcc056a 100644 --- a/packages/pl-fe/src/stores/ui.ts +++ b/packages/pl-fe/src/stores/ui.ts @@ -2,21 +2,29 @@ import { create } from 'zustand'; type State = { isDropdownMenuOpen: boolean; + isSidebarOpen: boolean; + actions: { openDropdownMenu: () => void; closeDropdownMenu: () => void; - isSidebarOpen: boolean; openSidebar: () => void; closeSidebar: () => void; + }; } const useUiStore = create((set) => ({ isDropdownMenuOpen: false, - openDropdownMenu: () => set({ isDropdownMenuOpen: true }), - closeDropdownMenu: () => set({ isDropdownMenuOpen: false }), isSidebarOpen: false, - openSidebar: () => set({ isSidebarOpen: true }), - closeSidebar: () => set({ isSidebarOpen: false }), + actions: { + openDropdownMenu: () => set({ isDropdownMenuOpen: true }), + closeDropdownMenu: () => set({ isDropdownMenuOpen: false }), + openSidebar: () => set({ isSidebarOpen: true }), + closeSidebar: () => set({ isSidebarOpen: false }), + }, })); -export { useUiStore }; +const useIsDropdownMenuOpen = () => useUiStore((state) => state.isDropdownMenuOpen); +const useIsSidebarOpen = () => useUiStore((state) => state.isSidebarOpen); +const useUiStoreActions = () => useUiStore((state) => state.actions); + +export { useUiStore, useUiStoreActions, useIsDropdownMenuOpen, useIsSidebarOpen };