Merge pull request #333 from GetStream/CRNS-155/undefined-channel-fix

CRNS-155/Handle undefined channel

Author: DanC5

src/components/Channel/Channel.js

@@ -37,7 +37,10 @@ const Channel = (props) => {
     disableIfFrozenChannel = true,
     disableKeyboardCompatibleView = false,
     emojiData = emojiDataDefault,
+    EmptyStateIndicator = EmptyStateIndicatorDefault,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
+    LoadingErrorIndicator = LoadingErrorIndicatorDefault,
+    LoadingIndicator = LoadingIndicatorDefault,
   } = props;
 
   const { client } = useContext(ChatContext);
@@ -74,7 +77,7 @@ const Channel = (props) => {
   const [threadHasMore, setThreadHasMore] = useState(true);
   const [threadLoadingMore, setThreadLoadingMore] = useState(false);
   const [threadMessages, setThreadMessages] = useState(
-    channel.state?.threads?.[props.thread?.id] || [],
+    channel?.state?.threads?.[props.thread?.id] || [],
   );
   const [typing, setTyping] = useState(Immutable({}));
   const [watcherCount, setWatcherCount] = useState();
@@ -85,7 +88,7 @@ const Channel = (props) => {
 
     return () => {
       client.off('connection.recovered', handleEvent);
-      channel.off?.(handleEvent);
+      channel?.off?.(handleEvent);
       handleEventStateThrottled.cancel();
       loadMoreFinishedDebounced.cancel();
       loadMoreThreadFinishedDebounced.cancel();
@@ -192,7 +195,7 @@ const Channel = (props) => {
   const initChannel = async () => {
     let initError = false;
 
-    if (!channel.initialized) {
+    if (!channel.initialized && channel.cid) {
       try {
         await channel.watch();
       } catch (e) {
@@ -456,9 +459,8 @@ const Channel = (props) => {
 
   const channelContext = {
     channel,
-    disabled: channel.data?.frozen && disableIfFrozenChannel,
-    EmptyStateIndicator:
-      props.EmptyStateIndicator || EmptyStateIndicatorDefault,
+    disabled: channel?.data?.frozen && disableIfFrozenChannel,
+    EmptyStateIndicator,
     error,
     eventHistory,
     lastRead,
@@ -500,6 +502,10 @@ const Channel = (props) => {
     threadMessages,
   };
 
+  if (!channel || error) {
+    return <LoadingErrorIndicator error={error} listType='message' />;
+  }
+
   if (!channel?.cid || !channel.watch) {
     return (
       <Text style={{ fontWeight: 'bold', padding: 16 }} testID='no-channel'>
@@ -508,13 +514,7 @@ const Channel = (props) => {
     );
   }
 
-  if (error) {
-    const { LoadingErrorIndicator = LoadingErrorIndicatorDefault } = props;
-    return <LoadingErrorIndicator error={error} listType='message' />;
-  }
-
   if (loading) {
-    const { LoadingIndicator = LoadingIndicatorDefault } = props;
     return <LoadingIndicator listType='message' />;
   }
 

src/components/Channel/__tests__/Channel.test.js

@@ -76,7 +76,7 @@ describe('Channel', () => {
     cleanup();
   });
 
-  it('should render simple text if the channel prop is not provided', async () => {
+  it('should render a simple text error if the channel id does not exist', async () => {
     const nullChannel = { ...channel, cid: null };
     const { getByTestId } = renderComponent({ channel: nullChannel });