Merge pull request #447 from GetStream/vishal/channel-list-fix2

ChannelList reload/refresh UX fixes and stream-chat bump

Author: vishalnarkhede

.gitignore

@@ -11,5 +11,11 @@ yarn-error.log
 dist/
 lib/
 .env*
-
+vendor
+pods
+.gradle
+.idea
+build
+local.properties
+xcuserdata
 .tern-port

expo-package/yarn.lock

@@ -1428,10 +1428,10 @@ source-map@^0.5.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-[email protected].0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-2.0.0.tgz#ca0f5a241cdf0d82d4a8e938311db107428e2533"
-  integrity sha512-JWZCSSKBLBTEQXIsR0vGr6lbj9Wl+2KnMhOQnq4CF4AqVEnSV/zd+78z+g8ZwZNjxs3wah+KmjP9kwm2hqHl5Q==
+[email protected].2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-2.0.2.tgz#b7761d190039a6b93eb2e0107e4f72a79e51791a"
+  integrity sha512-NEb4wlZv66I7XF+HofotEraqYVNBrYnR8Hq0u4Giz4mU8qkofoTSp35NwwuXeALBR485jPPYM3F20Fg4CjV3aA==
   dependencies:
     "@babel/runtime" "7.11.2"
     "@stream-io/react-native-simple-markdown" "1.2.1"

native-package/yarn.lock

@@ -1474,10 +1474,10 @@ source-map@^0.5.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-[email protected].0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-2.0.0.tgz#ca0f5a241cdf0d82d4a8e938311db107428e2533"
-  integrity sha512-JWZCSSKBLBTEQXIsR0vGr6lbj9Wl+2KnMhOQnq4CF4AqVEnSV/zd+78z+g8ZwZNjxs3wah+KmjP9kwm2hqHl5Q==
+[email protected].2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-2.0.2.tgz#b7761d190039a6b93eb2e0107e4f72a79e51791a"
+  integrity sha512-NEb4wlZv66I7XF+HofotEraqYVNBrYnR8Hq0u4Giz4mU8qkofoTSp35NwwuXeALBR485jPPYM3F20Fg4CjV3aA==
   dependencies:
     "@babel/runtime" "7.11.2"
     "@stream-io/react-native-simple-markdown" "1.2.1"

package.json

@@ -103,7 +103,7 @@
     "react-native-actionsheet": "2.4.2",
     "react-native-image-zoom-viewer": "3.0.1",
     "seamless-immutable": "7.1.4",
-    "stream-chat": "2.7.0",
+    "stream-chat": "2.9.0",
     "styled-components": "5.2.0",
     "uuid": "8.3.1"
   },

src/components/Channel/Channel.tsx

@@ -13,8 +13,8 @@ import {
   SendMessageAPIResponse,
   StreamChat,
   Message as StreamMessage,
+  UpdatedMessage,
 } from 'stream-chat';
-import { v4 as uuidv4 } from 'uuid';
 
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import { LoadingErrorIndicator as LoadingErrorIndicatorDefault } from '../Indicators/LoadingErrorIndicator';
@@ -52,6 +52,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { generateRandomId } from '../../utils/generateRandomId';
 
 export type ChannelProps<
   At extends UnknownType = DefaultAttachmentType,
@@ -111,7 +112,7 @@ export type ChannelProps<
    */
   doUpdateMessageRequest?: (
     channelId: string,
-    updatedMessage: StreamMessage<At, Me, Us>,
+    updatedMessage: UpdatedMessage<At, Ch, Co, Me, Re, Us>,
   ) => ReturnType<StreamChat<At, Ch, Co, Ev, Me, Re, Us>['updateMessage']>;
   emojiData?: MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>['emojiData'];
   /**
@@ -454,7 +455,7 @@ export const Channel = <
       attachments,
       created_at: new Date(),
       html: text,
-      id: `${client.userID}-${uuidv4()}`,
+      id: `${client.userID}-${generateRandomId()}`,
       mentioned_users:
         mentioned_users?.map((userId) => ({
           id: userId,

src/components/ChannelList/ChannelListMessenger.tsx

@@ -71,7 +71,7 @@ export type ChannelListMessengerProps<
    * Function to refresh the channel list that is similar to `reloadList`, but it doesn't wipe out existing channels
    * from UI before loading the new ones
    */
