[Fix] Crash on remote instance page, remove Remote Instance layout with unmaintained instance pin feature (#145)

app/soapbox/features/remote_timeline/index.tsx

@@ -1,20 +1,18 @@
 import React, { useEffect, useRef } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-import { useHistory } from 'react-router-dom';
 
 import { connectRemoteStream } from 'soapbox/actions/streaming';
 import { expandRemoteTimeline } from 'soapbox/actions/timelines';
-import IconButton from 'soapbox/components/icon_button';
-import { HStack, Text } from 'soapbox/components/ui';
 import Column from 'soapbox/features/ui/components/column';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
+import { isMobile } from 'soapbox/is_mobile';
 
 import Timeline from '../ui/components/timeline';
 
 import PinnedHostsPicker from './components/pinned_hosts_picker';
 
 const messages = defineMessages({
-  title: { id: 'column.remote', defaultMessage: 'Federated timeline' },
+  title: { id: 'remote_timeline.filter_message', defaultMessage: 'You are viewing the timeline of {instance}.' },
 });
 
 interface IRemoteTimeline {
@@ -26,7 +24,6 @@ interface IRemoteTimeline {
 /** View statuses from a remote instance. */
 const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   const intl = useIntl();
-  const history = useHistory();
   const dispatch = useAppDispatch();
 
   const instance = params?.instance as string;
@@ -37,18 +34,12 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   const timelineId = 'remote';
   const onlyMedia = !!settings.getIn(['remote', 'other', 'onlyMedia']);
 
-  const pinned: boolean = (settings.getIn(['remote_timeline', 'pinnedHosts']) as any).includes(instance);
-
   const disconnect = () => {
     if (stream.current) {
       stream.current();
     }
   };
 
-  const handleCloseClick: React.MouseEventHandler = () => {
-    history.push('/timeline/fediverse');
-  };
-
   const handleLoadMore = (maxId: string) => {
     dispatch(expandRemoteTimeline(instance, { maxId, onlyMedia }));
   };
@@ -56,41 +47,36 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   useEffect(() => {
     disconnect();
     dispatch(expandRemoteTimeline(instance, { onlyMedia, maxId: undefined }));
-    stream.current = dispatch(connectRemoteStream(instance, { onlyMedia }));
 
-    return () => {
-      disconnect();
-      stream.current = null;
-    };
+    if (!isMobile(window.innerWidth)) {
+      stream.current = dispatch(connectRemoteStream(instance, { onlyMedia }));
+
+      return () => {
+        disconnect();
+        stream.current = null;
+      };
+    }
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}>
-      {instance && <PinnedHostsPicker host={instance} />}
-      {!pinned && <HStack className='mb-4 px-2' space={2}>
-        <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
-        <Text>
-          <FormattedMessage
-            id='remote_timeline.filter_message'
-            defaultMessage='You are viewing the timeline of {instance}.'
-            values={{ instance }}
-          />
-        </Text>
-      </HStack>}
-      <Timeline
-        scrollKey={`${timelineId}_${instance}_timeline`}
-        timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
-        onLoadMore={handleLoadMore}
-        emptyMessage={
-          <FormattedMessage
-            id='empty_column.remote'
-            defaultMessage='There is nothing here! Manually follow users from {instance} to fill it up.'
-            values={{ instance }}
-          />
-        }
-        divideType='space'
-      />
-    </Column>
+    <div className='pt-3'>
+      <Column label={instance} heading={intl.formatMessage(messages.title, { instance })} transparent withHeader={false}>
+        {instance && <PinnedHostsPicker host={instance} />}
+        <Timeline
+          scrollKey={`${timelineId}_${instance}_timeline`}
+          timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
+          onLoadMore={handleLoadMore}
+          emptyMessage={
+            <FormattedMessage
+              id='empty_column.remote'
+              defaultMessage='There is nothing here! Manually follow users from {instance} to fill it up.'
+              values={{ instance }}
+            />
+          }
+          divideType='space'
+        />
+      </Column>
+    </div>
   );
 };
 

app/soapbox/features/ui/index.tsx

@@ -33,7 +33,6 @@ import DefaultPage from 'soapbox/pages/default_page';
 // import GroupPage from 'soapbox/pages/group_page';
 import HomePage from 'soapbox/pages/home_page';
 import ProfilePage from 'soapbox/pages/profile_page';
-import RemoteInstancePage from 'soapbox/pages/remote_instance_page';
 import StatusPage from 'soapbox/pages/status_page';
 import { getAccessToken, getVapidKey } from 'soapbox/utils/auth';
 import { isStandalone } from 'soapbox/utils/state';
@@ -183,7 +182,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       */}
       {features.federating && <WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} publicRoute />}
       {features.federating && <WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />}
