@ethora/chat-component-rn 26.5.1 → 26.5.2

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components/native';
 import {
   CenterContainer,
@@ -12,10 +11,10 @@ import Button from '../../styled/Button';
 import { RootState } from '../../../roomStore';
 import { FullScreenImage } from '../../styled/StyledInputComponents/MediaComponents';
 import { setActiveFile } from '../../../roomStore/chatSettingsSlice';
-import { Alert, Text, View, PermissionsAndroid, Platform } from 'react-native';
-import Video from 'react-native-video';
-import RNFS from 'react-native-fs';
-import { CameraRoll } from '@react-native-camera-roll/camera-roll';
+import { Alert, Text, View, Platform } from 'react-native';
+import { Video, ResizeMode } from 'expo-av';
+import * as FileSystem from 'expo-file-system/legacy';
+import * as MediaLibrary from 'expo-media-library';
 import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
 
@@ -43,56 +42,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
   const requestStoragePermission = async () => {
     try {
-      if (Platform.OS === 'android') {
-        if (Platform.Version >= 33) {
-          const permissions = [
-            PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES,
-            PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO,
-            PermissionsAndroid.PERMISSIONS.READ_MEDIA_AUDIO,
-          ];
-
-          const granted = await PermissionsAndroid.requestMultiple(permissions);
-
-          if (
-            granted['android.permission.READ_MEDIA_IMAGES'] ===
-              PermissionsAndroid.RESULTS.GRANTED &&
-            granted['android.permission.READ_MEDIA_VIDEO'] ===
-              PermissionsAndroid.RESULTS.GRANTED &&
-            granted['android.permission.READ_MEDIA_AUDIO'] ===
-              PermissionsAndroid.RESULTS.GRANTED
-          ) {
-            return true;
-          } else {
-            return false;
-          }
-        } else if (Platform.Version >= 30) {
-          const granted = await PermissionsAndroid.request(
-            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
-            {
-              title: 'Storage Permission Required',
-              message:
-                'This app needs access to your storage to download and save files.',
-              buttonPositive: 'OK',
-            }
-          );
-
-          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
-            return true;
-          } else {
-            return false;
-          }
-        } else {
-          const result = await CameraRoll.getPhotos({
-            first: 1,
-          })
-            .then(() => true)
-            .catch(() => false);
-
-          return result;
-        }
-      }
-
-      return true;
+      const { status } = await MediaLibrary.requestPermissionsAsync();
+      return status === 'granted';
     } catch (error) {
       console.error('Error requesting permission:', error);
       return false;
@@ -110,45 +61,16 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
 
     try {
-      let galleryPath, filePath;
-
-      if (Platform.OS === 'android') {
-        galleryPath = activeFile.mimetype.startsWith('image/')
-          ? `${RNFS.ExternalStorageDirectoryPath}/Pictures`
-          : `${RNFS.ExternalStorageDirectoryPath}/Movies`;
-
-        await RNFS.mkdir(galleryPath);
-
-        let fileName = activeFile.fileName;
-        if (!fileName.includes('.')) {
-          fileName += activeFile.mimetype.startsWith('image/')
-            ? '.jpg'
-            : '.mp4';
-        }
-        filePath = `${galleryPath}/${fileName}`;
-      } else {
-        const documentsPath = RNFS.DocumentDirectoryPath;
-        let fileName = activeFile.fileName;
-        if (!fileName.includes('.')) {
-          fileName += activeFile.mimetype.startsWith('image/')
-            ? '.jpg'
-            : '.mp4';
-        }
-        filePath = `${documentsPath}/${fileName}`;
+      let fileName = activeFile.fileName || `media_${Date.now()}`;
+      if (!fileName.includes('.')) {
+        fileName += activeFile.mimetype.startsWith('image/') ? '.jpg' : '.mp4';
       }
 
-      const res = await RNFS.downloadFile({
-        fromUrl: activeFile.fileURL,
-        toFile: filePath,
-      }).promise;
-
-      if (res.statusCode === 200) {
-        if (Platform.OS === 'ios') {
-          await CameraRoll.save(filePath, {
-            type: activeFile.mimetype.startsWith('image/') ? 'photo' : 'video',
-          });
-        }
+      const filePath = FileSystem.cacheDirectory + fileName;
+      const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
 
+      if (download.status === 200) {
+        await MediaLibrary.saveToLibraryAsync(download.uri);
         showToast({
           id: Date.now().toString(),
           title: 'Success',
@@ -164,26 +86,18 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   };
 
   const saveFileToDownloads = async () => {
-    const hasPermission = await requestStoragePermission();
-    if (!hasPermission) {
-      Alert.alert(
-        'Permission Denied',
-        'Storage permission is required to save files.'
-      );
-      return;
-    }
-
     try {
-      const downloadDest = `${RNFS.DownloadDirectoryPath}/${
-        activeFile.fileName || 'MEDIA-ETHORA'
-      }`;
-
-      const res = await RNFS.downloadFile({
-        fromUrl: activeFile.fileURL,
-        toFile: downloadDest,
-      }).promise;
-
-      if (res.statusCode === 200) {
+      const fileName = activeFile.fileName || `file_${Date.now()}`;
+      const filePath = FileSystem.cacheDirectory + fileName;
+      const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
+
+      if (download.status === 200) {
+        if (Platform.OS === 'android') {
+          const hasPermission = await requestStoragePermission();
+          if (hasPermission) {
+            await MediaLibrary.createAssetAsync(download.uri);
+          }
+        }
         showToast({
           id: Date.now().toString(),
           title: 'Success',
@@ -191,11 +105,11 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           type: 'success',
         });
       } else {
-        Alert.alert('Error', 'Failed to save the file one.');
+        Alert.alert('Error', 'Failed to save the file.');
       }
     } catch (err) {
       console.error('Error saving file:', err);
-      Alert.alert('Error', 'Failed to save the file two.');
+      Alert.alert('Error', 'Failed to save the file.');
     }
   };
 
@@ -241,9 +155,9 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
               height: '100%',
             }}
             source={{ uri: activeFile.fileURL }}
-            controls
-            resizeMode="contain"
-            paused={true}
+            useNativeControls
+            resizeMode={ResizeMode.CONTAIN}
+            shouldPlay={false}
           />
         );
       case activeFile.mimetype === 'application/pdf':
@@ -261,7 +175,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
             <Text>
               Unable to open the uploaded document. The file format is not
               supported by the system. Please upload a file in a compatible
-              format. You still can dowload this file.
+              format. You still can download this file.
             </Text>
           </View>
         );
@@ -298,4 +212,4 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   );
 };
 
-export default FilePreviewModal;
+export default FilePreviewModal;

package/src/components/Modals/ModalSelectMedia/ModalSelectMedia.tsx

@@ -199,7 +199,7 @@ export const ModalSelectMedia: FC<ModalSelectMediaProps> = ({
         allowMultiSelection: false,
       });
 
-      const files = result.map((file) => {
+      const files = result.map((file: any) => {
         const originalName = file.name;
         return {
           uri: file.uri,

package/src/components/Modals/NewChatModal/ModalContent.tsx

@@ -21,7 +21,7 @@ type ModalContentProps = {
   chatType: ChatAccessOption;
   profileImage: string | File | null;
   setActiveTab: (tab: '0' | '1' | null) => void;
-  handleRoomNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleRoomNameChange: (e: string) => void;
   setRoomDescription: (description: string) => void;
   setChatType: (type: ChatAccessOption) => void;
   setProfileImage: (image: string | File | null) => void;
@@ -81,17 +81,17 @@ const ModalContent: React.FC<ModalContentProps> = ({
           >
             <InputWithLabel
               style={{ flex: 1 }}
-              id="roomName"
+              id={"roomName" as any}
               value={roomName}
-              onChange={handleRoomNameChange}
+              onChange={handleRoomNameChange as any}
               placeholder="Enter Room Name"
               helperText={errors.name}
               error={!!errors.name}
             />
             <Select
-              options={options}
-              onSelect={setChatType}
-              selectedValue={chatType}
+              options={options as any}
+              onSelect={setChatType as any}
+              selectedValue={chatType as any}
               placeholder={'Select room type'}
             />
           </GroupContainer>
@@ -127,7 +127,7 @@ const ModalContent: React.FC<ModalContentProps> = ({
           <ModalTitle>Select users to add to Chat</ModalTitle>
           <UsersList
             selectedUsers={selectedUsers}
-            setSelectedUsers={setSelectedUsers}
+            setSelectedUsers={setSelectedUsers as any}
             style={{
               minHeight: '400px',
               minWidth: '100%',

package/src/components/Modals/NewChatModal/NewChatModal.tsx

@@ -14,15 +14,8 @@ import { addRoomViaApi, setCurrentRoom, updateRoom } from '../../../roomStore/ro
 import InputWithLabel from '../../styled/StyledInput';
 import { uploadFile } from '../../../networking/api-requests/auth.api';
 import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
-import { Text, Alert, Linking, Platform } from 'react-native';
-import ImagePicker from 'react-native-image-crop-picker';
-import {
-  check,
-  request,
-  PERMISSIONS,
-  RESULTS,
-  Permission,
-} from 'react-native-permissions';
+import { Text, Alert, Linking } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
 import { ApiRoom, ChatAccessOption, RoomMember } from '../../../types/models/room.model';
 import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
 import { postRoom } from '../../../networking/api-requests/rooms.api';
@@ -113,65 +106,41 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
     setSelectedUsers([]);
   };
 
-  const checkPermission = async (permission: Permission) => {
-    const status = await check(permission);
-    if (status === RESULTS.GRANTED) {
-      return status;
-    } else if (status === RESULTS.DENIED) {
-      const requestStatus = await request(permission);
-      return requestStatus;
-    }
-    return status;
-  };
-
   const onUpload = async () => {
     try {
-      const permission =
-        Platform.OS === 'ios'
-          ? PERMISSIONS.IOS.PHOTO_LIBRARY
-          : PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE;
-      const permissionStatus = await checkPermission(permission);
+      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
 
-      if (permissionStatus !== RESULTS.GRANTED) {
+      if (status !== 'granted') {
         Alert.alert(
           'Permission required',
           'Photo library permission is needed to select images.',
           [
-            {
-              text: 'Cancel',
-              onPress: () => console.log('Photo permission cancelled'),
-              style: 'cancel',
-            },
-            {
-              text: 'Open Settings',
-              onPress: () => Linking.openSettings(),
-            },
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'Open Settings', onPress: () => Linking.openSettings() },
           ]
         );
         return;
       }
 
-      const image = await ImagePicker.openPicker({
-        width: 300,
-        height: 300,
-        cropping: true,
-        cropperCircleOverlay: true,
-        compressImageQuality: 0.8,
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ['images'],
+        allowsEditing: true,
+        aspect: [1, 1],
+        quality: 0.8,
       });
 
-      const originalName = image.path.split('/').pop();
+      if (result.canceled) return;
+
+      const asset = result.assets[0];
+      const originalName = asset.uri.split('/').pop();
       const fileObject = {
-        uri: image.path,
-        type: image.mime || 'image/jpeg',
+        uri: asset.uri,
+        type: asset.mimeType || 'image/jpeg',
         name: originalName || `profile_${Date.now()}.jpg`,
       };
 
       setProfileImage(fileObject);
     } catch (error: any) {
-      if (error?.code === 'E_PICKER_CANCELLED' || error?.code === 'E_NO_CAMERA_PERMISSION') {
-        console.log('User cancelled image selection');
-        return;
-      }
       console.error('Image selection failed:', error);
       Alert.alert('Error', 'Failed to select image');
     }
@@ -192,6 +161,8 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
         usersArrayLength
       );
 
+      if (!normalizedChat || !client) return;
+
       dispatch(
         addRoomViaApi({
           room: normalizedChat,
@@ -253,21 +224,22 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
         handleCloseModal();
       } else {
         try {
-          const newChatJid = await client.createRoomStanza(
+          const newChatJid = await client?.createRoomStanza(
             roomName,
             roomDescription && roomDescription !== ''
               ? roomDescription
               : 'No description'
           );
 
-          client.getRoomsStanza();
+          const jidStr = typeof newChatJid === 'string' ? newChatJid : '';
+          client?.getRoomsStanza();
 
-          dispatch(setCurrentRoom({ roomJID: newChatJid }));
+          dispatch(setCurrentRoom({ roomJID: jidStr }));
 
           if (location) {
-            client.setRoomImageStanza(newChatJid, location, 'icon', 'none');
+            client?.setRoomImageStanza(jidStr, location, 'icon', 'none');
             dispatch(
-              updateRoom({ jid: newChatJid, updates: { icon: location } })
+              updateRoom({ jid: jidStr, updates: { icon: location } })
             );
           }
 

package/src/components/Modals/NewChatModal/UpdNewChatModal.tsx

@@ -67,7 +67,7 @@ const NewChatModal: React.FC = () => {
   const handleCreateRoom = async () => {
     if (isValid) {
       let mediaData: FormData | null = new FormData();
-      mediaData.append('files', profileImage);
+      if (profileImage) mediaData.append('files', profileImage as any);
 
       const uploadResult = await uploadFile(mediaData);
       const location = uploadResult?.data?.results?.[0]?.location;
@@ -87,9 +87,10 @@ const NewChatModal: React.FC = () => {
         config?.xmppSettings?.conference,
         namesArray.length
       );
+      if (!normalizedChat) return;
       dispatch(addRoom({ roomData: normalizedChat }));
       dispatch(setCurrentRoom({ roomJID: normalizedChat.jid }));
-      client.presenceInRoomStanza(normalizedChat.jid);
+      client?.presenceInRoomStanza(normalizedChat.jid);
     }
   };
 
@@ -97,14 +98,13 @@ const NewChatModal: React.FC = () => {
     <>
       <Button
         style={{
-          color: 'black',
           padding: 8,
-          borderRadius: '16px',
+          borderRadius: 16,
           backgroundColor: 'transparent',
         }}
         unstyled
         EndIcon={<AddNewIcon color={config?.colors?.primary} />}
-        onPre={handleOpenModal}
+        onPress={handleOpenModal}
       />
       {isModalOpen && (
         <ModalBackground>

package/src/components/Modals/SettingsModals/Referrals/Referrals.tsx

@@ -55,7 +55,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
             Your invitation code
           </SharedSettingsStyledLabel>
           <StyledInput
-            color={config?.colors?.primary || ''}
+            {...{ color: config?.colors?.primary || '' } as any}
             placeholder="Your invitation code"
             // label={'About'}
             // value={message}
@@ -71,7 +71,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
             Or enter your referral code to earn coins
           </SharedSettingsStyledLabel>
           <StyledInput
-            color={config?.colors?.primary}
+            {...{ color: config?.colors?.primary || '' } as any}
             placeholder="Your referral code"
             // label={'About'}
             // value={message}

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -33,17 +33,16 @@ import EditUserModal from './EditUserModal';
 import { walletToUsername } from '../../../helpers/walletUsername';
 import { useXmppClient } from '../../../context/xmppProvider';
 import Loader from '../../styled/Loader';
-import { ApiRoom, IRoom, Iso639_1Codes } from '../../../types/types';
+import { IRoom, Iso639_1Codes } from '../../../types/types';
 import Select from '../../MainComponents/Select';
 import { useAppDispatch, useAppSelector } from '../../../hooks/hooks';
 import { ScrollView, Text, View } from 'react-native';
-import { postPrivateRoom } from '../../../networking/api-requests/rooms.api';
+import { ApiRoom, postPrivateRoom } from '../../../networking/api-requests/rooms.api';
 import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
 import { useToast } from '../../../context/ToastContext';
 import { LANGUAGE_OPTIONS } from '../../../helpers/constants/LANGUAGE_OPTIONS';
 import { deleteDocument, getDocuments } from '../../../networking/api-requests/user.api';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
-import { DateTime } from 'luxon';
 
 interface UserProfileModalProps {
   handleCloseModal: any;
@@ -104,7 +103,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   }, []);
 
   const handleBackClick = useCallback(() => {
-    dispatch(setSelectedUser());
+    dispatch(setSelectedUser(undefined));
     handleCloseModal();
   }, []);
 
@@ -147,9 +146,11 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
         usersArrayLength
       );
 
+      if (!normalizedChat || !client) return;
+
       dispatch(
         addRoomViaApi({
-          room: normalizedChat as IRoom,
+          room: normalizedChat,
           xmpp: client,
         })
       );
@@ -200,19 +201,19 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
         .sort()
         .join(' and ');
 
-      newRoomJid = await client.createPrivateRoomStanza(
+      newRoomJid = (await client?.createPrivateRoomStanza(
         combinedUsersName,
         `Private chat ${combinedUsersName}`,
         roomJid
-      );
+      )) || '';
 
       if (newRoomJid) {
-        await client.inviteRoomRequestStanza(selectedUserUsername, newRoomJid);
-        await client.getRoomsStanza();
+        await client?.inviteRoomRequestStanza(selectedUserUsername, newRoomJid);
+        await client?.getRoomsStanza();
       }
     }
 
-    dispatch(setActiveModal());
+    dispatch(setActiveModal(undefined));
   }, [selectedUser]);
 
   const modalUser: any = selectedUser ?? user;
@@ -333,7 +334,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
                 <View>
                   <Label style={{ paddingBottom: 4 }}>{doc.documentName}</Label>
                   <LabelData>
-                    {DateTime.fromISO(doc.createdAt).toFormat('dd LLL yyyy t')}
+                    {new Date(doc.createdAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) + ' ' + new Date(doc.createdAt).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })}
                   </LabelData>
                 </View>
                 </View>

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -36,7 +36,7 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   const dispatch = useDispatch();
 
   const handleClick = useCallback((key: string) => {
-    dispatch(setActiveModal(key));
+    dispatch(setActiveModal(key as any));
   }, []);
 
   return (

package/src/components/Thread/ThreadWrapper.tsx

@@ -87,9 +87,14 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
   const loadMoreMessages = useCallback(
     async (chatJID: string, max: number, idOfMessageBefore?: number) => {
       if (!isLoadingMore) {
-        client?.getHistoryStanza(chatJID, max, idOfMessageBefore).then(() => {
-          setIsLoadingMore(false);
-        });
+        client?.getHistoryStanza(chatJID, max, idOfMessageBefore)
+          .then(() => {
+            setIsLoadingMore(false);
+          })
+          .catch((err: unknown) => {
+            console.warn('getHistoryStanza failed', err);
+            setIsLoadingMore(false);
+          });
       }
     },
     [client]
@@ -126,7 +131,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
     if (config?.disableTypingIndicator) {
       return;
     }
-    client.sendTypingRequestStanza(
+    client?.sendTypingRequestStanza(
       activeMessage.roomJid,
       `${user.firstName} ${user.lastName}`,
       true
@@ -137,7 +142,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
     if (config?.disableTypingIndicator) {
       return;
     }
-    client.sendTypingRequestStanza(
+    client?.sendTypingRequestStanza(
       activeMessage.roomJid,
       `${user.firstName} ${user.lastName}`,
       false

package/src/components/UsersList/UsersList.tsx

@@ -52,7 +52,7 @@ const UsersList: React.FC<UsersListProps> = ({
     () =>
       debounce((term: string) => {
         const lower = term.toLowerCase();
-        const users = (Object.values(usersSet) as RoomMember[]).filter(
+        const users = (Object.values(usersSet!) as RoomMember[]).filter(
           (user: RoomMember) =>
             `${user.firstName} ${user.lastName}`.toLowerCase().includes(lower)
         );
@@ -66,7 +66,7 @@ const UsersList: React.FC<UsersListProps> = ({
   }, [searchTerm, debouncedFilter]);
 
   useEffect(() => {
-    setFilteredUsers(Object.values(usersSet) as RoomMember[]);
+    setFilteredUsers(Object.values(usersSet!) as RoomMember[]);
   }, [usersSet]);
 
   return (

package/src/components/styled/ActionButton.tsx

@@ -4,9 +4,10 @@ import { DownloadIcon } from '../../assets/icons';
 import { RootState } from '../../roomStore';
 import { useSelector } from 'react-redux';
 
-interface ActionButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ActionButtonProps {
   icon?: React.ReactNode;
+  style?: any;
+  [key: string]: any;
 }
 
 const ActionButton: FC<ActionButtonProps> = ({ icon, ...props }) => {
@@ -23,11 +24,11 @@ const ActionButton: FC<ActionButtonProps> = ({ icon, ...props }) => {
         backgroundColor: '#fff',
         border: `1px solid ${config?.colors?.primary || '#0052CD'}`,
         ...props.style,
-      }}
+      } as any}
       {...props}
     >
       {icon ? (
-        React.cloneElement(icon as React.ReactElement, {
+        React.cloneElement(icon as React.ReactElement<any>, {
           style: { width: 40, height: 40 },
         })
       ) : (