@messenger-box/platform-mobile 0.0.1-alpha.338 → 0.0.1-alpha.341

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.341](https://github.com/CDEBase/messenger-box/compare/v0.0.1-alpha.340...v0.0.1-alpha.341) (2023-05-08)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
+## [0.0.1-alpha.340](https://github.com/CDEBase/messenger-box/compare/v0.0.1-alpha.339...v0.0.1-alpha.340) (2023-05-07)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
 ## [0.0.1-alpha.338](https://github.com/CDEBase/messenger-box/compare/v0.0.1-alpha.337...v0.0.1-alpha.338) (2023-04-19)
 
 **Note:** Version bump only for package @messenger-box/platform-mobile

package/lib/index.js

@@ -233,6 +233,164 @@ const Inbox = (props) => {
 exports.Inbox = Inbox;
 
 
+/***/ }),
+
+/***/ "./src/screens/inbox/components/CachedImage/consts.ts":
+/*!************************************************************!*\
+  !*** ./src/screens/inbox/components/CachedImage/consts.ts ***!
+  \************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.IMAGE_CACHE_FOLDER = void 0;
+const FileSystem = __importStar(__webpack_require__(/*! expo-file-system */ "expo-file-system"));
+exports.IMAGE_CACHE_FOLDER = `${FileSystem.cacheDirectory}`;
+// export const IMAGE_CACHE_FOLDER = `${FileSystem.documentDirectory}images/`
+exports["default"] = exports.IMAGE_CACHE_FOLDER;
+
+
+/***/ }),
+
+/***/ "./src/screens/inbox/components/CachedImage/index.tsx":
+/*!************************************************************!*\
+  !*** ./src/screens/inbox/components/CachedImage/index.tsx ***!
+  \************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.CacheManager = void 0;
+const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
+// import { Image } from "react-native"
+const FileSystem = __importStar(__webpack_require__(/*! expo-file-system */ "expo-file-system"));
+const CONST = __importStar(__webpack_require__(/*! ./consts */ "./src/screens/inbox/components/CachedImage/consts.ts"));
+const CachedImage = (props) => {
+    const { source, cacheKey, placeholderContent } = props;
+    const { uri, headers, expiresIn } = source;
+    const fileURI = `${CONST.IMAGE_CACHE_FOLDER}${cacheKey}`;
+    const [imgUri, setImgUri] = (0, react_1.useState)(fileURI);
+    const componentIsMounted = (0, react_1.useRef)(true);
+    const requestOption = headers ? { headers } : {};
+    const _callback = (downloadProgress) => {
+        if (componentIsMounted.current === false) {
+            downloadResumableRef.current.pauseAsync();
+            FileSystem.deleteAsync(fileURI, { idempotent: true }); // delete file locally if it was not downloaded properly
+        }
+    };
+    const downloadResumableRef = (0, react_1.useRef)(FileSystem.createDownloadResumable(uri, fileURI, requestOption, _callback));
+    (0, react_1.useEffect)(() => {
+        loadImage();
+        return () => {
+            componentIsMounted.current = false;
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const loadImage = async () => {
+        try {
+            // Use the cached image if it exists
+            const metadata = await FileSystem.getInfoAsync(fileURI);
+            const expired = expiresIn && new Date().getTime() / 1000 - (metadata === null || metadata === void 0 ? void 0 : metadata.modificationTime) > expiresIn;
+            // console.log({expiresIn, expired})
+            // console.log({modificationTime: metadata.modificationTime, currentTime: new Date().getTime() / 1000})
+            // console.log({metadata})
+            if (!metadata.exists || (metadata === null || metadata === void 0 ? void 0 : metadata.size) === 0 || expired) {
+                if (componentIsMounted.current) {
+                    setImgUri(null);
+                    if (expired) {
+                        await FileSystem.deleteAsync(fileURI, { idempotent: true });
+                    }
+                    // download to cache
+                    setImgUri(null);
+                    const response = await downloadResumableRef.current.downloadAsync();
+                    if (componentIsMounted.current && response.status === 200) {
+                        setImgUri(`${fileURI}?`); // deep clone to force re-render
+                    }
+                    if (response.status !== 200) {
+                        FileSystem.deleteAsync(fileURI, { idempotent: true }); // delete file locally if it was not downloaded properly
+                    }
+                }
+            }
+        }
+        catch (err) {
+            // console.log({ err })
+        }
+    };
+    // console.log({placeholderContent})
+    if (!imgUri)
+        return placeholderContent || null;
+    return (react_1.default.createElement(native_base_1.Image
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , Object.assign({}, props, { source: Object.assign(Object.assign({}, source), { uri: imgUri }) })));
+};
+exports.CacheManager = {
+    addToCache: async ({ file, key }) => {
+        await FileSystem.copyAsync({
+            from: file,
+            to: `${CONST.IMAGE_CACHE_FOLDER}${key}`,
+        });
+        // const uri = await FileSystem.getContentUriAsync(`${CONST.IMAGE_CACHE_FOLDER}${key}`)
+        // return uri
+        const uri = await exports.CacheManager.getCachedUri({ key });
+        return uri;
+    },
+    getCachedUri: async ({ key }) => {
+        const uri = await FileSystem.getContentUriAsync(`${CONST.IMAGE_CACHE_FOLDER}${key}`);
+        return uri;
+    },
+    downloadAsync: async ({ uri, key, options }) => {
+        return await FileSystem.downloadAsync(uri, `${CONST.IMAGE_CACHE_FOLDER}${key}`, options);
+    },
+};
+exports["default"] = CachedImage;
+
+
 /***/ }),
 
 /***/ "./src/screens/inbox/components/DialogsListItem.tsx":
@@ -499,7 +657,10 @@ 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 CachedImage_1 = __importDefault(__webpack_require__(/*! ../CachedImage */ "./src/screens/inbox/components/CachedImage/index.tsx"));
 const { isSameUser, isSameDay } = react_native_gifted_chat_1.utils;
+const windowWidth = react_native_1.Dimensions.get('window').width;
+const windowHeight = react_native_1.Dimensions.get('window').height;
 class Bubble extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -527,9 +688,17 @@ class Bubble extends react_1.default.Component {
             if (this.props.renderMessageImage) {
                 return this.props.renderMessageImage(messageImageProps);
             }
+            const { image, _id } = messageImageProps === null || messageImageProps === void 0 ? void 0 : messageImageProps.currentMessage;
             return (react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: () => this.props.setImageViewer(messageImageProps === null || messageImageProps === void 0 ? void 0 : messageImageProps.currentMessage, true) },
-                react_1.default.createElement(react_native_1.Text, null,
-                    react_1.default.createElement(react_native_gifted_chat_1.MessageImage, Object.assign({}, messageImageProps, { imageStyle: [styles.slackImage, messageImageProps.imageStyle] })))));
+                react_1.default.createElement(react_native_1.View, { style: {
+                        width: windowWidth - (windowWidth - 150),
+                        height: windowHeight - (windowHeight - 100),
+                    } },
+                    react_1.default.createElement(CachedImage_1.default, { style: [styles.slackImage, { width: '100%', height: '100%' }], cacheKey: `${_id}-slack-bubble-imageKey`, source: {
+                            uri: image,
+                            //headers: `Authorization: Bearer ${token}`,
+                            expiresIn: 86400,
+                        }, resizeMode: 'cover', alt: 'image' }))));
         }
         return null;
     }
