fix: improve handling of inactive channels

(closes #432)

src/components/navigation/left/HomeSidebar.tsx

@@ -5,7 +5,7 @@ import {
     Notepad,
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, Redirect, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components/macro";
 
@@ -47,14 +47,16 @@ export default observer(() => {
     const { pathname } = useLocation();
     const client = useContext(AppContext);
     const state = useApplicationState();
-    const { channel: currentChannel } = useParams<{ channel: string }>();
+    const { channel: channel_id } = useParams<{ channel: string }>();
     const { openScreen } = useIntermediate();
 
     const channels = [...client.channels.values()].filter(
-        (x) => x.channel_type === "DirectMessage" || x.channel_type === "Group",
+        (x) =>
+            (x.channel_type === "DirectMessage" && x.active) ||
+            x.channel_type === "Group",
     );
 
-    const obj = client.channels.get(currentChannel);
+    const channel = client.channels.get(channel_id);
 
     // ! FIXME: move this globally
     // Track what page the user was last on (in home page).
@@ -104,9 +106,10 @@ export default observer(() => {
                     </>
                 )}
                 <ConditionalLink
-                    active={obj?.channel_type === "SavedMessages"}
+                    active={channel?.channel_type === "SavedMessages"}
                     to="/open/saved">
-                    <ButtonItem active={obj?.channel_type === "SavedMessages"}>
+                    <ButtonItem
+                        active={channel?.channel_type === "SavedMessages"}>
                         <Notepad size={20} />
                         <span>
                             <Text id="app.navigation.tabs.saved" />
@@ -152,7 +155,7 @@ export default observer(() => {
                     return (
                         <ConditionalLink
                             key={channel._id}
-                            active={channel._id === currentChannel}
+                            active={channel._id === channel_id}
                             to={`/channel/${channel._id}`}>
                             <ChannelButton
                                 user={user}
@@ -165,7 +168,7 @@ export default observer(() => {
                                         : undefined
                                 }
                                 alertCount={mentionCount}
-                                active={channel._id === currentChannel}
+                                active={channel._id === channel_id}
                             />
                         </ConditionalLink>
                     );

src/components/navigation/left/ServerListSidebar.tsx

@@ -290,7 +290,7 @@ export default observer(() => {
                 {channels
                     .filter(
                         (x) =>
-                            (x.channel_type === "DirectMessage" ||
+                            ((x.channel_type === "DirectMessage" && x.active) ||
                                 x.channel_type === "Group") &&
                             x.unread,
                     )

src/pages/channels/Channel.tsx

@@ -97,29 +97,35 @@ const PlaceholderBase = styled.div`
     }
 `;
 
-export function Channel({ id, server_id }: { id: string; server_id: string }) {
-    const client = useClient();
-    const channel = client.channels.get(id);
+export const Channel = observer(
+    ({ id, server_id }: { id: string; server_id: string }) => {
+        const client = useClient();
 
-    if (server_id && !channel) {
-        const server = client.servers.get(server_id);
-        if (server && server.channel_ids.length > 0) {
-            return (
-                <Redirect
-                    to={`/server/${server_id}/channel/${server.channel_ids[0]}`}
-                />
-            );
+        if (!client.channels.exists(id)) {
+            if (server_id) {
+                const server = client.servers.get(server_id);
+                if (server && server.channel_ids.length > 0) {
+                    return (
+                        <Redirect
+                            to={`/server/${server_id}/channel/${server.channel_ids[0]}`}
+                        />
+                    );
+                }
+            } else {
+                return <Redirect to="/" />;
+            }
+
+            return <ChannelPlaceholder />;
         }
-    }
 
-    if (!channel) return <ChannelPlaceholder />;
+        const channel = client.channels.get(id)!;
+        if (channel.channel_type === "VoiceChannel") {
+            return <VoiceChannel channel={channel} />;
+        }
 
-    if (channel.channel_type === "VoiceChannel") {
-        return <VoiceChannel channel={channel} />;
-    }
-
-    return <TextChannel channel={channel} />;
-}
+        return <TextChannel channel={channel} />;
+    },
+);
 
 const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
     const layout = useApplicationState().layout;

src/pages/friends/Friends.tsx

@@ -34,6 +34,7 @@ export default observer(() => {
     const friends = users.filter(
         (x) => x.relationship === RelationshipStatus.Friend,
     );
+
     const lists = [
         [
             "",