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

This reverts commit 1f8b79f309.

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

@@ -2,7 +2,6 @@ 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';
@@ -31,9 +30,8 @@ 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, instance));
+  const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
 
   const [data, setData] = useState<Record<string, any>>({});
 

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

@@ -1,7 +1,6 @@
 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';
@@ -9,6 +8,8 @@ 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';
@@ -26,7 +27,7 @@ interface IDetailsStep {
 
 const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
   const intl = useIntl();
-  const { data: instance } = useInstance();
+  const instance = useInstance();
 
   const {
     display_name: displayName = '',
@@ -36,7 +37,7 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
   const avatarSrc = usePreview(params.avatar);
   const headerSrc = usePreview(params.header);
 
-  const attachmentTypes = useInstance().data.configuration.media_attachments.supported_mime_types
+  const attachmentTypes = useAppSelector(state => state.instance.configuration.media_attachments.supported_mime_types)
     ?.filter((type) => type.startsWith('image/'))
     .join(',');
 

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

@@ -5,7 +5,6 @@ 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';
@@ -15,6 +14,7 @@ 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().data;
+  const { rules } = useInstance();
   const [ruleIds, setRuleIds] = useState<Array<string>>([]);
   const [selectedStatusIds, setSelectedStatusIds] = useState(statusIds);
   const [comment, setComment] = useState('');

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

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

@@ -3,7 +3,6 @@ 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';
@@ -13,6 +12,7 @@ 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 { data: instance } = useInstance();
+  const instance = useInstance();
   const { isOpen } = useRegistrationStatus();
 
   const username = useAppSelector(state => selectAccount(state, accountId!)?.display_name);

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

@@ -2,7 +2,6 @@ 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';
@@ -27,9 +26,8 @@ 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) {

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

@@ -1,7 +1,6 @@
 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';
@@ -26,9 +25,8 @@ 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, instance));
+  const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
 
   const handleEditFederation = () => {
     openModal('EDIT_FEDERATION', { host });

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 { data: instance } = useInstance();
+  const instance = useInstance();
   const { promoPanel } = usePlFeConfig();
   const { locale } = useSettings();
 

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 { useInstance } from 'pl-fe/api/hooks/instance/use-instance';
+import { fetchInstance } from 'pl-fe/actions/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,6 +12,7 @@ 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';
@@ -20,7 +21,7 @@ import type { PlfeResponse } from 'pl-fe/api';
 
 const SignUpPanel = () => {
   const dispatch = useAppDispatch();
-  const { data: instance } = useInstance();
+  const instance = useInstance();
   const { isOpen } = useRegistrationStatus();
   const me = useAppSelector((state) => state.me);
   const standalone = useAppSelector(isStandalone);
@@ -41,6 +42,11 @@ 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));

packages/pl-fe/src/features/ui/index.tsx

@@ -12,7 +12,6 @@ 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';
@@ -21,6 +20,7 @@ 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,6 +41,7 @@ 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';
@@ -145,14 +146,13 @@ 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 { data: instance } = useInstance();
+  const 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 = useVapidKey();
+  const vapidKey = useAppSelector(state => getVapidKey(state));
 
   const { isDropdownMenuOpen } = useUiStore();
   const standalone = useAppSelector(isStandalone);
@@ -447,7 +447,7 @@ const UI: React.FC<IUI> = ({ children }) => {
   }, [!!account]);
 
   useEffect(() => {
-    dispatch(registerPushNotifications(vapidKey));
+    dispatch(registerPushNotifications());
   }, [vapidKey]);
 
   // Wait for login to succeed or fail