Merge pull request #25 from cometchat-pro/v3.0.2-1

v3.0.2-1

README.md

@@ -61,7 +61,7 @@ To install React-Native UI Kit, you need to first register on CometChat Dashboar
 
 ```javascript
 
- npm install @cometchat-pro/react-native-chat@3.0.0 --save
+ npm install @cometchat-pro/react-native-chat@3.0.2 --save
 
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cometchat-pro-react-native-ui-kit",
-  "version": "3.0.0-1",
+  "version": "3.0.2-1",
   "description": "Chat UI Kit for React Native App",
   "main": "./src/index.js",
   "scripts": {
@@ -50,8 +50,8 @@
     "prettier": "^2.1.2"
   },
   "dependencies": {
-    "@cometchat-pro/react-native-calls": "2.0.3-beta1",
-    "@cometchat-pro/react-native-chat": "3.0.0",
+    "@cometchat-pro/react-native-calls": "2.1.1",
+    "@cometchat-pro/react-native-chat": "3.0.2",
     "@react-native-async-storage/async-storage": "^1.13.4",
     "lodash": "^4.17.20",
     "react-native-autolink": "^3.0.0",

src/components/Messages/CometChatMessageHeader/index.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { MessageHeaderManager } from './controller';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
+
 import { CometChatUserPresence, CometChatAvatar } from '../../Shared';
 import * as enums from '../../../utils/enums';
 import * as actions from '../../../utils/actions';
@@ -37,10 +38,14 @@ class CometChatMessageHeader extends React.Component {
   }
 
   checkRestrictions = async () => {
-    let isGroupVideoCallEnabled = await this.context.FeatureRestriction.isGroupVideoCallEnabled();
-    let isOneOnOneAudioCallEnabled = await this.context.FeatureRestriction.isOneOnOneAudioCallEnabled();
-    let isTypingIndicatorsEnabled = await this.context.FeatureRestriction.isTypingIndicatorsEnabled();
-    let isOneOnOneVideoCallEnabled = await this.context.FeatureRestriction.isOneOnOneVideoCallEnabled();
+    let isGroupVideoCallEnabled =
+      await this.context.FeatureRestriction.isGroupVideoCallEnabled();
+    let isOneOnOneAudioCallEnabled =
+      await this.context.FeatureRestriction.isOneOnOneAudioCallEnabled();
+    let isTypingIndicatorsEnabled =
+      await this.context.FeatureRestriction.isTypingIndicatorsEnabled();
+    let isOneOnOneVideoCallEnabled =
+      await this.context.FeatureRestriction.isOneOnOneVideoCallEnabled();
     this.setState({
       restrictions: {
         isGroupVideoCallEnabled,
@@ -172,6 +177,7 @@ class CometChatMessageHeader extends React.Component {
           ) {
             this.setState({ status: item.status, presence: item.status });
           }
+          this.props.actionGenerated(actions.STATUS_UPDATED, item.status);
           break;
         }
         case enums.GROUP_MEMBER_KICKED:

src/components/Messages/CometChatMessages/index.js

@@ -375,6 +375,10 @@ class CometChatMessages extends React.PureComponent {
         break;
       case enums.TRANSIENT_MESSAGE_RECEIVED:
         this.liveReactionReceived(messages);
+        break;
+      case actions.STATUS_UPDATED:
+        this.setState({ user: { ...this.state.user, status: messages } });
+
         break;
       default:
         break;

src/components/Messages/CometChatStickerKeyboard/index.js

@@ -1,6 +1,13 @@
 /* eslint-disable react/jsx-fragments */
 import React from 'react';
-import { View, Text, TouchableOpacity, Image, ScrollView } from 'react-native';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  FlatList,
+} from 'react-native';
+import FastImage from 'react-native-fast-image';
 import theme from '../../../resources/theme';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import style from './styles';
@@ -130,49 +137,71 @@ class CometChatStickerKeyboard extends React.PureComponent {
 
     let stickers = null;
     if (Object.keys(this.state.stickerSet).length) {
-      const sectionItems = Object.keys(this.state.stickerSet).map(
-        (sectionItem, key) => {
-          const stickerSetThumbnail = this.state.stickerSet[sectionItem][0]
-            .stickerUrl;
-          return (
-            <TouchableOpacity
-              key={key}
-              style={style.sectionListItemStyle}
-              onPress={() => this.onStickerSetClicked(sectionItem)}>
-              <Image
-                source={{ uri: stickerSetThumbnail }}
-                alt={sectionItem}
-                style={style.stickerHeaderImageStyle}
-              />
-            </TouchableOpacity>
-          );
-        },
+      const sectionItems = (
+        <FlatList
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            backgroundColor: 'red',
+          }}
+          nestedScrollEnabled
+          style={{ paddingVertical: 10 }}
+          horizontal
+          bounces={false}
+          showsHorizontalScrollIndicator={false}
+          data={Object.keys(this.state.stickerSet)}
+          renderItem={({ item: sectionItem, index: key }) => {
+            const stickerSetThumbnail =
+              this.state.stickerSet[sectionItem][0].stickerUrl;
+
+            return (
+              <TouchableOpacity
+                key={sectionItem}
+                style={style.sectionListItemStyle}
+                onPress={() => this.onStickerSetClicked(sectionItem)}>
+                <FastImage
+                  source={{ uri: stickerSetThumbnail }}
+                  alt={sectionItem}
+                  style={style.stickerHeaderImageStyle}
+                />
+              </TouchableOpacity>
+            );
+          }}
+        />
       );
 
       let activeStickerList = [];
       if (this.state.activeStickerList.length) {
         const stickerList = [...this.state.activeStickerList];
-        activeStickerList = stickerList.map((stickerItem, key) => {
-          return (
-            <TouchableOpacity
-              key={key}
-              style={style.stickerItemStyle}
-              onPress={() => this.sendStickerMessage(stickerItem)}>
-              <Image
-                source={{ uri: stickerItem.stickerUrl }}
-                alt={stickerItem.stickerName}
-                style={style.stickerImageStyle}
-              />
-            </TouchableOpacity>
-          );
-        });
+        activeStickerList = (
+          <FlatList
+            numColumns={3}
+            style={{
+              width: '100%',
+              alignSelf: 'center',
+            }}
+            data={stickerList}
+            renderItem={({ item: stickerItem, index: key }) => {
+              return (
+                <TouchableOpacity
+                  key={stickerItem.stickerName}
+                  style={style.stickerItemStyle}
+                  onPress={() => this.sendStickerMessage(stickerItem)}>
+                  <FastImage
+                    source={{ uri: stickerItem.stickerUrl }}
+                    alt={stickerItem.stickerName}
+                    style={style.stickerImageStyle}
+                  />
+                </TouchableOpacity>
+              );
+            }}
+          />
+        );
       }
 
       stickers = (
         <>
-          <ScrollView bounces={false}>
-            <View style={style.stickerListStyle}>{activeStickerList}</View>
-          </ScrollView>
+          <View style={style.stickerListStyle}>{activeStickerList}</View>
 
           <View
             style={[
@@ -182,13 +211,7 @@ class CometChatStickerKeyboard extends React.PureComponent {
                 backgroundColor: this.viewTheme.backgroundColor.silver,
               },
             ]}>
-            <ScrollView
-              style={{ paddingVertical: 10 }}
-              horizontal
-              bounces={false}
-              showsHorizontalScrollIndicator={false}>
-              {sectionItems}
-            </ScrollView>
+            {sectionItems}
           </View>
         </>
       );

src/components/Messages/CometChatStickerKeyboard/styles.js

@@ -24,9 +24,9 @@ export default StyleSheet.create({
     marginHorizontal: 8,
   },
   stickerItemStyle: {
-    minWidth: 50,
+    width: '30%',
     minHeight: 50,
-    maxWidth: 70,
+    marginLeft: '2.5%',
     maxHeight: 70,
     flexShrink: 0,
     marginRight: 20,
@@ -37,8 +37,10 @@ export default StyleSheet.create({
     flexWrap: 'wrap',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingLeft: 20,
+    // paddingHorizontal: 20,
+    paddingRight: '2.5%',
     paddingBottom: 10,
+    flex: 1,
   },
   stickerSectionListStyle: {
     borderTopWidth: 1,

src/components/Users/CometChatUserDetails/controller.js

@@ -0,0 +1,26 @@
+import { CometChat } from '@cometchat-pro/react-native-chat';
+import * as enums from '../../../utils/enums';
+
+export class UserDetailManager {
+  userListenerId = 'user_detail_' + new Date().getTime();
+
+  attachListeners(callback) {
+    CometChat.addUserListener(
+      this.userListenerId,
+      new CometChat.UserListener({
+        onUserOnline: (onlineUser) => {
+          /* when someuser/friend comes online, user will be received here */
+          callback(enums.USER_ONLINE, onlineUser);
+        },
+        onUserOffline: (offlineUser) => {
+          /* when someuser/friend went offline, user will be received here */
+          callback(enums.USER_OFFLINE, offlineUser);
+        },
+      }),
+    );
+  }
+
+  removeListeners() {
+    CometChat.removeUserListener(this.userListenerId);
+  }
+}

src/components/Users/CometChatUserDetails/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, Dimensions, Modal } from 'react-native';
+import { UserDetailManager } from './controller';
+import * as enums from '../../../utils/enums';
 import theme from '../../../resources/theme';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import {
@@ -30,24 +32,63 @@ export default class CometChatUserDetails extends React.Component {
   }
 
   componentDidMount() {
-    this.setStatusForUser();
     this.checkRestrictions();
+    this.setStatusForUser();
+    this.UserDetailManager = new UserDetailManager();
+    this.UserDetailManager.attachListeners(this.updateUser);
   }
 
+  updateUser = (key, user) => {
+    console.log('updateUser', key, user);
+    switch (key) {
+      case enums.USER_ONLINE:
+      case enums.USER_OFFLINE: {
+        if (
+          this.props.type === CometChat.ACTION_TYPE.TYPE_USER &&
+          this.props.item.uid === user.uid
+        ) {
+          //if user presence feature is disabled
+          if (this.state.isUserPresenceEnabled === false) {
+            return false;
+          }
+
+          let status = '';
+          if (user.status === CometChat.USER_STATUS.OFFLINE) {
+            status = 'OFFLINE';
+          } else if (user.status === CometChat.USER_STATUS.ONLINE) {
+            status = 'ONLINE';
+          }
+
+          this.setState({ status: status });
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
   /**
    * Update bottom sheet to 0th snap point if prop received as open
    */
   componentDidUpdate(prevProps) {
     if (!prevProps.open && this.props.open) {
       this.sheetRef.current.snapTo(0);
     }
+    if (JSON.stringify(prevProps.item) !== JSON.stringify(this.props.item)) {
+      this.setStatusForUser();
+    }
   }
 
   checkRestrictions = async () => {
-    let isSharedMediaEnabled = await this.context.FeatureRestriction.isSharedMediaEnabled();
-    let isBlockUserEnabled = await this.context.FeatureRestriction.isBlockUserEnabled();
-    let isViewProfileEnabled = await this.context.FeatureRestriction.isViewProfileEnabled();
-    let isUserPresenceEnabled = await this.context.FeatureRestriction.isUserPresenceEnabled();
+    let isSharedMediaEnabled =
+      await this.context.FeatureRestriction.isSharedMediaEnabled();
+    let isBlockUserEnabled =
+      await this.context.FeatureRestriction.isBlockUserEnabled();
+    let isViewProfileEnabled =
+      await this.context.FeatureRestriction.isViewProfileEnabled();
+    let isUserPresenceEnabled =
+      await this.context.FeatureRestriction.isUserPresenceEnabled();
     this.setState({
       restrictions: {
         isSharedMediaEnabled,
@@ -127,7 +168,7 @@ export default class CometChatUserDetails extends React.Component {
         this.props.item.blockedByMe &&
         !this.state.restrictions?.isUserPresenceEnabled ? null : (
           <CometChatUserPresence
-            status={this.props.item.status}
+            status={this.state.status}
             style={{ top: 35 }}
             cornerRadius={9}
             borderColor={theme.borderColor.white}

src/utils/actions.js

@@ -22,6 +22,7 @@ export const CLOSE_DETAIL = 'closeDetail';
 export const CLOSE_DETAIL_CLICKED = 'closeDetailClicked';
 export const CLOSE_THREAD_CLICKED = 'closeThreadClicked';
 export const MENU_CLICKED = 'menuClicked';
+export const STATUS_UPDATED = 'statusUpdated';
 
 export const GROUP_UPDATED = 'groupUpdated';
 export const GROUP_DELETED = 'groupDeleted';