-      {features.federating && <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} />}
+      {features.federating && <WrappedRoute path='/timeline/:instance' exact page={HomePage} component={RemoteTimeline} content={children} />}
 
       {features.conversations && <WrappedRoute path='/conversations' page={DefaultPage} component={Conversations} content={children} />}
       {features.directTimeline && <WrappedRoute path='/messages' page={DefaultPage} component={DirectTimeline} content={children} />}

app/soapbox/locales/fr.json

@@ -502,7 +502,7 @@
   "empty_column.notifications": "Vous n’avez pas encore de notification. Interagissez avec d’autres personnes pour débuter la conversation.",
   "empty_column.notifications_filtered": "Vous n'avez pas encore de notifications de ce type.",
   "empty_column.public": "Il n’y a rien ici ! Écrivez quelque chose publiquement, ou bien suivez manuellement des personnes d’autres instances pour le remplir",
-  "empty_column.remote": "There is nothing here! Manually follow users from {instance} to fill it up.",
+  "empty_column.remote": "C'est bien vide ! Suivez quelques utilisateurs de {instance} pour remplir ce fil.",
   "empty_column.scheduled_statuses": "Vous n'avez pas planifié de statut pour le moment.",
   "empty_column.search.accounts": "Il n'y a pas de comptes correspondant à la recherche \"{term}\"",
   "empty_column.search.hashtags": "Il n'y a pas de hashtags correspondant à la recherche \"{term}\"",
@@ -973,7 +973,7 @@
   "remote_interaction.reply": "Proceed to reply",
   "remote_interaction.reply_title": "Reply to a post remotely",
   "remote_interaction.user_not_found_error": "Couldn't find given user",
-  "remote_timeline.filter_message": "You are viewing the timeline of {instance}.",
+  "remote_timeline.filter_message": "Fil de l'instance {instance}",
   "reply_indicator.cancel": "Annuler",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",

app/soapbox/pages/remote_instance_page.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import LinkFooter from 'soapbox/features/ui/components/link_footer';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import {
-  PromoPanel,
-  InstanceInfoPanel,
-  InstanceModerationPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
-import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
-
-import { Layout } from '../components/ui';
-
-interface IRemoteInstancePage {
-  params?: {
-    instance?: string,
-  },
-}
-
-/** Page for viewing a remote instance timeline. */
-const RemoteInstancePage: React.FC<IRemoteInstancePage> = ({ children, params }) => {
-  const host = params?.instance;
-
-  const account = useOwnAccount();
-  const disclosed = useAppSelector(federationRestrictionsDisclosed);
-
-  return (
-    <>
-      <Layout.Main>
-        {children}
-      </Layout.Main>
-
-      <Layout.Aside>
-        <BundleContainer fetchComponent={PromoPanel}>
-          {Component => <Component key='promo-panel' />}
-        </BundleContainer>
-        <BundleContainer fetchComponent={InstanceInfoPanel}>
-          {Component => <Component host={host} />}
-        </BundleContainer>
-        {(disclosed || account?.admin) && (
-          <BundleContainer fetchComponent={InstanceModerationPanel}>
-            {Component => <Component host={host} />}
-          </BundleContainer>
-        )}
-        <LinkFooter key='link-footer' />
-      </Layout.Aside>
-    </>
-  );
-};
-
-export default RemoteInstancePage;

app/soapbox/utils/config_db.ts

@@ -25,7 +25,8 @@ const toSimplePolicy = (configs: ImmutableList<Config>): Policy => {
   const reducer = (acc: ImmutableMap<string, any>, curr: ImmutableMap<string, any>) => {
     const key = curr.getIn(['tuple', 0]) as string;
     const hosts = curr.getIn(['tuple', 1]) as ImmutableList<string>;
-    return acc.set(trimStart(key, ':'), ImmutableSet(hosts));
+    if ((typeof hosts !== 'object' || hosts === null)) return acc;
+    return acc.set(trimStart(key, ':'),  ImmutableSet(hosts));
   };
 
   if (config?.get) {