-  refreshList?: () => Promise<void>;
+  refreshList?: () => void | Promise<void>;
 
   /**
    * Removes all the existing channels from UI and loads fresh channels
@@ -152,19 +152,22 @@ export const ChannelListMessenger = <
   }, [loadingChannels]);
 
   const HeaderIndicator: React.FC = () => {
+    if (loadingChannels) return null;
+
     if (!isOnline) {
       return <HeaderNetworkDownIndicator />;
     } else if (error) {
       return <HeaderErrorIndicator onPress={refreshList} />;
     }
+
     return null;
   };
 
   const renderItem = (channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => (
     <ChannelPreview<At, Ch, Co, Ev, Me, Re, Us> {...props} channel={channel} />
   );
 
-  if (error && !refreshing && !channels?.length) {
+  if (error && !refreshing && !loadingChannels && !channels?.length) {
     return (
       <LoadingErrorIndicator
         error={error}

src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
@@ -61,6 +61,7 @@ export const usePaginatedChannels = <
   const [loadingNextPage, setLoadingNextPage] = useState(false);
   const [offset, setOffset] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
+  const lastRefresh = useRef(Date.now());
 
   const queryChannels = async (
     queryType = '',
@@ -120,7 +121,17 @@ export const usePaginatedChannels = <
   };
 
   const loadNextPage = hasNextPage ? queryChannels : undefined;
-  const refreshList = () => queryChannels('refresh');
+  const refreshList = () => {
+    const now = Date.now();
+    // Only allow pull-to-refresh 5 seconds after last successful refresh.
+    if (now - lastRefresh.current < 5000 && !error) {
+      return;
+    }
+
+    lastRefresh.current = Date.now();
+    return queryChannels('refresh');
+  };
+
   const reloadList = () => queryChannels('reload');
 
   useEffect(() => {

src/components/Chat/Chat.tsx

@@ -155,6 +155,7 @@ export const Chat = <
 
   useEffect(() => {
     client?.setUserAgent(`stream-chat-react-native-${Platform.OS}-${version}`);
+    client.recoverStateOnReconnect = false;
   }, []);
 
   const setActiveChannel = (newChannel?: Channel<At, Ch, Co, Ev, Me, Re, Us>) =>

src/components/MessageInput/MessageInput.tsx

@@ -13,6 +13,7 @@ import {
   logChatPromiseExecution,
   SendFileAPIResponse,
   Message as StreamMessage,
+  UpdatedMessage,
   UserResponse,
 } from 'stream-chat';
 
@@ -40,7 +41,7 @@ import {
   ImageUpload,
   useMessageDetailsForState,
 } from './hooks/useMessageDetailsForState';
-import { generateRandomId } from './utils/generateRandomId';
+import { generateRandomId } from '../../utils/generateRandomId';
 
 import {
   AutoCompleteInput,
@@ -791,7 +792,7 @@ export const MessageInput = <
         attachments,
         mentioned_users: mentionedUsers,
         text: prevText,
-      } as StreamMessage<At, Me, Us>;
+      } as UpdatedMessage<At, Ch, Co, Me, Re, Us>;
 
       // TODO: Remove this line and show an error when submit fails
       clearEditingState();
@@ -838,7 +839,7 @@ export const MessageInput = <
         await client.updateMessage({
           ...editing,
           text,
-        } as StreamMessage<At, Me, Us>);
+        } as UpdatedMessage<At, Ch, Co, Me, Re, Us>);
       }
 
       resetInput();

src/components/MessageInput/hooks/useMessageDetailsForState.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { generateRandomId } from '../utils/generateRandomId';
+import { generateRandomId } from '../../../utils/generateRandomId';
 
 import {
   isEditingBoolean,