@@ -875,6 +1044,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ConversationView = void 0;
 const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
@@ -891,6 +1063,7 @@ const platform_client_1 = __webpack_require__(/*! @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 CachedImage_1 = __importDefault(__webpack_require__(/*! ../components/CachedImage */ "./src/screens/inbox/components/CachedImage/index.tsx"));
 const { MESSAGES_PER_PAGE, CALL_TO_ACTION_BOX_BGCOLOR, CALL_TO_ACTION_PATH, CALL_TO_ACTION_BUTTON_BORDERCOLOR, CALL_TO_ACTION_TEXT_COLOR, } = config_1.config;
 const ConversationViewComponent = ({ channelId }) => {
     var _a;
@@ -957,13 +1130,13 @@ const ConversationViewComponent = ({ channelId }) => {
         };
     }, []));
     react_1.default.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if ((_b = (_a = channelsDetail === null || channelsDetail === void 0 ? void 0 : channelsDetail.viewChannelDetail) === null || _a === void 0 ? void 0 : _a.members) === null || _b === void 0 ? void 0 : _b.length) {
             const channelData = (_e = (_d = (_c = channelsDetail === null || channelsDetail === void 0 ? void 0 : channelsDetail.viewChannelDetail) === null || _c === void 0 ? void 0 : _c.members) === null || _d === void 0 ? void 0 : _d.filter((mu) => { var _a; return ((_a = mu === null || mu === void 0 ? void 0 : mu.user) === null || _a === void 0 ? void 0 : _a.id) != (auth === null || auth === void 0 ? void 0 : auth.id); })) !== null && _e !== void 0 ? _e : [];
-            const tokens = (_h = (_g = (_f = channelData === null || channelData === void 0 ? void 0 : channelData.map((u) => {
+            const tokens = (_j = (_h = (_g = (_f = channelData === null || channelData === void 0 ? void 0 : channelData.map((u) => {
                 var _a, _b, _c, _d;
                 return (_d = (_c = (_b = (_a = u === null || u === void 0 ? void 0 : u.user) === null || _a === void 0 ? void 0 : _a.tokens) === null || _b === void 0 ? void 0 : _b.filter((t) => (t === null || t === void 0 ? void 0 : t.type) == 'EXPO_NOTIFICATION_TOKEN')) === null || _c === void 0 ? void 0 : _c.map((et) => et === null || et === void 0 ? void 0 : et.token)) !== null && _d !== void 0 ? _d : [];
-            })) === null || _f === void 0 ? void 0 : _f.flat(1)) === null || _g === void 0 ? void 0 : _g.filter((t) => t)) !== null && _h !== void 0 ? _h : [];
+            })) === null || _f === void 0 ? void 0 : _f.flat(1)) === null || _g === void 0 ? void 0 : _g.filter((t) => t)) === null || _h === void 0 ? void 0 : _h.filter((value, index, array) => array.indexOf(value) === index)) !== null && _j !== void 0 ? _j : [];
             if ((tokens === null || tokens === void 0 ? void 0 : tokens.length) > 0)
                 setExpoTokens(tokens);
         }
