@messenger-box/platform-mobile 0.0.1-alpha.310 → 0.0.1-alpha.314

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.1-alpha.314](https://github.com/CDEBase/messenger-box/compare/v0.0.1-alpha.313...v0.0.1-alpha.314) (2023-04-03)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
+## [0.0.1-alpha.312](https://github.com/CDEBase/messenger-box/compare/v0.0.1-alpha.311...v0.0.1-alpha.312) (2023-03-29)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
 ## [0.0.1-alpha.310](https://github.com/CDEBase/messenger-box/compare/v0.0.1-alpha.309...v0.0.1-alpha.310) (2023-03-25)
 
 ### Features

package/lib/index.js

@@ -265,6 +265,7 @@ exports.DialogsListItem = void 0;
 const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
 const date_fns_1 = __webpack_require__(/*! date-fns */ "date-fns");
+const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
 const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
 const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
 const createdAtText = (value) => {
@@ -282,30 +283,26 @@ const createdAtText = (value) => {
  * - Get Reservation info: reservation date, status
  * - Add ability to get property information: name, logo
  */
-const DialogsListItem = function DialogsListItem({ currentUser, users, selectedChannelId, channel, onOpen, }) {
-    var _a, _b, _c, _d;
-    const { data: messagesQuery, loading: messageLoading } = (0, platform_client_1.useMessagesQuery)({
+const DialogsListItem = function DialogsListItem({ currentUser, 
+// users,
+selectedChannelId, channel, onOpen, }) {
+    var _a, _b, _c;
+    const { data: messagesQuery, loading: messageLoading, refetch: refetchMessages, } = (0, platform_client_1.useMessagesQuery)({
         variables: {
             channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(),
             limit: 1,
         },
         fetchPolicy: 'cache-and-network',
     });
-    const chatUser = (0, react_1.useMemo)(() => users === null || users === void 0 ? void 0 : users.find(({ id }) => {
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
         var _a;
-        const isNotCurrentUser = id !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id);
-        if (isNotCurrentUser) {
-            return (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(({ user }) => user.id === id);
-        }
-        //return id
-        return isNotCurrentUser;
-    }), [users, currentUser, channel]);
-    const { data: userQuery } = (0, platform_client_1.useUserAccountQuery)({
-        variables: {
-            userId: chatUser === null || chatUser === void 0 ? void 0 : chatUser.id,
-        },
-        skip: !(chatUser === null || chatUser === void 0 ? void 0 : chatUser.id),
-    });
+        // Do something when the screen is focused
+        refetchMessages({ channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(), limit: 1 });
+        return () => {
+            // Do something when the screen is unfocused
+            // Useful for cleanup functions
+        };
+    }, []));
     const lastMessage = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (!((_b = (_a = messagesQuery === null || messagesQuery === void 0 ? void 0 : messagesQuery.messages) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) {
@@ -314,13 +311,15 @@ const DialogsListItem = function DialogsListItem({ currentUser, users, selectedC
         const { data } = messagesQuery.messages;
         return data[data.length - 1];
     }, [messagesQuery]);
-    const channelType = (0, react_1.useMemo)(() => {
-        return channel === null || channel === void 0 ? void 0 : channel.type;
-    }, [channel]);
-    const title = (userQuery === null || userQuery === void 0 ? void 0 : userQuery.getUserAccount.givenName) + ' ' + (userQuery === null || userQuery === void 0 ? void 0 : userQuery.getUserAccount.familyName);
-    if (!chatUser)
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    return (react_1.default.createElement(native_base_1.Pressable, { onPress: () => (channel === null || channel === void 0 ? void 0 : channel.id) !== selectedChannelId && onOpen(channel === null || channel === void 0 ? void 0 : channel.id, title), borderWidth: '1', borderRadius: 10, borderColor: 'gray.200', _dark: {
+    const channelMembers = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.filter((ch) => { var _a, _b; return ((_a = ch === null || ch === void 0 ? void 0 : ch.user) === null || _a === void 0 ? void 0 : _a.id) != (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) && ((_b = ch === null || ch === void 0 ? void 0 : ch.user) === null || _b === void 0 ? void 0 : _b.__typename) == 'UserAccount'; })) === null || _b === void 0 ? void 0 : _b.map((m) => m === null || m === void 0 ? void 0 : m.user)) !== null && _c !== void 0 ? _c : null;
+    }, [currentUser, channel]);
+    const title = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = channelMembers === null || channelMembers === void 0 ? void 0 : channelMembers.map((u) => { var _a; return (_a = (u === null || u === void 0 ? void 0 : u.givenName) + ' ' + (u === null || u === void 0 ? void 0 : u.familyName)) !== null && _a !== void 0 ? _a : ''; })) === null || _a === void 0 ? void 0 : _a.filter((mu) => mu)) === null || _b === void 0 ? void 0 : _b.join(', ')) !== null && _c !== void 0 ? _c : '';
+    }, [channelMembers]);
+    return (react_1.default.createElement(native_base_1.Pressable, { onPress: () => (channel === null || channel === void 0 ? void 0 : channel.id) !== selectedChannelId && onOpen(channel === null || channel === void 0 ? void 0 : channel.id, title), borderWidth: '1', borderRadius: 10, borderColor: 'gray.200', flex: 1, _dark: {
             borderColor: 'coolGray.600',
             backgroundColor: 'gray.700',
         }, _web: {
@@ -329,22 +328,362 @@ const DialogsListItem = function DialogsListItem({ currentUser, users, selectedC
         }, _light: {
             backgroundColor: 'gray.50',
         } },
-        react_1.default.createElement(native_base_1.HStack, { m: 3, space: 2, flex: 1, alignItems: 'center' },
-            react_1.default.createElement(native_base_1.Avatar, { size: 'lg', 
-                // size={'sm'} 
-                bg: 'transparent', _image: { style: { width: 40, height: 40, borderRadius: 6 } }, source: {
-                    uri: userQuery === null || userQuery === void 0 ? void 0 : userQuery.getUserAccount.picture,
-                } }, (0, lodash_1.startCase)(userQuery === null || userQuery === void 0 ? void 0 : userQuery.getUserAccount.username.charAt(0))),
-            react_1.default.createElement(native_base_1.Box, { width: '80%' },
-                react_1.default.createElement(native_base_1.HStack, { alignItems: "center", justifyContent: "space-between" },
-                    react_1.default.createElement(native_base_1.Text, { color: "gray.600", fontSize: "lg", fontWeight: "semibold" }, (_b = chatUser === null || chatUser === void 0 ? void 0 : chatUser.givenName) !== null && _b !== void 0 ? _b : '',
-                        ' ', (_c = chatUser === null || chatUser === void 0 ? void 0 : chatUser.familyName) !== null && _c !== void 0 ? _c : ''),
-                    react_1.default.createElement(native_base_1.Text, { color: "gray.500" }, lastMessage ? createdAtText(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.createdAt) : '')),
-                react_1.default.createElement(native_base_1.Text, { color: "gray.600" }, (_d = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message) !== null && _d !== void 0 ? _d : '')))));
+        react_1.default.createElement(native_base_1.HStack
+        // px={2}
+        // pl={3}
+        , { 
+            // px={2}
+            // pl={3}
+            py: 3, space: 2, w: '100%', flex: 1, direction: 'row', justifyContent: 'space-between', alignItems: 'center' },
+            react_1.default.createElement(native_base_1.Box, { flex: 0.1, alignItems: 'flex-start', pl: 3 },
+                react_1.default.createElement(native_base_1.Avatar.Group, { _avatar: {
+                        size: 'sm',
+                        bg: 'transparent',
+                    } }, channelMembers &&
+                    (channelMembers === null || channelMembers === void 0 ? void 0 : channelMembers.length) > 0 &&
+                    ((_b = channelMembers === null || channelMembers === void 0 ? void 0 : channelMembers.slice(0, 2)) === null || _b === void 0 ? void 0 : _b.map((ch, i) => {
+                        var _a;
+                        return (react_1.default.createElement(native_base_1.Avatar, { key: 'key' + i, bg: 'transparent', size: 9, top: i == 1 ? 4 : 0, right: i == 1 ? -2 : 0, zIndex: i == 1 ? 5 : 1, _image: { borderRadius: 6, borderWidth: 2, borderColor: '#fff' }, source: {
+                                uri: ch === null || ch === void 0 ? void 0 : ch.picture,
+                            } },
+                            (0, lodash_1.startCase)((_a = ch === null || ch === void 0 ? void 0 : ch.username) === null || _a === void 0 ? void 0 : _a.charAt(0)),
+                            (channelMembers === null || channelMembers === void 0 ? void 0 : channelMembers.length) == 1 && (react_1.default.createElement(native_base_1.Avatar.Badge, { bg: "green.800", bottom: -4, right: -4 }))));
+                    })))),
+            react_1.default.createElement(native_base_1.Box, { flex: 0.9 },
+                react_1.default.createElement(native_base_1.HStack, { space: 1, flex: 1, direction: 'row', justifyContent: 'center', alignItems: 'center' },
+                    react_1.default.createElement(native_base_1.Box, { flex: 0.8 },
+                        react_1.default.createElement(native_base_1.Text, { color: "gray.600", fontSize: "lg", flexWrap: 'wrap', fontWeight: "semibold" }, title),
+                        react_1.default.createElement(native_base_1.Text, { color: "gray.600", noOfLines: 1 }, (_c = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message) !== null && _c !== void 0 ? _c : '')),
+                    react_1.default.createElement(native_base_1.Box, { flex: 0.2 },
+                        react_1.default.createElement(native_base_1.Text, { color: "gray.500" }, lastMessage ? createdAtText(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.createdAt) : '')))))));
 };
 exports.DialogsListItem = DialogsListItem;
 
 
+/***/ }),
+
+/***/ "./src/screens/inbox/components/SlackMessageContainer/SlackBubble.tsx":
+/*!****************************************************************************!*\
+  !*** ./src/screens/inbox/components/SlackMessageContainer/SlackBubble.tsx ***!
+  \****************************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+/* eslint-disable no-underscore-dangle, no-use-before-define */
+const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+const react_native_1 = __webpack_require__(/*! react-native */ "react-native");
+const react_native_gifted_chat_1 = __webpack_require__(/*! react-native-gifted-chat */ "react-native-gifted-chat");
+const { isSameUser, isSameDay } = react_native_gifted_chat_1.utils;
+class Bubble extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+    }
+    renderMessageText() {
+        if (this.props.currentMessage.text) {
+            const _a = this.props, { containerStyle, wrapperStyle, messageTextStyle } = _a, messageTextProps = __rest(_a, ["containerStyle", "wrapperStyle", "messageTextStyle"]);
+            if (this.props.renderMessageText) {
+                return this.props.renderMessageText(messageTextProps);
+            }
+            return (react_1.default.createElement(react_native_gifted_chat_1.MessageText, Object.assign({}, messageTextProps, { textStyle: {
+                    left: [
+                        styles.standardFont,
+                        styles.slackMessageText,
+                        messageTextProps.textStyle,
+                        messageTextStyle,
+                    ],
+                } })));
+        }
+        return null;
+    }
+    renderMessageImage() {
+        if (this.props.currentMessage.image) {
+            const _a = this.props, { containerStyle, wrapperStyle } = _a, messageImageProps = __rest(_a, ["containerStyle", "wrapperStyle"]);
+            if (this.props.renderMessageImage) {
+                return this.props.renderMessageImage(messageImageProps);
+            }
+            return (react_1.default.createElement(react_native_gifted_chat_1.MessageImage, Object.assign({}, messageImageProps, { imageStyle: [styles.slackImage, messageImageProps.imageStyle] })));
+        }
+        return null;
+    }
+    renderTicks() {
+        const { currentMessage } = this.props;
+        if (this.props.renderTicks) {
+            return this.props.renderTicks(currentMessage);
+        }
+        if (currentMessage.user._id !== this.props.user._id) {
+            return null;
+        }
+        if (currentMessage.sent || currentMessage.received) {
+            return (react_1.default.createElement(react_native_1.View, { style: [styles.headerItem, styles.tickView] },
+                currentMessage.sent && (react_1.default.createElement(react_native_1.Text, { style: [styles.standardFont, styles.tick, this.props.tickStyle] }, "\u2713")),
+                currentMessage.received && (react_1.default.createElement(react_native_1.Text, { style: [styles.standardFont, styles.tick, this.props.tickStyle] }, "\u2713"))));
+        }
+        return null;
+    }
+    renderUsername() {
+        const username = this.props.currentMessage.user.name;
+        if (username) {
+            const _a = this.props, { containerStyle, wrapperStyle } = _a, usernameProps = __rest(_a, ["containerStyle", "wrapperStyle"]);
+            if (this.props.renderUsername) {
+                return this.props.renderUsername(usernameProps);
+            }
+            return (react_1.default.createElement(react_native_1.Text, { style: [styles.standardFont, styles.headerItem, styles.username, this.props.usernameStyle] }, username));
+        }
+        return null;
+    }
+    renderTime() {
+        if (this.props.currentMessage.createdAt) {
+            const _a = this.props, { containerStyle, wrapperStyle } = _a, timeProps = __rest(_a, ["containerStyle", "wrapperStyle"]);
+            if (this.props.renderTime) {
+                return this.props.renderTime(timeProps);
+            }
+            return (react_1.default.createElement(react_native_gifted_chat_1.Time, Object.assign({}, timeProps, { containerStyle: { left: [styles.timeContainer] }, textStyle: {
+                    left: [styles.standardFont, styles.headerItem, styles.time, timeProps.textStyle],
+                } })));
+        }
+        return null;
+    }
+    renderCustomView() {
+        if (this.props.renderCustomView) {
+            return this.props.renderCustomView(this.props);
+        }
+        return null;
+    }
+    render() {
+        const isSameThread = isSameUser(this.props.currentMessage, this.props.previousMessage) &&
+            isSameDay(this.props.currentMessage, this.props.previousMessage);
+        const messageHeader = isSameThread ? null : (react_1.default.createElement(react_native_1.View, { style: styles.headerView },
+            this.renderUsername(),
+            this.renderTime(),
+            this.renderTicks()));
+        return (react_1.default.createElement(react_native_1.View, { style: [styles.container, this.props.containerStyle] },
+            react_1.default.createElement(react_native_1.TouchableOpacity, Object.assign({ disabled: true, accessibilityTraits: "text" }, this.props.touchableProps),
+                react_1.default.createElement(react_native_1.View, { style: [styles.wrapper, this.props.wrapperStyle] },
+                    react_1.default.createElement(react_native_1.View, null,
+                        this.renderCustomView(),
+                        messageHeader,
+                        this.renderMessageImage(),
+                        this.renderMessageText())))));
+    }
+}
+exports["default"] = Bubble;
+// Note: Everything is forced to be "left" positioned with this component.
+// The "right" position is only used in the default Bubble.
+const styles = react_native_1.StyleSheet.create({
+    standardFont: {
+        fontSize: 15,
+    },
+    slackMessageText: {
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    container: {
+        flex: 1,
+        alignItems: 'flex-start',
+    },
+    wrapper: {
+        marginRight: 60,
+        minHeight: 20,
+        justifyContent: 'flex-end',
+    },
+    username: {
+        fontWeight: 'bold',
+        top: 4,
+    },
+    time: {
+        textAlign: 'left',
+        fontSize: 12,
+    },
+    timeContainer: {
+        marginLeft: 0,
+        marginRight: 0,
+        marginBottom: 0,
+    },
+    headerItem: {
+        marginRight: 10,
+    },
+    headerView: {
+        // Try to align it better with the avatar on Android.
+        marginTop: react_native_1.Platform.OS === 'android' ? -2 : 0,
+        flexDirection: 'row',
+        alignItems: 'baseline',
+    },
+    /* eslint-disable react-native/no-color-literals */
+    tick: {
+        backgroundColor: 'transparent',
+        color: 'white',
+    },
+    /* eslint-enable react-native/no-color-literals */
+    tickView: {
+        flexDirection: 'row',
+    },
+    slackImage: {
+        borderRadius: 3,
+        marginLeft: 0,
+        marginRight: 0,
+    },
+});
+// Bubble.contextTypes = {
+//     actionSheet: PropTypes.func,
+// };
+Bubble.defaultProps = {
+    touchableProps: {},
+    onLongPress: null,
+    renderMessageImage: null,
+    renderMessageText: null,
+    renderCustomView: null,
+    renderTime: null,
+    currentMessage: {
+        text: null,
+        createdAt: null,
+        image: null,
+    },
+    nextMessage: {},
+    previousMessage: {},
+    containerStyle: {},
+    wrapperStyle: {},
+    tickStyle: {},
+    containerToNextStyle: {},
+    containerToPreviousStyle: {},
+};
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/components/SlackMessageContainer/SlackMessage.tsx":
+/*!*****************************************************************************!*\
+  !*** ./src/screens/inbox/components/SlackMessageContainer/SlackMessage.tsx ***!
+  \*****************************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/* eslint-disable no-underscore-dangle, no-use-before-define */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+const react_native_1 = __webpack_require__(/*! react-native */ "react-native");
+const react_native_gifted_chat_1 = __webpack_require__(/*! react-native-gifted-chat */ "react-native-gifted-chat");
+const SlackBubble_1 = __importDefault(__webpack_require__(/*! ./SlackBubble */ "./src/screens/inbox/components/SlackMessageContainer/SlackBubble.tsx"));
+const { isSameUser, isSameDay } = react_native_gifted_chat_1.utils;
+class Message extends react_1.default.Component {
+    getInnerComponentProps() {
+        const _a = this.props, { containerStyle } = _a, props = __rest(_a, ["containerStyle"]);
+        return Object.assign(Object.assign({}, props), { position: 'left', isSameUser,
+            isSameDay });
+    }
+    renderDay() {
+        if (this.props.currentMessage.createdAt) {
+            const dayProps = this.getInnerComponentProps();
+            if (this.props.renderDay) {
+                return this.props.renderDay(dayProps);
+            }
+            return react_1.default.createElement(react_native_gifted_chat_1.Day, Object.assign({}, dayProps));
+        }
+        return null;
+    }
+    renderBubble() {
+        const bubbleProps = this.getInnerComponentProps();
+        if (this.props.renderBubble) {
+            return this.props.renderBubble(bubbleProps);
+        }
+        return react_1.default.createElement(SlackBubble_1.default, Object.assign({}, bubbleProps));
+    }
+    renderAvatar() {
+        let extraStyle;
+        if (isSameUser(this.props.currentMessage, this.props.previousMessage) &&
+            isSameDay(this.props.currentMessage, this.props.previousMessage)) {
+            // Set the invisible avatar height to 0, but keep the width, padding, etc.
+            extraStyle = { height: 0 };
+        }
+        const avatarProps = this.getInnerComponentProps();
+        return (react_1.default.createElement(react_native_gifted_chat_1.Avatar, Object.assign({}, avatarProps, { showAvatarForEveryMessage: true, imageStyle: {
+                left: [styles.slackAvatar, avatarProps.imageStyle, extraStyle],
+            } })));
+    }
+    render() {
+        const marginBottom = isSameUser(this.props.currentMessage, this.props.nextMessage) ? 2 : 10;
+        return (react_1.default.createElement(react_native_1.View, null,
+            this.renderDay(),
+            react_1.default.createElement(react_native_1.View, { style: [styles.container, { marginBottom }, this.props.containerStyle] },
+                this.renderAvatar(),
+                this.renderBubble())));
+    }
+}
+exports["default"] = Message;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-start',
+        marginLeft: 8,
+        marginRight: 0,
+    },
+    slackAvatar: {
+        // The bottom should roughly line up with the first line of message text.
+        height: 40,
+        width: 40,
+        borderRadius: 3,
+        marginTop: 0,
+    },
+});
+Message.defaultProps = {
+    renderAvatar: undefined,
+    renderBubble: null,
+    renderDay: null,
+    currentMessage: {},
+    nextMessage: {},
+    previousMessage: {},
+    user: {},
+    containerStyle: {},
+};
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/components/SlackMessageContainer/index.ts":
+/*!*********************************************************************!*\
+  !*** ./src/screens/inbox/components/SlackMessageContainer/index.ts ***!
+  \*********************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.SlackMessage = void 0;
+const SlackMessage_1 = __importDefault(__webpack_require__(/*! ./SlackMessage */ "./src/screens/inbox/components/SlackMessageContainer/SlackMessage.tsx"));
+exports.SlackMessage = SlackMessage_1.default;
+
+
 /***/ }),
 
 /***/ "./src/screens/inbox/config/config.ts":
