stream-chat-react-native-core 5.36.0-beta.5 → 5.36.0-beta.7

package/src/components/Chat/__tests__/Chat.test.js

@@ -9,7 +9,8 @@ import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
-import { getTestClient } from '../../../mock-builders/mock';
+import { getTestClient, getTestClientWithUser, setUser } from '../../../mock-builders/mock';
+import { DBSyncManager } from '../../../utils/DBSyncManager';
 import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Chat } from '../Chat';
 
@@ -24,7 +25,10 @@ const TranslationContextConsumer = ({ fn }) => {
 };
 
 describe('Chat', () => {
-  afterEach(cleanup);
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
   const chatClient = getTestClient();
 
   it('renders children without crashing', async () => {
@@ -215,5 +219,79 @@ describe('Chat', () => {
         expect(context.tDateTimeParser).toBe(newI18nInstance.tDateTimeParser);
       });
     });
+
+    it('makes sure DBSyncManager listeners are cleaned up after Chat remount', async () => {
+      const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
+      jest.spyOn(DBSyncManager, 'init');
+
+      // initial mount and render
+      const { rerender } = render(
+        <Chat client={chatClientWithUser} enableOfflineSupport key={1} />,
+      );
+
+      // the unsubscribe fn changes during init(), so we keep a reference to the spy
+      const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+
+      // remount
+      rerender(<Chat client={chatClientWithUser} enableOfflineSupport key={2} />);
+
+      await waitFor(() => {
+        expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
+        expect(unsubscribeSpy).toHaveBeenCalledTimes(2);
+        expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
+          listenersAfterInitialMount.length,
+        );
+      });
+    });
+
+    it('makes sure DBSyncManager listeners are cleaned up if the user changes', async () => {
+      const chatClientWithUser = await getTestClientWithUser({ id: 'testID1' });
+      jest.spyOn(DBSyncManager, 'init');
+
+      // initial render
+      const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
+
+      // the unsubscribe fn changes during init(), so we keep a reference to the spy
+      const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      await act(async () => {
+        await setUser(chatClientWithUser, { id: 'testID2' });
+      });
+      const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+
+      // rerender with different user ID
+      rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
+
+      await waitFor(() => {
+        expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
+        expect(unsubscribeSpy).toHaveBeenCalledTimes(1);
+        expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
+          listenersAfterInitialMount.length,
+        );
+      });
+    });
+
+    it('makes sure DBSyncManager state stays intact during normal rerenders', async () => {
+      const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
+      jest.spyOn(DBSyncManager, 'init');
+
+      // initial render
+      const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
+
+      // the unsubscribe fn changes during init(), so we keep a reference to the spy
+      const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+
+      // rerender
+      rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
+
+      await waitFor(() => {
+        expect(DBSyncManager.init).toHaveBeenCalledTimes(1);
+        expect(unsubscribeSpy).toHaveBeenCalledTimes(0);
+        expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
+          listenersAfterInitialMount.length,
+        );
+      });
+    });
   });
 });

package/src/components/Chat/hooks/useAppSettings.ts

@@ -47,6 +47,7 @@ export const useAppSettings = <
     }
 
     enforeAppSettings();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client, isOnline, initialisedDatabase]);
 
   return appSettings;

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -38,6 +38,7 @@ export const useCreateChatContext = <
       resizableCDNHosts,
       setActiveChannel,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [appSettings, channelId, clientValues, connectionRecovering, isOnline, mutedUsersLength],
   );
 

package/src/components/Chat/hooks/useIsOnline.ts

@@ -102,6 +102,7 @@ export const useIsOnline = <
       chatListeners.forEach((listener) => listener.unsubscribe?.());
       unsubscribeNetInfo?.();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [clientExists]);
 
   return { connectionRecovering, isOnline };

package/src/components/Chat/hooks/useMutedUsers.ts

@@ -20,6 +20,7 @@ export const useMutedUsers = <
 
     const listener = client?.on('notification.mutes_updated', handleEvent);
     return () => listener?.unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setMutedUsers]);
 
   return mutedUsers;

package/src/components/Chat/hooks/useSyncDatabase.ts

@@ -28,5 +28,6 @@ export const useSyncDatabase = <
     return () => {
       listener?.unsubscribe();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client, initialisedDatabase]);
 };

package/src/components/ImageGallery/ImageGallery.tsx