@@ -1106,22 +1279,45 @@ const ConversationViewComponent = ({ channelId }) => {
         if (imageSource.cancelled)
             setLoading(false);
     };
-    const sendPushNotification = (title, body, data, to) => {
-        fetch('https://exp.host/--/api/v2/push/send/', {
-            method: 'POST',
-            headers: {
-                Accept: 'application/json',
-                'Accept-Encoding': 'gzip, deflate',
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                to: to,
-                data: data,
-                title: title,
-                body: body,
-                sound: react_native_1.Platform.OS === 'android' ? null : 'default',
-            }),
-        });
+    const sendPushNotification = async (title, body, data, to) => {
+        try {
+            const response = await fetch("https://exp.host/--/api/v2/push/send/", {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Accept-Encoding': 'gzip, deflate',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    to: to,
+                    data: data,
+                    title: title,
+                    body: body,
+                    sound: react_native_1.Platform.OS === 'android' ? null : 'default',
+                }),
+            });
+            const result = await response.json();
+            alert(JSON.stringify(result));
+        }
+        catch (error) {
+            console.error("Error:", error);
+            alert(JSON.stringify(error));
+        }
+        // fetch('https://exp.host/--/api/v2/push/send/', {
+        //     method: 'POST',
+        //     headers: {
+        //         Accept: 'application/json',
+        //         'Accept-Encoding': 'gzip, deflate',
+        //         'Content-Type': 'application/json',
+        //     },
+        //     body: JSON.stringify({
+        //         to: to,
+        //         data: data,
+        //         title: title,
+        //         body: body,
+        //         sound: Platform.OS === 'android' ? null : 'default',
+        //     }),
+        // });
     };
     // const handleSend = useCallback(
     //     async (message: string) => {