@@ -425,6 +764,7 @@ const react_native_gifted_chat_1 = __webpack_require__(/*! react-native-gifted-c
 const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
 const config_1 = __webpack_require__(/*! ../config */ "./src/screens/inbox/config/index.ts");
 const user_auth0_client_1 = __webpack_require__(/*! @adminide-stack/user-auth0-client */ "@adminide-stack/user-auth0-client");
+const SlackMessageContainer_1 = __webpack_require__(/*! ../components/SlackMessageContainer */ "./src/screens/inbox/components/SlackMessageContainer/index.ts");
 const { MESSAGES_PER_PAGE } = config_1.config;
 function ConversationView({ channelId }) {
     var _a;
@@ -483,12 +823,12 @@ function ConversationView({ channelId }) {
     (0, react_1.useEffect)(() => {
         var _a;
         if (((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data) && (loadingOldMessages || channelMessages.length === 0)) {
-            const { data: messages, totalCount } = data.messages;
-            if (messages && messages.length > 0) {
+            const { data: messages, totalCount: messeageTotalCount } = data.messages;
+            if (messages && messages.length > 0 && totalCount !== messeageTotalCount) {
                 setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...messages, ...oldMessages], ({ id }) => id));
             }
-            if (totalCount)
-                setTotalCount(totalCount);
+            if (totalCount !== messeageTotalCount)
+                setTotalCount(messeageTotalCount);
         }
     }, [data, loadingOldMessages, channelMessages]);
     (0, react_1.useEffect)(() => {
@@ -656,7 +996,7 @@ function ConversationView({ channelId }) {
                 message.createdAt = date;
                 (message.user = {
                     _id: msg.author.id,
-                    name: msg.author.givenName + msg.author.familyName,
+                    name: msg.author.givenName + ' ' + msg.author.familyName,
                     avatar: (_a = msg.author) === null || _a === void 0 ? void 0 : _a.picture,
                 }),
                     (message.image = (_c = (_b = msg.files) === null || _b === void 0 ? void 0 : _b.data[0]) === null || _c === void 0 ? void 0 : _c.url),
@@ -688,10 +1028,10 @@ function ConversationView({ channelId }) {
             return (react_1.default.createElement(native_base_1.Box, null,
                 (attachment === null || attachment === void 0 ? void 0 : attachment.callToAction) ? (react_1.default.createElement(native_base_1.Button, { variant: 'outline', size: 'sm', borderColor: color, onPress: () => navigation.navigate(action, { reservationId: actionId }) },
                     react_1.default.createElement(native_base_1.Text, { color: color }, attachment.callToAction.title))) : null,
-                react_1.default.createElement(react_native_gifted_chat_1.MessageText, Object.assign({}, props))));
+                react_1.default.createElement(react_native_gifted_chat_1.MessageText, Object.assign({}, props, { textStyle: { left: { marginLeft: 5 } } }))));
         }
         else {
-            return react_1.default.createElement(react_native_gifted_chat_1.MessageText, Object.assign({}, props));
+            return react_1.default.createElement(react_native_gifted_chat_1.MessageText, Object.assign({}, props, { textStyle: { left: { marginLeft: 5 } } }));
         }
     };
     const renderActions = (props) => {
@@ -706,12 +1046,30 @@ function ConversationView({ channelId }) {
                     setImages([]);
                 } }, "Cancel"))) : null));
     };