@@ -160,6 +160,7 @@ export const ImageGallery = <
   const quarterScreenHeight = fullWindowHeight / 4;
   const snapPoints = React.useMemo(
     () => [(fullWindowHeight * 3) / 4, fullWindowHeight - imageGalleryGridHandleHeight],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 
@@ -193,6 +194,7 @@ export const ImageGallery = <
   useEffect(() => {
     Keyboard.dismiss();
     showScreen();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -295,6 +297,7 @@ export const ImageGallery = <
 
   useEffect(() => {
     setImageGalleryAttachments(photos);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -324,6 +327,7 @@ export const ImageGallery = <
     );
 
     runOnUI(updatePosition)(newIndex);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedMessage, photoLength]);
 
   /**
@@ -351,6 +355,7 @@ export const ImageGallery = <
         });
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uriForCurrentImage]);
 
   const { onDoubleTap, onPan, onPinch, onSingleTap } = useImageGalleryGestures({

package/src/components/ImageGallery/components/ImageGalleryOverlay.tsx

@@ -54,6 +54,7 @@ export const ImageGalleryOverlay = (props: Props) => {
       opacity.value = 0;
       setFadedIn(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentBottomSheetIndex]);
 
   const showOverlayStyle = useAnimatedStyle<ViewStyle>(

package/src/components/Indicators/LoadingDot.tsx

@@ -42,6 +42,7 @@ export const LoadingDot = (props: Props) => {
         -1,
       ),
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const dotStyle = useAnimatedStyle<ViewStyle>(

package/src/components/KeyboardCompatibleView/KeyboardCompatibleViewFC.tsx

@@ -108,10 +108,12 @@ export const KeyboardCompatibleView = ({
 
       unsetKeyboardListeners();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
     updateBottomIfNecessary();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [keyboardEvent.current]);
 
   const dismissKeyboard: () => Promise<void> | undefined = () => {

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -100,6 +100,7 @@ export const useCreateMessageContext = <
       threadList,
       videos,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       actionsEnabled,
       quotedMessageDeletedValue,

package/src/components/Message/hooks/useProcessReactions.ts

@@ -112,5 +112,6 @@ export const useProcessReactions = <
       hasReactions: unsortedReactions.length > 0,
       totalReactionCount: unsortedReactions.reduce((total, { count }) => total + count, 0),
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [reaction_groups, own_reactions?.length, latest_reactions?.length, sortReactions]);
 };

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -158,6 +158,7 @@ const FileUploadPreviewWithContext = <
         progress: 0,
       })),
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileUploads.length]);
 
   // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
@@ -284,16 +285,16 @@ const FileUploadPreviewWithContext = <
               </View>
             </View>
           )}
-          <TouchableOpacity
-            onPress={() => {
-              removeFile(item.id);
-            }}
-            style={[styles.dismiss, { backgroundColor: grey_gainsboro }, dismiss]}
-            testID='remove-file-upload-preview'
-          >
-            <Close pathFill={grey_dark} />
-          </TouchableOpacity>
         </UploadProgressIndicator>
+        <TouchableOpacity
+          onPress={() => {
+            removeFile(item.id);
+          }}
+          style={[styles.dismiss, { backgroundColor: grey_gainsboro }, dismiss]}
+          testID='remove-file-upload-preview'
+        >
+          <Close pathFill={grey_dark} />
+        </TouchableOpacity>
       </>
     );
   };

package/src/components/MessageInput/MessageInput.tsx

@@ -268,6 +268,7 @@ const MessageInputWithContext = <
     setMaxNumberOfFiles(maxNumberOfFiles ?? 10);
 
     return closeAttachmentPicker;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const [hasResetImages, setHasResetImages] = useState(false);
@@ -288,6 +289,7 @@ const MessageInputWithContext = <
       imageUploads.forEach((image) => removeImage(image.id));
     }
     return () => setSelectedImages([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -300,24 +302,28 @@ const MessageInputWithContext = <
     }
 
     return () => setSelectedFiles([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
     if (hasResetImages === false && imageUploadsLength === 0 && selectedImagesLength === 0) {
       setHasResetImages(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageUploadsLength, selectedImagesLength]);
 
   useEffect(() => {
     if (hasResetFiles === false && fileUploadsLength === 0 && selectedFilesLength === 0) {
       setHasResetFiles(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileUploadsLength, selectedFilesLength]);
 
   useEffect(() => {
     if (imagesForInput === false && imageUploadsLength) {
       imageUploads.forEach((image) => removeImage(image.id));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imagesForInput, imageUploadsLength]);
 
   const uploadImagesHandler = () => {
@@ -353,6 +359,7 @@ const MessageInputWithContext = <
         removeImagesHandler();
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedImagesLength]);
 
   useEffect(() => {
@@ -377,6 +384,7 @@ const MessageInputWithContext = <
       );
       filesToRemove.forEach((file) => removeFile(file.id));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFilesLength]);
 
   useEffect(() => {
@@ -409,6 +417,7 @@ const MessageInputWithContext = <
         );
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageUploadsLength, hasImagePicker]);
 
   useEffect(() => {
@@ -440,6 +449,7 @@ const MessageInputWithContext = <
         );
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileUploadsLength, hasImagePicker]);
 
   const editingExists = !!editing;
@@ -468,6 +478,7 @@ const MessageInputWithContext = <
     ) {
       resetInput();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editingExists]);
 
   const asyncIdsString = asyncIds.join();
@@ -484,6 +495,7 @@ const MessageInputWithContext = <
       asyncIds.forEach((id) => sendMessageAsync(id));
       sending.current = false;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [asyncIdsString, asyncUploadsString, sendMessageAsync]);
 
   const getMembers = () => {
@@ -544,6 +556,7 @@ const MessageInputWithContext = <
         if (setFocused) setFocused(true);
       },
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [additionalTextInputProps],
   );
 

package/src/components/MessageList/MessageList.tsx

@@ -290,6 +290,7 @@ const MessageListWithContext = <
 
   const modifiedTheme = useMemo(
     () => mergeThemes({ style: myMessageTheme, theme }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [myMessageThemeString, theme],
   );
 
@@ -469,6 +470,7 @@ const MessageListWithContext = <
     if (getShouldMarkReadAutomatically()) {
       markRead();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loading, scrollToBottomButtonVisible, isInitialScrollDone]);
 
   useEffect(() => {
@@ -535,6 +537,7 @@ const MessageListWithContext = <
 
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     threadList,
     hasNoMoreRecentMessagesToLoad,
@@ -582,6 +585,7 @@ const MessageListWithContext = <
         }, 150); // flatlist might take a bit to update, so a small delay is needed
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rawMessageList, threadList]);
 
   // TODO: do not apply on RN 0.73 and above
@@ -966,6 +970,7 @@ const MessageListWithContext = <
       // the message we want to scroll to has not been loaded in the state yet
       loadChannelAroundMessage({ messageId: messageIdToScroll });
     }, 50);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetedMessage, initialScrollToFirstUnreadMessage]);
 
   const messagesWithImages =
@@ -1011,6 +1016,7 @@ const MessageListWithContext = <
     ) {
       setMessages(messagesWithImages as MessageType<StreamChatGenerics>[]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     imageString,
     isListActive,

package/src/components/MessageList/StickyHeader.tsx

@@ -34,6 +34,7 @@ export const StickyHeader = ({ date, DateHeader, dateString }: StickyHeaderProps
       tDateTimeParser,
       timestampTranslationKey: 'timestamp/StickyHeader',
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [date]);
 
   if (!date) return null;

package/src/components/MessageList/hooks/useShouldScrollToRecentOnNewOwnMessage.ts

@@ -38,6 +38,7 @@ export function useShouldScrollToRecentOnNewOwnMessage<
         }
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rawMessageList]);
 
   return isMyOwnNewMessageRef;

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -163,6 +163,7 @@ const MessageOverlayWithContext = <
 
   const modifiedTheme = useMemo(
     () => mergeThemes({ style: myMessageTheme, theme }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [myMessageThemeString, theme],
   );
 
@@ -206,6 +207,7 @@ const MessageOverlayWithContext = <
   useEffect(() => {
     Keyboard.dismiss();
     fadeScreen();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onPan = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({

package/src/components/MessageOverlay/hooks/useFetchReactions.ts

@@ -69,16 +69,19 @@ export const useFetchReactions = <
     } catch (error) {
       console.log('Error fetching reactions: ', error);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client, messageId, reactionType, sortString, next, enableOfflineSupport]);
 
   const loadNextPage = useCallback(async () => {
     if (next) {
       await fetchReactions();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetchReactions]);
 
   useEffect(() => {
     fetchReactions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageId, reactionType, sortString]);
 
   return { loading, loadNextPage, reactions };

package/src/components/ProgressControl/ProgressControl.tsx

@@ -72,6 +72,7 @@ export const ProgressControl = React.memo(
         state.value = progress * widthInNumbers;
         translateX.value = progress * widthInNumbers;
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [progress, widthInNumbers]);
 
     const animatedStyles = useAnimatedStyle(() => ({

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -75,12 +75,14 @@ export const WaveProgressBar = React.memo(
       state.value = stageProgress * (WAVEFORM_WIDTH * 2);
       setEndPosition(state.value);
       setCurrentWaveformProgress(stageProgress);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [progress]);
 
     const stringifiedWaveformData = waveformData.toString();
 
     const resampledWaveformData = useMemo(
       () => resampleWaveformData(waveformData, amplitudesCount),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [amplitudesCount, stringifiedWaveformData],
     );
 

package/src/components/Spinner/Spinner.tsx

@@ -53,6 +53,7 @@ export const Spinner = (props: SpinnerProps) => {
       }),
       -1,
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

package/src/components/Thread/Thread.tsx

@@ -80,6 +80,7 @@ const ThreadWithContext = <
     if (thread?.id && thread.reply_count) {
       loadMoreThreadAsync();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(
@@ -91,6 +92,7 @@ const ThreadWithContext = <
         onThreadDismount();
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 

package/src/contexts/channelsStateContext/ChannelsStateContext.tsx

@@ -166,6 +166,7 @@ export const ChannelsStateProvider = <
       setState,
       state,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [state],
   );
 

package/src/contexts/channelsStateContext/useChannelState.ts

@@ -39,12 +39,14 @@ function useStateManager<
   >,
   initialValue?: ChannelState<StreamChatGenerics>[Key],
 ) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const memoizedInitialValue = useMemo(() => initialValue, []);
   const value =
     state[cid]?.[key] || (memoizedInitialValue as ChannelState<StreamChatGenerics>[Key]);
 
   const setValue = useCallback(
     (value: ChannelState<StreamChatGenerics>[Key]) => setState({ cid, key, value }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [cid, key],
   );
 
@@ -86,6 +88,7 @@ export function useChannelState<
     return () => {
       decreaseSubscriberCount({ cid });
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const [members, setMembers] = useStateManager(

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -232,6 +232,7 @@ export const useCreateMessageInputContext = <
       uploadNewImage,
       UploadProgressIndicator,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       asyncIdsLength,
       asyncUploadsValue,

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -34,6 +34,7 @@ export const useMessageDetailsForState = <
     if (fileUploads.length || imageUploads.length) {
       setShowMoreOptions(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [text, imageUploads.length, fileUploads.length]);
 
   const messageValue =
@@ -44,6 +45,7 @@ export const useMessageDetailsForState = <
       const mentionedUsers = message.mentioned_users.map((user) => user.id);
       setMentionedUsers(mentionedUsers);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageValue]);
 
   const mapAttachmentToFileUpload = (attachment: Attachment<StreamChatGenerics>): FileUpload => {
@@ -148,6 +150,7 @@ export const useMessageDetailsForState = <
         setImageUploads(newImageUploads);
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageValue]);
 
   return {

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -189,6 +189,7 @@ export const OverlayProvider = <
     } else {
       overlayOpacity.value = withTiming(0);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overlay]);
 
   const attachmentPickerContext = {

package/src/hooks/useScreenDimensions.ts

@@ -25,11 +25,13 @@ export const useScreenDimensions = (rounded?: boolean) => {
     return () => subscriptions?.remove();
   }, []);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const vw = (percentageWidth: number) => {
     const value = screenDimensions.width * (percentageWidth / 100);
     return rounded ? Math.round(value) : value;
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const vh = (percentageHeight: number) => {
     const value = screenDimensions.height * (percentageHeight / 100);
     return rounded ? Math.round(value) : value;

package/src/hooks/useStreami18n.ts

@@ -45,6 +45,7 @@ export const useStreami18n = (i18nInstance?: Streami18n) => {
       unsubscribeOnTFuncOverrideListener();
       unsubscribeOnLanguageChangeListener();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [i18nInstance]);
 
   return translators;

package/src/hooks/useViewport.ts

@@ -25,11 +25,13 @@ export const useViewport = (rounded?: boolean) => {
     return () => subscriptions?.remove();
   }, []);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const vw = (percentageWidth: number) => {
     const value = viewportDimensions.width * (percentageWidth / 100);
     return rounded ? Math.round(value) : value;
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const vh = (percentageHeight: number) => {
     const value = viewportDimensions.height * (percentageHeight / 100);
     return rounded ? Math.round(value) : value;

package/src/mock-builders/mock.js

@@ -6,7 +6,7 @@ import { StreamChat } from 'stream-chat';
 const apiKey = 'API_KEY';
 const token = 'dummy_token';
 
-const setUser = (client, user) =>
+export const setUser = (client, user) =>
   new Promise((resolve) => {
     client.connectionId = 'dumm_connection_id';
     client.user = user;