fix: add check for handlers in native.ts

khushal87 · khushal87 · commit 4f8dbad245a7 · 2024-07-10T17:12:33.000+05:30
diff --git a/package/expo-package/src/optionalDependencies/triggerHaptic.ts b/package/expo-package/src/optionalDependencies/triggerHaptic.ts
@@ -45,5 +45,4 @@ export const triggerHaptic = Haptics
           Haptics.selectionAsync();
       }
     }
-  : // eslint-disable-next-line @typescript-eslint/no-empty-function
-    () => {};
+  : () => {};
diff --git a/package/src/components/Attachment/Attachment.tsx b/package/src/components/Attachment/Attachment.tsx
@@ -11,7 +11,7 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
-import { Video } from '../../native';
+import { isVideoPlayerAvailable } from '../../native';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
@@ -75,7 +75,7 @@ const AttachmentWithContext = <
   }
 
   if (attachment.type === 'video' && !attachment.og_scrape_url) {
-    return Video ? (
+    return isVideoPlayerAvailable() ? (
       <>
         <Gallery videos={[attachment]} />
         {hasAttachmentActions && (
diff --git a/package/src/components/Attachment/Gallery.tsx b/package/src/components/Attachment/Gallery.tsx
@@ -31,7 +31,7 @@ import {
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
-import { Video } from '../../native';
+import { isVideoPlayerAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getUrlWithoutParams } from '../../utils/utils';
 
@@ -311,7 +311,7 @@ const GalleryThumbnail = <
   const defaultOnPress = () => {
     // If the url is defined then only try to open the file.
     if (thumbnail.url) {
-      if (thumbnail.type === 'video' && !Video) {
+      if (thumbnail.type === 'video' && !isVideoPlayerAvailable()) {
         // This condition is kinda unreachable, since we render videos as file attachment if the video
         // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
         openUrlSafely(thumbnail.url);
diff --git a/package/src/components/Attachment/__tests__/Attachment.test.js b/package/src/components/Attachment/__tests__/Attachment.test.js
@@ -21,7 +21,7 @@ import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
 
 jest.mock('../../../native.ts', () => ({
-  Video: null,
+  isVideoPlayerAvailable: jest.fn(() => false),
 }));
 
 const getAttachmentComponent = (props) => {
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -81,7 +81,11 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import { Audio, pickDocument, takePhoto } from '../../native';
+import {
+  isAudioRecorderAvailable,
+  isDocumentPickerAvailable,
+  isImagePickerAvailable,
+} from '../../native';
 import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
@@ -439,7 +443,7 @@ const ChannelWithContext = <
     AudioAttachment = AudioAttachmentDefault,
     AudioAttachmentUploadPreview = AudioAttachmentDefault,
     AudioRecorder = AudioRecorderDefault,
-    audioRecordingEnabled = Audio !== null,
+    audioRecordingEnabled = isAudioRecorderAvailable(),
     AudioRecordingInProgress = AudioRecordingInProgressDefault,
     AudioRecordingLockIndicator = AudioRecordingLockIndicatorDefault,
     AudioRecordingPreview = AudioRecordingPreviewDefault,
@@ -497,10 +501,10 @@ const ChannelWithContext = <
     handleReaction,
     handleRetry,
     handleThreadReply,
-    hasCameraPicker = takePhoto !== null,
+    hasCameraPicker = isImagePickerAvailable(),
     hasCommands = true,
     // If pickDocument isn't available, default to hiding the file picker
-    hasFilePicker = pickDocument !== null,
+    hasFilePicker = isDocumentPickerAvailable(),
     hasImagePicker = true,
     hideDateSeparators = false,
     hideStickyDateHeader = false,
diff --git a/package/src/components/ImageGallery/ImageGallery.tsx b/package/src/components/ImageGallery/ImageGallery.tsx
@@ -40,7 +40,7 @@ import { useImageGalleryContext } from '../../contexts/imageGalleryContext/Image
 import { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
-import { Video, VideoType } from '../../native';
+import { isVideoPlayerAvailable, VideoType } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
@@ -229,7 +229,7 @@ export const ImageGallery = <
               !attachment.title_link &&
               !attachment.og_scrape_url &&
               getUrlOfImageAttachment(attachment)) ||
-            (Video && attachment.type === 'video'),
+            (isVideoPlayerAvailable() && attachment.type === 'video'),
         )
         .reverse() || [];
 
diff --git a/package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx b/package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx
@@ -24,6 +24,9 @@ import { ImageGallery } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
+    isFileSystemAvailable: jest.fn(() => true),
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
     Video: View,
   };
 });
diff --git a/package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx b/package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx
@@ -28,6 +28,9 @@ jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
     deleteFile: jest.fn(),
+    isFileSystemAvailable: jest.fn(() => true),
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
     saveFile: jest.fn(),
     shareImage: jest.fn(),
     Video: View,
diff --git a/package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx b/package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx
@@ -30,6 +30,9 @@ import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
+    isFileSystemAvailable: jest.fn(() => true),
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
     Video: View,
   };
 });
diff --git a/package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx b/package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx
@@ -5,6 +5,7 @@ import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useViewport } from '../../../hooks/useViewport';
 import {
+  isVideoPlayerAvailable,
   PlaybackStatus,
   Video,
   VideoPayloadData,
@@ -186,7 +187,7 @@ export const AnimatedGalleryVideo = React.memo(
           },
         ]}
       >
-        {Video ? (
+        {isVideoPlayerAvailable() ? (
           <Video
             onBuffer={onBuffer}
             onEnd={onEnd}
diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
@@ -7,7 +7,14 @@ import { ImageGalleryVideoControl } from './ImageGalleryVideoControl';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
-import { deleteFile, saveFile, shareImage, VideoType } from '../../../native';
+import {
+  deleteFile,
+  isFileSystemAvailable,
+  isShareImageAvailable,
+  saveFile,
+  shareImage,
+  VideoType,
+} from '../../../native';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
@@ -245,7 +252,7 @@ const ShareButton = ({ share, ShareIcon, shareMenuOpen }: ShareButtonProps) => {
   } = useTheme();
 
   // If the shareImage, saveFile or deleteFile is null, we don't want to render the share button
-  if (shareImage === null || saveFile === null || deleteFile === null) {
+  if (!isShareImageAvailable() || !isFileSystemAvailable()) {
     return null;
   }
 
diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx
@@ -39,7 +39,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import { triggerHaptic, Video } from '../../native';
+import { isVideoPlayerAvailable, triggerHaptic } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import {
   hasOnlyEmojis,
@@ -378,7 +378,7 @@ const MessageWithContext = <
             if (cur.type === 'file') {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
-            } else if (cur.type === 'video' && !cur.og_scrape_url && Video) {
+            } else if (cur.type === 'video' && !cur.og_scrape_url && isVideoPlayerAvailable()) {
               acc.videos.push({
                 image_url: cur.asset_url,
                 thumb_url: cur.thumb_url,
diff --git a/package/src/components/Message/hooks/useMessageActions.tsx b/package/src/components/Message/hooks/useMessageActions.tsx
@@ -24,7 +24,7 @@ import {
   Unpin,
   UserDelete,
 } from '../../../icons';
-import { setClipboardString } from '../../../native';
+import { isClipboardAvailable, setClipboardString } from '../../../native';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { removeReservedFields } from '../../../utils/removeReservedFields';
 import { MessageStatusTypes } from '../../../utils/utils';
@@ -153,21 +153,20 @@ export const useMessageActions = <
     title: message.user?.banned ? t('Unblock User') : t('Block User'),
   };
 
-  const copyMessage: MessageActionType | undefined =
-    setClipboardString !== null
-      ? {
-          action: () => {
-            setOverlay('none');
-            if (handleCopy) {
-              handleCopy(message);
-            }
-            setClipboardString(message.text || '');
-          },
-          actionType: 'copyMessage',
-          icon: <Copy pathFill={grey} />,
-          title: t('Copy Message'),
-        }
-      : undefined;
+  const copyMessage: MessageActionType | undefined = isClipboardAvailable()
+    ? {
+        action: () => {
+          setOverlay('none');
+          if (handleCopy) {
+            handleCopy(message);
+          }
+          setClipboardString(message.text || '');
+        },
+        actionType: 'copyMessage',
+        icon: <Copy pathFill={grey} />,
+        title: t('Copy Message'),
+      }
+    : undefined;
 
   const deleteMessage: MessageActionType = {
     action: () => {
diff --git a/package/src/components/MessageInput/__tests__/FileUploadPreview.test.js b/package/src/components/MessageInput/__tests__/FileUploadPreview.test.js
@@ -30,6 +30,9 @@ jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
 
   return {
+    isAudioRecorderAvailable: jest.fn(() => true),
+    isDocumentPickerAvailable: jest.fn(() => true),
+    isImagePickerAvailable: jest.fn(() => true),
     isSoundPackageAvailable: jest.fn(() => true),
     Sound: {
       Player: View,
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
@@ -12,7 +12,11 @@ import {
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { Mic } from '../../../../icons/Mic';
-import { Audio, AudioRecordingReturnType, triggerHaptic } from '../../../../native';
+import {
+  AudioRecordingReturnType,
+  isAudioRecorderAvailable,
+  triggerHaptic,
+} from '../../../../native';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
@@ -104,7 +108,7 @@ const AudioRecordingButtonWithContext = <
     }
   };
 
-  if (!Audio) return null;
+  if (!isAudioRecorderAvailable()) return null;
 
   return (
     <Pressable
diff --git a/package/src/contexts/messageInputContext/MessageInputContext.tsx b/package/src/contexts/messageInputContext/MessageInputContext.tsx
@@ -47,7 +47,7 @@ import type { SendButtonProps } from '../../components/MessageInput/SendButton';
 import type { UploadProgressIndicatorProps } from '../../components/MessageInput/UploadProgressIndicator';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { Emoji } from '../../emoji-data';
-import { pickDocument } from '../../native';
+import { isDocumentPickerAvailable, pickDocument } from '../../native';
 import type {
   Asset,
   DefaultStreamChatGenerics,
@@ -654,7 +654,7 @@ export const MessageInputProvider = <
   };
 
   const pickFile = async () => {
-    if (pickDocument === null) {
+    if (!isDocumentPickerAvailable()) {
       console.log(
         'The file picker is not installed. Check our Getting Started documentation to install it.',
       );
diff --git a/package/src/native.ts b/package/src/native.ts
@@ -354,4 +354,12 @@ export const registerNativeHandlers = (handlers: Handlers) => {
   }
 };
 
+export const isImagePickerAvailable = () => !!takePhoto;
+export const isDocumentPickerAvailable = () => !!pickDocument;
+export const isClipboardAvailable = () => !!setClipboardString;
+export const isVideoPlayerAvailable = () => !!Video;
+export const isHapticFeedbackAvailable = () => !!triggerHaptic;
+export const isShareImageAvailable = () => !!shareImage;
+export const isFileSystemAvailable = () => !!saveFile || !!deleteFile;
+export const isAudioRecorderAvailable = () => !!Audio.startRecording;
 export const isSoundPackageAvailable = () => !!Sound.Player || !!Sound.initializeSound;

Original file line number	Diff line number	Diff line change
`@@ -45,5 +45,4 @@ export const triggerHaptic = Haptics`
`45`	`45`	`Haptics.selectionAsync();`
`46`	`46`	`}`
`47`	`47`	`}`
`48`		`- : // eslint-disable-next-line @typescript-eslint/no-empty-function`
`49`		`- () => {};`
	`48`	`+ : () => {};`