+    const renderMessage = (props) => {
+        // const {
+        //     currentMessage: { text: currText },
+        // } = props;
+        //let messageTextStyle: any;
+        // Make "pure emoji" messages much bigger than plain text.
+        // if (currText && emojiUtils.isPureEmojiString(currText)) {
+        //   messageTextStyle = {
+        //     fontSize: 28,
+        //     // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
+        //     lineHeight: Platform.OS === 'android' ? 34 : 30,
+        //   }
+        // }
+        // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
+        return react_1.default.createElement(SlackMessageContainer_1.SlackMessage, Object.assign({}, props));
+    };
     return (react_1.default.createElement(react_native_gifted_chat_1.GiftedChat, { wrapInSafeArea: false, renderLoading: () => react_1.default.createElement(native_base_1.Spinner, null), messages: messageList, onSend: (messages) => {
             var _a, _b;
             handleSend((_b = (_a = messages[0]) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : ' ');
         }, text: msg ? msg : ' ', onInputTextChanged: (text) => setMsg(text), renderFooter: () => (loading ? react_1.default.createElement(native_base_1.Spinner, null) : imageLoading ? react_1.default.createElement(native_base_1.Spinner, null) : ''), scrollToBottom: true, user: {
             _id: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) || '',
-        }, isTyping: true, alwaysShowSend: loading ? false : true, onLoadEarlier: onFetchOld, infiniteScroll: true, renderSend: renderSend, loadEarlier: channelMessages.length !== ((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.totalCount), renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory }));
+        }, isTyping: true, alwaysShowSend: loading ? false : true, onLoadEarlier: onFetchOld, infiniteScroll: true, renderSend: renderSend, loadEarlier: ((_a = checkForMessages === null || checkForMessages === void 0 ? void 0 : checkForMessages.messages) === null || _a === void 0 ? void 0 : _a.totalCount) > totalCount, 
+        // loadEarlier={channelMessages.length !== data?.messages?.totalCount}
+        renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory, renderMessage: renderMessage }));
 }
 exports.ConversationView = ConversationView;
 
