[UK-983] Channel instance check before reconnect (#37)

* Add a condition to check if current group channel exists before reconnecting

* Change interfaces naming to Dynamic and Static Params in the hook functions

Author: HoonBaek

src/legacy/message-refactor/FileMessage/stories/FileMessage.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { OutgoingFileMessage, IncomingFileMessage } from '../index.jsx';
 import { dummyFileMessageImage, dummyFileMessageAudio } from '../dummyFileMessage.mock';
 
-import { MessageStatusTypes } from '../../../../utils';
+import { MessageStatusTypes } from '../../../../ui/MessageStatus';
 
 export default { title: 'Legacy/FileMessage' };
 

…Conversation/hooks/useHandleReconnect.js …Conversation/hooks/useHandleReconnect.tssrc/smart-components/Conversation/hooks/useHandleReconnect.js renamed to src/smart-components/Conversation/hooks/useHandleReconnect.ts src/smart-components/Conversation/hooks/useHandleReconnect.js renamed to src/smart-components/Conversation/hooks/useHandleReconnect.ts

@@ -2,22 +2,38 @@ import { useEffect } from 'react';
 
 import * as utils from '../utils';
 import * as messageActionTypes from '../dux/actionTypes';
+import { Logger, Sdk } from '../../..';
+import { GroupChannel } from 'sendbird';
 
-function useHandleReconnect({ isOnline }, {
-  logger,
-  sdk,
-  currentGroupChannel,
-  messagesDispatcher,
-  userFilledMessageListQuery,
-}) {
+interface DynamicParams {
+  isOnline: boolean;
+}
+
+interface StaticParams {
+  logger: Logger;
+  sdk: Sdk;
+  currentGroupChannel: GroupChannel;
+  messagesDispatcher: ({ type: string, payload: any }) => void;
+  userFilledMessageListQuery?: Record<string, any>;
+}
+
+function useHandleReconnect(
+  { isOnline }: DynamicParams,
+  {
+    logger,
+    sdk,
+    currentGroupChannel,
+    messagesDispatcher,
+    userFilledMessageListQuery,
+  }: StaticParams,
+): void {
   useEffect(() => {
     const wasOffline = !isOnline;
     return () => {
       // state changed from offline to online
-      if (wasOffline) {
+      if (wasOffline && currentGroupChannel?.url) {
         logger.info('Refreshing conversation state');
-        const { appInfo = {} } = sdk;
-        const useReaction = appInfo.isUsingReaction || false;
+        const useReaction = sdk?.appInfo?.isUsingReaction || false;
 
         const messageListParams = new sdk.MessageListParams();
         messageListParams.prevResultSize = 30;
@@ -32,6 +48,7 @@ function useHandleReconnect({ isOnline }, {
         logger.info('Channel: Fetching messages', { currentGroupChannel, userFilledMessageListQuery });
         messagesDispatcher({
           type: messageActionTypes.GET_PREV_MESSAGES_START,
+          payload: null,
         });
 
         sdk.GroupChannel.getChannel(currentGroupChannel.url)
@@ -45,9 +62,10 @@ function useHandleReconnect({ isOnline }, {
               .then((messages) => {
                 messagesDispatcher({
                   type: messageActionTypes.CLEAR_SENT_MESSAGES,
+                  payload: null,
                 });
 
-                const hasMore = (messages && messages.length > 0);
+                const hasMore = messages?.length > 0;
                 const lastMessageTimeStamp = hasMore
                   ? messages[0].createdAt
                   : null;
@@ -66,7 +84,7 @@ function useHandleReconnect({ isOnline }, {
                 logger.error('Channel: Fetching messages failed', error);
               })
               .finally(() => {
-                currentGroupChannel.markAsRead();
+                currentGroupChannel.markAsRead?.();
               });
           });
       }

src/smart-components/Conversation/hooks/useScrollToMessage.ts

@@ -2,23 +2,23 @@ import { useCallback } from 'react';
 import { SendbirdTypes } from '../../../types';
 import { Logger } from '../../../index';
 
-interface useScrollToMessageDynamicParams {
+interface DynamicParams {
   setIntialTimeStamp(ts: number): null;
   setHighLightedMessageId(id: number): null;
   allMessages: SendbirdTypes['BaseMessageInstance'][];
 }
 
-interface useScrollToMessageStaticParams {
+interface StaticParams {
   logger: Logger;
 }
 
 function useScrollToMessage({
   setIntialTimeStamp,
   setHighLightedMessageId,
   allMessages,
-}: useScrollToMessageDynamicParams, {
-  logger,
-}: useScrollToMessageStaticParams): (createdAt: number, messageId: number) => void {
+}: DynamicParams,
+  { logger }: StaticParams,
+): (createdAt: number, messageId: number) => void {
   return useCallback(
     (createdAt: number, messageId: number) => {
       const isPresent = allMessages.find((m) => (
@@ -37,10 +37,10 @@ function useScrollToMessage({
         }
       });
     }, [
-      setIntialTimeStamp,
-      setHighLightedMessageId,
-      allMessages,
-    ],
+    setIntialTimeStamp,
+    setHighLightedMessageId,
+    allMessages,
+  ],
   );
 }
 

src/smart-components/OpenchannelConversation/hooks/useCheckScrollBottom.ts

@@ -1,15 +1,15 @@
 import { useCallback } from 'react';
 
-interface MainProps {
+interface DynamicParams {
   conversationScrollRef: React.RefObject<HTMLDivElement>;
 }
-interface ToolProps {
+interface StaticParams {
   logger: SendbirdUIKit.Logger;
 }
 
 function useCheckScrollBottom(
-  { conversationScrollRef }: MainProps,
-  { logger }: ToolProps,
+  { conversationScrollRef }: DynamicParams,
+  { logger }: StaticParams,
 ): () => boolean {
   return useCallback(() => {
     let isBottom = true;

src/smart-components/OpenchannelConversation/hooks/useDeleteMessageCallback.ts

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import * as messageActionTypes from '../dux/actionTypes';
 
-interface MainProps {
+interface DynamicParams {
   currentOpenChannel: SendbirdUIKit.OpenChannelType;
 }
-interface ToolProps {
+interface StaticParams {
   logger: SendbirdUIKit.Logger;
   messagesDispatcher: ({ type: string, payload: any }) => void;
 }
@@ -15,8 +15,8 @@ type CallbackReturn = (
 ) => void;
 
 function useDeleteMessageCallback(
-  { currentOpenChannel }: MainProps,
-  { logger, messagesDispatcher }: ToolProps,
+  { currentOpenChannel }: DynamicParams,
+  { logger, messagesDispatcher }: StaticParams,
 ): CallbackReturn {
   return useCallback((message, callback) => {
     logger.info('OpenChannel | useDeleteMessageCallback: Deleting message', message);

src/smart-components/OpenchannelConversation/hooks/useFileUploadCallback.ts

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import * as messageActionTypes from '../dux/actionTypes';
 import * as utils from '../utils';
 
-interface MainProps {
+interface DynamicParams {
   currentOpenChannel: SendbirdUIKit.OpenChannelType;
   onBeforeSendFileMessage: (file: File) => Sendbird.FileMessageParams;
   checkScrollBottom: () => boolean;
@@ -13,7 +13,7 @@ interface MainProps {
     resizingHeight?: number | string,
   };
 }
-interface ToolProps {
+interface StaticParams {
   sdk: SendbirdUIKit.Sdk;
   logger: SendbirdUIKit.Logger;
   messagesDispatcher: ({ type: string, payload: any }) => void;
@@ -27,8 +27,8 @@ function useFileUploadCallback(
     checkScrollBottom,
     imageCompression = {},
     onBeforeSendFileMessage,
-  }: MainProps,
-  { sdk, logger, messagesDispatcher }: ToolProps,
+  }: DynamicParams,
+  { sdk, logger, messagesDispatcher }: StaticParams,
 ): CallbackReturn {
   return useCallback((file) => {
     if (sdk && sdk.FileMessageParams) {

src/smart-components/OpenchannelConversation/hooks/useHandleChannelEvents.ts

@@ -3,19 +3,19 @@ import * as messageActionTypes from '../dux/actionTypes';
 import uuidv4 from '../../../utils/uuid';
 import { scrollIntoLast } from '../utils';
 
-interface MainProps {
+interface DynamicParams {
   currentOpenChannel: SendbirdUIKit.OpenChannelType;
   checkScrollBottom: () => boolean;
 }
-interface ToolProps {
+interface StaticParams {
   sdk: SendbirdUIKit.Sdk;
   logger: SendbirdUIKit.Logger;
   messagesDispatcher: ({ type: string, payload: any }) => void;
 }
 
 function useHandleChannelEvents(
-  { currentOpenChannel, checkScrollBottom }: MainProps,
-  { sdk, logger, messagesDispatcher }: ToolProps,
+  { currentOpenChannel, checkScrollBottom }: DynamicParams,
+  { sdk, logger, messagesDispatcher }: StaticParams,
 ): void {
   useEffect(() => {
     const messageReceiverId = uuidv4();

src/smart-components/OpenchannelConversation/hooks/useInitialMessagesFetch.ts

@@ -2,20 +2,20 @@ import { useEffect } from 'react';
 import * as messageActionTypes from '../dux/actionTypes';
 import { scrollIntoLast } from '../utils';
 
-interface MainProps {
+interface DynamicParams {
   currentOpenChannel: SendbirdUIKit.OpenChannelType;
   /* eslint-disable @typescript-eslint/no-explicit-any*/
   userFilledMessageListParams?: Record<string, any>;
 }
-interface ToolProps {
+interface StaticParams {
   sdk: SendbirdUIKit.Sdk;
   logger: SendbirdUIKit.Logger;
   messagesDispatcher: ({ type: string, payload: any }) => void;
 }
 
 function useInitialMessagesFetch(
-  { currentOpenChannel, userFilledMessageListParams }: MainProps,
-  { sdk, logger, messagesDispatcher }: ToolProps,
+  { currentOpenChannel, userFilledMessageListParams }: DynamicParams,
+  { sdk, logger, messagesDispatcher }: StaticParams,
 ): void {
   useEffect(() => {
     logger.info('OpenChannel | useInitialMessagesFetch: Setup started', currentOpenChannel);

src/smart-components/OpenchannelConversation/hooks/useResendMessageCallback.ts

@@ -1,18 +1,18 @@
 import { useCallback } from 'react';
 import * as messageActionTypes from '../dux/actionTypes';
 
-interface MainProps {
+interface StaticParams {
   currentOpenChannel: SendbirdUIKit.OpenChannelType;
 }
-interface ToolProps {
+interface StaticParams {
   logger: SendbirdUIKit.Logger;
   messagesDispatcher: ({ type: string, payload: any }) => void;
 }
 type CallbackReturn = (failedMessage: SendbirdUIKit.ClientUserMessage | SendbirdUIKit.ClientFileMessage) => void;
 
 function useResendMessageCallback(
-  { currentOpenChannel }: MainProps,
-  { logger, messagesDispatcher }: ToolProps,
+  { currentOpenChannel }: StaticParams,
+  { logger, messagesDispatcher }: StaticParams,
 ): CallbackReturn {
   return useCallback((failedMessage) => {
     logger.info('OpenChannel | useResendMessageCallback: Resending message has started', failedMessage);

src/smart-components/OpenchannelConversation/hooks/useScrollCallback.ts

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 import * as messageActionTypes from '../dux/actionTypes';
 
-interface MainProps {
+interface DynamicParams {
   currentOpenChannel: SendbirdUIKit.OpenChannelType;
   lastMessageTimestamp: number;
 }
-interface ToolProps {
+interface StaticParams {
   sdk: SendbirdUIKit.Sdk;
   logger: SendbirdUIKit.Logger;
   messagesDispatcher: ({ type: string, payload: any }) => void;
@@ -16,8 +16,8 @@ interface ToolProps {
 type CallbackReturn = (callback: () => void) => void;
 
 function useScrollCallback(
-  { currentOpenChannel, lastMessageTimestamp }: MainProps,
-  { sdk, logger, messagesDispatcher, hasMore, userFilledMessageListParams }: ToolProps,
+  { currentOpenChannel, lastMessageTimestamp }: DynamicParams,
+  { sdk, logger, messagesDispatcher, hasMore, userFilledMessageListParams }: StaticParams,
 ): CallbackReturn {
   return useCallback((callback) => {
     if (hasMore && sdk && sdk.MessageListParams) {