bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: migrate /api/v*/instance to tanstack query

Browse source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk 2024-12-03 15:03:17 +01:00
parent 2086e027ad
commit 1f8b79f309
79 changed files with 240 additions and 337 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/pl-fe/index.html
View file

File diff suppressed because one or more lines are too long

2
packages/pl-fe/src/actions/admin.ts
View file

@ -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<AdminActions>({ type: ADMIN_CONFIG_UPDATE_REQUEST, configs });
return getClient(getState).admin.config.updatePleromaConfig(configs)
.then((data) => {
queryClient.invalidateQueries({ queryKey: ['instance', 'instanceInformation'] });
dispatch<AdminActions>({ type: ADMIN_CONFIG_UPDATE_SUCCESS, configs: data.configs, needsReboot: data.need_reboot });
}).catch(error => {
dispatch<AdminActions>({ type: ADMIN_CONFIG_UPDATE_FAIL, error, configs });

8
packages/pl-fe/src/actions/auth.ts
View file

@ -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)));
};

5
packages/pl-fe/src/actions/compose.ts
View file

@ -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>(['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);

13
packages/pl-fe/src/actions/consumer-auth.ts
View file

@ -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>(['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));

40
packages/pl-fe/src/actions/instance.ts
View file

@ -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<InstanceFetchSuccessAction>({ 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 };

11
packages/pl-fe/src/actions/media.ts
View file

@ -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>(['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.*/);

2
packages/pl-fe/src/actions/preload.ts
View file

@ -67,6 +67,8 @@ interface PreloadAction {
export {
PLEROMA_PRELOAD_IMPORT,
MASTODON_PRELOAD_IMPORT,
decodeFromMarkup,
pleromaDecoder,
preload,
preloadMastodon,
type PreloadAction,

12
packages/pl-fe/src/actions/push-notifications/registerer.ts
View file

@ -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) => {

23
packages/pl-fe/src/api/hooks/instance/use-instance.ts Normal file
View file

@ -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 };

4
packages/pl-fe/src/api/hooks/instance/use-translation-languages.ts
View file

@ -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;

4
packages/pl-fe/src/api/hooks/streaming/use-timeline-stream.ts
View file

@ -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;

4
packages/pl-fe/src/components/birthday-input.tsx
View file

@ -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<IBirthdayInput> = ({ 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;

4
packages/pl-fe/src/components/gdpr-banner.tsx
View file

@ -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<boolean>(acceptedGdpr);
const [slideout, setSlideout] = useState(false);
const instance = useInstance();
const { data: instance } = useInstance();
const { gdprUrl } = usePlFeConfig();
const handleAccept = () => {

4
packages/pl-fe/src/components/helmet.tsx
View file

@ -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<IHelmet> = ({ children }) => {
const instance = useInstance();
const { data: instance } = useInstance();
const { unreadChatsCount } = useStatContext();
const unreadCount = useAppSelector((state) => getNotifTotals(state) + unreadChatsCount);
const { demetricator } = useSettings();

4
packages/pl-fe/src/components/sidebar-menu.tsx
View file

@ -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<number | null>(null);
const { isOpen } = useRegistrationStatus();
const instance = useInstance();
const { data: instance } = useInstance();
const restrictUnauth = instance.pleroma.metadata.restrict_unauthenticated;
const containerRef = React.useRef<HTMLDivElement>(null);

4
packages/pl-fe/src/components/sidebar-navigation.tsx
View file

@ -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();

4
packages/pl-fe/src/components/status-action-bar.tsx
View file

@ -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<IMenuButton> = ({
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();

4
packages/pl-fe/src/components/translate-button.tsx
View file

@ -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<ITranslateButton> = ({ 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];

4
packages/pl-fe/src/features/admin/components/registration-mode-picker.tsx
View file

@ -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);

4
packages/pl-fe/src/features/admin/tabs/dashboard.tsx
View file

@ -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();

4
packages/pl-fe/src/features/auth-login/components/consumers-list.tsx
View file

@ -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<IConsumersList> = () => {
const instance = useInstance();
const { data: instance } = useInstance();
const providers = instance.pleroma.oauth_consumer_strategies;
if (providers.length > 0) {

6
packages/pl-fe/src/features/auth-login/components/login-page.tsx
View file

@ -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') {

4
packages/pl-fe/src/features/auth-login/components/registration-form.tsx
View file

@ -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<IRegistrationForm> = ({ 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;

4
packages/pl-fe/src/features/auth-login/components/registration-page.tsx
View file

@ -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) {

4
packages/pl-fe/src/features/chats/components/chat-composer.tsx
View file

@ -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<HTMLTextAreaElement | null, IChatComposer>
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<Suggestion>(initialSuggestionState);
const isSuggestionsAvailable = suggestions.list.length > 0;

4
packages/pl-fe/src/features/compose-event/components/upload-button.tsx
View file

@ -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<IUploadButton> = ({ disabled, onSelectFile }) => {
const fileElement = useRef<HTMLInputElement>(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(',');

4
packages/pl-fe/src/features/compose/components/compose-form.tsx
View file

@ -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 extends string>({ 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;

4
packages/pl-fe/src/features/compose/components/content-type-button.tsx
View file

@ -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<IContentTypeButton> = ({ composeId }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const instance = useInstance();
const { data: instance } = useInstance();
const contentType = useCompose(composeId).content_type;

4
packages/pl-fe/src/features/compose/components/polls/poll-form.tsx
View file

@ -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<IPollForm> = ({ composeId }) => {
const dispatch = useAppDispatch();
const intl = useIntl();
const { configuration } = useInstance();
const { configuration } = useInstance().data;
const { poll, language, modified_language: modifiedLanguage } = useCompose(composeId);

4
packages/pl-fe/src/features/compose/components/upload-button.tsx
View file

@ -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<IUploadButton> = ({
icon,
}) => {
const intl = useIntl();
const { configuration } = useInstance();
const { configuration } = useInstance().data;
const fileElement = useRef<HTMLInputElement>(null);
const attachmentTypes = configuration.media_attachments.supported_mime_types;

4
packages/pl-fe/src/features/compose/components/upload.tsx
View file

@ -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<IUploadCompose> = ({ 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)!;

4
packages/pl-fe/src/features/compose/editor/nodes/index.ts
View file

@ -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<Klass<LexicalNode>> = [
AutoLinkNode,

6
packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
View file

@ -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<IUploadButton> = ({ 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<HTMLDivElement | null>(null);
const instance = useInstance();
const { data: instance } = useInstance();
const allowInlineImages = instance.pleroma.metadata.markup.allow_inline_images;

4
packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
View file

@ -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);

4
packages/pl-fe/src/features/crypto-donate/components/crypto-donate-panel.tsx
View file

@ -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<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Element | null => {
const intl = useIntl();
const history = useHistory();
const instance = useInstance();
const { data: instance } = useInstance();
const addresses = usePlFeConfig().cryptoAddresses;

4
packages/pl-fe/src/features/crypto-donate/index.tsx
View file

@ -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);

4
packages/pl-fe/src/features/directory/index.tsx
View file

@ -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';

7
packages/pl-fe/src/features/edit-profile/index.tsx
View file

@ -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<AccountCredentialsField> = ({ 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(',');

4
packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
View file

@ -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<IInstanceRestrictions> = ({ remoteInstance }) => {
const instance = useInstance();
const { data: instance } = useInstance();
const renderRestrictions = () => {
const items = [];

4
packages/pl-fe/src/features/federation-restrictions/components/restricted-instance.tsx
View file

@ -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<IRestrictedInstance> = ({ 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);

8
packages/pl-fe/src/features/federation-restrictions/index.tsx
View file

@ -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);

7
packages/pl-fe/src/features/group/edit-group.tsx
View file

@ -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<IEditGroup> = ({ 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<IEditGroup> = ({ 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(',');

4
packages/pl-fe/src/features/home-timeline/index.tsx
View file

@ -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<NodeJS.Timeout | null>(null);

4
packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx
View file

@ -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 (
<Stack space={6}>

4
packages/pl-fe/src/features/landing-timeline/index.tsx
View file

@ -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();

4
packages/pl-fe/src/features/migration/index.tsx
View file

@ -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;

4
packages/pl-fe/src/features/notifications/components/notification.tsx
View file

@ -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<INotification> = (props) => {
const history = useHistory();
const intl = useIntl();
const instance = useInstance();
const { data: instance } = useInstance();
const type = notification.type;
const { accounts } = notification;

4
packages/pl-fe/src/features/onboarding/steps/fediverse-step.tsx
View file

@ -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 (
<Card variant='rounded' size='xl'>

4
packages/pl-fe/src/features/preferences/index.tsx
View file

@ -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<HTMLSelectElement>, path: string[]) => {
dispatch(changeSetting(path, event.target.value, { showAlert: true }));

4
packages/pl-fe/src/features/public-timeline/index.tsx
View file

@ -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;

4
packages/pl-fe/src/features/register-invite/index.tsx
View file

@ -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<RegisterInviteParams>();
const title = (

4
packages/pl-fe/src/features/server-info/index.tsx
View file

@ -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 (
<Column label={intl.formatMessage(messages.heading)}>

4
packages/pl-fe/src/features/status/components/thread-login-cta.tsx
View file

@ -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;

4
packages/pl-fe/src/features/ui/components/modals/edit-federation-modal.tsx
View file

@ -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<BaseModalProps & EditFederationModalProps> =
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<Record<string, any>>({});

7
packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
View file

@ -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<IDetailsStep> = ({ params, onChange }) => {
const intl = useIntl();
const instance = useInstance();
const { data: instance } = useInstance();
const {
display_name: displayName = '',
@ -37,7 +36,7 @@ const DetailsStep: React.FC<IDetailsStep> = ({ 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(',');

4
packages/pl-fe/src/features/ui/components/modals/report-modal/index.tsx
View file

@ -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<BaseModalProps & ReportModalProps> = ({ onClose, acc
const [block, setBlock] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const { rules } = useInstance();
const { rules } = useInstance().data;
const [ruleIds, setRuleIds] = useState<Array<string>>([]);
const [selectedStatusIds, setSelectedStatusIds] = useState(statusIds);
const [comment, setComment] = useState('');

4
packages/pl-fe/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
View file

@ -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<IReasonStep> = ({ comment, setComment, ruleIds, setRu
const [isNearBottom, setNearBottom] = useState<boolean>(false);
const [isNearTop, setNearTop] = useState<boolean>(true);
const { rules } = useInstance();
const { rules } = useInstance().data;
const shouldRequireRule = rules.length > 0;
const handleCommentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {

4
packages/pl-fe/src/features/ui/components/modals/unauthorized-modal.tsx
View file

@ -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<UnauthorizedModalProps & BaseModalProps> = ({
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);

4
packages/pl-fe/src/features/ui/components/panels/instance-info-panel.tsx
View file

@ -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<IInstanceInfoPanel> = ({ 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) {

4
packages/pl-fe/src/features/ui/components/panels/instance-moderation-panel.tsx
View file

@ -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<IInstanceModerationPanel> = ({ 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 });

4
packages/pl-fe/src/features/ui/components/panels/promo-panel.tsx
View file

@ -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();

10
packages/pl-fe/src/features/ui/components/panels/sign-up-panel.tsx
View file

@ -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));

10
packages/pl-fe/src/features/ui/index.tsx
View file

@ -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 <Status /> 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<ISwitchingColumnsArea> = ({ 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<IUI> = ({ 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<IUI> = ({ children }) => {
}, [!!account]);
useEffect(() => {
dispatch(registerPushNotifications());
dispatch(registerPushNotifications(vapidKey));
}, [vapidKey]);
// Wait for login to succeed or fail

3
packages/pl-fe/src/hooks/use-features.ts
View file

@ -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 => {

6
packages/pl-fe/src/hooks/use-instance.ts
View file

@ -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 };

5
packages/pl-fe/src/hooks/use-registration-status.ts
View file

@ -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 {

11
packages/pl-fe/src/hooks/use-vapid-key.ts Normal file
View file

@ -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 };

6
packages/pl-fe/src/init/pl-fe-load.tsx
View file

@ -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<IPlFeLoad> = ({ 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<IPlFeLoad> = ({ children }) => {
me && !account,
!isLoaded,
localeLoading,
isLoadingInstance,
].some(Boolean);
// Load the user's locale

11
packages/pl-fe/src/initial-state.ts Normal file
View file

@ -0,0 +1,11 @@
import { decodeFromMarkup, pleromaDecoder } from './actions/preload';
let initialState: Record<string, any> = {};
try {
initialState = decodeFromMarkup('initial-results', pleromaDecoder);
} catch (e) {
//
}
export { initialState };

4
packages/pl-fe/src/layouts/remote-instance-layout.tsx
View file

@ -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<IRemoteInstanceLayout> = ({ children, param
const host = params!.instance!;
const { account } = useOwnAccount();
const disclosed = useAppSelector(federationRestrictionsDisclosed);
const { data: instance } = useInstance();
const disclosed = federationRestrictionsDisclosed(instance);
return (
<>

15
packages/pl-fe/src/reducers/compose.ts
View file

@ -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;
}

6
packages/pl-fe/src/reducers/index.ts
View file

@ -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<typeof appReducer> => {
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) => {

100
packages/pl-fe/src/reducers/instance.ts
View file

@ -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<string, any>, path: string) => {
const instance = action.data[path];
return instance ? v.parse(instanceSchema, instance) : state;
};
const getConfigValue = (instanceConfig: Array<any>, 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 };

14
packages/pl-fe/src/reducers/meta.ts
View file

@ -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 };

8
packages/pl-fe/src/selectors/index.ts
View file

@ -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)]),

5
packages/pl-fe/src/utils/auth.ts
View file

@ -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,
};

15
packages/pl-fe/src/utils/scopes.ts
View file

@ -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>(['instance', 'instanceInformation', baseURL]);
return getInstanceScopes(instance);
};
export {
getInstanceScopes,

5
packages/pl-fe/src/utils/state.ts
View file

@ -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.