@@ -760,8 +1118,7 @@ const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client
 const user_auth0_client_1 = __webpack_require__(/*! @adminide-stack/user-auth0-client */ "@adminide-stack/user-auth0-client");
 const client_1 = __webpack_require__(/*! @admin-layout/client */ "@admin-layout/client");
 const config_1 = __webpack_require__(/*! ../config */ "./src/screens/inbox/config/index.ts");
-function Dialogs(props) {
-    var _a;
+const Dialogs = (props) => {
     const { channelFilters, channelRole } = props;
     const { params } = (0, native_1.useRoute)();
     const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
@@ -775,11 +1132,14 @@ function Dialogs(props) {
             criteria: channelFilters,
         },
     });
-    const { data: users } = (0, platform_client_1.useGetAllUsersQuery)();
-    const currentUser = (0, react_1.useMemo)(() => { var _a; return (_a = users === null || users === void 0 ? void 0 : users.getUsers) === null || _a === void 0 ? void 0 : _a.find(({ alias }) => alias === null || alias === void 0 ? void 0 : alias.includes(auth === null || auth === void 0 ? void 0 : auth.auth0UserId)); }, [users, auth]);
-    (0, react_1.useEffect)(() => {
-        getChannelsRefetch();
-    }, [isFocused, navigation]);
+    (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
+        // Do something when the screen is focused
+        getChannelsRefetch({ role: channelRole, criteria: channelFilters });
+        return () => {
+            // Do something when the screen is unfocused
+            // Useful for cleanup functions
+        };
+    }, [channelFilters]));
     (0, react_1.useEffect)(() => {
         setTimeout(() => {
             dispatch({
@@ -801,8 +1161,8 @@ function Dialogs(props) {
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
         if (userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) {
-            //Direct channel Memebers
-            let userDirectChannels = (_c = (_b = (_a = userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) === null || _a === void 0 ? void 0 : _a.filter((i) => i.type == 'DIRECT')) === null || _b === void 0 ? void 0 : _b.filter((c) => c.members.some((u) => u.user.__typename == 'UserAccount'))) !== null && _c !== void 0 ? _c : [];
+            //Direct channel
+            let userDirectChannels = (_c = (_b = (_a = userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) === null || _a === void 0 ? void 0 : _a.filter((i) => i.type == 'DIRECT')) === null || _b === void 0 ? void 0 : _b.filter((c) => c.members.some((u) => { var _a; return ((_a = u === null || u === void 0 ? void 0 : u.user) === null || _a === void 0 ? void 0 : _a.id) != (auth === null || auth === void 0 ? void 0 : auth.id) && u.user.__typename == 'UserAccount'; }))) !== null && _c !== void 0 ? _c : [];
             if ((userDirectChannels === null || userDirectChannels === void 0 ? void 0 : userDirectChannels.length) > 0)
                 setUserDirectChannel(userDirectChannels);
         }
@@ -824,21 +1184,14 @@ function Dialogs(props) {
             });
         }
     }, []);
-    //let cuc = userChannels?.channelsByUser?.filter((i:any)=>i.type=='DIRECT')?.map((k:any) => k?.members?.filter((e:any) => e?.user?.id != currentUser?.id))??[];
-    let cuc = (_a = userDirectChannel === null || userDirectChannel === void 0 ? void 0 : userDirectChannel.map((k) => { var _a; return (_a = k === null || k === void 0 ? void 0 : k.members) === null || _a === void 0 ? void 0 : _a.filter((e) => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.user) === null || _a === void 0 ? void 0 : _a.id) != (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); }); })) !== null && _a !== void 0 ? _a : [];
-    cuc = cuc.filter((e) => e.length);
-    return (react_1.default.createElement(native_base_1.Box, { p: 2 }, !userDirectChannel || (userDirectChannel === null || userDirectChannel === void 0 ? void 0 : userDirectChannel.length) == 0 || (cuc && cuc.length == 0) ? (react_1.default.createElement(native_base_1.Box, { p: 5 },
-        react_1.default.createElement(native_base_1.Heading, null, "Chat"),
-        react_1.default.createElement(native_base_1.Input, { height: 50, mt: 3, placeholder: "Search", borderRadius: 50, borderColor: 'gray.200', borderWidth: 2 }),
-        react_1.default.createElement(native_base_1.Center, { mt: 6 },
-            react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: "chatbubbles", size: 'xl' }),
-            react_1.default.createElement(native_base_1.Text, null, "You don't have any messages yet!")))) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(native_base_1.FlatList
-        // data={userChannels?.channelsByUser?.filter((i:any)=>i.type=='DIRECT')??[]}
-        , { 
-            // data={userChannels?.channelsByUser?.filter((i:any)=>i.type=='DIRECT')??[]}
-            data: (userDirectChannel === null || userDirectChannel === void 0 ? void 0 : userDirectChannel.length) > 0 ? userDirectChannel : [], onRefresh: getChannelsRefetch, refreshing: userChannelsLoading, contentContainerStyle: { minHeight: '100%' }, ItemSeparatorComponent: () => react_1.default.createElement(native_base_1.Box, { height: "0.5", backgroundColor: "gray.200" }), renderItem: ({ item: channel }) => (react_1.default.createElement(DialogsListItem_1.DialogsListItem, { users: users === null || users === void 0 ? void 0 : users.getUsers, onOpen: handleSelectChannel, currentUser: currentUser, channel: channel, selectedChannelId: params === null || params === void 0 ? void 0 : params.channelId })) })))));
-}
+    return (react_1.default.createElement(native_base_1.Box, { p: 2 },
+        react_1.default.createElement(native_base_1.FlatList, { data: (userDirectChannel === null || userDirectChannel === void 0 ? void 0 : userDirectChannel.length) > 0 ? userDirectChannel : [], onRefresh: getChannelsRefetch, refreshing: userChannelsLoading, contentContainerStyle: { minHeight: '100%' }, ItemSeparatorComponent: () => react_1.default.createElement(native_base_1.Box, { height: "0.5", backgroundColor: "gray.200" }), renderItem: ({ item: channel }) => (react_1.default.createElement(DialogsListItem_1.DialogsListItem, { onOpen: handleSelectChannel, currentUser: auth, channel: channel, selectedChannelId: params === null || params === void 0 ? void 0 : params.channelId })), ListEmptyComponent: () => (react_1.default.createElement(native_base_1.Box, { p: 5 },
+                react_1.default.createElement(native_base_1.Heading, null, "Chat"),
+                react_1.default.createElement(native_base_1.Input, { height: 50, mt: 3, placeholder: "Search", borderRadius: 50, borderColor: 'gray.200', borderWidth: 2 }),
+                react_1.default.createElement(native_base_1.Center, { mt: 6 },
+                    react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: "chatbubbles", size: 'xl' }),
+                    react_1.default.createElement(native_base_1.Text, null, "You don't have any messages yet!")))), keyExtractor: (item, index) => 'key' + index })));
+};
 exports.Dialogs = Dialogs;
 
 
@@ -1002,6 +1355,16 @@ module.exports = require("react");
 
 /***/ }),
 
+/***/ "react-native":
+/*!*******************************!*\
+  !*** external "react-native" ***!
+  \*******************************/
+/***/ ((module) => {
+
+module.exports = require("react-native");
+
+/***/ }),
+
 /***/ "react-native-gifted-chat":
 /*!*******************************************!*\
   !*** external "react-native-gifted-chat" ***!