Fixing refresh/reload related UX on channellist

Author: vishalnarkhede

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';
@@ -36,7 +36,7 @@ import {
   ThreadProvider,
 } from '../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { emojiData as emojiDataDefault } from '../../utils/utils';
+import { emojiData as emojiDataDefault, randomId } from '../../utils/utils';
 
 import type { LoadingErrorProps } from '../Indicators/LoadingErrorIndicator';
 import type { LoadingProps } from '../Indicators/LoadingIndicator';
@@ -111,7 +111,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 +454,7 @@ export const Channel = <
       attachments,
       created_at: new Date(),
       html: text,
-      id: `${client.userID}-${uuidv4()}`,
+      id: `${client.userID}-${randomId()}`,
       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?: () => undefined | 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(new Date());
 
   const queryChannels = async (
     queryType = '',
@@ -120,7 +121,18 @@ export const usePaginatedChannels = <
   };
 
   const loadNextPage = hasNextPage ? queryChannels : undefined;
-  const refreshList = () => queryChannels('refresh');
+  const refreshList = () => {
+    const now = new Date();
+    // Only allow pull-to-refresh 5 seconds after last successful refresh.
+    // @ts-ignore
+    if (now - lastRefresh.current < 5000 && !error) {
+      return;
+    }
+
+    lastRefresh.current = new Date();
+    return queryChannels('refresh');
+  };
+
   const reloadList = () => queryChannels('reload');
 
   useEffect(() => {

src/components/MessageList/MessageList.tsx

@@ -6,7 +6,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { v4 as uuidv4 } from 'uuid';
 
 import {
   DateSeparatorProps,
@@ -61,6 +60,7 @@ import type {
 } from '../../types/types';
 
 import { NetworkDownIndicator as DefaultNetworkDownIndicator } from './NetworkDownIndicator';
+import { randomId } from 'src/utils/utils';
 
 const ListContainer = (styled(FlatList)`
   flex: 1;
@@ -87,13 +87,13 @@ const keyExtractor = <
         ? typeof item.created_at === 'string'
           ? item.created_at
           : item.created_at.toISOString()
-        : uuidv4())
+        : randomId())
     );
   }
   if (item.date && typeof item.date !== 'string') {
     return item.date.toISOString();
   }
-  return uuidv4();
+  return randomId();
 };
 
 export type MessageListProps<

src/utils/utils.ts

@@ -376,3 +376,15 @@ export const MESSAGE_ACTIONS = {
 
 export const makeImageCompatibleUrl = (url: string) =>
   (url.indexOf('//') === 0 ? `https:${url}` : url).trim();
+
+/** adopted from https://github.com/ai/nanoid/blob/master/non-secure/index.js */
+const alphabet =
+  'ModuleSymbhasOwnPr0123456789ABCDEFGHNRVfgctiUvzKqYTJkLxpZXIjQW';
+export const randomId = () => {
+  let id = '';
+  for (let i = 0; i < 21; i++) {
+    // eslint-disable-next-line no-bitwise
+    id += alphabet[(Math.random() * 64) | 0];
+  }
+  return id;
+};