@messenger-box/slack-ui-mobile 10.0.3-alpha.7 → 10.0.3-alpha.74

package/lib/screens/Home/Components/Channels/Channels.js

@@ -1,34 +1,30 @@
-import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import React__default,{useState}from'react';import {TouchableOpacity}from'react-native';import {NavigationRoutes}from'../../../../constants/routes.js';import {View,HStack,Text,FlatList,Button,ButtonText,VStack,Icon,AddIcon,Actionsheet,ActionsheetBackdrop,ActionsheetContent,ActionsheetItem,ActionsheetItemText,Spinner,Box}from'@admin-layout/gluestack-ui-mobile';import {userSelector}from'@adminide-stack/user-auth0-client';import {useSelector}from'react-redux';import styles from'../../styles.js';import {take,orderBy,uniqBy}from'lodash-es';import {RoomType}from'common';import {MaterialIcons,Octicons}from'@expo/vector-icons';import'expo-font';import'expo-splash-screen';import {useDrawerLayout}from'../../../../hooks/useDrawerLayout.js';import'../../../../hooks/useExpoNotificationProvider.js';import {useDisclose}from'../../../../hooks/useDisclose.js';const Channels = ({
-  channels,
-  loading,
-  reFetchChannels,
-  fetchMoreChannels,
-  showMore
-}) => {
-  const {
-    isOpen,
-    onOpen,
-    onClose
-  } = useDisclose();
+import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import React__default,{useState,useContext,useMemo,useCallback}from'react';import {TouchableOpacity}from'react-native';import'../../../../constants/device.js';import'../../../../constants/globalStyles.js';import'../../../../constants/Layout.js';import {NavigationRoutes}from'../../../../constants/routes.js';import {HStack,Text,Box,VStack,FlatList}from'@admin-layout/gluestack-ui-mobile';import {userSelector}from'@adminide-stack/user-auth0-client';import {useSelector,shallowEqual}from'react-redux';import {Feather,MaterialIcons,FontAwesome}from'@expo/vector-icons';import'expo-font';import'expo-splash-screen';import {useDrawerLayout}from'../../../../hooks/useDrawerLayout.js';import'../../../../hooks/useExpoNotificationProvider.js';import'../../../../hooks/useOptimizedChannelsQueries.js';import colors from'tailwindcss/colors';import {RefetchContext,ChannelsDataContext}from'../../HomeScreen.js';const Channels = () => {
   const navigation = useNavigation();
   const [expandable, setExpendable] = useState(true);
-  useSelector(userSelector);
+  useSelector(userSelector, shallowEqual);
   const {
     orgName
   } = useDrawerLayout();
   useIsFocused();
-  useFocusEffect(React__default.useCallback(() => {
-    reFetchChannels();
-    return () => {
-    };
-  }, []));
-  const organizationChannels = React__default.useMemo(() => {
-    var _a;
-    return channels && (channels == null ? void 0 : channels.length) && take(orderBy(uniqBy((_a = [...channels]) == null ? void 0 : _a.filter((i) => i.type !== RoomType.Direct), ({
-      id
-    }) => id), [(ch) => ch == null ? void 0 : ch.title.toLowerCase()], ["asc"]), 20) || [];
-  }, [channels]);
-  const openInbox = React__default.useCallback((id, title, totalMembers, type) => {
+  const {
+    shouldRefetch
+  } = useContext(RefetchContext);
+  const {
+    getChannelsForHome,
+    loading,
+    error,
+    refetchChannels,
+    hasChannels
+  } = useContext(ChannelsDataContext);
+  const organizationChannels = useMemo(() => {
+    return getChannelsForHome(10);
+  }, [getChannelsForHome]);
+  useFocusEffect(useCallback(() => {
+    if (shouldRefetch && orgName) {
+      refetchChannels();
+    }
+  }, [shouldRefetch, orgName, refetchChannels]));
+  const openInbox = useCallback((id, title, totalMembers, type) => {
     navigation.navigate(NavigationRoutes.DialogMessages, {
       channelId: id == null ? void 0 : id.toString(),
       title: title == null ? void 0 : title.toString(),
@@ -37,59 +33,77 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
       orgName,
       hideTabBar: true
     });
-  }, [orgName]);
-  const renderUserChannelItem = ({
+  }, [orgName, navigation]);
+  const renderChannelItem = useCallback(({
     item
-  }) => {
-    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { key: item.id, onPress: () => {
-      var _a;
-      return openInbox(item == null ? void 0 : item.id, item == null ? void 0 : item.title, (_a = item == null ? void 0 : item.members) == null ? void 0 : _a.length, item == null ? void 0 : item.type);
-    } }, /* @__PURE__ */ React__default.createElement(VStack, { py: "$1" }, /* @__PURE__ */ React__default.createElement(HStack, { flex: 1, alignItems: "center", space: "sm" }, /* @__PURE__ */ React__default.createElement(Box, null, item.type == RoomType.Channel ? /* @__PURE__ */ React__default.createElement(Octicons, { color: "black", name: "hash", size: 16 }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Octicons, { color: "black", name: "lock", size: 16 }))), /* @__PURE__ */ React__default.createElement(Text, { style: {
-      fontSize: 14,
-      fontWeight: "400"
-    }, color: "$coolGray800" }, item.title))));
-  };
-  React__default.useCallback(() => {
-    fetchMoreChannels(organizationChannels == null ? void 0 : organizationChannels.length);
-  }, [organizationChannels]);
-  return /* @__PURE__ */ React__default.createElement(View, { style: styles.channelContainer }, /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: styles.headingContainer, onPress: () => setExpendable(!expandable) }, /* @__PURE__ */ React__default.createElement(HStack, { flex: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React__default.createElement(Text, { style: {
-    fontSize: 15,
-    fontWeight: "600",
-    color: "black"
-  } }, "Channels"), expandable ? /* @__PURE__ */ React__default.createElement(MaterialIcons, { color: "black", name: "keyboard-arrow-up", size: 20 }) : /* @__PURE__ */ React__default.createElement(MaterialIcons, { color: "black", name: "keyboard-arrow-down", size: 20 }))), expandable && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(FlatList, { py: "$2", data: organizationChannels && organizationChannels.length > 0 ? organizationChannels : [], renderItem: renderUserChannelItem, key: "channels-list", keyExtractor: (item, index) => String(index), contentContainerStyle: {
-    flex: 1
-  }, ListEmptyComponent: () => {
-    return /* @__PURE__ */ React__default.createElement(View, { py: "$1" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }) : /* @__PURE__ */ React__default.createElement(Text, { color: "$coolGray600" }, "No Channels found"));
-  }, ListFooterComponent: () => {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (channels == null ? void 0 : channels.length) > 20 && /* @__PURE__ */ React__default.createElement(HStack, { flex: 1, alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Button, { bg: "transparent", variant: "solid", pl: "$0", onPress: () => navigation.navigate(NavigationRoutes.Channels, {
-      orgName
-    }), "$pressed-bg": "transparent", "$active-bg": "transparent" }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { color: "black", name: "search", size: 20 }), /* @__PURE__ */ React__default.createElement(ButtonText, { color: "$black" }, "Browse all channels"))), /* @__PURE__ */ React__default.createElement(
-      TouchableOpacity,
-      {
-        onPress: onOpen
-      },
-      /* @__PURE__ */ React__default.createElement(VStack, { py: "$1", ml: "-$0.5" }, /* @__PURE__ */ React__default.createElement(HStack, { flex: 1, alignItems: "center", justifyContent: "flex-start", space: "sm" }, /* @__PURE__ */ React__default.createElement(Icon, { as: AddIcon, color: "$coolGray600" }), /* @__PURE__ */ React__default.createElement(Text, { style: {
-        fontSize: 14,
-        fontWeight: "400",
-        color: "black"
-      } }, "Add Channel")))
-    ), /* @__PURE__ */ React__default.createElement(Actionsheet, { isOpen, onClose }, /* @__PURE__ */ React__default.createElement(ActionsheetBackdrop, null), /* @__PURE__ */ React__default.createElement(ActionsheetContent, { bg: "transparent" }, /* @__PURE__ */ React__default.createElement(VStack, { w: "$full", p: 20, px: "$1" }, /* @__PURE__ */ React__default.createElement(ActionsheetItem, { onPress: () => navigation.navigate(NavigationRoutes.AddChannel, {
+  }) => /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => {
+    var _a;
+    return openInbox(item == null ? void 0 : item.id, item == null ? void 0 : item.title, (_a = item == null ? void 0 : item.members) == null ? void 0 : _a.length, item == null ? void 0 : item.type);
+  }, style: {
+    paddingVertical: 2,
+    paddingHorizontal: 12
+  } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "items-center" }, /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-600 flex-none" }, "#"), /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-900 flex-1 text-base" }, item.title))), [openInbox]);
+  const ListEmptyComponent = useCallback(() => {
+    const errorMessage = error ? error.message.includes("Service 'ChannelService.getAll' is not found") ? "Channel service is temporarily unavailable. Please try again later." : error.message : null;
+    return /* @__PURE__ */ React__default.createElement(Box, { style: {
+      padding: 12
+    } }, errorMessage ? /* @__PURE__ */ React__default.createElement(Box, { style: {
+      padding: 8,
+      backgroundColor: "#FFF4F4",
+      borderRadius: 4
+    } }, /* @__PURE__ */ React__default.createElement(Text, { color: "#E01E5A", style: {
+      marginBottom: 8,
+      fontWeight: "500"
+    } }, errorMessage), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: refetchChannels }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", style: {
+      alignItems: "center"
+    } }, /* @__PURE__ */ React__default.createElement(Feather, { name: "refresh-cw", color: "#1264A3", size: 16 }), /* @__PURE__ */ React__default.createElement(Text, { color: "#1264A3", style: {
+      fontWeight: "500"
+    } }, "Retry")))) : /* @__PURE__ */ React__default.createElement(Box, { style: {
+      alignItems: "center",
+      paddingVertical: 16
+    } }, /* @__PURE__ */ React__default.createElement(Box, { style: {
+      padding: 12,
+      marginBottom: 8,
+      borderRadius: 24,
+      backgroundColor: "#F8F8F8"
+    } }, /* @__PURE__ */ React__default.createElement(Feather, { name: "hash", color: "#616061", size: 20 })), /* @__PURE__ */ React__default.createElement(Text, { style: {
+      color: "#616061",
+      textAlign: "center"
+    } }, "No channels available")));
+  }, [error, refetchChannels]);
+  const ListFooterComponent = useCallback(() => {
+    const showMoreChannels = hasChannels && organizationChannels.length >= 10;
+    return /* @__PURE__ */ React__default.createElement(VStack, null, showMoreChannels && /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => navigation.navigate(NavigationRoutes.Channels, {
       orgName
-    }), bg: "$white", "$pressed-bg": "$coolGray100", "$active-bg": "$coolGray100", borderWidth: "$1", borderColor: "$coolGray200", borderRadius: "$lg", borderBottomLeftRadius: "$0", borderBottomRightRadius: "$0", alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(ActionsheetItemText, { style: {
-      fontWeight: "500",
-      fontSize: 15,
-      color: "#3b82f6"
-    } }, "Create Channel")), /* @__PURE__ */ React__default.createElement(ActionsheetItem, { onPress: () => navigation.navigate(NavigationRoutes.Channels, {
+    }), style: {
+      paddingVertical: 8,
+      paddingHorizontal: 12
+    } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "items-center" }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { color: "#616061", name: "search", size: 18 }), /* @__PURE__ */ React__default.createElement(Text, { style: {
+      fontSize: 16,
+      color: "#616061"
+    } }, "Browse all Channels"))), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => navigation.navigate(NavigationRoutes.AddChannel, {
       orgName
-    }), bg: "$white", "$pressed-bg": "$coolGray100", "$active-bg": "$coolGray100", borderWidth: "$1", borderColor: "$coolGray200", borderRadius: "$lg", borderTopLeftRadius: "$0", borderTopRightRadius: "$0", alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(ActionsheetItemText, { style: {
-      fontWeight: "500",
-      fontSize: 15,
-      color: "#3b82f6"
-    } }, "Browse Channels")), /* @__PURE__ */ React__default.createElement(ActionsheetItem, { onPress: () => onClose(), bg: "$white", "$pressed-bg": "$coolGray100", "$active-bg": "$coolGray100", borderWidth: "$1", borderColor: "$coolGray200", borderRadius: "$lg", alignItems: "center", justifyContent: "center", mt: "$1" }, /* @__PURE__ */ React__default.createElement(ActionsheetItemText, { style: {
-      fontWeight: "500",
+    }), style: {
+      paddingVertical: 5,
+      paddingHorizontal: 12
+    } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "items-center" }, /* @__PURE__ */ React__default.createElement(Feather, { color: "#616061", name: "plus", size: 18 }), /* @__PURE__ */ React__default.createElement(Text, { style: {
+      fontSize: 16,
+      color: "#616061"
+    } }, "Add Channels"))));
+  }, [hasChannels, organizationChannels.length, orgName, navigation]);
+  const SectionHeader = useCallback(() => {
+    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => setExpendable(!expandable), style: {
+      paddingVertical: 6,
+      paddingHorizontal: 16
+    } }, /* @__PURE__ */ React__default.createElement(HStack, { className: "justify-between items-center" }, /* @__PURE__ */ React__default.createElement(Text, { className: "font-semibold", style: {
       fontSize: 15,
-      color: "#2563eb"
-    } }, "Cancel"))))));
-  } })));
-};
-var Channels$1 = React__default.memo(Channels);export{Channels$1 as default};//# sourceMappingURL=Channels.js.map
+      color: "#1D1C1D"
+    } }, "Channels"), /* @__PURE__ */ React__default.createElement(FontAwesome, { name: expandable ? "chevron-down" : "chevron-left", color: colors.gray[800], size: 12 })));
+  }, [expandable]);
+  if (!expandable) {
+    return /* @__PURE__ */ React__default.createElement(SectionHeader, null);
+  }
+  return /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(SectionHeader, null), (organizationChannels == null ? void 0 : organizationChannels.length) > 0 ? /* @__PURE__ */ React__default.createElement(FlatList, { keyExtractor: (item) => ((item == null ? void 0 : item.id) || "channel") + "-" + (item == null ? void 0 : item.title), data: organizationChannels, renderItem: renderChannelItem, ListFooterComponent, style: {
+    marginTop: 6
+  }, scrollEnabled: false }) : /* @__PURE__ */ React__default.createElement(ListEmptyComponent, null));
+};export{Channels as default};//# sourceMappingURL=Channels.js.map

