Fix: Cannot Pin/Unpin Instances

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/features/federation-restrictions/components/instance-restrictions.tsx

@@ -5,10 +5,10 @@ import Icon from 'soapbox/components/icon';
 import { HStack, Stack, Text } from 'soapbox/components/ui';
 import { useInstance } from 'soapbox/hooks';
 
-import type { Map as ImmutableMap } from 'immutable';
+import type { RemoteInstance } from 'soapbox/selectors';
 
-const hasRestrictions = (remoteInstance: ImmutableMap<string, any>): boolean => {
-  const { accept, reject_deletes, report_removal, ...federation } = remoteInstance.get('federation');
+const hasRestrictions = (remoteInstance: RemoteInstance): boolean => {
+  const { accept, reject_deletes, report_removal, ...federation } = remoteInstance.federation;
   return !!Object.values(federation).reduce((acc, value) => Boolean(acc || value), false);
 };
 
@@ -30,7 +30,7 @@ const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
 };
 
 interface IInstanceRestrictions {
-  remoteInstance: ImmutableMap<string, any>;
+  remoteInstance: RemoteInstance;
 }
 
 const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance }) => {
@@ -46,7 +46,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       followers_only,
       media_nsfw,
       media_removal,
-    } = remoteInstance.get('federation').toJS();
+    } = remoteInstance.federation;
 
     const fullMediaRemoval = media_removal && avatar_removal && banner_removal;
     const partialMediaRemoval = media_removal || avatar_removal || banner_removal;
@@ -108,10 +108,10 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
   const renderContent = () => {
     if (!instance || !remoteInstance) return null;
 
-    const host = remoteInstance.get('host');
+    const host = remoteInstance.host;
     const siteTitle = instance.title;
 
-    if (remoteInstance.getIn(['federation', 'reject']) === true) {
+    if (remoteInstance.federation.reject === true) {
       return (
         <Restriction icon={require('@tabler/icons/shield-x.svg')}>
           <FormattedMessage

src/features/federation-restrictions/components/restricted-instance.tsx

@@ -27,8 +27,8 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
     <div>
       <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
         <Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
-        <div className={clsx({ 'line-through': remoteInstance.getIn(['federation', 'reject']) })}>
-          {remoteInstance.get('host')}
+        <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
+          {remoteInstance.host}
         </div>
       </a>
       <div

src/features/ui/components/instance-info-panel.tsx

@@ -39,7 +39,7 @@ const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
 
   return (
     <Widget
-      title={remoteInstance.get('host')}
+      title={remoteInstance.host}
       onActionClick={handlePinHost}
       actionIcon={pinned ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg')}
       actionTitle={intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host })}

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

@@ -33,7 +33,7 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
   const [data, setData] = useState<Record<string, any>>({});
 
   useEffect(() => {
-    setData(remoteInstance.get('federation') as Record<string, any>);
+    setData(remoteInstance.federation);
   }, [remoteInstance]);
 
   const handleDataChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {

src/selectors/index.ts

@@ -2,6 +2,7 @@ import {
   Map as ImmutableMap,
   List as ImmutableList,
   OrderedSet as ImmutableOrderedSet,
+  Record as ImmutableRecord,
   fromJS,
 } from 'immutable';
 import { createSelector } from 'reselect';
@@ -305,7 +306,7 @@ const getRemoteInstanceFavicon = (state: RootState, host: string) => {
   return account?.pleroma?.favicon;
 };
 
-type HostFederation = {
+export type HostFederation = {
   [key in keyof MRFSimple]: boolean;
 };
 
@@ -328,19 +329,25 @@ export const makeGetHosts = () => {
   });
 };
 
-export const makeGetRemoteInstance = () => {
-  return createSelector([
+export const RemoteInstanceRecord = ImmutableRecord({
+  host: '',
+  favicon: null as string | null,
+  federation: null as unknown as HostFederation,
+});
+
+export type RemoteInstance = ReturnType<typeof RemoteInstanceRecord>;
+
+export const makeGetRemoteInstance = () =>
+  createSelector([
     (_state: RootState, host: string) => host,
     getRemoteInstanceFavicon,
     getRemoteInstanceFederation,
-  ], (host, favicon, federation) => {
-    return ImmutableMap({
+  ], (host, favicon, federation) =>
+    RemoteInstanceRecord({
       host,
       favicon,
       federation,
-    });
-  });
-};
+    }));
 
 type ColumnQuery = { type: string; prefix?: string };