From 1f8b79f309d26bea2b545c4d041fa3bf9cb288bc Mon Sep 17 00:00:00 2001 From: mkljczk Date: Tue, 3 Dec 2024 15:03:17 +0100 Subject: [PATCH] pl-fe: migrate /api/v*/instance to tanstack query Signed-off-by: mkljczk --- packages/pl-fe/index.html | 2 + packages/pl-fe/src/actions/admin.ts | 2 + packages/pl-fe/src/actions/auth.ts | 8 +- packages/pl-fe/src/actions/compose.ts | 5 +- packages/pl-fe/src/actions/consumer-auth.ts | 13 ++- packages/pl-fe/src/actions/instance.ts | 40 +------ packages/pl-fe/src/actions/media.ts | 11 +- packages/pl-fe/src/actions/preload.ts | 2 + .../actions/push-notifications/registerer.ts | 12 +-- .../src/api/hooks/instance/use-instance.ts | 23 ++++ .../instance/use-translation-languages.ts | 4 +- .../hooks/streaming/use-timeline-stream.ts | 4 +- .../pl-fe/src/components/birthday-input.tsx | 4 +- packages/pl-fe/src/components/gdpr-banner.tsx | 4 +- packages/pl-fe/src/components/helmet.tsx | 4 +- .../pl-fe/src/components/sidebar-menu.tsx | 4 +- .../src/components/sidebar-navigation.tsx | 4 +- .../src/components/status-action-bar.tsx | 4 +- .../pl-fe/src/components/translate-button.tsx | 4 +- .../components/registration-mode-picker.tsx | 4 +- .../src/features/admin/tabs/dashboard.tsx | 4 +- .../auth-login/components/consumers-list.tsx | 4 +- .../auth-login/components/login-page.tsx | 6 -- .../components/registration-form.tsx | 4 +- .../components/registration-page.tsx | 4 +- .../chats/components/chat-composer.tsx | 4 +- .../components/upload-button.tsx | 4 +- .../compose/components/compose-form.tsx | 4 +- .../components/content-type-button.tsx | 4 +- .../compose/components/polls/poll-form.tsx | 4 +- .../compose/components/upload-button.tsx | 4 +- .../features/compose/components/upload.tsx | 4 +- .../features/compose/editor/nodes/index.ts | 4 +- .../floating-block-type-toolbar-plugin.tsx | 6 +- .../floating-text-format-toolbar-plugin.tsx | 4 +- .../components/crypto-donate-panel.tsx | 4 +- .../src/features/crypto-donate/index.tsx | 4 +- .../pl-fe/src/features/directory/index.tsx | 4 +- .../pl-fe/src/features/edit-profile/index.tsx | 7 +- .../components/instance-restrictions.tsx | 4 +- .../components/restricted-instance.tsx | 4 +- .../federation-restrictions/index.tsx | 8 +- .../pl-fe/src/features/group/edit-group.tsx | 7 +- .../src/features/home-timeline/index.tsx | 4 +- .../components/site-banner.tsx | 4 +- .../src/features/landing-timeline/index.tsx | 4 +- .../pl-fe/src/features/migration/index.tsx | 4 +- .../notifications/components/notification.tsx | 4 +- .../onboarding/steps/fediverse-step.tsx | 4 +- .../pl-fe/src/features/preferences/index.tsx | 4 +- .../src/features/public-timeline/index.tsx | 4 +- .../src/features/register-invite/index.tsx | 4 +- .../pl-fe/src/features/server-info/index.tsx | 4 +- .../status/components/thread-login-cta.tsx | 4 +- .../modals/edit-federation-modal.tsx | 4 +- .../manage-group-modal/steps/details-step.tsx | 7 +- .../components/modals/report-modal/index.tsx | 4 +- .../modals/report-modal/steps/reason-step.tsx | 4 +- .../components/modals/unauthorized-modal.tsx | 4 +- .../components/panels/instance-info-panel.tsx | 4 +- .../panels/instance-moderation-panel.tsx | 4 +- .../ui/components/panels/promo-panel.tsx | 4 +- .../ui/components/panels/sign-up-panel.tsx | 10 +- packages/pl-fe/src/features/ui/index.tsx | 10 +- packages/pl-fe/src/hooks/use-features.ts | 3 +- packages/pl-fe/src/hooks/use-instance.ts | 6 -- .../src/hooks/use-registration-status.ts | 5 +- packages/pl-fe/src/hooks/use-vapid-key.ts | 11 ++ packages/pl-fe/src/init/pl-fe-load.tsx | 6 +- packages/pl-fe/src/initial-state.ts | 11 ++ .../src/layouts/remote-instance-layout.tsx | 4 +- packages/pl-fe/src/reducers/compose.ts | 15 ++- packages/pl-fe/src/reducers/index.ts | 6 +- packages/pl-fe/src/reducers/instance.ts | 100 +----------------- packages/pl-fe/src/reducers/meta.ts | 14 +-- packages/pl-fe/src/selectors/index.ts | 8 +- packages/pl-fe/src/utils/auth.ts | 5 - packages/pl-fe/src/utils/scopes.ts | 15 ++- packages/pl-fe/src/utils/state.ts | 5 +- 79 files changed, 240 insertions(+), 337 deletions(-) create mode 100644 packages/pl-fe/src/api/hooks/instance/use-instance.ts delete mode 100644 packages/pl-fe/src/hooks/use-instance.ts create mode 100644 packages/pl-fe/src/hooks/use-vapid-key.ts create mode 100644 packages/pl-fe/src/initial-state.ts diff --git a/packages/pl-fe/index.html b/packages/pl-fe/index.html index 9b173ed0d..c7a0d3fcd 100644 --- a/packages/pl-fe/index.html +++ b/packages/pl-fe/index.html @@ -11,6 +11,8 @@ <%- snippets %> +
diff --git a/packages/pl-fe/src/actions/admin.ts b/packages/pl-fe/src/actions/admin.ts index ee97042b0..eb0b33bc9 100644 --- a/packages/pl-fe/src/actions/admin.ts +++ b/packages/pl-fe/src/actions/admin.ts @@ -1,5 +1,6 @@ import { fetchRelationships } from 'pl-fe/actions/accounts'; import { importEntities } from 'pl-fe/actions/importer'; +import { queryClient } from 'pl-fe/queries/client'; import { filterBadges, getTagDiff } from 'pl-fe/utils/badges'; import { getClient } from '../api'; @@ -83,6 +84,7 @@ const updateConfig = (configs: PleromaConfig['configs']) => dispatch({ type: ADMIN_CONFIG_UPDATE_REQUEST, configs }); return getClient(getState).admin.config.updatePleromaConfig(configs) .then((data) => { + queryClient.invalidateQueries({ queryKey: ['instance', 'instanceInformation'] }); dispatch({ type: ADMIN_CONFIG_UPDATE_SUCCESS, configs: data.configs, needsReboot: data.need_reboot }); }).catch(error => { dispatch({ type: ADMIN_CONFIG_UPDATE_FAIL, error, configs }); diff --git a/packages/pl-fe/src/actions/auth.ts b/packages/pl-fe/src/actions/auth.ts index a0d6da0bc..5842dcf57 100644 --- a/packages/pl-fe/src/actions/auth.ts +++ b/packages/pl-fe/src/actions/auth.ts @@ -93,7 +93,7 @@ const createAuthApp = () => const params = { client_name: `${sourceCode.displayName} (${new URL(window.origin).host})`, redirect_uris: 'urn:ietf:wg:oauth:2.0:oob', - scopes: getScopes(getState()), + scopes: getScopes(), website: sourceCode.homepage, }; @@ -117,7 +117,7 @@ const createAppToken = () => client_secret: app.client_secret!, redirect_uri: 'urn:ietf:wg:oauth:2.0:oob', grant_type: 'client_credentials', - scope: getScopes(getState()), + scope: getScopes(), }; return dispatch(obtainOAuthToken(params)).then((token) => @@ -136,7 +136,7 @@ const createUserToken = (username: string, password: string) => grant_type: 'password', username: username, password: password, - scope: getScopes(getState()), + scope: getScopes(), }; return dispatch(obtainOAuthToken(params)) @@ -156,7 +156,7 @@ const otpVerify = (code: string, mfa_token: string) => code: code, challenge_type: 'totp', // redirect_uri: 'urn:ietf:wg:oauth:2.0:oob', - // scope: getScopes(getState()), + // scope: getScopes(), }).then((token) => dispatch(authLoggedIn(token))); }; diff --git a/packages/pl-fe/src/actions/compose.ts b/packages/pl-fe/src/actions/compose.ts index 3d8fb8fed..c4055cd89 100644 --- a/packages/pl-fe/src/actions/compose.ts +++ b/packages/pl-fe/src/actions/compose.ts @@ -20,7 +20,7 @@ import { uploadFile, updateMedia } from './media'; import { createStatus } from './statuses'; import type { EditorState } from 'lexical'; -import type { Account as BaseAccount, CreateStatusParams, Group, MediaAttachment, Status as BaseStatus, Tag, Poll, ScheduledStatus } from 'pl-api'; +import type { Account as BaseAccount, CreateStatusParams, Group, MediaAttachment, Status as BaseStatus, Tag, Poll, ScheduledStatus, Instance } from 'pl-api'; import type { AutoSuggestion } from 'pl-fe/components/autosuggest-input'; import type { Emoji } from 'pl-fe/features/emoji'; import type { Account } from 'pl-fe/normalizers/account'; @@ -467,7 +467,8 @@ const submitComposeFail = (composeId: string, error: unknown) => ({ const uploadCompose = (composeId: string, files: FileList, intl: IntlShape) => (dispatch: AppDispatch, getState: () => RootState) => { if (!isLoggedIn(getState)) return; - const attachmentLimit = getState().instance.configuration.statuses.max_media_attachments; + const instance = queryClient.getQueryData(['instance', 'instanceInformation', getState().auth.client.baseURL]); + const attachmentLimit = instance!.configuration.statuses.max_media_attachments; const media = getState().compose[composeId]?.media_attachments; const progress = new Array(files.length).fill(0); diff --git a/packages/pl-fe/src/actions/consumer-auth.ts b/packages/pl-fe/src/actions/consumer-auth.ts index 4e66b343d..b527ac1c0 100644 --- a/packages/pl-fe/src/actions/consumer-auth.ts +++ b/packages/pl-fe/src/actions/consumer-auth.ts @@ -1,17 +1,19 @@ +import { Instance } from 'pl-api'; import queryString from 'query-string'; import * as BuildConfig from 'pl-fe/build-config'; +import { queryClient } from 'pl-fe/queries/client'; import { isURL } from 'pl-fe/utils/auth'; import sourceCode from 'pl-fe/utils/code'; -import { getScopes } from 'pl-fe/utils/scopes'; +import { getInstanceScopes } from 'pl-fe/utils/scopes'; import { createApp } from './apps'; import type { AppDispatch, RootState } from 'pl-fe/store'; -const createProviderApp = () => +const createProviderApp = (instance: Instance) => async(dispatch: AppDispatch, getState: () => RootState) => { - const scopes = getScopes(getState()); + const scopes = getInstanceScopes(instance); const params = { client_name: `${sourceCode.displayName} (${new URL(window.origin).host})`, @@ -27,8 +29,9 @@ const prepareRequest = (provider: string) => async(dispatch: AppDispatch, getState: () => RootState) => { const baseURL = isURL(BuildConfig.BACKEND_URL) ? BuildConfig.BACKEND_URL : ''; - const scopes = getScopes(getState()); - const app = await dispatch(createProviderApp()); + const instance = queryClient.getQueryData(['instance', 'instanceInformation', baseURL])!; + const scopes = getInstanceScopes(instance); + const app = await dispatch(createProviderApp(instance)); const { client_id, redirect_uri } = app; localStorage.setItem('plfe:external:app', JSON.stringify(app)); diff --git a/packages/pl-fe/src/actions/instance.ts b/packages/pl-fe/src/actions/instance.ts index 4363b121e..5e2a0d1c0 100644 --- a/packages/pl-fe/src/actions/instance.ts +++ b/packages/pl-fe/src/actions/instance.ts @@ -1,12 +1,6 @@ import { getAuthUserUrl, getMeUrl } from 'pl-fe/utils/auth'; -import { getClient } from '../api'; - -import type { Instance } from 'pl-api'; -import type { AppDispatch, RootState } from 'pl-fe/store'; - -const INSTANCE_FETCH_SUCCESS = 'INSTANCE_FETCH_SUCCESS' as const; -const INSTANCE_FETCH_FAIL = 'INSTANCE_FETCH_FAIL' as const; +import type { RootState } from 'pl-fe/store'; /** Figure out the appropriate instance to fetch depending on the state */ const getHost = (state: RootState) => { @@ -19,34 +13,4 @@ const getHost = (state: RootState) => { } }; -interface InstanceFetchSuccessAction { - type: typeof INSTANCE_FETCH_SUCCESS; - instance: Instance; -} - -interface InstanceFetchFailAction { - type: typeof INSTANCE_FETCH_FAIL; - error: unknown; -} - -const fetchInstance = () => async (dispatch: AppDispatch, getState: () => RootState) => { - try { - const instance = await getClient(getState).instance.getInstance(); - - dispatch({ type: INSTANCE_FETCH_SUCCESS, instance }); - } catch (error) { - dispatch({ type: INSTANCE_FETCH_FAIL, error }); - } -}; - -type InstanceAction = - InstanceFetchSuccessAction - | InstanceFetchFailAction - -export { - INSTANCE_FETCH_SUCCESS, - INSTANCE_FETCH_FAIL, - getHost, - fetchInstance, - type InstanceAction, -}; +export { getHost }; diff --git a/packages/pl-fe/src/actions/media.ts b/packages/pl-fe/src/actions/media.ts index 0879dfe6f..2f1b89dd5 100644 --- a/packages/pl-fe/src/actions/media.ts +++ b/packages/pl-fe/src/actions/media.ts @@ -1,5 +1,6 @@ import { defineMessages, type IntlShape } from 'react-intl'; +import { queryClient } from 'pl-fe/queries/client'; import toast from 'pl-fe/toast'; import { isLoggedIn } from 'pl-fe/utils/auth'; import { formatBytes, getVideoDuration } from 'pl-fe/utils/media'; @@ -7,7 +8,7 @@ import resizeImage from 'pl-fe/utils/resize-image'; import { getClient } from '../api'; -import type { MediaAttachment, UploadMediaParams } from 'pl-api'; +import type { Instance, MediaAttachment, UploadMediaParams } from 'pl-api'; import type { AppDispatch, RootState } from 'pl-fe/store'; const messages = defineMessages({ @@ -35,9 +36,11 @@ const uploadFile = ( changeTotal: (value: number) => void = () => {}, ) => async (dispatch: AppDispatch, getState: () => RootState) => { if (!isLoggedIn(getState)) return; - const maxImageSize = getState().instance.configuration.media_attachments.image_size_limit; - const maxVideoSize = getState().instance.configuration.media_attachments.video_size_limit; - const maxVideoDuration = getState().instance.configuration.media_attachments.video_duration_limit; + const instance = queryClient.getQueryData(['instance', 'instanceInformation', getState().auth.client.baseURL])!; + + const { + image_size_limit: maxImageSize, video_size_limit: maxVideoSize, video_duration_limit: maxVideoDuration, + } = instance.configuration.media_attachments; const isImage = file.type.match(/image.*/); const isVideo = file.type.match(/video.*/); diff --git a/packages/pl-fe/src/actions/preload.ts b/packages/pl-fe/src/actions/preload.ts index e20095cfb..f2567265a 100644 --- a/packages/pl-fe/src/actions/preload.ts +++ b/packages/pl-fe/src/actions/preload.ts @@ -67,6 +67,8 @@ interface PreloadAction { export { PLEROMA_PRELOAD_IMPORT, MASTODON_PRELOAD_IMPORT, + decodeFromMarkup, + pleromaDecoder, preload, preloadMastodon, type PreloadAction, diff --git a/packages/pl-fe/src/actions/push-notifications/registerer.ts b/packages/pl-fe/src/actions/push-notifications/registerer.ts index ac19530a3..cc6ea0565 100644 --- a/packages/pl-fe/src/actions/push-notifications/registerer.ts +++ b/packages/pl-fe/src/actions/push-notifications/registerer.ts @@ -1,6 +1,5 @@ import { createPushSubscription, updatePushSubscription } from 'pl-fe/actions/push-subscriptions'; import { pushNotificationsSetting } from 'pl-fe/settings'; -import { getVapidKey } from 'pl-fe/utils/auth'; import { decode as decodeBase64 } from 'pl-fe/utils/base64'; import { setBrowserSupport, setSubscription, clearSubscription } from './setter'; @@ -30,10 +29,10 @@ const getPushSubscription = (registration: ServiceWorkerRegistration) => registration.pushManager.getSubscription() .then(subscription => ({ registration, subscription })); -const subscribe = (registration: ServiceWorkerRegistration, getState: () => RootState) => +const subscribe = (registration: ServiceWorkerRegistration, vapidKey: string) => registration.pushManager.subscribe({ userVisibleOnly: true, - applicationServerKey: urlBase64ToUint8Array(getVapidKey(getState())), + applicationServerKey: urlBase64ToUint8Array(vapidKey), }); const unsubscribe = ({ registration, subscription }: { @@ -61,10 +60,9 @@ const sendSubscriptionToBackend = (subscription: PushSubscription, me: Me) => // eslint-disable-next-line compat/compat const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager' in window && 'getKey' in PushSubscription.prototype); -const register = () => +const register = (vapidKey?: string) => (dispatch: AppDispatch, getState: () => RootState) => { const me = getState().me; - const vapidKey = getVapidKey(getState()); dispatch(setBrowserSupport(supportsPushNotifications)); @@ -95,13 +93,13 @@ const register = () => } else { // Something went wrong, try to subscribe again return unsubscribe({ registration, subscription }) - .then((registration) => subscribe(registration, getState)) + .then((registration) => subscribe(registration, vapidKey)) .then((pushSubscription) => dispatch(sendSubscriptionToBackend(pushSubscription, me))); } } // No subscription, try to subscribe - return subscribe(registration, getState) + return subscribe(registration, vapidKey) .then((pushSubscription) => dispatch(sendSubscriptionToBackend(pushSubscription, me))); }) .then((subscription) => { diff --git a/packages/pl-fe/src/api/hooks/instance/use-instance.ts b/packages/pl-fe/src/api/hooks/instance/use-instance.ts new file mode 100644 index 000000000..dd75aacd1 --- /dev/null +++ b/packages/pl-fe/src/api/hooks/instance/use-instance.ts @@ -0,0 +1,23 @@ +import { useQuery } from '@tanstack/react-query'; +import { instanceSchema } from 'pl-api'; +import * as v from 'valibot'; + +import { useClient } from 'pl-fe/hooks/use-client'; +import { initialState } from 'pl-fe/initial-state'; + +const placeholderData = v.parse(instanceSchema, {}); +const initialData = initialState['/api/v1/instance'] ? v.parse(instanceSchema, initialState['/api/v1/instance']) : undefined; + +const useInstance = () => { + const client = useClient(); + + const query = useQuery({ + queryKey: ['instance', 'instanceInformation', client.baseURL], + queryFn: client.instance.getInstance, + initialData: client.baseURL === '' ? initialData : undefined, + }); + + return { ...query, data: query.data || placeholderData }; +}; + +export { useInstance }; diff --git a/packages/pl-fe/src/api/hooks/instance/use-translation-languages.ts b/packages/pl-fe/src/api/hooks/instance/use-translation-languages.ts index 0fcdc3fab..2a15c09d5 100644 --- a/packages/pl-fe/src/api/hooks/instance/use-translation-languages.ts +++ b/packages/pl-fe/src/api/hooks/instance/use-translation-languages.ts @@ -1,15 +1,15 @@ import { useQuery } from '@tanstack/react-query'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useClient } from 'pl-fe/hooks/use-client'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; const useTranslationLanguages = () => { const client = useClient(); const { isLoggedIn } = useLoggedIn(); const features = useFeatures(); - const instance = useInstance(); + const { data: instance } = useInstance(); const getTranslationLanguages = async () => { const metadata = instance.pleroma.metadata; diff --git a/packages/pl-fe/src/api/hooks/streaming/use-timeline-stream.ts b/packages/pl-fe/src/api/hooks/streaming/use-timeline-stream.ts index 07c2a140a..6f8fbe2f0 100644 --- a/packages/pl-fe/src/api/hooks/streaming/use-timeline-stream.ts +++ b/packages/pl-fe/src/api/hooks/streaming/use-timeline-stream.ts @@ -1,8 +1,8 @@ import { useEffect, useRef } from 'react'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useClient } from 'pl-fe/hooks/use-client'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { getAccessToken } from 'pl-fe/utils/auth'; import type { StreamingEvent } from 'pl-api'; @@ -12,7 +12,7 @@ const useTimelineStream = (stream: string, params: { list?: string; tag?: string const client = useClient(); - const instance = useInstance(); + const { data: instance } = useInstance(); const socket = useRef<({ listen: (listener: any, stream?: string) => number; unlisten: (listener: any) => void; diff --git a/packages/pl-fe/src/components/birthday-input.tsx b/packages/pl-fe/src/components/birthday-input.tsx index 58688074e..6a8fd6f8d 100644 --- a/packages/pl-fe/src/components/birthday-input.tsx +++ b/packages/pl-fe/src/components/birthday-input.tsx @@ -1,10 +1,10 @@ import React, { useMemo } from 'react'; import { defineMessages, useIntl } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import IconButton from 'pl-fe/components/icon-button'; import { DatePicker } from 'pl-fe/features/ui/util/async-components'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useInstance } from 'pl-fe/hooks/use-instance'; const messages = defineMessages({ birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' }, @@ -23,7 +23,7 @@ interface IBirthdayInput { const BirthdayInput: React.FC = ({ value, onChange, required }) => { const intl = useIntl(); const features = useFeatures(); - const instance = useInstance(); + const { data: instance } = useInstance(); const supportsBirthdays = features.birthdays; const minAge = instance.pleroma.metadata.birthday_min_age; diff --git a/packages/pl-fe/src/components/gdpr-banner.tsx b/packages/pl-fe/src/components/gdpr-banner.tsx index 0f86c8e2d..aa16f6514 100644 --- a/packages/pl-fe/src/components/gdpr-banner.tsx +++ b/packages/pl-fe/src/components/gdpr-banner.tsx @@ -2,12 +2,12 @@ import clsx from 'clsx'; import React, { useState } from 'react'; import { FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Banner from 'pl-fe/components/ui/banner'; import Button from 'pl-fe/components/ui/button'; 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 { useInstance } from 'pl-fe/hooks/use-instance'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; const acceptedGdpr = !!localStorage.getItem('plfe:gdpr'); @@ -18,7 +18,7 @@ const GdprBanner: React.FC = () => { const [shown, setShown] = useState(acceptedGdpr); const [slideout, setSlideout] = useState(false); - const instance = useInstance(); + const { data: instance } = useInstance(); const { gdprUrl } = usePlFeConfig(); const handleAccept = () => { diff --git a/packages/pl-fe/src/components/helmet.tsx b/packages/pl-fe/src/components/helmet.tsx index dafab6605..81073f53b 100644 --- a/packages/pl-fe/src/components/helmet.tsx +++ b/packages/pl-fe/src/components/helmet.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { Helmet as ReactHelmet } from 'react-helmet-async'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useStatContext } from 'pl-fe/contexts/stat-context'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useSettings } from 'pl-fe/hooks/use-settings'; import { RootState } from 'pl-fe/store'; import FaviconService from 'pl-fe/utils/favicon-service'; @@ -22,7 +22,7 @@ interface IHelmet { } const Helmet: React.FC = ({ children }) => { - const instance = useInstance(); + const { data: instance } = useInstance(); const { unreadChatsCount } = useStatContext(); const unreadCount = useAppSelector((state) => getNotifTotals(state) + unreadChatsCount); const { demetricator } = useSettings(); diff --git a/packages/pl-fe/src/components/sidebar-menu.tsx b/packages/pl-fe/src/components/sidebar-menu.tsx index 928b57377..555655b9f 100644 --- a/packages/pl-fe/src/components/sidebar-menu.tsx +++ b/packages/pl-fe/src/components/sidebar-menu.tsx @@ -6,6 +6,7 @@ import { Link, NavLink } from 'react-router-dom'; import { fetchOwnAccounts, logOut, switchAccount } from 'pl-fe/actions/auth'; import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useInteractionRequestsCount } from 'pl-fe/api/hooks/statuses/use-interaction-requests'; import Account from 'pl-fe/components/account'; import Divider from 'pl-fe/components/ui/divider'; @@ -17,7 +18,6 @@ import ProfileStats from 'pl-fe/features/ui/components/profile-stats'; 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 { useInstance } from 'pl-fe/hooks/use-instance'; import { useRegistrationStatus } from 'pl-fe/hooks/use-registration-status'; import { makeGetOtherAccounts } from 'pl-fe/selectors'; import { useSettingsStore } from 'pl-fe/stores/settings'; @@ -106,7 +106,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { const touchEnd = useRef(null); const { isOpen } = useRegistrationStatus(); - const instance = useInstance(); + const { data: instance } = useInstance(); const restrictUnauth = instance.pleroma.metadata.restrict_unauthenticated; const containerRef = React.useRef(null); diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx index e24dfecb1..02c70db74 100644 --- a/packages/pl-fe/src/components/sidebar-navigation.tsx +++ b/packages/pl-fe/src/components/sidebar-navigation.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useInteractionRequestsCount } from 'pl-fe/api/hooks/statuses/use-interaction-requests'; import Icon from 'pl-fe/components/ui/icon'; import Stack from 'pl-fe/components/ui/stack'; @@ -9,7 +10,6 @@ import ComposeButton from 'pl-fe/features/ui/components/compose-button'; import ProfileDropdown from 'pl-fe/features/ui/components/profile-dropdown'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useLogo } from 'pl-fe/hooks/use-logo'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { useRegistrationStatus } from 'pl-fe/hooks/use-registration-status'; @@ -40,7 +40,7 @@ const SidebarNavigation = () => { const intl = useIntl(); const { unreadChatsCount } = useStatContext(); - const instance = useInstance(); + const { data: instance } = useInstance(); const features = useFeatures(); const { isDeveloper } = useSettings(); const { account } = useOwnAccount(); diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx index 413173f89..65f173437 100644 --- a/packages/pl-fe/src/components/status-action-bar.tsx +++ b/packages/pl-fe/src/components/status-action-bar.tsx @@ -17,6 +17,7 @@ import { useBlockGroupMember } from 'pl-fe/api/hooks/groups/use-block-group-memb import { useDeleteGroupStatus } from 'pl-fe/api/hooks/groups/use-delete-group-status'; import { useGroup } from 'pl-fe/api/hooks/groups/use-group'; import { useGroupRelationship } from 'pl-fe/api/hooks/groups/use-group-relationship'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useTranslationLanguages } from 'pl-fe/api/hooks/instance/use-translation-languages'; import DropdownMenu from 'pl-fe/components/dropdown-menu'; import StatusActionButton from 'pl-fe/components/status-action-button'; @@ -27,7 +28,6 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useCanInteract } from 'pl-fe/hooks/use-can-interact'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { useSettings } from 'pl-fe/hooks/use-settings'; import { useChats } from 'pl-fe/queries/chats'; @@ -595,7 +595,7 @@ const MenuButton: React.FC = ({ const { groupRelationship } = useGroupRelationship(status.group_id || undefined); const features = useFeatures(); - const instance = useInstance(); + const { data: instance } = useInstance(); const { autoTranslate, deleteModal, knownLanguages } = useSettings(); const { translationLanguages } = useTranslationLanguages(); diff --git a/packages/pl-fe/src/components/translate-button.tsx b/packages/pl-fe/src/components/translate-button.tsx index 3d8e41198..9fd1c92a0 100644 --- a/packages/pl-fe/src/components/translate-button.tsx +++ b/packages/pl-fe/src/components/translate-button.tsx @@ -1,6 +1,7 @@ import React, { useEffect } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useTranslationLanguages } from 'pl-fe/api/hooks/instance/use-translation-languages'; import { useStatusTranslation } from 'pl-fe/api/hooks/statuses/use-status-translation'; import HStack from 'pl-fe/components/ui/hstack'; @@ -9,7 +10,6 @@ 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 { useFeatures } from 'pl-fe/hooks/use-features'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useSettings } from 'pl-fe/hooks/use-settings'; import { useStatusMetaStore } from 'pl-fe/stores/status-meta'; @@ -22,7 +22,7 @@ interface ITranslateButton { const TranslateButton: React.FC = ({ status }) => { const intl = useIntl(); const features = useFeatures(); - const instance = useInstance(); + const { data: instance } = useInstance(); const settings = useSettings(); const autoTranslate = settings.autoTranslate; const knownLanguages = autoTranslate ? [...settings.knownLanguages, intl.locale] : [intl.locale]; diff --git a/packages/pl-fe/src/features/admin/components/registration-mode-picker.tsx b/packages/pl-fe/src/features/admin/components/registration-mode-picker.tsx index 416aaee10..eb47d3163 100644 --- a/packages/pl-fe/src/features/admin/components/registration-mode-picker.tsx +++ b/packages/pl-fe/src/features/admin/components/registration-mode-picker.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; import { updateConfig } from 'pl-fe/actions/admin'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { RadioGroup, RadioItem } from 'pl-fe/components/radio'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import toast from 'pl-fe/toast'; type RegistrationMode = 'open' | 'approval' | 'closed'; @@ -37,7 +37,7 @@ const modeFromInstance = ({ registrations }: Instance): RegistrationMode => { const RegistrationModePicker: React.FC = () => { const intl = useIntl(); const dispatch = useAppDispatch(); - const instance = useInstance(); + const { data: instance } = useInstance(); const mode = modeFromInstance(instance); diff --git a/packages/pl-fe/src/features/admin/tabs/dashboard.tsx b/packages/pl-fe/src/features/admin/tabs/dashboard.tsx index 73b56cfcf..5ac6706c1 100644 --- a/packages/pl-fe/src/features/admin/tabs/dashboard.tsx +++ b/packages/pl-fe/src/features/admin/tabs/dashboard.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import List, { ListItem } from 'pl-fe/components/list'; import { CardTitle } from 'pl-fe/components/ui/card'; import Icon from 'pl-fe/components/ui/icon'; import Stack from 'pl-fe/components/ui/stack'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import sourceCode from 'pl-fe/utils/code'; @@ -14,7 +14,7 @@ import { DashCounter, DashCounters } from '../components/dashcounter'; import RegistrationModePicker from '../components/registration-mode-picker'; const Dashboard: React.FC = () => { - const instance = useInstance(); + const { data: instance } = useInstance(); const features = useFeatures(); const { account } = useOwnAccount(); diff --git a/packages/pl-fe/src/features/auth-login/components/consumers-list.tsx b/packages/pl-fe/src/features/auth-login/components/consumers-list.tsx index cacdf1afe..8ca7d38d2 100644 --- a/packages/pl-fe/src/features/auth-login/components/consumers-list.tsx +++ b/packages/pl-fe/src/features/auth-login/components/consumers-list.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Card from 'pl-fe/components/ui/card'; 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 { useInstance } from 'pl-fe/hooks/use-instance'; import ConsumerButton from './consumer-button'; @@ -14,7 +14,7 @@ interface IConsumersList { /** Displays OAuth consumers to log in with. */ const ConsumersList: React.FC = () => { - const instance = useInstance(); + const { data: instance } = useInstance(); const providers = instance.pleroma.oauth_consumer_strategies; if (providers.length > 0) { diff --git a/packages/pl-fe/src/features/auth-login/components/login-page.tsx b/packages/pl-fe/src/features/auth-login/components/login-page.tsx index f13f4cde3..05c63bff7 100644 --- a/packages/pl-fe/src/features/auth-login/components/login-page.tsx +++ b/packages/pl-fe/src/features/auth-login/components/login-page.tsx @@ -3,7 +3,6 @@ import { FormattedMessage } from 'react-intl'; import { Redirect } from 'react-router-dom'; import { logIn, verifyCredentials, switchAccount } from 'pl-fe/actions/auth'; -import { fetchInstance } from 'pl-fe/actions/instance'; import { BigCard } from 'pl-fe/components/big-card'; import Button from 'pl-fe/components/ui/button'; import Stack from 'pl-fe/components/ui/stack'; @@ -43,11 +42,6 @@ const LoginPage = () => { const { username, password } = getFormData(event.target as HTMLFormElement); dispatch(logIn(username, password)) .then(({ access_token }) => dispatch(verifyCredentials(access_token))) - // Refetch the instance for authenticated fetch - .then(async (account) => { - await dispatch(fetchInstance()); - return account; - }) .then((account: { id: string }) => { closeModal(); if (typeof me === 'string') { 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 fc65c71c1..c4b5ec38d 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 @@ -5,6 +5,7 @@ import { Link, useHistory } from 'react-router-dom'; import { accountLookup } from 'pl-fe/actions/accounts'; import { register, verifyCredentials } from 'pl-fe/actions/auth'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import BirthdayInput from 'pl-fe/components/birthday-input'; import Button from 'pl-fe/components/ui/button'; import Checkbox from 'pl-fe/components/ui/checkbox'; @@ -17,7 +18,6 @@ import Textarea from 'pl-fe/components/ui/textarea'; import CaptchaField from 'pl-fe/features/auth-login/components/captcha'; 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'; @@ -52,7 +52,7 @@ const RegistrationForm: React.FC = ({ inviteToken }) => { const { locale } = useSettings(); const features = useFeatures(); - const instance = useInstance(); + const { data: instance } = useInstance(); const { openModal } = useModalsStore(); const needsConfirmation = instance.pleroma.metadata.account_activation_required; diff --git a/packages/pl-fe/src/features/auth-login/components/registration-page.tsx b/packages/pl-fe/src/features/auth-login/components/registration-page.tsx index cce5bf427..84da7ef5a 100644 --- a/packages/pl-fe/src/features/auth-login/components/registration-page.tsx +++ b/packages/pl-fe/src/features/auth-login/components/registration-page.tsx @@ -1,15 +1,15 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { BigCard } from 'pl-fe/components/big-card'; import Text from 'pl-fe/components/ui/text'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useRegistrationStatus } from 'pl-fe/hooks/use-registration-status'; import RegistrationForm from './registration-form'; const RegistrationPage: React.FC = () => { - const instance = useInstance(); + const { data: instance } = useInstance(); const { isOpen } = useRegistrationStatus(); if (!isOpen) { 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 ed0c7b39c..5c948a8f7 100644 --- a/packages/pl-fe/src/features/chats/components/chat-composer.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-composer.tsx @@ -3,6 +3,7 @@ import { defineMessages, IntlShape, useIntl } from 'react-intl'; import { unblockAccount } from 'pl-fe/actions/accounts'; import { useRelationship } from 'pl-fe/api/hooks/accounts/use-relationship'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Button from 'pl-fe/components/ui/button'; import Combobox, { ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover } from 'pl-fe/components/ui/combobox'; import HStack from 'pl-fe/components/ui/hstack'; @@ -13,7 +14,6 @@ import { useChatContext } from 'pl-fe/contexts/chat-context'; 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 { textAtCursorMatchesToken } from 'pl-fe/utils/suggestions'; @@ -85,7 +85,7 @@ const ChatComposer = React.forwardRef const isBlocked = relationship?.blocked_by && false; const isBlocking = relationship?.blocking && false; - const maxCharacterCount = useInstance().configuration.chats.max_characters; + const maxCharacterCount = useInstance().data.configuration.chats.max_characters; const [suggestions, setSuggestions] = useState(initialSuggestionState); const isSuggestionsAvailable = suggestions.list.length > 0; diff --git a/packages/pl-fe/src/features/compose-event/components/upload-button.tsx b/packages/pl-fe/src/features/compose-event/components/upload-button.tsx index 7b696e9be..3e17dae64 100644 --- a/packages/pl-fe/src/features/compose-event/components/upload-button.tsx +++ b/packages/pl-fe/src/features/compose-event/components/upload-button.tsx @@ -1,10 +1,10 @@ import React, { useRef } from 'react'; import { FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Icon from 'pl-fe/components/icon'; import HStack from 'pl-fe/components/ui/hstack'; import Text from 'pl-fe/components/ui/text'; -import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; interface IUploadButton { disabled?: boolean; @@ -14,7 +14,7 @@ interface IUploadButton { const UploadButton: React.FC = ({ disabled, onSelectFile }) => { const fileElement = useRef(null); - const attachmentTypes = useAppSelector(state => state.instance.configuration.media_attachments.supported_mime_types) + const attachmentTypes = useInstance().data.configuration.media_attachments.supported_mime_types ?.filter((type) => type.startsWith('image/')); let accept = attachmentTypes?.join(','); 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 ef8149e2a..15dc3efa0 100644 --- a/packages/pl-fe/src/features/compose/components/compose-form.tsx +++ b/packages/pl-fe/src/features/compose/components/compose-form.tsx @@ -12,6 +12,7 @@ import { selectComposeSuggestion, uploadCompose, } from 'pl-fe/actions/compose'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Button from 'pl-fe/components/ui/button'; import HStack from 'pl-fe/components/ui/hstack'; import Stack from 'pl-fe/components/ui/stack'; @@ -21,7 +22,6 @@ 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 { useFeatures } from 'pl-fe/hooks/use-features'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import QuotedStatusContainer from '../containers/quoted-status-container'; import ReplyIndicatorContainer from '../containers/reply-indicator-container'; @@ -75,7 +75,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab const history = useHistory(); const intl = useIntl(); const dispatch = useAppDispatch(); - const { configuration } = useInstance(); + const { configuration } = useInstance().data; const compose = useCompose(id); const maxTootChars = configuration.statuses.max_characters; diff --git a/packages/pl-fe/src/features/compose/components/content-type-button.tsx b/packages/pl-fe/src/features/compose/components/content-type-button.tsx index 9565d2b43..6d27bf95c 100644 --- a/packages/pl-fe/src/features/compose/components/content-type-button.tsx +++ b/packages/pl-fe/src/features/compose/components/content-type-button.tsx @@ -2,11 +2,11 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { changeComposeContentType } from 'pl-fe/actions/compose'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import DropdownMenu from 'pl-fe/components/dropdown-menu'; import Button from 'pl-fe/components/ui/button'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useCompose } from 'pl-fe/hooks/use-compose'; -import { useInstance } from 'pl-fe/hooks/use-instance'; const messages = defineMessages({ content_type_plaintext: { id: 'preferences.options.content_type_plaintext', defaultMessage: 'Plain text' }, @@ -24,7 +24,7 @@ interface IContentTypeButton { const ContentTypeButton: React.FC = ({ composeId }) => { const intl = useIntl(); const dispatch = useAppDispatch(); - const instance = useInstance(); + const { data: instance } = useInstance(); const contentType = useCompose(composeId).content_type; diff --git a/packages/pl-fe/src/features/compose/components/polls/poll-form.tsx b/packages/pl-fe/src/features/compose/components/polls/poll-form.tsx index f2247bd43..095f9e0c7 100644 --- a/packages/pl-fe/src/features/compose/components/polls/poll-form.tsx +++ b/packages/pl-fe/src/features/compose/components/polls/poll-form.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { addPollOption, changePollOption, changePollSettings, clearComposeSuggestions, fetchComposeSuggestions, removePoll, removePollOption, selectComposeSuggestion } from 'pl-fe/actions/compose'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import AutosuggestInput from 'pl-fe/components/autosuggest-input'; import Button from 'pl-fe/components/ui/button'; import Divider from 'pl-fe/components/ui/divider'; @@ -11,7 +12,6 @@ import Text from 'pl-fe/components/ui/text'; import Toggle from 'pl-fe/components/ui/toggle'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useCompose } from 'pl-fe/hooks/use-compose'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import DurationSelector from './duration-selector'; @@ -118,7 +118,7 @@ interface IPollForm { const PollForm: React.FC = ({ composeId }) => { const dispatch = useAppDispatch(); const intl = useIntl(); - const { configuration } = useInstance(); + const { configuration } = useInstance().data; const { poll, language, modified_language: modifiedLanguage } = useCompose(composeId); diff --git a/packages/pl-fe/src/features/compose/components/upload-button.tsx b/packages/pl-fe/src/features/compose/components/upload-button.tsx index 1d6d35245..174f22a28 100644 --- a/packages/pl-fe/src/features/compose/components/upload-button.tsx +++ b/packages/pl-fe/src/features/compose/components/upload-button.tsx @@ -1,8 +1,8 @@ import React, { useRef } from 'react'; import { defineMessages, IntlShape, useIntl } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import IconButton from 'pl-fe/components/ui/icon-button'; -import { useInstance } from 'pl-fe/hooks/use-instance'; const messages = defineMessages({ upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' }, @@ -32,7 +32,7 @@ const UploadButton: React.FC = ({ icon, }) => { const intl = useIntl(); - const { configuration } = useInstance(); + const { configuration } = useInstance().data; const fileElement = useRef(null); const attachmentTypes = configuration.media_attachments.supported_mime_types; diff --git a/packages/pl-fe/src/features/compose/components/upload.tsx b/packages/pl-fe/src/features/compose/components/upload.tsx index 4726c4a94..187203992 100644 --- a/packages/pl-fe/src/features/compose/components/upload.tsx +++ b/packages/pl-fe/src/features/compose/components/upload.tsx @@ -1,10 +1,10 @@ import React, { useCallback } from 'react'; import { undoUploadCompose, changeUploadCompose } from 'pl-fe/actions/compose'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Upload from 'pl-fe/components/upload'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useCompose } from 'pl-fe/hooks/use-compose'; -import { useInstance } from 'pl-fe/hooks/use-instance'; interface IUploadCompose { id: string; @@ -17,7 +17,7 @@ interface IUploadCompose { const UploadCompose: React.FC = ({ composeId, id, onSubmit, onDragStart, onDragEnter, onDragEnd }) => { const dispatch = useAppDispatch(); - const { pleroma: { metadata: { description_limit: descriptionLimit } } } = useInstance(); + const { pleroma: { metadata: { description_limit: descriptionLimit } } } = useInstance().data; const media = useCompose(composeId).media_attachments.find(item => item.id === id)!; diff --git a/packages/pl-fe/src/features/compose/editor/nodes/index.ts b/packages/pl-fe/src/features/compose/editor/nodes/index.ts index 1daec172c..d35644260 100644 --- a/packages/pl-fe/src/features/compose/editor/nodes/index.ts +++ b/packages/pl-fe/src/features/compose/editor/nodes/index.ts @@ -11,7 +11,7 @@ import { ListItemNode, ListNode } from '@lexical/list'; import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode'; import { HeadingNode, QuoteNode } from '@lexical/rich-text'; -import { useInstance } from 'pl-fe/hooks/use-instance'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { EmojiNode } from './emoji-node'; import { ImageNode } from './image-node'; @@ -20,7 +20,7 @@ import { MentionNode } from './mention-node'; import type { Klass, LexicalNode } from 'lexical'; const useNodes = (isWysiwyg?: boolean) => { - const instance = useInstance(); + const { data: instance } = useInstance(); const nodes: Array> = [ AutoLinkNode, diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx index 96dc90568..c9eb578e6 100644 --- a/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx +++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx @@ -23,8 +23,8 @@ import { createPortal } from 'react-dom'; import { defineMessages, useIntl } from 'react-intl'; import { uploadFile } from 'pl-fe/actions/compose'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { $createImageNode } from '../nodes/image-node'; import { setFloatingElemPosition } from '../utils/set-floating-elem-position'; @@ -42,7 +42,7 @@ interface IUploadButton { const UploadButton: React.FC = ({ onSelectFile }) => { const intl = useIntl(); - const { configuration } = useInstance(); + const { configuration } = useInstance().data; const dispatch = useAppDispatch(); const [disabled, setDisabled] = useState(false); @@ -101,7 +101,7 @@ const BlockTypeFloatingToolbar = ({ }): JSX.Element => { const intl = useIntl(); const popupCharStylesEditorRef = useRef(null); - const instance = useInstance(); + const { data: instance } = useInstance(); const allowInlineImages = instance.pleroma.metadata.markup.allow_inline_images; diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx index f1f955d37..f62db9602 100644 --- a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx +++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx @@ -39,8 +39,8 @@ import * as React from 'react'; import { createPortal } from 'react-dom'; import { defineMessages, useIntl } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Icon from 'pl-fe/components/ui/icon'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { getDOMRangeRect } from '../utils/get-dom-range-rect'; import { getSelectedNode } from '../utils/get-selected-node'; @@ -109,7 +109,7 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: { blockType: keyof typeof blockTypeToBlockName; icon: string; }) => { - const instance = useInstance(); + const { data: instance } = useInstance(); const [showDropDown, setShowDropDown] = useState(false); diff --git a/packages/pl-fe/src/features/crypto-donate/components/crypto-donate-panel.tsx b/packages/pl-fe/src/features/crypto-donate/components/crypto-donate-panel.tsx index 96032e34a..ebe6b36bb 100644 --- a/packages/pl-fe/src/features/crypto-donate/components/crypto-donate-panel.tsx +++ b/packages/pl-fe/src/features/crypto-donate/components/crypto-donate-panel.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import { useHistory } from 'react-router-dom'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Text from 'pl-fe/components/ui/text'; import Widget from 'pl-fe/components/ui/widget'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; import SiteWallet from './site-wallet'; @@ -20,7 +20,7 @@ interface ICryptoDonatePanel { const CryptoDonatePanel: React.FC = ({ limit = 3 }): JSX.Element | null => { const intl = useIntl(); const history = useHistory(); - const instance = useInstance(); + const { data: instance } = useInstance(); const addresses = usePlFeConfig().cryptoAddresses; diff --git a/packages/pl-fe/src/features/crypto-donate/index.tsx b/packages/pl-fe/src/features/crypto-donate/index.tsx index 1fbaffb20..9dd76d01c 100644 --- a/packages/pl-fe/src/features/crypto-donate/index.tsx +++ b/packages/pl-fe/src/features/crypto-donate/index.tsx @@ -1,10 +1,10 @@ import React, { useState } from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Accordion from 'pl-fe/components/ui/accordion'; import Column from 'pl-fe/components/ui/column'; import Stack from 'pl-fe/components/ui/stack'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import SiteWallet from './components/site-wallet'; @@ -14,7 +14,7 @@ const messages = defineMessages({ const CryptoDonate: React.FC = (): JSX.Element => { const intl = useIntl(); - const instance = useInstance(); + const { data: instance } = useInstance(); const [explanationBoxExpanded, toggleExplanationBox] = useState(true); diff --git a/packages/pl-fe/src/features/directory/index.tsx b/packages/pl-fe/src/features/directory/index.tsx index 3c6e5fc2b..ce5aaf4ca 100644 --- a/packages/pl-fe/src/features/directory/index.tsx +++ b/packages/pl-fe/src/features/directory/index.tsx @@ -4,13 +4,13 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import { useSearchParams } from 'react-router-dom-v5-compat'; import { useDirectory } from 'pl-fe/api/hooks/account-lists/use-directory'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import LoadMore from 'pl-fe/components/load-more'; import { RadioGroup, RadioItem } from 'pl-fe/components/radio'; import { CardTitle } from 'pl-fe/components/ui/card'; import Column from 'pl-fe/components/ui/column'; import Stack from 'pl-fe/components/ui/stack'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import AccountCard from './components/account-card'; @@ -25,7 +25,7 @@ const messages = defineMessages({ const Directory = () => { const intl = useIntl(); const [params, setParams] = useSearchParams(); - const instance = useInstance(); + const { data: instance } = useInstance(); const features = useFeatures(); const order = (params.get('order') || 'active') as 'active' | 'new'; diff --git a/packages/pl-fe/src/features/edit-profile/index.tsx b/packages/pl-fe/src/features/edit-profile/index.tsx index cc068e5df..22d4284a6 100644 --- a/packages/pl-fe/src/features/edit-profile/index.tsx +++ b/packages/pl-fe/src/features/edit-profile/index.tsx @@ -5,6 +5,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { updateNotificationSettings } from 'pl-fe/actions/accounts'; import { patchMe } from 'pl-fe/actions/me'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import BirthdayInput from 'pl-fe/components/birthday-input'; import List, { ListItem } from 'pl-fe/components/list'; import Button from 'pl-fe/components/ui/button'; @@ -21,7 +22,6 @@ import { useImageField } from 'pl-fe/hooks/forms/use-image-field'; 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 { useInstance } from 'pl-fe/hooks/use-instance'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import toast from 'pl-fe/toast'; import { isDefaultAvatar, isDefaultHeader } from 'pl-fe/utils/accounts'; @@ -173,7 +173,7 @@ const ProfileField: StreamfieldComponent = ({ index, va const EditProfile: React.FC = () => { const intl = useIntl(); const dispatch = useAppDispatch(); - const instance = useInstance(); + const { data: instance } = useInstance(); const { account } = useOwnAccount(); const features = useFeatures(); @@ -181,8 +181,7 @@ const EditProfile: React.FC = () => { ? instance.configuration.accounts.max_profile_fields : instance.pleroma.metadata.fields_limits.max_fields; - const attachmentTypes = useAppSelector( - state => state.instance.configuration.media_attachments.supported_mime_types) + const attachmentTypes = useInstance().data.configuration.media_attachments.supported_mime_types ?.filter(type => type.startsWith('image/')) .join(','); diff --git a/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx b/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx index b537c292e..7377a2ea0 100644 --- a/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx +++ b/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Icon from 'pl-fe/components/icon'; 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 { useInstance } from 'pl-fe/hooks/use-instance'; import type { RemoteInstance } from 'pl-fe/selectors'; @@ -34,7 +34,7 @@ interface IInstanceRestrictions { } const InstanceRestrictions: React.FC = ({ remoteInstance }) => { - const instance = useInstance(); + const { data: instance } = useInstance(); const renderRestrictions = () => { const items = []; diff --git a/packages/pl-fe/src/features/federation-restrictions/components/restricted-instance.tsx b/packages/pl-fe/src/features/federation-restrictions/components/restricted-instance.tsx index f709a9385..0a0dd9aef 100644 --- a/packages/pl-fe/src/features/federation-restrictions/components/restricted-instance.tsx +++ b/packages/pl-fe/src/features/federation-restrictions/components/restricted-instance.tsx @@ -1,6 +1,7 @@ import clsx from 'clsx'; import React, { useState } from 'react'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Icon from 'pl-fe/components/icon'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { makeGetRemoteInstance } from 'pl-fe/selectors'; @@ -14,7 +15,8 @@ interface IRestrictedInstance { } const RestrictedInstance: React.FC = ({ host }) => { - const remoteInstance: any = useAppSelector((state) => getRemoteInstance(state, host)); + const { data: instance } = useInstance(); + const remoteInstance: any = useAppSelector((state) => getRemoteInstance(state, host, instance)); const [expanded, setExpanded] = useState(false); diff --git a/packages/pl-fe/src/features/federation-restrictions/index.tsx b/packages/pl-fe/src/features/federation-restrictions/index.tsx index 0c07d8bcd..16b716c7d 100644 --- a/packages/pl-fe/src/features/federation-restrictions/index.tsx +++ b/packages/pl-fe/src/features/federation-restrictions/index.tsx @@ -1,11 +1,11 @@ import React, { useState, useCallback } from 'react'; import { defineMessages, useIntl } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Accordion from 'pl-fe/components/ui/accordion'; import Column from 'pl-fe/components/ui/column'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { makeGetHosts } from 'pl-fe/selectors'; import { federationRestrictionsDisclosed } from 'pl-fe/utils/state'; @@ -21,12 +21,12 @@ const messages = defineMessages({ const FederationRestrictions = () => { const intl = useIntl(); - const instance = useInstance(); + const { data: instance } = useInstance(); const getHosts = useCallback(makeGetHosts(), []); - const hosts = useAppSelector((state) => getHosts(state)); - const disclosed = useAppSelector((state) => federationRestrictionsDisclosed(state)); + const hosts = useAppSelector((state) => getHosts(state, instance)); + const disclosed = federationRestrictionsDisclosed(instance); const [explanationBoxExpanded, setExplanationBoxExpanded] = useState(true); diff --git a/packages/pl-fe/src/features/group/edit-group.tsx b/packages/pl-fe/src/features/group/edit-group.tsx index eb3ceefbe..936d1d4ae 100644 --- a/packages/pl-fe/src/features/group/edit-group.tsx +++ b/packages/pl-fe/src/features/group/edit-group.tsx @@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { useGroup } from 'pl-fe/api/hooks/groups/use-group'; import { useUpdateGroup } from 'pl-fe/api/hooks/groups/use-update-group'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Button from 'pl-fe/components/ui/button'; import Column from 'pl-fe/components/ui/column'; import Form from 'pl-fe/components/ui/form'; @@ -14,8 +15,6 @@ import Spinner from 'pl-fe/components/ui/spinner'; import Textarea from 'pl-fe/components/ui/textarea'; import { useImageField } from 'pl-fe/hooks/forms/use-image-field'; import { useTextField } from 'pl-fe/hooks/forms/use-text-field'; -import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import toast from 'pl-fe/toast'; import { isDefaultAvatar, isDefaultHeader } from 'pl-fe/utils/accounts'; import { unescapeHTML } from 'pl-fe/utils/html'; @@ -41,7 +40,7 @@ interface IEditGroup { const EditGroup: React.FC = ({ params: { groupId } }) => { const intl = useIntl(); - const instance = useInstance(); + const { data: instance } = useInstance(); const { group, isLoading } = useGroup(groupId); const { updateGroup } = useUpdateGroup(groupId); @@ -57,7 +56,7 @@ const EditGroup: React.FC = ({ params: { groupId } }) => { const maxName = Number(instance.configuration.groups.max_characters_name); const maxNote = Number(instance.configuration.groups.max_characters_description); - const attachmentTypes = useAppSelector(state => state.instance.configuration.media_attachments.supported_mime_types) + const attachmentTypes = useInstance().data.configuration.media_attachments.supported_mime_types ?.filter((type) => type.startsWith('image/')) .join(','); diff --git a/packages/pl-fe/src/features/home-timeline/index.tsx b/packages/pl-fe/src/features/home-timeline/index.tsx index cab35870d..c8646a566 100644 --- a/packages/pl-fe/src/features/home-timeline/index.tsx +++ b/packages/pl-fe/src/features/home-timeline/index.tsx @@ -3,6 +3,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; import { fetchHomeTimeline } from 'pl-fe/actions/timelines'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import PullToRefresh from 'pl-fe/components/pull-to-refresh'; import Column from 'pl-fe/components/ui/column'; import Stack from 'pl-fe/components/ui/stack'; @@ -11,7 +12,6 @@ import Timeline from 'pl-fe/features/ui/components/timeline'; 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 { useInstance } from 'pl-fe/hooks/use-instance'; import { useIsMobile } from 'pl-fe/hooks/use-is-mobile'; import { useTheme } from 'pl-fe/hooks/use-theme'; @@ -23,7 +23,7 @@ const HomeTimeline: React.FC = () => { const intl = useIntl(); const dispatch = useAppDispatch(); const features = useFeatures(); - const instance = useInstance(); + const { data: instance } = useInstance(); const theme = useTheme(); const polling = useRef(null); diff --git a/packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx b/packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx index a82bcc84e..a3ab2be82 100644 --- a/packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx +++ b/packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx @@ -1,15 +1,15 @@ import React from 'react'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Markup from 'pl-fe/components/markup'; import { ParsedContent } from 'pl-fe/components/parsed-content'; import Stack from 'pl-fe/components/ui/stack'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { getTextDirection } from 'pl-fe/utils/rtl'; import { LogoText } from './logo-text'; const SiteBanner: React.FC = () => { - const instance = useInstance(); + const { data: instance } = useInstance(); return ( diff --git a/packages/pl-fe/src/features/landing-timeline/index.tsx b/packages/pl-fe/src/features/landing-timeline/index.tsx index 25fc67af4..3d1c3e842 100644 --- a/packages/pl-fe/src/features/landing-timeline/index.tsx +++ b/packages/pl-fe/src/features/landing-timeline/index.tsx @@ -2,11 +2,11 @@ import React, { useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; import { fetchPublicTimeline } from 'pl-fe/actions/timelines'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useCommunityStream } from 'pl-fe/api/hooks/streaming/use-community-stream'; import PullToRefresh from 'pl-fe/components/pull-to-refresh'; import Column from 'pl-fe/components/ui/column'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useIsMobile } from 'pl-fe/hooks/use-is-mobile'; import { useTheme } from 'pl-fe/hooks/use-theme'; @@ -17,7 +17,7 @@ import { SiteBanner } from './components/site-banner'; const LandingTimeline = () => { const dispatch = useAppDispatch(); - const instance = useInstance(); + const { data: instance } = useInstance(); const theme = useTheme(); const isMobile = useIsMobile(); diff --git a/packages/pl-fe/src/features/migration/index.tsx b/packages/pl-fe/src/features/migration/index.tsx index d1ca4df7f..779b4df4b 100644 --- a/packages/pl-fe/src/features/migration/index.tsx +++ b/packages/pl-fe/src/features/migration/index.tsx @@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; import { moveAccount } from 'pl-fe/actions/security'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Button from 'pl-fe/components/ui/button'; import Column from 'pl-fe/components/ui/column'; import Form from 'pl-fe/components/ui/form'; @@ -11,7 +12,6 @@ import FormGroup from 'pl-fe/components/ui/form-group'; import Input from 'pl-fe/components/ui/input'; import Text from 'pl-fe/components/ui/text'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import toast from 'pl-fe/toast'; const messages = defineMessages({ @@ -28,7 +28,7 @@ const messages = defineMessages({ const Migration = () => { const intl = useIntl(); const dispatch = useAppDispatch(); - const instance = useInstance(); + const { data: instance } = useInstance(); const cooldownPeriod = instance.pleroma.metadata.migration_cooldown_period; diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx index eeea9071c..dc815749e 100644 --- a/packages/pl-fe/src/features/notifications/components/notification.tsx +++ b/packages/pl-fe/src/features/notifications/components/notification.tsx @@ -4,6 +4,7 @@ import { Link, useHistory } from 'react-router-dom'; import { mentionCompose } from 'pl-fe/actions/compose'; import { reblog, favourite, unreblog, unfavourite } from 'pl-fe/actions/interactions'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper'; import Icon from 'pl-fe/components/icon'; import RelativeTimestamp from 'pl-fe/components/relative-timestamp'; @@ -16,7 +17,6 @@ import Emojify from 'pl-fe/features/emoji/emojify'; import { HotKeys } from 'pl-fe/features/ui/components/hotkeys'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { makeGetNotification } from 'pl-fe/selectors'; import { useModalsStore } from 'pl-fe/stores/modals'; @@ -212,7 +212,7 @@ const Notification: React.FC = (props) => { const history = useHistory(); const intl = useIntl(); - const instance = useInstance(); + const { data: instance } = useInstance(); const type = notification.type; const { accounts } = notification; diff --git a/packages/pl-fe/src/features/onboarding/steps/fediverse-step.tsx b/packages/pl-fe/src/features/onboarding/steps/fediverse-step.tsx index 46b0fbe78..2140cb79c 100644 --- a/packages/pl-fe/src/features/onboarding/steps/fediverse-step.tsx +++ b/packages/pl-fe/src/features/onboarding/steps/fediverse-step.tsx @@ -1,18 +1,18 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Account from 'pl-fe/components/account'; import Button from 'pl-fe/components/ui/button'; import Card, { CardBody } from 'pl-fe/components/ui/card'; 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 { useInstance } from 'pl-fe/hooks/use-instance'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; const FediverseStep = ({ onNext }: { onNext: () => void }) => { const { account } = useOwnAccount(); - const instance = useInstance(); + const { data: instance } = useInstance(); return ( diff --git a/packages/pl-fe/src/features/preferences/index.tsx b/packages/pl-fe/src/features/preferences/index.tsx index 306cbcbb1..e4c4e2609 100644 --- a/packages/pl-fe/src/features/preferences/index.tsx +++ b/packages/pl-fe/src/features/preferences/index.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { changeSetting } from 'pl-fe/actions/settings'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import List, { ListItem } from 'pl-fe/components/list'; import Form from 'pl-fe/components/ui/form'; import { Mutliselect, SelectDropdown } from 'pl-fe/features/forms'; import SettingToggle from 'pl-fe/features/notifications/components/setting-toggle'; 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 ThemeToggle from '../ui/components/theme-toggle'; @@ -98,7 +98,7 @@ const Preferences = () => { const dispatch = useAppDispatch(); const features = useFeatures(); const settings = useSettings(); - const instance = useInstance(); + const { data: instance } = useInstance(); const onSelectChange = (event: React.ChangeEvent, path: string[]) => { dispatch(changeSetting(path, event.target.value, { showAlert: true })); diff --git a/packages/pl-fe/src/features/public-timeline/index.tsx b/packages/pl-fe/src/features/public-timeline/index.tsx index 9f64cbebd..977d1bd8c 100644 --- a/packages/pl-fe/src/features/public-timeline/index.tsx +++ b/packages/pl-fe/src/features/public-timeline/index.tsx @@ -4,12 +4,12 @@ import { Link } from 'react-router-dom'; import { changeSetting } from 'pl-fe/actions/settings'; import { fetchPublicTimeline } from 'pl-fe/actions/timelines'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { usePublicStream } from 'pl-fe/api/hooks/streaming/use-public-stream'; import PullToRefresh from 'pl-fe/components/pull-to-refresh'; import Accordion from 'pl-fe/components/ui/accordion'; import Column from 'pl-fe/components/ui/column'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useIsMobile } from 'pl-fe/hooks/use-is-mobile'; import { useSettings } from 'pl-fe/hooks/use-settings'; import { useTheme } from 'pl-fe/hooks/use-theme'; @@ -27,7 +27,7 @@ const CommunityTimeline = () => { const dispatch = useAppDispatch(); const theme = useTheme(); - const instance = useInstance(); + const { data: instance } = useInstance(); const settings = useSettings(); const onlyMedia = settings.timelines.public?.other.onlyMedia ?? false; diff --git a/packages/pl-fe/src/features/register-invite/index.tsx b/packages/pl-fe/src/features/register-invite/index.tsx index 4591d3222..81af6fac2 100644 --- a/packages/pl-fe/src/features/register-invite/index.tsx +++ b/packages/pl-fe/src/features/register-invite/index.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { useParams } from 'react-router-dom'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { BigCard } from 'pl-fe/components/big-card'; import RegistrationForm from 'pl-fe/features/auth-login/components/registration-form'; -import { useInstance } from 'pl-fe/hooks/use-instance'; interface RegisterInviteParams { token: string; @@ -12,7 +12,7 @@ interface RegisterInviteParams { /** Page to register with an invitation. */ const RegisterInvite: React.FC = () => { - const instance = useInstance(); + const { data: instance } = useInstance(); const { token } = useParams(); const title = ( diff --git a/packages/pl-fe/src/features/server-info/index.tsx b/packages/pl-fe/src/features/server-info/index.tsx index 3c2928ee3..7ced0eed0 100644 --- a/packages/pl-fe/src/features/server-info/index.tsx +++ b/packages/pl-fe/src/features/server-info/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Column from 'pl-fe/components/ui/column'; import Divider from 'pl-fe/components/ui/divider'; 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 LinkFooter from '../ui/components/link-footer'; import PromoPanel from '../ui/components/panels/promo-panel'; @@ -16,7 +16,7 @@ const messages = defineMessages({ const ServerInfo = () => { const intl = useIntl(); - const instance = useInstance(); + const { data: instance } = useInstance(); return ( diff --git a/packages/pl-fe/src/features/status/components/thread-login-cta.tsx b/packages/pl-fe/src/features/status/components/thread-login-cta.tsx index 1c3167dd6..c145925c4 100644 --- a/packages/pl-fe/src/features/status/components/thread-login-cta.tsx +++ b/packages/pl-fe/src/features/status/components/thread-login-cta.tsx @@ -1,16 +1,16 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Button from 'pl-fe/components/ui/button'; import Card, { CardTitle } from 'pl-fe/components/ui/card'; 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'; /** Prompts logged-out users to log in when viewing a thread. */ const ThreadLoginCta: React.FC = () => { - const instance = useInstance(); + const { data: instance } = useInstance(); const { displayCta } = usePlFeConfig(); if (!displayCta) return null; diff --git a/packages/pl-fe/src/features/ui/components/modals/edit-federation-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/edit-federation-modal.tsx index 13127c475..5766626ed 100644 --- a/packages/pl-fe/src/features/ui/components/modals/edit-federation-modal.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/edit-federation-modal.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { updateMrf } from 'pl-fe/actions/mrf'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import List, { ListItem } from 'pl-fe/components/list'; import Modal from 'pl-fe/components/ui/modal'; import Toggle from 'pl-fe/components/ui/toggle'; @@ -30,8 +31,9 @@ const EditFederationModal: React.FC = const intl = useIntl(); const dispatch = useAppDispatch(); + const { data: instance } = useInstance(); const getRemoteInstance = useCallback(makeGetRemoteInstance(), []); - const remoteInstance = useAppSelector(state => getRemoteInstance(state, host)); + const remoteInstance = useAppSelector(state => getRemoteInstance(state, host, instance)); const [data, setData] = useState>({}); diff --git a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx index e269632ab..48397c5f6 100644 --- a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Form from 'pl-fe/components/ui/form'; import FormGroup from 'pl-fe/components/ui/form-group'; import Input from 'pl-fe/components/ui/input'; @@ -8,8 +9,6 @@ import Textarea from 'pl-fe/components/ui/textarea'; import AvatarPicker from 'pl-fe/features/edit-profile/components/avatar-picker'; import HeaderPicker from 'pl-fe/features/edit-profile/components/header-picker'; import { usePreview } from 'pl-fe/hooks/forms/use-preview'; -import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import resizeImage from 'pl-fe/utils/resize-image'; import type { CreateGroupParams } from 'pl-api'; @@ -27,7 +26,7 @@ interface IDetailsStep { const DetailsStep: React.FC = ({ params, onChange }) => { const intl = useIntl(); - const instance = useInstance(); + const { data: instance } = useInstance(); const { display_name: displayName = '', @@ -37,7 +36,7 @@ const DetailsStep: React.FC = ({ params, onChange }) => { const avatarSrc = usePreview(params.avatar); const headerSrc = usePreview(params.header); - const attachmentTypes = useAppSelector(state => state.instance.configuration.media_attachments.supported_mime_types) + const attachmentTypes = useInstance().data.configuration.media_attachments.supported_mime_types ?.filter((type) => type.startsWith('image/')) .join(','); diff --git a/packages/pl-fe/src/features/ui/components/modals/report-modal/index.tsx b/packages/pl-fe/src/features/ui/components/modals/report-modal/index.tsx index e949a7b9f..c8f203e56 100644 --- a/packages/pl-fe/src/features/ui/components/modals/report-modal/index.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/report-modal/index.tsx @@ -5,6 +5,7 @@ import { blockAccount } from 'pl-fe/actions/accounts'; import { submitReport, ReportableEntities } from 'pl-fe/actions/reports'; import { fetchAccountTimeline } from 'pl-fe/actions/timelines'; import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import AttachmentThumbs from 'pl-fe/components/attachment-thumbs'; import StatusContent from 'pl-fe/components/status-content'; import Modal from 'pl-fe/components/ui/modal'; @@ -14,7 +15,6 @@ import Text from 'pl-fe/components/ui/text'; import AccountContainer from 'pl-fe/containers/account-container'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import ConfirmationStep from './steps/confirmation-step'; import OtherActionsStep from './steps/other-actions-step'; @@ -83,7 +83,7 @@ const ReportModal: React.FC = ({ onClose, acc const [block, setBlock] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); - const { rules } = useInstance(); + const { rules } = useInstance().data; const [ruleIds, setRuleIds] = useState>([]); const [selectedStatusIds, setSelectedStatusIds] = useState(statusIds); const [comment, setComment] = useState(''); diff --git a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/reason-step.tsx b/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/reason-step.tsx index fd4b9ac86..3e9fa59c4 100644 --- a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/reason-step.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/reason-step.tsx @@ -2,11 +2,11 @@ import clsx from 'clsx'; import React, { useEffect, useRef, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import FormGroup from 'pl-fe/components/ui/form-group'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import Textarea from 'pl-fe/components/ui/textarea'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import type { Account } from 'pl-fe/normalizers/account'; @@ -33,7 +33,7 @@ const ReasonStep: React.FC = ({ comment, setComment, ruleIds, setRu const [isNearBottom, setNearBottom] = useState(false); const [isNearTop, setNearTop] = useState(true); - const { rules } = useInstance(); + const { rules } = useInstance().data; const shouldRequireRule = rules.length > 0; const handleCommentChange = (event: React.ChangeEvent) => { diff --git a/packages/pl-fe/src/features/ui/components/modals/unauthorized-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/unauthorized-modal.tsx index 2fb49f939..7bda58852 100644 --- a/packages/pl-fe/src/features/ui/components/modals/unauthorized-modal.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/unauthorized-modal.tsx @@ -3,6 +3,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { useHistory } from 'react-router-dom'; import { remoteInteraction } from 'pl-fe/actions/interactions'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Button from 'pl-fe/components/ui/button'; import Form from 'pl-fe/components/ui/form'; import Input from 'pl-fe/components/ui/input'; @@ -12,7 +13,6 @@ 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 { useFeatures } from 'pl-fe/hooks/use-features'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useRegistrationStatus } from 'pl-fe/hooks/use-registration-status'; import { selectAccount } from 'pl-fe/selectors'; import toast from 'pl-fe/toast'; @@ -40,7 +40,7 @@ const UnauthorizedModal: React.FC = ({ const intl = useIntl(); const history = useHistory(); const dispatch = useAppDispatch(); - const instance = useInstance(); + const { data: instance } = useInstance(); const { isOpen } = useRegistrationStatus(); const username = useAppSelector(state => selectAccount(state, accountId!)?.display_name); diff --git a/packages/pl-fe/src/features/ui/components/panels/instance-info-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/instance-info-panel.tsx index 3273c4fe7..b88fe2203 100644 --- a/packages/pl-fe/src/features/ui/components/panels/instance-info-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/instance-info-panel.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { useIntl, defineMessages } from 'react-intl'; import { pinHost, unpinHost } from 'pl-fe/actions/remote-timeline'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Widget from 'pl-fe/components/ui/widget'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; @@ -26,8 +27,9 @@ const InstanceInfoPanel: React.FC = ({ host }) => { const dispatch = useAppDispatch(); const settings = useSettings(); - const remoteInstance: any = useAppSelector(state => getRemoteInstance(state, host)); const pinned = settings.remote_timeline.pinnedHosts.includes(host); + const { data: instance } = useInstance(); + const remoteInstance = useAppSelector(state => getRemoteInstance(state, host, instance)); const handlePinHost = () => { if (!pinned) { 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 e0c55aa00..f344f5d48 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 @@ -1,6 +1,7 @@ import React from 'react'; import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import DropdownMenu from 'pl-fe/components/dropdown-menu'; import Widget from 'pl-fe/components/ui/widget'; import InstanceRestrictions from 'pl-fe/features/federation-restrictions/components/instance-restrictions'; @@ -25,8 +26,9 @@ const InstanceModerationPanel: React.FC = ({ host }) = const intl = useIntl(); const { openModal } = useModalsStore(); + const { data: instance } = useInstance(); const { account } = useOwnAccount(); - const remoteInstance = useAppSelector(state => getRemoteInstance(state, host)); + const remoteInstance = useAppSelector(state => getRemoteInstance(state, host, instance)); const handleEditFederation = () => { openModal('EDIT_FEDERATION', { host }); diff --git a/packages/pl-fe/src/features/ui/components/panels/promo-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/promo-panel.tsx index 80eef9584..165517d23 100644 --- a/packages/pl-fe/src/features/ui/components/panels/promo-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/promo-panel.tsx @@ -1,15 +1,15 @@ import React from 'react'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import ForkAwesomeIcon from 'pl-fe/components/fork-awesome-icon'; import List, { ListItem } from 'pl-fe/components/list'; import HStack from 'pl-fe/components/ui/hstack'; import Widget from 'pl-fe/components/ui/widget'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; import { useSettings } from 'pl-fe/hooks/use-settings'; const PromoPanel: React.FC = () => { - const instance = useInstance(); + const { data: instance } = useInstance(); const { promoPanel } = usePlFeConfig(); const { locale } = useSettings(); diff --git a/packages/pl-fe/src/features/ui/components/panels/sign-up-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/sign-up-panel.tsx index 201f3f4d7..cb265daa2 100644 --- a/packages/pl-fe/src/features/ui/components/panels/sign-up-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/sign-up-panel.tsx @@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl'; import { Redirect } from 'react-router-dom'; import { logIn, switchAccount, verifyCredentials } from 'pl-fe/actions/auth'; -import { fetchInstance } from 'pl-fe/actions/instance'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import Button from 'pl-fe/components/ui/button'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; @@ -12,7 +12,6 @@ import OtpAuthForm from 'pl-fe/features/auth-login/components/otp-auth-form'; import ExternalLoginForm from 'pl-fe/features/external-login/components/external-login-form'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useInstance } from 'pl-fe/hooks/use-instance'; import { useRegistrationStatus } from 'pl-fe/hooks/use-registration-status'; import { getRedirectUrl } from 'pl-fe/utils/redirect'; import { isStandalone } from 'pl-fe/utils/state'; @@ -21,7 +20,7 @@ import type { PlfeResponse } from 'pl-fe/api'; const SignUpPanel = () => { const dispatch = useAppDispatch(); - const instance = useInstance(); + const { data: instance } = useInstance(); const { isOpen } = useRegistrationStatus(); const me = useAppSelector((state) => state.me); const standalone = useAppSelector(isStandalone); @@ -42,11 +41,6 @@ const SignUpPanel = () => { const { username, password } = getFormData(event.target as HTMLFormElement); dispatch(logIn(username, password)) .then(({ access_token }) => dispatch(verifyCredentials(access_token as string))) - // Refetch the instance for authenticated fetch - .then(async (account) => { - await dispatch(fetchInstance()); - return account; - }) .then((account: { id: string }) => { if (typeof me === 'string') { dispatch(switchAccount(account.id)); diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx index 05b8bc729..dbe28f08b 100644 --- a/packages/pl-fe/src/features/ui/index.tsx +++ b/packages/pl-fe/src/features/ui/index.tsx @@ -12,6 +12,7 @@ import { expandNotifications } from 'pl-fe/actions/notifications'; import { register as registerPushNotifications } from 'pl-fe/actions/push-notifications/registerer'; import { fetchScheduledStatuses } from 'pl-fe/actions/scheduled-statuses'; import { fetchHomeTimeline } from 'pl-fe/actions/timelines'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import { useUserStream } from 'pl-fe/api/hooks/streaming/use-user-stream'; import SidebarNavigation from 'pl-fe/components/sidebar-navigation'; import ThumbNavigation from 'pl-fe/components/thumb-navigation'; @@ -20,7 +21,6 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; 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 { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; @@ -41,7 +41,6 @@ import RemoteInstanceLayout from 'pl-fe/layouts/remote-instance-layout'; import SearchLayout from 'pl-fe/layouts/search-layout'; import StatusLayout from 'pl-fe/layouts/status-layout'; import { useUiStore } from 'pl-fe/stores/ui'; -import { getVapidKey } from 'pl-fe/utils/auth'; import { isStandalone } from 'pl-fe/utils/state'; import BackgroundShapes from './components/background-shapes'; @@ -146,13 +145,14 @@ import { WrappedRoute } from './util/react-router-helpers'; // Dummy import, to make sure that ends up in the application bundle. // Without this it ends up in ~8 very commonly used bundles. import 'pl-fe/components/status'; +import { useVapidKey } from 'pl-fe/hooks/use-vapid-key'; interface ISwitchingColumnsArea { children: React.ReactNode; } const SwitchingColumnsArea: React.FC = ({ children }) => { - const instance = useInstance(); + const { data: instance } = useInstance(); const features = useFeatures(); const { search } = useLocation(); const { isLoggedIn } = useLoggedIn(); @@ -361,7 +361,7 @@ const UI: React.FC = ({ children }) => { const me = useAppSelector(state => state.me); const { account } = useOwnAccount(); const features = useFeatures(); - const vapidKey = useAppSelector(state => getVapidKey(state)); + const vapidKey = useVapidKey(); const { isDropdownMenuOpen } = useUiStore(); const standalone = useAppSelector(isStandalone); @@ -447,7 +447,7 @@ const UI: React.FC = ({ children }) => { }, [!!account]); useEffect(() => { - dispatch(registerPushNotifications()); + dispatch(registerPushNotifications(vapidKey)); }, [vapidKey]); // Wait for login to succeed or fail diff --git a/packages/pl-fe/src/hooks/use-features.ts b/packages/pl-fe/src/hooks/use-features.ts index 0b6560f76..81fb49024 100644 --- a/packages/pl-fe/src/hooks/use-features.ts +++ b/packages/pl-fe/src/hooks/use-features.ts @@ -1,7 +1,8 @@ import { Features } from 'pl-api'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; + import { useAppSelector } from './use-app-selector'; -import { useInstance } from './use-instance'; /** Get features for the current instance. */ const useFeatures = (): Features => { diff --git a/packages/pl-fe/src/hooks/use-instance.ts b/packages/pl-fe/src/hooks/use-instance.ts deleted file mode 100644 index 4c94a4ab2..000000000 --- a/packages/pl-fe/src/hooks/use-instance.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { useAppSelector } from './use-app-selector'; - -/** Get the Instance for the current backend. */ -const useInstance = () => useAppSelector((state) => state.instance); - -export { useInstance }; diff --git a/packages/pl-fe/src/hooks/use-registration-status.ts b/packages/pl-fe/src/hooks/use-registration-status.ts index aa4700e24..8ab5d48ab 100644 --- a/packages/pl-fe/src/hooks/use-registration-status.ts +++ b/packages/pl-fe/src/hooks/use-registration-status.ts @@ -1,8 +1,9 @@ +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; + import { useFeatures } from './use-features'; -import { useInstance } from './use-instance'; const useRegistrationStatus = () => { - const instance = useInstance(); + const { data: instance } = useInstance(); const features = useFeatures(); return { diff --git a/packages/pl-fe/src/hooks/use-vapid-key.ts b/packages/pl-fe/src/hooks/use-vapid-key.ts new file mode 100644 index 000000000..b52879aed --- /dev/null +++ b/packages/pl-fe/src/hooks/use-vapid-key.ts @@ -0,0 +1,11 @@ +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; + +import { useAppSelector } from './use-app-selector'; + +const useVapidKey = () => { + const { data: instance } = useInstance(); + + return useAppSelector((state) => instance.configuration.vapid.public_key || state.auth.app?.vapid_key); +}; + +export { useVapidKey }; diff --git a/packages/pl-fe/src/init/pl-fe-load.tsx b/packages/pl-fe/src/init/pl-fe-load.tsx index cfcc6be64..bbe56dbbd 100644 --- a/packages/pl-fe/src/init/pl-fe-load.tsx +++ b/packages/pl-fe/src/init/pl-fe-load.tsx @@ -1,9 +1,9 @@ import React, { useState, useEffect } from 'react'; import { IntlProvider } from 'react-intl'; -import { fetchInstance } from 'pl-fe/actions/instance'; import { fetchMe } from 'pl-fe/actions/me'; import { loadPlFeConfig } from 'pl-fe/actions/pl-fe'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; import LoadingScreen from 'pl-fe/components/loading-screen'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; @@ -17,8 +17,6 @@ const loadInitial = () => { return async(dispatch, getState) => { // Await for authenticated fetch await dispatch(fetchMe()); - // Await for feature detection - await dispatch(fetchInstance()); // Await for configuration await dispatch(loadPlFeConfig()); }; @@ -31,6 +29,7 @@ interface IPlFeLoad { /** Initial data loader. */ const PlFeLoad: React.FC = ({ children }) => { const dispatch = useAppDispatch(); + const { isLoading: isLoadingInstance } = useInstance(); const me = useAppSelector(state => state.me); const { account } = useOwnAccount(); @@ -46,6 +45,7 @@ const PlFeLoad: React.FC = ({ children }) => { me && !account, !isLoaded, localeLoading, + isLoadingInstance, ].some(Boolean); // Load the user's locale diff --git a/packages/pl-fe/src/initial-state.ts b/packages/pl-fe/src/initial-state.ts new file mode 100644 index 000000000..9dcdce221 --- /dev/null +++ b/packages/pl-fe/src/initial-state.ts @@ -0,0 +1,11 @@ +import { decodeFromMarkup, pleromaDecoder } from './actions/preload'; + +let initialState: Record = {}; + +try { + initialState = decodeFromMarkup('initial-results', pleromaDecoder); +} catch (e) { + // +} + +export { initialState }; diff --git a/packages/pl-fe/src/layouts/remote-instance-layout.tsx b/packages/pl-fe/src/layouts/remote-instance-layout.tsx index 424f903aa..4ecc060a6 100644 --- a/packages/pl-fe/src/layouts/remote-instance-layout.tsx +++ b/packages/pl-fe/src/layouts/remote-instance-layout.tsx @@ -10,6 +10,7 @@ import { import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { federationRestrictionsDisclosed } from 'pl-fe/utils/state'; +import { useInstance } from 'pl-fe/api/hooks/instance/use-instance'; interface IRemoteInstanceLayout { params?: { @@ -23,7 +24,8 @@ const RemoteInstanceLayout: React.FC = ({ children, param const host = params!.instance!; const { account } = useOwnAccount(); - const disclosed = useAppSelector(federationRestrictionsDisclosed); + const { data: instance } = useInstance(); + const disclosed = federationRestrictionsDisclosed(instance); return ( <> diff --git a/packages/pl-fe/src/reducers/compose.ts b/packages/pl-fe/src/reducers/compose.ts index d68a931bb..853904fd2 100644 --- a/packages/pl-fe/src/reducers/compose.ts +++ b/packages/pl-fe/src/reducers/compose.ts @@ -1,7 +1,5 @@ import { create } from 'mutative'; -import { type CredentialAccount, type Instance, type MediaAttachment, type Tag } from 'pl-api'; -import { INSTANCE_FETCH_SUCCESS, type InstanceAction } from 'pl-fe/actions/instance'; import { isNativeEmoji, type Emoji } from 'pl-fe/features/emoji'; import { tagHistory } from 'pl-fe/settings'; @@ -67,6 +65,7 @@ import { FE_NAME } from '../actions/settings'; import { TIMELINE_DELETE, type TimelineAction } from '../actions/timelines'; import { unescapeHTML } from '../utils/html'; +import type { CredentialAccount, MediaAttachment, Tag } from 'pl-api'; import type { Language } from 'pl-fe/features/preferences'; import type { Account } from 'pl-fe/normalizers/account'; import type { Status } from 'pl-fe/normalizers/status'; @@ -310,11 +309,11 @@ const importAccount = (compose: Compose, account: CredentialAccount) => { // } // }; -const updateDefaultContentType = (compose: Compose, instance: Instance) => { - const postFormats = instance.pleroma.metadata.post_formats; +// const updateDefaultContentType = (compose: Compose, instance: Instance) => { +// const postFormats = instance.pleroma.metadata.post_formats; - compose.content_type = postFormats.includes(compose.content_type) ? compose.content_type : postFormats.includes('text/markdown') ? 'text/markdown' : postFormats[0]; -}; +// compose.content_type = postFormats.includes(compose.content_type) ? compose.content_type : postFormats.includes('text/markdown') ? 'text/markdown' : postFormats[0]; +// }; const updateCompose = (state: State, key: string, updater: (compose: Compose) => void) => create(state, draft => { @@ -327,7 +326,7 @@ const initialState: State = { default: newCompose({ idempotencyKey: crypto.randomUUID(), resetFileKey: getResetFileKey() }), }; -const compose = (state = initialState, action: ComposeAction | EventsAction | InstanceAction | MeAction | TimelineAction): State => { +const compose = (state = initialState, action: ComposeAction | EventsAction | MeAction | TimelineAction): State => { switch (action.type) { case COMPOSE_TYPE_CHANGE: return updateCompose(state, action.composeId, compose => { @@ -688,8 +687,6 @@ const compose = (state = initialState, action: ComposeAction | EventsAction | In return updateCompose(state, action.composeId, compose => { compose.federated = !compose.federated; }); - case INSTANCE_FETCH_SUCCESS: - return updateCompose(state, 'default', (compose) => updateDefaultContentType(compose, action.instance)); default: return state; } diff --git a/packages/pl-fe/src/reducers/index.ts b/packages/pl-fe/src/reducers/index.ts index 945556710..c26ad4915 100644 --- a/packages/pl-fe/src/reducers/index.ts +++ b/packages/pl-fe/src/reducers/index.ts @@ -18,7 +18,6 @@ import domain_lists from './domain-lists'; import draft_statuses from './draft-statuses'; import filters from './filters'; import followed_tags from './followed-tags'; -import instance from './instance'; import listAdder from './list-adder'; import listEditor from './list-editor'; import lists from './lists'; @@ -54,7 +53,6 @@ const reducers = { entities, filters, followed_tags, - instance, listAdder, listEditor, lists, @@ -87,8 +85,8 @@ const logOut = (state: AppState): ReturnType => { const newState = rootReducer(undefined, { type: '' }); - const { instance, plfe, custom_emojis, auth } = state; - return { ...newState, instance, plfe, custom_emojis, auth }; + const { plfe, custom_emojis, auth } = state; + return { ...newState, plfe, custom_emojis, auth }; }; const rootReducer: typeof appReducer = (state, action) => { diff --git a/packages/pl-fe/src/reducers/instance.ts b/packages/pl-fe/src/reducers/instance.ts index 9d4475dc5..96312b8c3 100644 --- a/packages/pl-fe/src/reducers/instance.ts +++ b/packages/pl-fe/src/reducers/instance.ts @@ -1,102 +1,8 @@ -import { create } from 'mutative'; -import { type Instance, instanceSchema, PleromaConfig } from 'pl-api'; +import { instanceSchema } from 'pl-api'; import * as v from 'valibot'; -import { ADMIN_CONFIG_UPDATE_REQUEST, ADMIN_CONFIG_UPDATE_SUCCESS, type AdminActions } from 'pl-fe/actions/admin'; -import { INSTANCE_FETCH_FAIL, INSTANCE_FETCH_SUCCESS, type InstanceAction } from 'pl-fe/actions/instance'; -import { PLEROMA_PRELOAD_IMPORT, type PreloadAction } from 'pl-fe/actions/preload'; -import KVStore from 'pl-fe/storage/kv-store'; -import ConfigDB from 'pl-fe/utils/config-db'; +const initialState = v.parse(instanceSchema, {}); -const initialState: State = v.parse(instanceSchema, {}); +const instance = () => initialState; -type State = Instance; - -const preloadImport = (state: State, action: Record, path: string) => { - const instance = action.data[path]; - return instance ? v.parse(instanceSchema, instance) : state; -}; - -const getConfigValue = (instanceConfig: Array, key: string) => { - const v = instanceConfig - .find(value => value?.tuple?.[0] === key); - - return v ? v?.tuple?.[1] : undefined; -}; - -const importConfigs = (state: State, configs: PleromaConfig['configs']) => { - // FIXME: This is pretty hacked together. Need to make a cleaner map. - const config = ConfigDB.find(configs, ':pleroma', ':instance'); - const simplePolicy = ConfigDB.toSimplePolicy(configs); - - if (!config && !simplePolicy) return state; - - if (config) { - const value = config.value || []; - const registrationsOpen = getConfigValue(value, ':registrations_open') as boolean | undefined; - const approvalRequired = getConfigValue(value, ':account_approval_required') as boolean | undefined; - - state.registrations = { - enabled: registrationsOpen ?? state.registrations.enabled, - approval_required: approvalRequired ?? state.registrations.approval_required, - }; - } - - if (simplePolicy) { - state.pleroma.metadata.federation.mrf_simple = simplePolicy; - } -}; - -const handleAuthFetch = (state: State) => { - // Authenticated fetch is enabled, so make the instance appear censored - return { - ...state, - title: state.title || '██████', - description: state.description || '████████████', - }; -}; - -const getHost = (instance: { domain: string }) => { - const domain = instance.domain; - try { - return new URL(domain).host; - } catch { - try { - return new URL(`https://${domain}`).host; - } catch { - return null; - } - } -}; - -const persistInstance = (instance: { domain: string }, host: string | null = getHost(instance)) => { - if (host) { - KVStore.setItem(`instance:${host}`, instance).catch(console.error); - } -}; - -const handleInstanceFetchFail = (state: State, error: any) => { - if (error.response?.status === 401) { - return handleAuthFetch(state); - } else { - return state; - } -}; - -const instance = (state = initialState, action: AdminActions | InstanceAction | PreloadAction): State => { - switch (action.type) { - case PLEROMA_PRELOAD_IMPORT: - return create(state, (draft) => preloadImport(draft, action, '/api/v1/instance')); - case INSTANCE_FETCH_SUCCESS: - persistInstance(action.instance); - return action.instance; - case INSTANCE_FETCH_FAIL: - return handleInstanceFetchFail(state, action.error); - case ADMIN_CONFIG_UPDATE_REQUEST: - case ADMIN_CONFIG_UPDATE_SUCCESS: - return create(state, (draft) => importConfigs(draft, action.configs)); - default: - return state; - } -}; export { instance as default }; diff --git a/packages/pl-fe/src/reducers/meta.ts b/packages/pl-fe/src/reducers/meta.ts index 78e5e9f3b..4ab9d37e1 100644 --- a/packages/pl-fe/src/reducers/meta.ts +++ b/packages/pl-fe/src/reducers/meta.ts @@ -1,20 +1,10 @@ -import { INSTANCE_FETCH_FAIL, type InstanceAction } from 'pl-fe/actions/instance'; +import type { AnyAction } from 'redux'; const initialState = { /** Whether /api/v1/instance 404'd (and we should display the external auth form). */ instance_fetch_failed: false, }; -const meta = (state = initialState, action: InstanceAction): typeof initialState => { - switch (action.type) { - case INSTANCE_FETCH_FAIL: - if ((action.error as any)?.response?.status === 404) { - return { instance_fetch_failed: true }; - } - return state; - default: - return state; - } -}; +const meta = (state = initialState, action: AnyAction): typeof initialState => state; export { meta as default }; diff --git a/packages/pl-fe/src/selectors/index.ts b/packages/pl-fe/src/selectors/index.ts index 1eddc1584..dd538d5ce 100644 --- a/packages/pl-fe/src/selectors/index.ts +++ b/packages/pl-fe/src/selectors/index.ts @@ -8,7 +8,7 @@ import { validId } from 'pl-fe/utils/auth'; import ConfigDB from 'pl-fe/utils/config-db'; import { shouldFilter } from 'pl-fe/utils/timelines'; -import type { Account as BaseAccount, Filter, MediaAttachment, NotificationGroup, Relationship } from 'pl-api'; +import type { Account as BaseAccount, Filter, Instance, MediaAttachment, NotificationGroup, Relationship } from 'pl-api'; import type { EntityStore } from 'pl-fe/entity-store/types'; import type { Account } from 'pl-fe/normalizers/account'; import type { Group } from 'pl-fe/normalizers/group'; @@ -275,7 +275,7 @@ const makeGetOtherAccounts = () => createSelector([ const getSimplePolicy = createSelector([ (state: RootState) => state.admin.configs, - (state: RootState) => state.instance.pleroma.metadata.federation.mrf_simple, + (_state: RootState, instance: Instance) => instance.pleroma.metadata.federation.mrf_simple, ], (configs, instancePolicy) => ({ ...instancePolicy, ...ConfigDB.toSimplePolicy(configs), @@ -291,8 +291,8 @@ type HostFederation = { [key in keyof MRFSimple]: boolean; }; -const getRemoteInstanceFederation = (state: RootState, host: string): HostFederation => { - const simplePolicy = getSimplePolicy(state); +const getRemoteInstanceFederation = (state: RootState, host: string, instance: Instance): HostFederation => { + const simplePolicy = getSimplePolicy(state, instance); return Object.fromEntries( Object.entries(simplePolicy).map(([key, hosts]) => [key, hosts.includes(host)]), diff --git a/packages/pl-fe/src/utils/auth.ts b/packages/pl-fe/src/utils/auth.ts index 59cd8e545..8bd27659e 100644 --- a/packages/pl-fe/src/utils/auth.ts +++ b/packages/pl-fe/src/utils/auth.ts @@ -56,10 +56,6 @@ const getAuthUserUrl = (state: RootState) => { ].filter(url => url).find(isURL); }; -/** Get the VAPID public key. */ -const getVapidKey = (state: RootState) => - state.auth.app?.vapid_key || state.instance.configuration.vapid.public_key; - const getMeUrl = (state: RootState) => selectOwnAccount(state)?.url; export { @@ -71,6 +67,5 @@ export { getAccessToken, getAuthUserId, getAuthUserUrl, - getVapidKey, getMeUrl, }; diff --git a/packages/pl-fe/src/utils/scopes.ts b/packages/pl-fe/src/utils/scopes.ts index bfaf61d22..966b146ff 100644 --- a/packages/pl-fe/src/utils/scopes.ts +++ b/packages/pl-fe/src/utils/scopes.ts @@ -1,15 +1,16 @@ import { getFeatures, PLEROMA, TOKI, type Instance } from 'pl-api'; -import type { RootState } from 'pl-fe/store'; +import * as BuildConfig from 'pl-fe/build-config'; +import { queryClient } from 'pl-fe/queries/client'; /** * Get the OAuth scopes to use for login & signup. * Mastodon will refuse scopes it doesn't know, so care is needed. */ -const getInstanceScopes = (instance: Instance) => { - const v = getFeatures(instance).version; +const getInstanceScopes = (instance?: Instance) => { + const software = instance ? getFeatures(instance).version.software : null; - switch (v.software) { + switch (software) { case TOKI: return 'read write follow push write:bites'; case PLEROMA: @@ -20,7 +21,11 @@ const getInstanceScopes = (instance: Instance) => { }; /** Convenience function to get scopes from instance in store. */ -const getScopes = (state: RootState) => getInstanceScopes(state.instance); +const getScopes = (baseURL = BuildConfig.BACKEND_URL || '') => { + const instance = queryClient.getQueryData(['instance', 'instanceInformation', baseURL]); + + return getInstanceScopes(instance); +}; export { getInstanceScopes, diff --git a/packages/pl-fe/src/utils/state.ts b/packages/pl-fe/src/utils/state.ts index f461bff42..5ec11d05a 100644 --- a/packages/pl-fe/src/utils/state.ts +++ b/packages/pl-fe/src/utils/state.ts @@ -9,14 +9,15 @@ import { isPrerendered } from 'pl-fe/precheck'; import { selectOwnAccount } from 'pl-fe/selectors'; import { isURL } from 'pl-fe/utils/auth'; +import type { Instance } from 'pl-api'; import type { RootState } from 'pl-fe/store'; /** Whether to display the fqn instead of the acct. */ const displayFqn = (state: RootState): boolean => getPlFeConfig(state).displayFqn; /** Whether the instance exposes instance blocks through the API. */ -const federationRestrictionsDisclosed = (state: RootState): boolean => - !!state.instance.pleroma.metadata.federation.mrf_policies; +const federationRestrictionsDisclosed = (instance: Instance): boolean => + !!instance.pleroma.metadata.federation.mrf_policies; /** * Determine whether pl-fe is running in standalone mode.