Fix: Cannot Pin/Unpin Instances

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

src/actions/remote-timeline.ts

@@ -1,11 +1,11 @@
 import { getSettings, changeSetting } from 'soapbox/actions/settings';
 
-import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import type { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import type { AppDispatch, RootState } from 'soapbox/store';
 
 const getPinnedHosts = (state: RootState) => {
   const settings = getSettings(state);
-  return settings.getIn(['remote_timeline', 'pinnedHosts']) as ImmutableOrderedSet<string>;
+  return settings.getIn(['remote_timeline', 'pinnedHosts']) as ImmutableList<string> | ImmutableOrderedSet<string>;
 };
 
 const pinHost = (host: string) =>
@@ -13,7 +13,7 @@ const pinHost = (host: string) =>
     const state = getState();
     const pinnedHosts = getPinnedHosts(state);
 
-    return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.add(host)));
+    return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.toOrderedSet().add(host)));
   };
 
 const unpinHost = (host: string) =>
@@ -21,7 +21,7 @@ const unpinHost = (host: string) =>
     const state = getState();
     const pinnedHosts = getPinnedHosts(state);
 
-    return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.remove(host)));
+    return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.toOrderedSet().remove(host)));
   };
 
 export {

src/actions/settings.ts

@@ -1,4 +1,4 @@
-import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import { defineMessage } from 'react-intl';
 import { createSelector } from 'reselect';
 import { v4 as uuid } from 'uuid';
@@ -169,7 +169,7 @@ const defaultSettings = ImmutableMap({
   ]),
 
   remote_timeline: ImmutableMap({
-    pinnedHosts: ImmutableOrderedSet(),
+    pinnedHosts: ImmutableList(),
   }),
 });
 

src/features/remote-timeline/components/pinned-hosts-picker.tsx

@@ -16,7 +16,7 @@ const PinnedHostsPicker: React.FC<IPinnedHostsPicker> = ({ host: activeHost }) =
 
   return (
     <HStack className='mb-4' space={2}>
-      {pinnedHosts.map((host: any) => (
+      {pinnedHosts.map((host) => (
         <Button
           key={host}
           to={`/timeline/${host}`}