Merge pull request #13 from cometchat-pro/v2

V2

README.md

@@ -60,7 +60,7 @@ To install React-Native UI Kit, you need to first register on CometChat Dashboar
 ### ii. Add the CometChat Dependency
 
 ```javascript
- npm install @cometchat-pro/react-native-chat@2.3.0 --save
+ npm install @cometchat-pro/react-native-chat@2.3.3 --save
 ```
 
 ### iii. Other required DEPENDENCIES
@@ -89,6 +89,8 @@ These packages help make the ui-kit smooth and functioning
 [react-native-screens](https://www.npmjs.com/package/react-native-screens)</br>
 [emoji-mart-native](https://www.npmjs.com/package/emoji-mart-native)</br>
 [react-native-keep-awake](https://www.npmjs.com/package/react-native-keep-awake)</br>
+[react-native-webview](https://www.npmjs.com/package/react-native-webview)</br>
+
 
 <br/>
 

package.json

@@ -1,6 +1,8 @@
 {
   "name": "cometchat-pro-react-native-ui-kit",
-  "version": "2.3.0-2",
+
+  "version": "2.3.3-1",
+
   "description": "Chat UI Kit for React Native App",
   "main": "./src/index.js",
   "scripts": {
@@ -49,9 +51,9 @@
     "prettier": "^2.1.2"
   },
   "dependencies": {
-    "@cometchat-pro/react-native-calls": "2.0.1",
-    "@cometchat-pro/react-native-chat": "2.3.0",
-    "@react-native-community/async-storage": "^1.12.1",
+    "@cometchat-pro/react-native-calls": "2.0.3-beta1",
+    "@cometchat-pro/react-native-chat": "2.3.3",
+    "@react-native-async-storage/async-storage": "^1.13.4",
     "lodash": "^4.17.20",
     "react-native-autolink": "^3.0.0",
     "redux": "^4.0.5",

src/components/Chats/CometChatConversationListItem/index.js

@@ -25,14 +25,18 @@ class CometChatConversationListItem extends React.Component {
     this.state = {
       lastMessage: '',
       lastMessageTimestamp: '',
+      isThreaded: false,
     };
   }
 
   componentDidMount() {
     const message = this.getLastMessage();
     const timestamp = this.getLastMessageTimestamp();
 
-    this.setState({ lastMessage: message, lastMessageTimestamp: timestamp });
+    this.setState({
+      lastMessage: message || '',
+      lastMessageTimestamp: timestamp,
+    });
   }
 
   componentDidUpdate(prevProps) {
@@ -45,7 +49,7 @@ class CometChatConversationListItem extends React.Component {
         const timestamp = this.getLastMessageTimestamp();
 
         this.setState({
-          lastMessage: message,
+          lastMessage: message || '',
           lastMessageTimestamp: timestamp,
         });
       }
@@ -228,6 +232,7 @@ class CometChatConversationListItem extends React.Component {
   getMessage = (lastMessage) => {
     try {
       let message = null;
+      this.setState({ isThreaded: lastMessage.parentMessageId });
       switch (lastMessage.type) {
         case CometChat.MESSAGE_TYPE.TEXT:
           message = lastMessage.text;
@@ -374,7 +379,10 @@ class CometChatConversationListItem extends React.Component {
                 alignItems: 'center',
               }}>
               <Text numberOfLines={1} style={styles.itemLastMsgTimeStyle}>
-                {this.state.lastMessage}
+
+                {`${this.state.isThreaded ? 'In a thread : ' : ''}` +
+                  this.state.lastMessage}
+
               </Text>
               <CometChatBadgeCount
                 theme={this.props.theme}

src/components/Chats/CometChatConversationListWithMessages/index.js

@@ -181,24 +181,7 @@ class CometChatConversationListWithMessages extends React.Component {
         });
         break;
       case actions.DIRECT_CALL_ENDED:
-        this.setState(
-          { joinDirectCall: false, ongoingDirectCall: null },
-          () => {
-            this.props.navigation.navigate(
-              enums.NAVIGATION_CONSTANTS.COMET_CHAT_MESSAGES,
-              {
-                theme: this.theme,
-                item: { ...this.state.item },
-                tab: this.state.tab,
-                type: this.state.type,
-                composedThreadMessage: this.state.composedThreadMessage,
-                callMessage: this.state.callMessage,
-                loggedInUser: this.loggedInUser,
-                actionGenerated: this.actionHandler,
-              },
-            );
-          },
-        );
+        this.setState({ joinDirectCall: false, ongoingDirectCall: null });
 
         break;
       case actions.ACCEPT_DIRECT_CALL:

src/components/Groups/CometChatAddGroupMemberList/index.js

@@ -276,7 +276,7 @@ class CometChatAddGroupMemberList extends React.Component {
               this.props.actionGenerated('addGroupParticipants', membersToAdd);
             }
           })
-          .catch(() => {
+          .catch((error) => {
             const errorCode = error?.message || 'ERROR';
             this.dropDownAlertRef?.showMessage('error', errorCode);
             logger('addMembersToGroup failed with exception:', error);

src/components/Groups/CometChatGroupDetails/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text, TouchableOpacity, Dimensions, Modal } from 'react-native';
 import theme from '../../../resources/theme';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { CometChatSharedMedia } from '../../Shared';
+import { CometChatSharedMedia, CometChatAvatar } from '../../Shared';
 import style from './styles';
 import BottomSheet from 'reanimated-bottom-sheet';
 import { CometChat } from '@cometchat-pro/react-native-chat';
@@ -21,6 +21,7 @@ import {
 import { deviceHeight } from '../../../utils/consts';
 import { logger } from '../../../utils/common';
 import DropDownAlert from '../../Shared/DropDownAlert';
+import styles from '../../Shared/CometChatAvatar/styles';
 
 const ADD_MEMBER = 'addMember';
 const VIEW_MEMBER = 'viewMember';
@@ -739,6 +740,18 @@ export default class CometChatGroupDetails extends React.Component {
       );
     }
 
+    let avatar = (
+      <View style={style.avatarStyle}>
+        <CometChatAvatar
+          cornerRadius={32}
+          borderColor={theme.color.secondary}
+          borderWidth={1}
+          image={{ uri: this.props.item.avatar }}
+          name={this.props.item.name}
+        />
+      </View>
+    );
+
     return (
       <Modal
         transparent
@@ -785,6 +798,20 @@ export default class CometChatGroupDetails extends React.Component {
                       </TouchableOpacity>
                       <Text style={style.headerTitleStyle}>Details</Text>
                     </View>
+                    <View style={styles.groupDetailContainer}>
+                      {avatar}
+                      <View style={styles.groupDetail}>
+                        <View>
+                          <Text style={style.userName}>
+                            {this.props.item.name}
+                          </Text>
+                        </View>
+                        <Text style={style.statusText} numberOfLines={1}>
+                          {parseInt(this.props.item?.membersCount)} Members
+                        </Text>
+                      </View>
+                    </View>
+
                     <View style={style.detailContainer}>
                       {members}
                       {options}

src/components/Groups/CometChatGroupDetails/styles.js

@@ -43,4 +43,29 @@ export default StyleSheet.create({
     overflow: 'hidden',
     minHeight: Dimensions.get('window').height - 80,
   },
+  userName: {
+    fontSize: 18 * heightRatio,
+    color: theme.color.primary,
+    fontWeight: 'bold',
+  },
+  statusText: {
+    fontSize: 14,
+    color: theme.color.blue,
+  },
+  avatarStyle: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(51,153,255,0.25)',
+  },
+  groupDetailContainer: {
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  groupDetail: {
+    paddingLeft: 8,
+    justifyContent: 'center',
+    height: 48,
+  },
 });

src/components/Groups/CometChatGroupListWithMessages/index.js

@@ -214,24 +214,7 @@ class CometChatGroupListWithMessages extends React.Component {
         });
         break;
       case actions.DIRECT_CALL_ENDED:
-        this.setState(
-          { joinDirectCall: false, ongoingDirectCall: null },
-          () => {
-            this.props.navigation.navigate(
-              enums.NAVIGATION_CONSTANTS.COMET_CHAT_MESSAGES,
-              {
-                theme: this.theme,
-                item: { ...this.state.item },
-                tab: this.state.tab,
-                type: this.state.type,
-                composedThreadMessage: this.state.composedThreadMessage,
-                callMessage: this.state.callMessage,
-                loggedInUser: this.loggedInUser,
-                actionGenerated: this.actionHandler,
-              },
-            );
-          },
-        );
+        this.setState({ joinDirectCall: false, ongoingDirectCall: null });
         break;
       case actions.ACCEPT_DIRECT_CALL:
         this.setState({ joinDirectCall: true }, () => {

src/components/Messages/CometChatDeleteMessageBubble/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Platform } from 'react-native';
 import theme from '../../../resources/theme';
 import style from './style';
 import * as enums from '../../../utils/enums';
@@ -9,14 +9,38 @@ import { CometChatAvatar } from '../../Shared';
 const CometChatDeleteMessageBubble = (props) => {
   const message = { ...props.message, messageFrom: props.messageOf };
   let messageContainer = null;
-  const timestamp = new Date(props.message.sentAt * 1000).toLocaleTimeString(
-    'en-US',
-    {
-      hour: 'numeric',
-      minute: 'numeric',
-      hour12: true,
-    },
-  );
+
+  let timestamp = new Date(
+    props.message.sentAt
+      ? props.message.sentAt * 1000
+      : props.message._composedAt,
+  ).toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true,
+  });
+  if (Platform.OS === 'android') {
+    let time = timestamp.split(':'); // convert to array
+
+    // fetch
+    var hours = Number(time[0]);
+    var minutes = Number(time[1]?.split(' ')[0]);
+
+    // calculate
+    var timeValue;
+
+    if (hours > 0 && hours <= 12) {
+      timeValue = '' + hours;
+    } else if (hours > 12) {
+      timeValue = '' + (hours - 12);
+    } else if (hours == 0) {
+      timeValue = '12';
+    }
+
+    timeValue += minutes < 10 ? ':0' + minutes : ':' + minutes; // get minutes
+    timeValue += hours >= 12 ? ' PM' : ' AM'; // get AM/PM
+    timestamp = timeValue;
+  }
   const viewTheme = { ...theme, ...props.theme };
 
   if (props.messageOf === enums.MESSAGE_OF_SENDER) {

src/components/Messages/CometChatDeleteMessageBubble/style.js

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 import { widthRatio } from '../../../utils/consts';
 
 export default StyleSheet.create({
-  messageContainerStyle: { marginBottom: 16 },
+  messageContainerStyle: { marginBottom: 16, marginHorizontal: 8 },
   messageSenderNameContainerStyle: { marginBottom: 5 },
   messageContainerForReceiver: {
     flexDirection: 'row',

src/components/Messages/CometChatMessageActions/actions.js

@@ -16,6 +16,22 @@ import { CometChat } from '@cometchat-pro/react-native-chat';
 const actionIconSize = 26;
 
 export default (props) => {
+  let sendMessage = null;
+  if (
+    props.message.messageFrom === enums.MESSAGE_FROM_RECEIVER &&
+    props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP
+  ) {
+    sendMessage = (
+      <TouchableOpacity
+        style={styles.action}
+        onPress={() =>
+          props.actionGenerated(actions.SEND_MESSAGE, props.message)
+        }>
+        <FeatherIcon name="message-circle" size={actionIconSize} />
+        <Text style={styles.actionsText}>Send Message Privately</Text>
+      </TouchableOpacity>
+    );
+  }
   let threadedChats = (
     <TouchableOpacity
       style={styles.action}
@@ -47,7 +63,11 @@ export default (props) => {
   );
 
   // if deleting messages need to be disabled
-  if (props.message.messageFrom === 'receiver') {
+  if (
+    props.message.messageFrom === enums.MESSAGE_FROM_RECEIVER &&
+    props.item.scope !== CometChat.GROUP_MEMBER_SCOPE.ADMIN &&
+    props.item.scope !== CometChat.GROUP_MEMBER_SCOPE.MODERATOR
+  ) {
     deleteMessage = null;
   }
   let editMessage = (
@@ -76,6 +96,7 @@ export default (props) => {
   return (
     <TouchableWithoutFeedback onPress={() => {}}>
       <View style={styles.actionsContainer}>
+        {sendMessage}
         {threadedChats}
         {editMessage}
         {deleteMessage}