@@ -1236,6 +1432,7 @@ const ConversationViewComponent = ({ channelId }) => {
                     screen: 'DialogMessages',
                 };
                 console.log('expo to', JSON.stringify(expoTokens));
+                alert(JSON.stringify(expoTokens));
                 if ((expoTokens === null || expoTokens === void 0 ? void 0 : expoTokens.length) > 0) {
                     const to = (expoTokens === null || expoTokens === void 0 ? void 0 : expoTokens.length) > 0 ? expoTokens : [];
                     sendPushNotification(title, body, notificationData, to);
@@ -1362,8 +1559,14 @@ const ConversationViewComponent = ({ channelId }) => {
     const modalContent = react_1.default.useMemo(() => {
         if (!imageObject)
             return react_1.default.createElement(react_1.default.Fragment, null);
-        const { image } = imageObject;
-        return react_1.default.createElement(native_base_1.Image, { resizeMode: 'cover', alt: 'image', source: { uri: image }, size: 'full' });
+        const { image, _id } = imageObject;
+        return (react_1.default.createElement(CachedImage_1.default, { style: { width: '100%', height: '100%' }, resizeMode: 'cover', 
+            // cacheKey={`${_id}-conversation-modal-image-key`}
+            cacheKey: `${_id}-slack-bubble-imageKey`, source: {
+                uri: image,
+                //headers: `Authorization: Bearer ${token}`,
+                expiresIn: 86400,
+            }, alt: 'image' }));
     }, [imageObject]);
     const renderMessage = (props) => {
         // const {
@@ -1451,7 +1654,6 @@ const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-nav
 const DialogsListItem_1 = __webpack_require__(/*! ../components/DialogsListItem */ "./src/screens/inbox/components/DialogsListItem.tsx");
 const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@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");
 const DialogsComponent = (props) => {
     const { channelFilters, channelRole } = props;
@@ -1460,48 +1662,66 @@ const DialogsComponent = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const navigation = (0, native_1.useNavigation)();
     const isFocused = (0, native_1.useIsFocused)();
-    const [userDirectChannel, setUserDirectChannel] = (0, react_1.useState)([]);
+    const [refreshing, setRefresh] = (0, react_1.useState)(false);
+    // const [userDirectChannel, setUserDirectChannel] = useState<any>([]);
     const { data: userChannels, loading: userChannelsLoading, refetch: getChannelsRefetch, } = (0, platform_client_1.useGetChannelsByUserQuery)({
         variables: {
             role: channelRole,
             criteria: channelFilters,
         },
+        onCompleted: (data) => {
+            setRefresh(false);
+        }
     });
     (0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
         // Do something when the screen is focused
+        setRefresh(false);
         getChannelsRefetch({ role: channelRole, criteria: channelFilters });
         return () => {
             // Do something when the screen is unfocused
             // Useful for cleanup functions
         };
     }, [channelFilters]));
-    (0, react_1.useEffect)(() => {
-        setTimeout(() => {
-            dispatch({
-                type: client_1.CHANGE_SETTINGS_ACTION,
-                payload: {
-                    footerRender: false,
-                },
-            });
-        }, 0);
-        return () => {
-            dispatch({
-                type: client_1.CHANGE_SETTINGS_ACTION,
-                payload: {
-                    footerRender: true,
-                },
-            });
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
+    const channels = react_1.default.useMemo(() => {
         var _a, _b, _c;
-        if (userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) {
-            //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);
-        }
-    }, [userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser]);
+        if (!((_a = userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        let uChannels = (_c = (_b = userChannels === null || userChannels === void 0 ? void 0 : userChannels.channelsByUser) === 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 : [];
+        return uChannels || [];
+    }, [userChannels]);
+    // useEffect(() => {
+    //     setTimeout(() => {
+    //         dispatch({
+    //             type: CHANGE_SETTINGS_ACTION,
+    //             payload: {
+    //                 footerRender: false,
+    //             },
+    //         } as any);
+    //     }, 0);
+    //     return () => {
+    //         dispatch({
+    //             type: CHANGE_SETTINGS_ACTION,
+    //             payload: {
+    //                 footerRender: true,
+    //             },
+    //         } as any);
+    //     };
+    // }, []);
+    // useEffect(() => {
+    //     if (userChannels?.channelsByUser) {
+    //         if (userChannels?.channelsByUser?.length == 0) {
+    //             setUserDirectChannel([]);
+    //         }
+    //         //Direct channel
+    //         let userDirectChannels: any =
+    //             userChannels?.channelsByUser
+    //                 ?.filter((i: any) => i.type == 'DIRECT')
+    //                 ?.filter((c: any) =>
+    //                     c.members.some((u: any) => u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
+    //                 ) ?? [];
+    //         if (userDirectChannels?.length > 0) setUserDirectChannel(userDirectChannels);
+    //     }
+    // }, [userChannels?.channelsByUser]);
     const handleSelectChannel = (0, react_1.useCallback)((id, title) => {
         var _a;
         if (params === null || params === void 0 ? void 0 : params.channelId) {
@@ -1519,13 +1739,17 @@ const DialogsComponent = (props) => {
             });
         }
     }, []);
+    const handleRefresh = (0, react_1.useCallback)(() => {
+        //if(userChannels?.channelsByUser?.length != channels?.length)setRefresh(true);
+        getChannelsRefetch({ role: channelRole, criteria: channelFilters });
+    }, []);
     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.FlatList, { data: channels && (channels === null || channels === void 0 ? void 0 : channels.length) > 0 ? channels : [], onRefresh: handleRefresh, 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(react_1.default.Fragment, null, userChannelsLoading ? (react_1.default.createElement(native_base_1.Spinner, null)) : (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 })));
+                    react_1.default.createElement(native_base_1.Text, null, "You don't have any messages yet!")))))), keyExtractor: (item, index) => 'key' + index })));
 };
 exports.Dialogs = react_1.default.memo(DialogsComponent);
 
@@ -1558,16 +1782,6 @@ __exportStar(__webpack_require__(/*! ./inbox/Inbox */ "./src/screens/inbox/Inbox
 __exportStar(__webpack_require__(/*! ./inbox/DialogMessages */ "./src/screens/inbox/DialogMessages.tsx"), exports);
 
 
-/***/ }),
-
-/***/ "@admin-layout/client":
-/*!***************************************!*\
-  !*** external "@admin-layout/client" ***!
-  \***************************************/
-/***/ ((module) => {
-
-module.exports = require("@admin-layout/client");
-
 /***/ }),
 
 /***/ "@adminide-stack/user-auth0-client":
@@ -1650,6 +1864,16 @@ module.exports = require("envalid");
 
 /***/ }),
 
+/***/ "expo-file-system":
+/*!***********************************!*\
+  !*** external "expo-file-system" ***!
+  \***********************************/
+/***/ ((module) => {
+
+module.exports = require("expo-file-system");
+
+/***/ }),
+
 /***/ "expo-image-picker":
 /*!************************************!*\
   !*** external "expo-image-picker" ***!