package/lib/screens/Home/Components/Channels/Channels.js.map

@@ -1 +1 @@
-{"version":3,"file":"Channels.js","sources":["../../../../../src/screens/Home/Components/Channels/Channels.tsx"],"sourcesContent":["import { useIsFocused, useFocusEffect } from '@react-navigation/native';\nimport React, { useState, useEffect, useLayoutEffect } from 'react';\nimport { TouchableOpacity, Share } from 'react-native';\nimport { NavigationRoutes } from '../../../../constants/routes';\nimport more from '../../../../assets/images/more.png';\nimport right from '../../../../assets/images/right.png';\nimport {} from '../../../../constants/preloadImages';\nimport {\n    Pressable,\n    View,\n    Image,\n    FlatList,\n    Icon,\n    AddIcon,\n    Box,\n    Text,\n    Avatar,\n    Spinner,\n    VStack,\n    HStack,\n    Button,\n    ButtonText,\n    Actionsheet,\n    ActionsheetBackdrop,\n    ActionsheetContent,\n    ActionsheetDragIndicatorWrapper,\n    ActionsheetDragIndicator,\n    ActionsheetItem,\n    ActionsheetItemText,\n    ActionsheetIcon,\n} from '@admin-layout/gluestack-ui-mobile';\nimport { userSelector, isUserAuthenticated } from '@adminide-stack/user-auth0-client';\nimport { useSelector } from 'react-redux';\nimport { useNavigation } from '@react-navigation/native';\nimport { navigationRef } from '@common-stack/client-react';\nimport styles from '../../styles';\nimport { startCase, orderBy, uniqBy, take } from 'lodash-es';\nimport { RoomType } from 'common';\nimport { useGetChannelsByUserQuery } from 'common/lib/generated/generated.js';\nimport { FontAwesome, Feather, Octicons, MaterialIcons } from '@expo/vector-icons';\nimport Colors from '../../../../constants/Colors';\nimport { useDrawerLayout, useDisclose } from '../../../../hooks';\n\nconst Channels = ({ channels, loading, reFetchChannels, fetchMoreChannels, showMore }) => {\n    const { isOpen, onOpen, onClose } = useDisclose();\n    const navigation = useNavigation<any>();\n    const [expandable, setExpendable] = useState(true);\n    const user: any = useSelector(userSelector);\n    const { orgName } = useDrawerLayout();\n    // const { authenticated } = isUserAuthenticated();\n    const isFocused = useIsFocused();\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            reFetchChannels();\n\n            return () => {\n                // Do something when the screen is unfocused\n                // Useful for cleanup functions\n            };\n        }, []),\n    );\n\n    const organizationChannels = React.useMemo(() => {\n        //Direct channel\n        return (\n            (channels &&\n                channels?.length &&\n                take(\n                    orderBy(\n                        uniqBy(\n                            [...channels]?.filter((i: any) => i.type !== RoomType.Direct),\n                            ({ id }) => id,\n                        ),\n                        [(ch: any) => ch?.title.toLowerCase()],\n                        ['asc'],\n                    ),\n                    20,\n                )) ||\n            []\n        );\n    }, [channels]);\n\n    const openInbox = React.useCallback(\n        (id: any, title: any, totalMembers: any, type?: any) => {\n            navigation.navigate(NavigationRoutes.DialogMessages, {\n                channelId: id?.toString(),\n                title: title?.toString(),\n                totalMembers: totalMembers,\n                channelType: type,\n                orgName: orgName,\n                hideTabBar: true,\n            });\n        },\n        [orgName],\n    );\n\n    const renderUserChannelItem = ({ item }: any) => {\n        return (\n            <TouchableOpacity\n                key={item.id}\n                onPress={() => openInbox(item?.id, item?.title, item?.members?.length, item?.type)}\n            >\n                <VStack py={'$1'}>\n                    <HStack flex={1} alignItems={'center'} space=\"sm\">\n                        <Box>\n                            {item.type == RoomType.Channel ? (\n                                <Octicons color=\"black\" name=\"hash\" size={16} />\n                            ) : (\n                                <>\n                                    <Octicons color=\"black\" name=\"lock\" size={16} />\n                                </>\n                            )}\n                        </Box>\n                        <Text style={{ fontSize: 14, fontWeight: '400' }} color={'$coolGray800'}>\n                            {item.title}\n                        </Text>\n                    </HStack>\n                </VStack>\n            </TouchableOpacity>\n        );\n    };\n\n    const loadMore = React.useCallback(() => {\n        fetchMoreChannels(organizationChannels?.length);\n    }, [organizationChannels]);\n\n    return (\n        <View style={styles.channelContainer}>\n            <TouchableOpacity style={styles.headingContainer} onPress={() => setExpendable(!expandable)}>\n                <HStack flex={1} alignItems={'center'} justifyContent={'space-between'}>\n                    <Text style={{ fontSize: 15, fontWeight: '600', color: 'black' }}>Channels</Text>\n                    {expandable ? (\n                        <MaterialIcons color={'black'} name={'keyboard-arrow-up'} size={20} />\n                    ) : (\n                        <MaterialIcons color={'black'} name={'keyboard-arrow-down'} size={20} />\n                    )}\n                    {/* <HStack alignItems={'center'}>\n                        <Button\n                            bg={'transparent'}\n                            onPress={() => navigation.navigate(NavigationRoutes.Channels, { orgName })}\n                        >\n                            <MaterialIcons color={'black'} name={'add'} size={20} />\n                        </Button>\n                        {expandable ? (\n                            <MaterialIcons color={'black'} name={'keyboard-arrow-up'} size={20} />\n                        ) : (\n                            <MaterialIcons color={'black'} name={'keyboard-arrow-down'} size={20} />\n                        )}\n                    </HStack> */}\n                </HStack>\n            </TouchableOpacity>\n            {/* <TouchableOpacity style={styles.headingContainer} onPress={() => setExpendable(!expandable)}>\n                <Text fontSize={15} fontWeight={600}>\n                    Channels\n                </Text>\n                <Image alt={'more icon right'} style={styles.iconStyle} source={expandable ? more : right} />\n            </TouchableOpacity> */}\n            {expandable && (\n                <>\n                    <FlatList\n                        py={'$2'}\n                        data={organizationChannels && organizationChannels.length > 0 ? organizationChannels : []}\n                        renderItem={renderUserChannelItem}\n                        key={'channels-list'}\n                        keyExtractor={(item, index) => String(index)}\n                        contentContainerStyle={{\n                            flex: 1,\n                        }}\n                        ListEmptyComponent={() => {\n                            return (\n                                <View py={'$1'}>\n                                    {loading ? (\n                                        <Spinner color={'$blue500'} />\n                                    ) : (\n                                        <Text color={'$coolGray600'}>No Channels found</Text>\n                                    )}\n                                </View>\n                            );\n                        }}\n                        ListFooterComponent={() => {\n                            return (\n                                <>\n                                    {channels?.length > 20 && (\n                                        <HStack flex={1} alignItems={'center'}>\n                                            <Button\n                                                bg={'transparent'}\n                                                variant={'solid'}\n                                                pl={'$0'}\n                                                onPress={() =>\n                                                    navigation.navigate(NavigationRoutes.Channels, { orgName })\n                                                }\n                                                $pressed-bg=\"transparent\"\n                                                $active-bg={'transparent'}\n                                            >\n                                                <MaterialIcons color={'black'} name={'search'} size={20} />\n                                                <ButtonText color={'$black'}>Browse all channels</ButtonText>\n                                            </Button>\n                                            {/* <Button\n                                                size={'sm'}\n                                                // w={135}\n                                                variant={'ghost'}\n                                                justifyContent={'flex-start'}\n                                                _text={{ color: 'black', fontSize: 16 }}\n                                                // onPress={() => loadMore()}\n                                            >\n                                                <HStack alignItems={'center'} space={1}>\n                                                    <Icon\n                                                        as={MaterialIcons}\n                                                        color={'black'}\n                                                        name={'search'}\n                                                        size={'lg'}\n                                                    />\n                                                    <Text color=\"black\" fontSize={16}>\n                                                        Browse All Channels\n                                                    </Text>\n                                                </HStack>\n                                            </Button> */}\n                                        </HStack>\n                                    )}\n\n                                    <TouchableOpacity\n                                        // onPress={() => navigation.navigate(NavigationRoutes.Channels, { orgName })}\n                                        onPress={onOpen}\n                                    >\n                                        <VStack py={'$1'} ml={'-$0.5'}>\n                                            <HStack\n                                                flex={1}\n                                                alignItems={'center'}\n                                                justifyContent={'flex-start'}\n                                                space={'sm'}\n                                            >\n                                                <Icon as={AddIcon} color={'$coolGray600'} />\n                                                <Text style={{ fontSize: 14, fontWeight: '400', color: 'black' }}>\n                                                    Add Channel\n                                                </Text>\n                                            </HStack>\n                                        </VStack>\n                                    </TouchableOpacity>\n\n                                    <Actionsheet isOpen={isOpen} onClose={onClose}>\n                                        <ActionsheetBackdrop />\n                                        <ActionsheetContent bg={'transparent'}>\n                                            <VStack w=\"$full\" p={20} px={'$1'}>\n                                                <ActionsheetItem\n                                                    onPress={() =>\n                                                        navigation.navigate(NavigationRoutes.AddChannel, { orgName })\n                                                    }\n                                                    bg={'$white'}\n                                                    $pressed-bg=\"$coolGray100\"\n                                                    $active-bg={'$coolGray100'}\n                                                    borderWidth={'$1'}\n                                                    borderColor=\"$coolGray200\"\n                                                    borderRadius={'$lg'}\n                                                    borderBottomLeftRadius={'$0'}\n                                                    borderBottomRightRadius={'$0'}\n                                                    alignItems=\"center\"\n                                                    justifyContent=\"center\"\n                                                >\n                                                    <ActionsheetItemText\n                                                        style={{ fontWeight: '500', fontSize: 15, color: '#3b82f6' }}\n                                                    >\n                                                        Create Channel\n                                                    </ActionsheetItemText>\n                                                </ActionsheetItem>\n\n                                                <ActionsheetItem\n                                                    onPress={() =>\n                                                        navigation.navigate(NavigationRoutes.Channels, { orgName })\n                                                    }\n                                                    bg={'$white'}\n                                                    $pressed-bg=\"$coolGray100\"\n                                                    $active-bg={'$coolGray100'}\n                                                    borderWidth={'$1'}\n                                                    borderColor=\"$coolGray200\"\n                                                    borderRadius={'$lg'}\n                                                    borderTopLeftRadius={'$0'}\n                                                    borderTopRightRadius={'$0'}\n                                                    alignItems=\"center\"\n                                                    justifyContent=\"center\"\n                                                >\n                                                    <ActionsheetItemText\n                                                        style={{ fontWeight: '500', fontSize: 15, color: '#3b82f6' }}\n                                                    >\n                                                        Browse Channels\n                                                    </ActionsheetItemText>\n                                                </ActionsheetItem>\n\n                                                <ActionsheetItem\n                                                    onPress={() => onClose()}\n                                                    bg={'$white'}\n                                                    $pressed-bg=\"$coolGray100\"\n                                                    $active-bg={'$coolGray100'}\n                                                    borderWidth={'$1'}\n                                                    borderColor=\"$coolGray200\"\n                                                    borderRadius={'$lg'}\n                                                    alignItems=\"center\"\n                                                    justifyContent=\"center\"\n                                                    mt={'$1'}\n                                                >\n                                                    <ActionsheetItemText\n                                                        style={{ fontWeight: '500', fontSize: 15, color: '#2563eb' }}\n                                                    >\n                                                        Cancel\n                                                    </ActionsheetItemText>\n                                                </ActionsheetItem>\n                                            </VStack>\n                                        </ActionsheetContent>\n                                    </Actionsheet>\n                                </>\n                            );\n                        }}\n                    />\n                </>\n            )}\n        </View>\n    );\n};\n\nexport default React.memo(Channels);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Channels.js","sources":["../../../../../src/screens/Home/Components/Channels/Channels.tsx"],"sourcesContent":["import { useIsFocused, useFocusEffect } from '@react-navigation/native';\nimport React, { useState, useCallback, useMemo, useContext } from 'react';\nimport { TouchableOpacity } from 'react-native';\nimport { NavigationRoutes } from '../../../../constants';\nimport { Pressable, View, FlatList, Box, Text, HStack, VStack, Icon } from '@admin-layout/gluestack-ui-mobile';\nimport { userSelector } from '@adminide-stack/user-auth0-client';\nimport { useSelector, shallowEqual } from 'react-redux';\nimport { useNavigation } from '@react-navigation/native';\nimport styles from '../../styles';\nimport { orderBy, uniqBy, take } from 'lodash-es';\nimport { RoomType } from 'common';\nimport { FontAwesome, Feather, MaterialIcons } from '@expo/vector-icons';\nimport { useDrawerLayout } from '../../../../hooks';\nimport colors from 'tailwindcss/colors';\nimport { RefetchContext, ChannelsDataContext } from '../../HomeScreen';\n\nconst Channels = () => {\n    const navigation = useNavigation<any>();\n    const [expandable, setExpendable] = useState(true);\n    const user: any = useSelector(userSelector, shallowEqual);\n    const { orgName } = useDrawerLayout();\n    const isFocused = useIsFocused();\n    const { shouldRefetch } = useContext(RefetchContext);\n\n    // Use shared channels data from context instead of making separate query\n    const { getChannelsForHome, loading, error, refetchChannels, hasChannels } = useContext(ChannelsDataContext);\n\n    // Get channels with home-specific limit (10 channels)\n    const organizationChannels = useMemo(() => {\n        return getChannelsForHome(10);\n    }, [getChannelsForHome]);\n\n    // Use RefetchContext to control when to refetch data\n    useFocusEffect(\n        useCallback(() => {\n            if (shouldRefetch && orgName) {\n                refetchChannels();\n            }\n        }, [shouldRefetch, orgName, refetchChannels]),\n    );\n\n    const openInbox = useCallback(\n        (id: any, title: any, totalMembers: any, type?: any) => {\n            navigation.navigate(NavigationRoutes.DialogMessages, {\n                channelId: id?.toString(),\n                title: title?.toString(),\n                totalMembers: totalMembers,\n                channelType: type,\n                orgName: orgName,\n                hideTabBar: true,\n            });\n        },\n        [orgName, navigation],\n    );\n\n    const renderChannelItem = useCallback(\n        ({ item }) => (\n            <TouchableOpacity\n                onPress={() => openInbox(item?.id, item?.title, item?.members?.length, item?.type)}\n                style={{ paddingVertical: 2, paddingHorizontal: 12 }}\n            >\n                <HStack space=\"md\" className=\"items-center\">\n                    <Text className=\"text-gray-600 flex-none\">#</Text>\n                    <Text className=\"text-gray-900 flex-1 text-base\">{item.title}</Text>\n                </HStack>\n            </TouchableOpacity>\n        ),\n        [openInbox],\n    );\n\n    const ListEmptyComponent = useCallback(() => {\n        // Get error message if any\n        const errorMessage = error\n            ? error.message.includes(\"Service 'ChannelService.getAll' is not found\")\n                ? 'Channel service is temporarily unavailable. Please try again later.'\n                : error.message\n            : null;\n\n        return (\n            <Box style={{ padding: 12 }}>\n                {errorMessage ? (\n                    <Box style={{ padding: 8, backgroundColor: '#FFF4F4', borderRadius: 4 }}>\n                        <Text color=\"#E01E5A\" style={{ marginBottom: 8, fontWeight: '500' }}>\n                            {errorMessage}\n                        </Text>\n                        <TouchableOpacity onPress={refetchChannels}>\n                            <HStack space=\"sm\" style={{ alignItems: 'center' }}>\n                                <Feather name=\"refresh-cw\" color=\"#1264A3\" size={16} />\n                                <Text color=\"#1264A3\" style={{ fontWeight: '500' }}>\n                                    Retry\n                                </Text>\n                            </HStack>\n                        </TouchableOpacity>\n                    </Box>\n                ) : (\n                    <Box style={{ alignItems: 'center', paddingVertical: 16 }}>\n                        <Box style={{ padding: 12, marginBottom: 8, borderRadius: 24, backgroundColor: '#F8F8F8' }}>\n                            <Feather name=\"hash\" color=\"#616061\" size={20} />\n                        </Box>\n                        <Text style={{ color: '#616061', textAlign: 'center' }}>No channels available</Text>\n                    </Box>\n                )}\n            </Box>\n        );\n    }, [error, refetchChannels]);\n\n    const ListFooterComponent = useCallback(() => {\n        // Use hasChannels and channel count from context for more accurate data\n        const showMoreChannels = hasChannels && organizationChannels.length >= 10;\n\n        return (\n            <VStack>\n                {showMoreChannels && (\n                    <TouchableOpacity\n                        onPress={() => navigation.navigate(NavigationRoutes.Channels, { orgName })}\n                        style={{ paddingVertical: 8, paddingHorizontal: 12 }}\n                    >\n                        <HStack space=\"md\" className=\"items-center\">\n                            <MaterialIcons color=\"#616061\" name=\"search\" size={18} />\n                            <Text style={{ fontSize: 16, color: '#616061' }}>Browse all Channels</Text>\n                        </HStack>\n                    </TouchableOpacity>\n                )}\n\n                <TouchableOpacity\n                    onPress={() => navigation.navigate(NavigationRoutes.AddChannel, { orgName })}\n                    style={{ paddingVertical: 5, paddingHorizontal: 12 }}\n                >\n                    <HStack space=\"md\" className=\"items-center\">\n                        <Feather color=\"#616061\" name=\"plus\" size={18} />\n                        <Text style={{ fontSize: 16, color: '#616061' }}>Add Channels</Text>\n                    </HStack>\n                </TouchableOpacity>\n            </VStack>\n        );\n    }, [hasChannels, organizationChannels.length, orgName, navigation]);\n\n    const SectionHeader = useCallback(() => {\n        return (\n            <TouchableOpacity\n                onPress={() => setExpendable(!expandable)}\n                style={{ paddingVertical: 6, paddingHorizontal: 16 }}\n            >\n                <HStack className=\"justify-between items-center\">\n                    <Text className=\"font-semibold\" style={{ fontSize: 15, color: '#1D1C1D' }}>\n                        Channels\n                    </Text>\n                    <FontAwesome\n                        name={expandable ? 'chevron-down' : 'chevron-left'}\n                        color={colors.gray[800]}\n                        size={12}\n                    />\n                </HStack>\n            </TouchableOpacity>\n        );\n    }, [expandable]);\n\n    if (!expandable) {\n        return <SectionHeader />;\n    }\n\n    return (\n        <Box>\n            <SectionHeader />\n            {organizationChannels?.length > 0 ? (\n                <FlatList\n                    keyExtractor={(item) => (item?.id || 'channel') + '-' + item?.title}\n                    data={organizationChannels}\n                    renderItem={renderChannelItem}\n                    ListFooterComponent={ListFooterComponent}\n                    style={{ marginTop: 6 }}\n                    scrollEnabled={false}\n                />\n            ) : (\n                <ListEmptyComponent />\n            )}\n        </Box>\n    );\n};\n\nexport default Channels;\n"],"names":["React"],"mappings":"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"}