@messenger-box/slack-ui-mobile 10.0.3-alpha.18 → 10.0.3-alpha.20

package/lib/components/Actionsheet.js

@@ -14,16 +14,18 @@ const ActionSheet = (props) => {
     onPress: (_a = props == null ? void 0 : props.onCancel) != null ? _a : () => {
     }
   }];
+  if (!isOpen)
+    return null;
   return /* @__PURE__ */ React__default.createElement(Modal, { visible: isOpen, transparent: true, animationType: "slide", onRequestClose: onCancel, style: {
     flex: 1,
     margin: 0,
     justifyContent: "flex-end"
   } }, /* @__PURE__ */ React__default.createElement(Center, { className: "flex-1 w-full h-min[40%]  shadow-lg  absolute bottom-0 bg-transparent ", style: {
     backgroundColor: "transparent"
-  } }, /* @__PURE__ */ React__default.createElement(View, { style: styles.modalContent }, actionSheetItems.map((actionItem, index) => {
+  } }, /* @__PURE__ */ React__default.createElement(View, { style: styles.modalContent }, props == null ? void 0 : props.header, actionSheetItems.map((actionItem, index) => {
     return /* @__PURE__ */ React__default.createElement(TouchableHighlight, { style: [styles.actionSheetView, index === 0 && {
-      borderTopLeftRadius: 12,
-      borderTopRightRadius: 12
+      borderTopLeftRadius: (props == null ? void 0 : props.header) ? 0 : 12,
+      borderTopRightRadius: (props == null ? void 0 : props.header) ? 0 : 12
     }, index === actionSheetItems.length - 2 && {
       borderBottomLeftRadius: 12,
       borderBottomRightRadius: 12
@@ -31,15 +33,15 @@ const ActionSheet = (props) => {
       borderBottomWidth: 0,
       backgroundColor: WHITE,
       marginTop: 8,
-      borderTopLeftRadius: 12,
-      borderTopRightRadius: 12,
+      borderTopLeftRadius: (props == null ? void 0 : props.header) ? 0 : 12,
+      borderTopRightRadius: (props == null ? void 0 : props.header) ? 0 : 12,
       borderBottomLeftRadius: 12,
       borderBottomRightRadius: 12
     }, (props == null ? void 0 : props.hideBottomWidth) && actionItem.id !== "#cancel" && {
       borderBottomWidth: 0,
       borderColor: "transparent",
-      paddingTop: 10,
-      paddingBottom: 10
+      paddingTop: 5,
+      paddingBottom: 5
     }], underlayColor: "#f7f7f7", key: index, onPress: actionItem.onPress }, typeof actionItem.label === "string" ? /* @__PURE__ */ React__default.createElement(Text, { allowFontScaling: false, style: [styles.actionSheetText, (props == null ? void 0 : props.actionTextColor) && {
       color: props == null ? void 0 : props.actionTextColor
     }, index === actionSheetItems.length - 1 && {
@@ -84,5 +86,6 @@ ActionSheet.propTypes = {
   })).isRequired,
   onCancel: PropTypes.func,
   actionTextColor: PropTypes.string,
-  hideBottomWidth: PropTypes.bool
+  hideBottomWidth: PropTypes.bool,
+  header: PropTypes.node
 };export{ActionSheet as default};//# sourceMappingURL=Actionsheet.js.map

package/lib/components/Actionsheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actionsheet.js","sources":["../../src/components/Actionsheet.tsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport { StyleSheet, Text, TouchableHighlight, View, Modal } from 'react-native';\nimport { Center } from '@admin-layout/gluestack-ui-mobile';\n\nconst PRIMARY_COLOR = 'rgb(0,98,255)';\nconst WHITE = '#ffffff';\nconst BORDER_COLOR = '#DBDBDB';\n\nconst ActionSheet = (props) => {\n    const { actionItems, isOpen, onCancel } = props;\n    const actionSheetItems = [\n        ...(actionItems || []),\n        {\n            id: '#cancel',\n            label: 'Cancel',\n            onPress: props?.onCancel ?? (() => {}),\n        },\n    ];\n    return (\n        <Modal\n            visible={isOpen}\n            transparent={true}\n            animationType=\"slide\"\n            onRequestClose={onCancel}\n            style={{\n                flex: 1,\n                margin: 0,\n                justifyContent: 'flex-end',\n            }}\n        >\n            <Center\n                className=\"flex-1 w-full h-min[40%]  shadow-lg  absolute bottom-0 bg-transparent \"\n                style={{ backgroundColor: 'transparent' }}\n            >\n                <View style={styles.modalContent}>\n                    {actionSheetItems.map((actionItem, index) => {\n                        return (\n                            <TouchableHighlight\n                                style={[\n                                    styles.actionSheetView,\n\n                                    index === 0 && {\n                                        borderTopLeftRadius: 12,\n                                        borderTopRightRadius: 12,\n                                    },\n                                    index === actionSheetItems.length - 2 && {\n                                        borderBottomLeftRadius: 12,\n                                        borderBottomRightRadius: 12,\n                                    },\n                                    index === actionSheetItems.length - 1 && {\n                                        borderBottomWidth: 0,\n                                        backgroundColor: WHITE,\n                                        marginTop: 8,\n                                        borderTopLeftRadius: 12,\n                                        borderTopRightRadius: 12,\n                                        borderBottomLeftRadius: 12,\n                                        borderBottomRightRadius: 12,\n                                    },\n                                    props?.hideBottomWidth &&\n                                        actionItem.id !== '#cancel' && {\n                                            borderBottomWidth: 0,\n                                            borderColor: 'transparent',\n                                            paddingTop: 10,\n                                            paddingBottom: 10,\n                                        },\n                                ]}\n                                underlayColor={'#f7f7f7'}\n                                key={index}\n                                onPress={actionItem.onPress}\n                            >\n                                {typeof actionItem.label === 'string' ? (\n                                    <Text\n                                        allowFontScaling={false}\n                                        style={[\n                                            styles.actionSheetText,\n                                            props?.actionTextColor && {\n                                                color: props?.actionTextColor,\n                                            },\n                                            index === actionSheetItems.length - 1 && {\n                                                color: '#fa1616',\n                                            },\n                                        ]}\n                                    >\n                                        {actionItem.label}\n                                    </Text>\n                                ) : (\n                                    actionItem.label\n                                )}\n                            </TouchableHighlight>\n                        );\n                    })}\n                </View>\n            </Center>\n        </Modal>\n    );\n};\n\nconst styles = StyleSheet.create({\n    modalContent: {\n        borderTopLeftRadius: 12,\n        borderTopRightRadius: 12,\n        borderBottomLeftRadius: 12,\n        borderBottomRightRadius: 12,\n        marginLeft: 15,\n        marginRight: 15,\n        marginBottom: 20,\n        paddingHorizontal: 10,\n        width: '100%',\n    },\n    actionSheetText: {\n        fontSize: 18,\n        color: PRIMARY_COLOR,\n    },\n    actionSheetView: {\n        backgroundColor: WHITE,\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        alignItems: 'center',\n        paddingTop: 16,\n        paddingBottom: 16,\n        borderBottomWidth: StyleSheet.hairlineWidth,\n        borderColor: BORDER_COLOR,\n    },\n});\n\nActionSheet.propTypes = {\n    isOpen: PropTypes.bool,\n    actionItems: PropTypes.arrayOf(\n        PropTypes.shape({\n            id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n            label: PropTypes.any,\n            onPress: PropTypes.func,\n        }),\n    ).isRequired,\n    onCancel: PropTypes.func,\n    actionTextColor: PropTypes.string,\n    hideBottomWidth: PropTypes.bool,\n};\n\n// ActionSheet.defaultProps = {\n//   actionItems: [],\n//   onCancel: () => { },\n//   actionTextColor: null\n// }\n\nexport default ActionSheet;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Actionsheet.js","sources":["../../src/components/Actionsheet.tsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport { StyleSheet, Text, TouchableHighlight, View, Modal } from 'react-native';\nimport { Center } from '@admin-layout/gluestack-ui-mobile';\n\nconst PRIMARY_COLOR = 'rgb(0,98,255)';\nconst WHITE = '#ffffff';\nconst BORDER_COLOR = '#DBDBDB';\n\nconst ActionSheet = (props) => {\n    const { actionItems, isOpen, onCancel } = props;\n    const actionSheetItems = [\n        ...(actionItems || []),\n        {\n            id: '#cancel',\n            label: 'Cancel',\n            onPress: props?.onCancel ?? (() => {}),\n        },\n    ];\n    if (!isOpen) return null;\n    return (\n        <Modal\n            visible={isOpen}\n            transparent={true}\n            animationType=\"slide\"\n            onRequestClose={onCancel}\n            style={{\n                flex: 1,\n                margin: 0,\n                justifyContent: 'flex-end',\n            }}\n        >\n            <Center\n                className=\"flex-1 w-full h-min[40%]  shadow-lg  absolute bottom-0 bg-transparent \"\n                style={{ backgroundColor: 'transparent' }}\n            >\n                <View style={styles.modalContent}>\n                    {props?.header}\n                    {actionSheetItems.map((actionItem, index) => {\n                        return (\n                            <TouchableHighlight\n                                style={[\n                                    styles.actionSheetView,\n\n                                    index === 0 && {\n                                        borderTopLeftRadius: props?.header ? 0 : 12,\n                                        borderTopRightRadius: props?.header ? 0 : 12,\n                                    },\n                                    index === actionSheetItems.length - 2 && {\n                                        borderBottomLeftRadius: 12,\n                                        borderBottomRightRadius: 12,\n                                    },\n                                    index === actionSheetItems.length - 1 && {\n                                        borderBottomWidth: 0,\n                                        backgroundColor: WHITE,\n                                        marginTop: 8,\n                                        borderTopLeftRadius: props?.header ? 0 : 12,\n                                        borderTopRightRadius: props?.header ? 0 : 12,\n                                        borderBottomLeftRadius: 12,\n                                        borderBottomRightRadius: 12,\n                                    },\n                                    props?.hideBottomWidth &&\n                                        actionItem.id !== '#cancel' && {\n                                            borderBottomWidth: 0,\n                                            borderColor: 'transparent',\n                                            paddingTop: 5,\n                                            paddingBottom: 5,\n                                        },\n                                ]}\n                                underlayColor={'#f7f7f7'}\n                                key={index}\n                                onPress={actionItem.onPress}\n                            >\n                                {typeof actionItem.label === 'string' ? (\n                                    <Text\n                                        allowFontScaling={false}\n                                        style={[\n                                            styles.actionSheetText,\n                                            props?.actionTextColor && {\n                                                color: props?.actionTextColor,\n                                            },\n                                            index === actionSheetItems.length - 1 && {\n                                                color: '#fa1616',\n                                            },\n                                        ]}\n                                    >\n                                        {actionItem.label}\n                                    </Text>\n                                ) : (\n                                    actionItem.label\n                                )}\n                            </TouchableHighlight>\n                        );\n                    })}\n                </View>\n            </Center>\n        </Modal>\n    );\n};\n\nconst styles = StyleSheet.create({\n    modalContent: {\n        borderTopLeftRadius: 12,\n        borderTopRightRadius: 12,\n        borderBottomLeftRadius: 12,\n        borderBottomRightRadius: 12,\n        marginLeft: 15,\n        marginRight: 15,\n        marginBottom: 20,\n        paddingHorizontal: 10,\n        width: '100%',\n    },\n    actionSheetText: {\n        fontSize: 18,\n        color: PRIMARY_COLOR,\n    },\n    actionSheetView: {\n        backgroundColor: WHITE,\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        alignItems: 'center',\n        paddingTop: 16,\n        paddingBottom: 16,\n        borderBottomWidth: StyleSheet.hairlineWidth,\n        borderColor: BORDER_COLOR,\n    },\n});\n\nActionSheet.propTypes = {\n    isOpen: PropTypes.bool,\n    actionItems: PropTypes.arrayOf(\n        PropTypes.shape({\n            id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n            label: PropTypes.any,\n            onPress: PropTypes.func,\n        }),\n    ).isRequired,\n    onCancel: PropTypes.func,\n    actionTextColor: PropTypes.string,\n    hideBottomWidth: PropTypes.bool,\n    header: PropTypes.node,\n};\n\n// ActionSheet.defaultProps = {\n//   actionItems: [],\n//   onCancel: () => { },\n//   actionTextColor: null\n// }\n\nexport default ActionSheet;\n"],"names":["React"],"mappings":"oMAIA,MAAM,aAAgB,GAAA,eAAA;AACtB,MAAM,KAAQ,GAAA,SAAA;AACd,MAAM,YAAe,GAAA,SAAA;AACrB,MAAM,cAAc,CAAS,KAAA,KAAA;AAP7B,EAAA,IAAA,EAAA;AAQE,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,gBAAmB,GAAA,CAAC,GAAI,WAAA,IAAe,EAAK,EAAA;AAAA,IAChD,EAAI,EAAA,SAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAS,EAAA,CAAA,EAAA,GAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,QAAP,KAAA,IAAA,GAAA,EAAA,GAAoB,MAAM;AAAA;AAAC,GACrC,CAAA;AACD,EAAA,IAAI,CAAC,MAAA;AAAQ,IAAO,OAAA,IAAA;AACpB,EAAO,uBAAAA,cAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,OAAA,EAAS,MAAQ,EAAA,WAAA,EAAa,MAAM,aAAc,EAAA,OAAA,EAAQ,cAAgB,EAAA,QAAA,EAAU,KAAO,EAAA;AAAA,IACvG,IAAM,EAAA,CAAA;AAAA,IACN,MAAQ,EAAA,CAAA;AAAA,IACR,cAAgB,EAAA;AAAA,GAER,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,SAAA,EAAU,0EAAyE,KAAO,EAAA;AAAA,IACxG,eAAiB,EAAA;AAAA,GAEP,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAO,MAAO,CAAA,YAAA,EAAA,EACf,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA,MAAA,EACP,gBAAiB,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,KAAU,KAAA;AACvD,IAAA,oDAAQ,kBAAmB,EAAA,EAAA,KAAA,EAAO,CAAC,MAAO,CAAA,eAAA,EAAiB,UAAU,CAAK,IAAA;AAAA,MACxE,mBAAA,EAAA,CAAqB,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA,MAAA,IAAS,CAAI,GAAA,EAAA;AAAA,MACzC,oBAAA,EAAA,CAAsB,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA,MAAA,IAAS,CAAI,GAAA;AAAA,KACzC,EAAA,KAAA,KAAU,gBAAiB,CAAA,MAAA,GAAS,CAAK,IAAA;AAAA,MAC1C,sBAAwB,EAAA,EAAA;AAAA,MACxB,uBAAyB,EAAA;AAAA,KACxB,EAAA,KAAA,KAAU,gBAAiB,CAAA,MAAA,GAAS,CAAK,IAAA;AAAA,MAC1C,iBAAmB,EAAA,CAAA;AAAA,MACnB,eAAiB,EAAA,KAAA;AAAA,MACjB,SAAW,EAAA,CAAA;AAAA,MACX,mBAAA,EAAA,CAAqB,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA,MAAA,IAAS,CAAI,GAAA,EAAA;AAAA,MACzC,oBAAA,EAAA,CAAsB,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA,MAAA,IAAS,CAAI,GAAA,EAAA;AAAA,MAC1C,sBAAwB,EAAA,EAAA;AAAA,MACxB,uBAAyB,EAAA;AAAA,KACxB,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,eAAmB,KAAA,UAAA,CAAW,OAAO,SAAa,IAAA;AAAA,MAC1D,iBAAmB,EAAA,CAAA;AAAA,MACnB,WAAa,EAAA,aAAA;AAAA,MACb,UAAY,EAAA,CAAA;AAAA,MACZ,aAAe,EAAA;AAAA,KAChB,GAAG,aAAe,EAAA,SAAA,EAAW,KAAK,KAAO,EAAA,OAAA,EAAS,UAAW,CAAA,OAAA,EAAA,EACvC,OAAO,UAAA,CAAW,UAAU,QAAW,mBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,gBAAkB,EAAA,KAAA,EAAO,OAAO,CAAC,MAAA,CAAO,eAAiB,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,eAAmB,KAAA;AAAA,MACnJ,OAAO,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA;AAAA,KACb,EAAA,KAAA,KAAU,gBAAiB,CAAA,MAAA,GAAS,CAAK,IAAA;AAAA,MAC1C,KAAO,EAAA;AAAA,KACR,CAC4B,EAAA,EAAA,UAAA,CAAW,KAChB,CAAA,GAAU,WAAW,KAC7B,CAAA;AAAA,GACnB,CACO,CACJ,CACJ,CAAA;AACR;AACA,MAAM,MAAA,GAAS,WAAW,MAAO,CAAA;AAAA,EAC/B,YAAc,EAAA;AAAA,IACZ,mBAAqB,EAAA,EAAA;AAAA,IACrB,oBAAsB,EAAA,EAAA;AAAA,IACtB,sBAAwB,EAAA,EAAA;AAAA,IACxB,uBAAyB,EAAA,EAAA;AAAA,IACzB,UAAY,EAAA,EAAA;AAAA,IACZ,WAAa,EAAA,EAAA;AAAA,IACb,YAAc,EAAA,EAAA;AAAA,IACd,iBAAmB,EAAA,EAAA;AAAA,IACnB,KAAO,EAAA;AAAA,GACT;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,QAAU,EAAA,EAAA;AAAA,IACV,KAAO,EAAA;AAAA,GACT;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,eAAiB,EAAA,KAAA;AAAA,IACjB,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,KAAA;AAAA,IACf,cAAgB,EAAA,QAAA;AAAA,IAChB,UAAY,EAAA,QAAA;AAAA,IACZ,UAAY,EAAA,EAAA;AAAA,IACZ,aAAe,EAAA,EAAA;AAAA,IACf,mBAAmB,UAAW,CAAA,aAAA;AAAA,IAC9B,WAAa,EAAA;AAAA;AAEjB,CAAC,CAAA;AACD,WAAA,CAAY,SAAY,GAAA;AAAA,EACtB,QAAQ,SAAU,CAAA,IAAA;AAAA,EAClB,WAAa,EAAA,SAAA,CAAU,OAAQ,CAAA,SAAA,CAAU,KAAM,CAAA;AAAA,IAC7C,EAAA,EAAI,UAAU,SAAU,CAAA,CAAC,UAAU,MAAQ,EAAA,SAAA,CAAU,MAAM,CAAC,CAAA;AAAA,IAC5D,OAAO,SAAU,CAAA,GAAA;AAAA,IACjB,SAAS,SAAU,CAAA;AAAA,GACpB,CAAC,CAAE,CAAA,UAAA;AAAA,EACJ,UAAU,SAAU,CAAA,IAAA;AAAA,EACpB,iBAAiB,SAAU,CAAA,MAAA;AAAA,EAC3B,iBAAiB,SAAU,CAAA,IAAA;AAAA,EAC3B,QAAQ,SAAU,CAAA;AACpB,CAAA"}

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

@@ -1,4 +1,4 @@
-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,Box,Spinner}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';import colors from'tailwindcss/colors';import ActionSheet from'../../../../components/Actionsheet.js';const Channels = ({
+import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import React__default,{useState}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 {View,HStack,Text,Spinner,Pressable,Box,FlatList}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,startCase}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';import colors from'tailwindcss/colors';const Channels = ({
   channels,
   loading,
   reFetchChannels,
@@ -17,32 +17,21 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
     orgName
   } = useDrawerLayout();
   useIsFocused();
-  const actionItems = [
-    {
-      id: 1,
-      label: "Create Channel",
-      onPress: () => navigation.navigate(NavigationRoutes.Channels, {
-        orgName
-      })
-    },
-    {
-      id: 2,
-      label: "Browse Channels",
-      onPress: () => navigation.navigate(NavigationRoutes.Channels, {
-        orgName
-      })
-    }
-  ];
   useFocusEffect(React__default.useCallback(() => {
-    reFetchChannels();
+    if (!channels || channels.length === 0) {
+      reFetchChannels();
+    }
     return () => {
     };
-  }, []));
-  const organizationChannels = React__default.useMemo(() => {
+  }, [reFetchChannels, channels]));
+  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) || [];
+    }) => id), [(ch) => {
+      var _a2;
+      return (_a2 = ch == null ? void 0 : ch.title) == null ? void 0 : _a2.toLowerCase();
+    }], ["asc"]), 20) || [];
   }, [channels]);
   const openInbox = React__default.useCallback((id, title, totalMembers, type) => {
     navigation.navigate(NavigationRoutes.DialogMessages, {
@@ -54,47 +43,33 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
       hideTabBar: true
     });
   }, [orgName]);
-  const renderUserChannelItem = ({
-    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, { className: "py-1" }, /* @__PURE__ */ React__default.createElement(HStack, { className: "flex-1 items-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: colors.gray[800] }, 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, { className: "flex-1 items-center justify-between" }, /* @__PURE__ */ React__default.createElement(Text, { style: {
+  return /* @__PURE__ */ React__default.createElement(View, { style: [styles.channelContainer, {
+    paddingHorizontal: 10
+  }] }, /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: [styles.headingContainer, {
+    paddingVertical: 8,
+    marginBottom: 4
+  }], onPress: () => setExpendable(!expandable) }, /* @__PURE__ */ React__default.createElement(HStack, { className: "flex-1 items-center justify-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, { style: {
-    paddingVertical: 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(Box, { className: "py-1" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] }) : /* @__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, { className: "flex-1 items-center" }, /* @__PURE__ */ React__default.createElement(Button, { variant: "solid", onPress: () => navigation.navigate("MainStack", {
-      screen: NavigationRoutes.Channels,
-      params: {
-        orgName
-      }
-    }), className: "bg-transparent pl-0 active:bg-transparent hover:bg-transparent" }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { color: "black", name: "search", size: 20 }), /* @__PURE__ */ React__default.createElement(ButtonText, { className: "text-black" }, "Browse all channels"))), /* @__PURE__ */ React__default.createElement(
-      TouchableOpacity,
-      {
-        onPress: onOpen
-      },
-      /* @__PURE__ */ React__default.createElement(VStack, { className: "py-1 ml-[-0.5]" }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "flex-1 items-center justify-start" }, /* @__PURE__ */ React__default.createElement(Icon, { as: AddIcon, color: colors.gray[600] }), /* @__PURE__ */ React__default.createElement(Text, { style: {
-        fontSize: 14,
-        fontWeight: "400",
-        color: "black"
-      } }, "Add Channel")))
-    ), /* @__PURE__ */ React__default.createElement(ActionSheet, { isOpen, actionItems, onCancel: onClose }));
-  } })));
+    color: "#1f2937"
+  } }, "Channels"), /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "items-center" }, loading && /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: "$blue600" }), /* @__PURE__ */ React__default.createElement(Pressable, { onPress: () => navigation.navigate(NavigationRoutes.AddChannel) }, /* @__PURE__ */ React__default.createElement(Box, { className: "rounded-md w-6 h-6 justify-center items-center" }, /* @__PURE__ */ React__default.createElement(Text, { className: "text-lg text-slate-700" }, "+"))), expandable ? /* @__PURE__ */ React__default.createElement(MaterialIcons, { color: "#4b5563", name: "keyboard-arrow-up", size: 22 }) : /* @__PURE__ */ React__default.createElement(MaterialIcons, { color: "#4b5563", name: "keyboard-arrow-down", size: 22 })))), expandable && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !loading && !(channels == null ? void 0 : channels.length) ? /* @__PURE__ */ React__default.createElement(Box, { className: "py-2 px-1" }, /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600] }, "No channels available")) : /* @__PURE__ */ React__default.createElement(FlatList, { style: {
+    paddingVertical: 4
+  }, scrollEnabled: false, data: channels && !loading ? channels == null ? void 0 : channels.filter((i) => (i == null ? void 0 : i.type) !== RoomType.Direct) : [], renderItem: ({
+    item
+  }) => {
+    var _a;
+    return /* @__PURE__ */ React__default.createElement(Pressable, { onPress: () => {
+      var _a2;
+      return openInbox(item == null ? void 0 : item.id, item == null ? void 0 : item.title, (_a2 = item == null ? void 0 : item.members) == null ? void 0 : _a2.length, item == null ? void 0 : item.type);
+    } }, /* @__PURE__ */ React__default.createElement(Box, { style: {
+      paddingVertical: 8,
+      paddingHorizontal: 1,
+      marginVertical: 1
+    } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "flex-1 items-center" }, /* @__PURE__ */ React__default.createElement(Box, { style: {
+      width: 24,
+      justifyContent: "center",
+      alignItems: "center"
+    } }, /* @__PURE__ */ React__default.createElement(Octicons, { name: "hash", size: 18, color: "#4b5563" })), /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-800 text-base font-medium" }, startCase((_a = (item == null ? void 0 : item.title) || (item == null ? void 0 : item.displayName) || "") == null ? void 0 : _a.toLowerCase())))));
+  }, keyExtractor: (item, index) => `${index}-${item == null ? void 0 : item.id}` }), showMore && (channels == null ? void 0 : channels.length) >= 20 && /* @__PURE__ */ React__default.createElement(Pressable, { onPress: () => fetchMoreChannels(channels == null ? void 0 : channels.length), className: "px-1 py-3" }, /* @__PURE__ */ React__default.createElement(Text, { className: "text-blue-600 font-medium" }, "Show more channels..."))));
 };
 var Channels$1 = React__default.memo(Channels);export{Channels$1 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, Modal } from 'react-native';\nimport { NavigationRoutes } from '../../../../constants/routes';\n// import more from '../../../../assets/images/more.png';\n// import right from '../../../../assets/images/right.png';\n// import {} 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    // Center,\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/graphql';\nimport { FontAwesome, Feather, Octicons, MaterialIcons } from '@expo/vector-icons';\nimport Colors from '../../../../constants/Colors';\nimport { useDrawerLayout, useDisclose } from '../../../../hooks';\nimport colors from 'tailwindcss/colors';\nimport ActionSheet from '../../../../components/Actionsheet';\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    const actionItems = [\n        {\n            id: 1,\n            label: 'Create Channel',\n            onPress: () => navigation.navigate(NavigationRoutes.Channels, { orgName }),\n        },\n        {\n            id: 2,\n            label: 'Browse Channels',\n            onPress: () => navigation.navigate(NavigationRoutes.Channels, { orgName }),\n        },\n        // {\n        //   id: 3,\n        //   label: 'Action Item 3',\n        //   onPress: () => {\n        //   }\n        // },\n    ];\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 className=\"py-1\">\n                    <HStack className=\"flex-1 items-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={colors.gray[800]}>\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 className=\"flex-1 items-center justify-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                        style={{ paddingVertical: 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                                <Box className=\"py-1\">\n                                    {loading ? (\n                                        <Spinner color={colors.blue[500]} />\n                                    ) : (\n                                        <Text color={'$coolGray600'}>No Channels found</Text>\n                                    )}\n                                </Box>\n                            );\n                        }}\n                        ListFooterComponent={() => {\n                            return (\n                                <>\n                                    {channels?.length > 20 && (\n                                        <HStack className=\"flex-1 items-center\">\n                                            <Button\n                                                variant={'solid'}\n                                                onPress={() =>\n                                                    navigation.navigate('MainStack', {\n                                                        screen: NavigationRoutes.Channels,\n                                                        params: { orgName },\n                                                    })\n                                                }\n                                                className=\"bg-transparent pl-0 active:bg-transparent hover:bg-transparent\"\n                                            >\n                                                <MaterialIcons color={'black'} name={'search'} size={20} />\n                                                <ButtonText className=\"text-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 className=\"py-1 ml-[-0.5]\">\n                                            <HStack space={'sm'} className=\"flex-1 items-center justify-start\">\n                                                <Icon as={AddIcon} color={colors.gray[600]} />\n                                                <Text style={{ fontSize: 14, fontWeight: '400', color: 'black' }}>\n                                                    Add Channel\n                                                </Text>\n                                            </HStack>\n                                        </VStack>\n                                    </TouchableOpacity>\n                                    <ActionSheet isOpen={isOpen} actionItems={actionItems} onCancel={onClose} />\n\n                                    {/* <Actionsheet isOpen={isOpen} onClose={onClose}>\n                                        <ActionsheetBackdrop />\n                                        <ActionsheetContent className=\"bg-transparent\">\n                                            <VStack className=\"w-full p-20 px-1\">\n                                                <ActionsheetItem\n                                                    onPress={() =>\n                                                        navigation.navigate(NavigationRoutes.AddChannel, { orgName })\n                                                    }\n                                                    className=\"bg-white items-center justify-center active:bg-gray-100 hover:bg-gray-100 border border-gray-200 rounded-lg rounded-b-none\"\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                                                    className=\"bg-white items-center justify-center active:bg-gray-100 hover:bg-gray-100 border border-gray-200 rounded-lg rounded-b-none\"\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                                                    className=\"bg-white items-center justify-center mt-1 active:bg-gray-100 hover:bg-gray-100 border border-gray-200 rounded-lg rounded-b-none\"\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, useEffect, useLayoutEffect } from 'react';\nimport { TouchableOpacity, Share, Modal } from 'react-native';\nimport { NavigationRoutes } from '../../../../constants';\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} 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/graphql';\nimport { FontAwesome, Feather, Octicons, MaterialIcons } from '@expo/vector-icons';\nimport { useDrawerLayout, useDisclose } from '../../../../hooks';\nimport colors from 'tailwindcss/colors';\nimport ActionSheet from '../../../../components/Actionsheet';\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 isFocused = useIsFocused();\n    const actionItems = [\n        {\n            id: 1,\n            label: 'Create Channel',\n            onPress: () => navigation.navigate(NavigationRoutes.Channels, { orgName }),\n        },\n        {\n            id: 2,\n            label: 'Browse Channels',\n            onPress: () => navigation.navigate(NavigationRoutes.Channels, { orgName }),\n        },\n    ];\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Only fetch channels when first focused or when we don't have any channels\n            if (!channels || channels.length === 0) {\n                reFetchChannels();\n            }\n\n            return () => {\n                // Do something when the screen is unfocused\n                // Useful for cleanup functions\n            };\n        }, [reFetchChannels, channels]),\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    return (\n        <View style={[styles.channelContainer, { paddingHorizontal: 10 }]}>\n            <TouchableOpacity\n                style={[styles.headingContainer, { paddingVertical: 8, marginBottom: 4 }]}\n                onPress={() => setExpendable(!expandable)}\n            >\n                <HStack className=\"flex-1 items-center justify-between\">\n                    <Text style={{ fontSize: 15, fontWeight: '600', color: '#1f2937' }}>Channels</Text>\n                    <HStack space={'sm'} className=\"items-center\">\n                        {loading && <Spinner size={'small'} color={'$blue600'} />}\n                        <Pressable onPress={() => navigation.navigate(NavigationRoutes.AddChannel)}>\n                            <Box className=\"rounded-md w-6 h-6 justify-center items-center\">\n                                <Text className=\"text-lg text-slate-700\">+</Text>\n                            </Box>\n                        </Pressable>\n                        {expandable ? (\n                            <MaterialIcons color={'#4b5563'} name={'keyboard-arrow-up'} size={22} />\n                        ) : (\n                            <MaterialIcons color={'#4b5563'} name={'keyboard-arrow-down'} size={22} />\n                        )}\n                    </HStack>\n                </HStack>\n            </TouchableOpacity>\n\n            {expandable && (\n                <>\n                    {!loading && !channels?.length ? (\n                        <Box className=\"py-2 px-1\">\n                            <Text color={colors.gray[600]}>No channels available</Text>\n                        </Box>\n                    ) : (\n                        <FlatList\n                            style={{ paddingVertical: 4 }}\n                            scrollEnabled={false}\n                            data={channels && !loading ? channels?.filter((i: any) => i?.type !== RoomType.Direct) : []}\n                            renderItem={({ item }) => {\n                                return (\n                                    <Pressable\n                                        onPress={() =>\n                                            openInbox(item?.id, item?.title, item?.members?.length, item?.type)\n                                        }\n                                    >\n                                        <Box style={{ paddingVertical: 8, paddingHorizontal: 1, marginVertical: 1 }}>\n                                            <HStack space={'md'} className=\"flex-1 items-center\">\n                                                <Box\n                                                    style={{\n                                                        width: 24,\n                                                        justifyContent: 'center',\n                                                        alignItems: 'center',\n                                                    }}\n                                                >\n                                                    <Octicons name=\"hash\" size={18} color=\"#4b5563\" />\n                                                </Box>\n                                                <Text className=\"text-gray-800 text-base font-medium\">\n                                                    {startCase((item?.title || item?.displayName || '')?.toLowerCase())}\n                                                </Text>\n                                            </HStack>\n                                        </Box>\n                                    </Pressable>\n                                );\n                            }}\n                            keyExtractor={(item, index) => `${index}-${item?.id}`}\n                        />\n                    )}\n\n                    {showMore && channels?.length >= 20 && (\n                        <Pressable onPress={() => fetchMoreChannels(channels?.length)} className=\"px-1 py-3\">\n                            <Text className=\"text-blue-600 font-medium\">Show more channels...</Text>\n                        </Pressable>\n                    )}\n                </>\n            )}\n        </View>\n    );\n};\n\nexport default React.memo(Channels);\n"],"names":["React","_a"],"mappings":"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"}

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

@@ -12,10 +12,12 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
     orgName
   } = useDrawerLayout();
   useFocusEffect(React__default.useCallback(() => {
-    reFetchDirectChannels();
+    if (!userDirectChannels || userDirectChannels.length === 0) {
+      reFetchDirectChannels();
+    }
     return () => {
     };
-  }, []));
+  }, [reFetchDirectChannels, userDirectChannels]));
   React__default.useEffect(() => {
     if (userDirectChannels)
       setDirectChannels(userDirectChannels);
@@ -82,7 +84,11 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
       var _a2, _b2, _c2;
       return (u == null ? void 0 : u.id) == (user == null ? void 0 : user.id) ? (u == null ? void 0 : u.givenName) + " " + (u == null ? void 0 : u.familyName) + " (you)" : (channelMembers == null ? void 0 : channelMembers.length) > 1 ? (_a2 = u == null ? void 0 : u.givenName) != null ? _a2 : "" : (_c2 = (_b2 = u == null ? void 0 : u.givenName) != null ? _b2 : " " + (u == null ? void 0 : u.familyName)) != null ? _c2 : "";
     })) == null ? void 0 : _d.filter((mu) => mu)) == null ? void 0 : _e.join(", ")) != null ? _f : "";
-    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { key: item.id, onPress: () => openUserInbox(item.id, "Inbox", item == null ? void 0 : item.members, item == null ? void 0 : item.type) }, /* @__PURE__ */ React__default.createElement(Box, { className: "pr-10 py-1" }, /* @__PURE__ */ React__default.createElement(HStack, { className: "w-full flex-1 items-center", space: "sm" }, /* @__PURE__ */ React__default.createElement(Avatar, { key: "direct-channel-profile-key", size: "sm", className: "bg-transparent" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_h = (_g = channelMembers[0]) == null ? void 0 : _g.username) == null ? void 0 : _h.charAt(0))), (channelMembers == null ? void 0 : channelMembers.length) > 1 ? /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: {
+    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { key: item.id, onPress: () => openUserInbox(item.id, "Inbox", item == null ? void 0 : item.members, item == null ? void 0 : item.type) }, /* @__PURE__ */ React__default.createElement(Box, { style: {
+      paddingVertical: 8,
+      paddingHorizontal: 1,
+      marginVertical: 1
+    } }, /* @__PURE__ */ React__default.createElement(HStack, { className: "w-full flex-1 items-center", space: "sm" }, /* @__PURE__ */ React__default.createElement(Avatar, { key: "direct-channel-profile-key", size: "sm", className: "bg-transparent" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_h = (_g = channelMembers[0]) == null ? void 0 : _g.username) == null ? void 0 : _h.charAt(0))), (channelMembers == null ? void 0 : channelMembers.length) > 1 ? /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: {
       width: "100%",
       height: "100%"
     }, className: "items-center justify-center bg-gray-200 rounded-md" }, /* @__PURE__ */ React__default.createElement(Text, { style: {
@@ -90,38 +96,45 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
       fontWeight: "bold",
       color: "#000"
     } }, channelMembers == null ? void 0 : channelMembers.length)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
-      borderRadius: 6,
-      borderWidth: 2,
-      borderColor: "#fff"
+      borderRadius: "none",
+      borderWidth: 1,
+      borderColor: "#fff",
+      borderBottomRightRadius: 15
     }, source: {
       uri: (_i = channelMembers[0]) == null ? void 0 : _i.picture
-    } }), /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: {
+    }, className: "rounded-lg" }), /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: {
       width: 10,
-      height: 10
-    }, className: "bg-green-800" }))), /* @__PURE__ */ React__default.createElement(Text, { style: {
-      fontSize: 14,
-      fontWeight: "400"
+      height: 10,
+      bottom: -1
+    }, className: "bg-green-600" }))), /* @__PURE__ */ React__default.createElement(Text, { style: {
+      fontSize: 15,
+      fontWeight: "500"
     }, className: "text-gray-800" }, title))));
   }, []);
-  return /* @__PURE__ */ React__default.createElement(View, { style: styles.channelContainer }, /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: styles.headingContainer, onPress: () => setExpendableMessage(!expandableMessage) }, /* @__PURE__ */ React__default.createElement(HStack, { className: "flex-1 items-center justify-between" }, /* @__PURE__ */ React__default.createElement(Text, { style: {
+  return /* @__PURE__ */ React__default.createElement(View, { style: [styles.channelContainer, {
+    paddingHorizontal: 10
+  }] }, /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: [styles.headingContainer, {
+    paddingVertical: 8,
+    marginBottom: 4
+  }], onPress: () => setExpendableMessage(!expandableMessage) }, /* @__PURE__ */ React__default.createElement(HStack, { className: "flex-1 items-center justify-between" }, /* @__PURE__ */ React__default.createElement(Text, { style: {
     fontSize: 15,
     fontWeight: "600",
-    color: "black"
-  } }, "Direct Messages"), expandableMessage ? /* @__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 }))), expandableMessage && /* @__PURE__ */ React__default.createElement(FlatList, { style: {
-    paddingVertical: 2
+    color: "#1f2937"
+  } }, "Direct Messages"), expandableMessage ? /* @__PURE__ */ React__default.createElement(MaterialIcons, { color: "#4b5563", name: "keyboard-arrow-up", size: 22 }) : /* @__PURE__ */ React__default.createElement(MaterialIcons, { color: "#4b5563", name: "keyboard-arrow-down", size: 22 }))), expandableMessage && /* @__PURE__ */ React__default.createElement(FlatList, { style: {
+    paddingVertical: 4
   }, data: organizationDirectChannels && (organizationDirectChannels == null ? void 0 : organizationDirectChannels.length) > 0 ? organizationDirectChannels : [], renderItem: renderChannelMemebers, key: "direct-messages-key", keyExtractor: (item, index) => String(index), contentContainerStyle: {
     flex: 1
   }, ListEmptyComponent: () => {
-    return /* @__PURE__ */ React__default.createElement(Box, { className: "py-1" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] }) : /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600] }, "No members found"));
+    return /* @__PURE__ */ React__default.createElement(Box, { className: "py-2 px-1" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] }) : /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600] }, "No members found"));
   }, ListFooterComponent: () => {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => navigation.navigate(NavigationRoutes.SearchAddChannel, {
       orgName
-    }) }, /* @__PURE__ */ React__default.createElement(Box, { className: "pr-10 py-1" }, /* @__PURE__ */ React__default.createElement(HStack, { className: "w-full flex-1 items-center", space: "sm" }, /* @__PURE__ */ React__default.createElement(Avatar, { key: "direct-start-new-msg-key", size: "sm", className: "bg-transparent" }, /* @__PURE__ */ React__default.createElement(Icon, { as: AddIcon, style: {
+    }) }, /* @__PURE__ */ React__default.createElement(Box, { className: "pr-10 py-2" }, /* @__PURE__ */ React__default.createElement(HStack, { className: "w-full flex-1 items-center", space: "sm" }, /* @__PURE__ */ React__default.createElement(Avatar, { key: "direct-start-new-msg-key", size: "sm", className: "bg-gray-100" }, /* @__PURE__ */ React__default.createElement(Icon, { as: AddIcon, style: {
       width: "70%",
       height: "70%"
-    }, color: colors.gray[60] })), /* @__PURE__ */ React__default.createElement(Text, { style: {
+    }, color: colors.gray[700] })), /* @__PURE__ */ React__default.createElement(Text, { style: {
       fontSize: 14,
-      fontWeight: "400"
+      fontWeight: "500"
     }, color: colors.gray[800] }, "Start a new message")))));
   } }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DirectChannels.js","sources":["../../../../../src/screens/Home/Components/DirectChannels/DirectChannels.tsx"],"sourcesContent":["import { useIsFocused, useFocusEffect } from '@react-navigation/native';\nimport React, { useState, useEffect, useLayoutEffect, useCallback } from 'react';\nimport { TouchableOpacity, Share } from 'react-native';\nimport styles from '../../styles';\nimport {\n    Pressable,\n    View,\n    Image,\n    FlatList,\n    HStack,\n    Icon,\n    Box,\n    Text,\n    Avatar,\n    AvatarFallbackText,\n    AvatarImage,\n    AvatarBadge,\n    AvatarGroup,\n    Badge,\n    Spinner,\n    ButtonText,\n    AddIcon,\n} from '@admin-layout/gluestack-ui-mobile';\nimport more from '../../../../assets/images/more.png';\nimport right from '../../../../assets/images/right.png';\nimport { userSelector } from '@adminide-stack/user-auth0-client';\nimport { useSelector, shallowEqual } from 'react-redux';\nimport { useNavigation } from '@react-navigation/native';\nimport { startCase, orderBy } from 'lodash-es';\nimport { RoomType } from 'common';\nimport { useGetChannelsByUserQuery } from 'common/graphql';\nimport { NavigationRoutes } from '../../../../constants';\nimport { MaterialIcons } from '@expo/vector-icons';\nimport { useDrawerLayout } from '../../../../hooks';\nimport colors from 'tailwindcss/colors';\n\nconst DirectChannels = ({ userDirectChannels, loading, reFetchDirectChannels }: any) => {\n    const navigation = useNavigation<any>();\n    const [expandableMessage, setExpendableMessage] = useState(true);\n    const [directChannels, setDirectChannels] = useState<any>(null);\n    const user = useSelector(userSelector, shallowEqual);\n    const isFocused = useIsFocused();\n    const { orgName } = useDrawerLayout();\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            reFetchDirectChannels();\n\n            return () => {\n                // Do something when the screen is unfocused\n                // Useful for cleanup functions\n            };\n        }, []),\n    );\n\n    React.useEffect(() => {\n        if (userDirectChannels) setDirectChannels(userDirectChannels);\n    }, [userDirectChannels]);\n\n    const organizationDirectChannels = React.useMemo(() => {\n        //Direct channel\n        if (!directChannels) return null;\n        return (\n            (directChannels &&\n                orderBy(\n                    directChannels\n                        ?.filter((i: any) => i.type == RoomType.Direct)\n                        ?.filter((c: any) =>\n                            c?.members?.some(\n                                // (u: any) => u !== null && u?.user?.id != user?.id && u.user.__typename == 'UserAccount',\n                                (u: any) =>\n                                    c?.members?.length == 1 && c?.members?.filter((ch: any) => ch?.user?.id == user?.id)\n                                        ? u !== null\n                                        : u !== null && u?.user?.id != user?.id,\n                            ),\n                        ),\n                    [(ch: any) => ch?.members?.map((u: any) => u?.user?.givenName?.toLowerCase())],\n                    ['asc'],\n                )) ||\n            []\n        );\n    }, [directChannels]);\n\n    const openUserInbox = React.useCallback(\n        (id: any, title: any, members: any, type?: any) => {\n            const channelMembers =\n                members\n                    // ?.filter((ch: any) => ch?.user?.id != user?.id && ch?.user?.__typename == 'UserAccount')\n                    ?.filter((ch: any) =>\n                        members?.length == 1 && members?.filter((ch: any) => ch?.user?.id == user?.id)\n                            ? ch !== null\n                            : ch !== null && ch?.user?.id != user?.id,\n                    )\n                    ?.map((m: any) => m?.user) ?? null;\n\n            const memberImage = channelMembers?.length == 1 ? channelMembers[0]?.picture ?? null : null;\n\n            const membersNameAsTitle =\n                channelMembers\n                    ?.map((u: any) => u?.givenName ?? '')\n                    ?.filter((mu: any) => mu)\n                    ?.join(', ') ?? '';\n\n            navigation.navigate(NavigationRoutes.DialogMessages, {\n                channelId: id?.toString(),\n                title: membersNameAsTitle?.toString() || title?.toString(),\n                totalMembers: members?.length,\n                memberImage: memberImage,\n                channelType: type,\n                orgName: orgName,\n                hideTabBar: true,\n            });\n        },\n        [orgName],\n    );\n\n    const renderChannelMemebers = useCallback(({ item }: any) => {\n        const channelMembers =\n            item?.members\n                // ?.filter((ch: any) => ch?.user?.id != user?.id && ch?.user?.__typename == 'UserAccount')\n                ?.filter((ch: any) =>\n                    item?.members?.length == 1 && item?.members?.filter((ch: any) => ch?.user?.id == user?.id)\n                        ? ch !== null\n                        : ch !== null && ch?.user?.id != user?.id,\n                )\n                ?.map((m: any) => m?.user) ?? null;\n\n        let title =\n            channelMembers\n                ?.map((u: any) =>\n                    u?.id == user?.id\n                        ? u?.givenName + ' ' + u?.familyName + ' (you)'\n                        : channelMembers?.length > 1\n                        ? u?.givenName ?? ''\n                        : u?.givenName ?? '' + ' ' + u?.familyName ?? '',\n                )\n                ?.filter((mu: any) => mu)\n                ?.join(', ') ?? '';\n\n        return (\n            <TouchableOpacity key={item.id} onPress={() => openUserInbox(item.id, 'Inbox', item?.members, item?.type)}>\n                <Box className=\"pr-10 py-1\">\n                    <HStack className=\"w-full flex-1 items-center\" space={'sm'}>\n                        <Avatar key={'direct-channel-profile-key'} size={'sm'} className=\"bg-transparent\">\n                            <AvatarFallbackText>{startCase(channelMembers[0]?.username?.charAt(0))}</AvatarFallbackText>\n                            {/* <AvatarImage\n                                alt=\"image\"\n                                size={'md'}\n                                style={{\n                                    // width: 25,\n                                    // height: 25,\n                                    borderRadius: 6,\n                                    borderWidth: 2,\n                                    borderColor: '#fff',\n                                }}\n                                source={{\n                                    uri: channelMembers[0]?.picture,\n                                }}\n                            /> */}\n                            {channelMembers?.length > 1 ? (\n                                <AvatarBadge\n                                    style={{ width: '100%', height: '100%' }}\n                                    className=\"items-center justify-center bg-gray-200 rounded-md\"\n                                >\n                                    <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#000' }}>\n                                        {channelMembers?.length}\n                                    </Text>\n                                </AvatarBadge>\n                            ) : (\n                                <>\n                                    <AvatarImage\n                                        alt=\"image\"\n                                        style={{\n                                            // width: 25,\n                                            // height: 25,\n                                            borderRadius: 6,\n                                            borderWidth: 2,\n                                            borderColor: '#fff',\n                                        }}\n                                        source={{\n                                            uri: channelMembers[0]?.picture,\n                                        }}\n                                    />\n                                    <AvatarBadge style={{ width: 10, height: 10 }} className=\"bg-green-800\" />\n                                </>\n                            )}\n                        </Avatar>\n                        <Text style={{ fontSize: 14, fontWeight: '400' }} className=\"text-gray-800\">\n                            {title}\n                        </Text>\n                    </HStack>\n                </Box>\n            </TouchableOpacity>\n        );\n    }, []);\n\n    return (\n        <View style={styles.channelContainer}>\n            <TouchableOpacity style={styles.headingContainer} onPress={() => setExpendableMessage(!expandableMessage)}>\n                <HStack className=\"flex-1 items-center justify-between\">\n                    <Text style={{ fontSize: 15, fontWeight: '600', color: 'black' }}>Direct Messages</Text>\n                    {expandableMessage ? (\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            </TouchableOpacity>\n            {/* <TouchableOpacity style={styles.headingContainer} onPress={() => setExpendableMessage(!expandableMessage)}>\n                <Text fontSize={15} fontWeight={600}>\n                    Direct Messages\n                </Text>\n                <Image alt={'more icon right'} style={styles.iconStyle} source={expandableMessage ? more : right} />\n            </TouchableOpacity> */}\n            {expandableMessage && (\n                <FlatList\n                    style={{ paddingVertical: 2 }}\n                    data={\n                        organizationDirectChannels && organizationDirectChannels?.length > 0\n                            ? organizationDirectChannels\n                            : []\n                    }\n                    renderItem={renderChannelMemebers}\n                    key={'direct-messages-key'}\n                    keyExtractor={(item, index) => String(index)}\n                    contentContainerStyle={{\n                        flex: 1,\n                    }}\n                    ListEmptyComponent={() => {\n                        return (\n                            <Box className=\"py-1\">\n                                {loading ? (\n                                    <Spinner color={colors.blue[500]} />\n                                ) : (\n                                    <Text color={colors.gray[600]}>No members found</Text>\n                                )}\n                            </Box>\n                        );\n                    }}\n                    ListFooterComponent={() => {\n                        return (\n                            <>\n                                <TouchableOpacity\n                                    onPress={() => navigation.navigate(NavigationRoutes.SearchAddChannel, { orgName })}\n                                >\n                                    <Box className=\"pr-10 py-1\">\n                                        <HStack className=\"w-full flex-1 items-center\" space={'sm'}>\n                                            <Avatar\n                                                key={'direct-start-new-msg-key'}\n                                                size={'sm'}\n                                                className=\"bg-transparent\"\n                                            >\n                                                <Icon\n                                                    as={AddIcon}\n                                                    style={{ width: '70%', height: '70%' }}\n                                                    color={colors.gray[60]}\n                                                />\n                                            </Avatar>\n                                            <Text style={{ fontSize: 14, fontWeight: '400' }} color={colors.gray[800]}>\n                                                Start a new message\n                                            </Text>\n                                        </HStack>\n                                    </Box>\n                                </TouchableOpacity>\n                            </>\n                        );\n                    }}\n                />\n            )}\n        </View>\n    );\n};\n\nexport default React.memo(DirectChannels);\n\n// -//last added//- const renderChannelMemebers = ({ item }: any) => {\n//     const channelMembers =\n//         item?.members\n//             ?.filter((ch: any) => ch?.user?.id != user?.id && ch?.user?.__typename == 'UserAccount')\n//             ?.map((m: any) => m?.user) ?? null;\n\n//     let title =\n//         channelMembers\n//             ?.map((u: any) => u?.givenName + ' ' + u?.familyName ?? '')\n//             ?.filter((mu: any) => mu)\n//             ?.join(', ') ?? '';\n\n//     return (\n//         <TouchableOpacity key={item.id} onPress={() => openUserInbox(item.id, 'Inbox', item?.members)}>\n//             <View style={{ paddingHorizontal: 20, paddingVertical: 4 }}>\n//                 <HStack w={'100%'} space={1} flex={1} alignItems={'center'}>\n//                     <Box flex={0.1} alignItems={'flex-start'}>\n//                         <Avatar.Group\n//                             _avatar={{\n//                                 size: 'sm',\n//                                 bg: 'transparent',\n//                             }}\n//                         >\n//                             {channelMembers &&\n//                                 channelMembers?.length > 0 &&\n//                                 channelMembers?.slice(0, 2)?.map((ch: any, i: Number) => (\n//                                     <Avatar\n//                                         key={'home-key' + i}\n//                                         size={'sm'}\n//                                         bg={'transparent'}\n//                                         top={i == 1 ? 2 : 0}\n//                                         zIndex={i == 1 ? 5 : 1}\n//                                         _image={{\n//                                             style: {\n//                                                 width: 25,\n//                                                 height: 25,\n//                                                 borderRadius: 6,\n//                                                 borderWidth: 2,\n//                                                 borderColor: '#fff',\n//                                             },\n//                                         }}\n//                                         // _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}\n//                                         source={{\n//                                             uri: ch?.picture,\n//                                         }}\n//                                     >\n//                                         {startCase(ch?.username?.charAt(0))}\n//                                         {channelMembers?.length == 1 && (\n//                                             <Avatar.Badge bg=\"green.800\" bottom={-4} right={-4} />\n//                                         )}\n//                                     </Avatar>\n//                                 ))}\n//                         </Avatar.Group>\n//                     </Box>\n//                     <Box flex={0.9}>\n//                         <Text fontSize={16} fontWeight={400}>\n//                             {title}\n//                         </Text>\n//                     </Box>\n//                 </HStack>\n//             </View>\n//         </TouchableOpacity>\n//     );\n// };\n\n// const renderChannelMemebers = ({ item }: any) => {\n//     const title = item.givenName + ' ' + item.familyName;\n//     const matches: any = title.match(/\\b(\\w)/g);\n//     const acronym: any = matches.join('').substring(0, 2); // JSON\n//     return (\n//         <TouchableOpacity key={item.id} onPress={() => openUserInbox(item.channelID, title)}>\n//             <View py={1}>\n//                 <HStack space={2} flex={1} alignItems={'center'}>\n//                     {/* <Image alt={acronym} source={{uri:item.picture}} w={6} h={6} /> */}\n//                     <Avatar\n//                         size={'sm'}\n//                         bg={'transparent'}\n//                         _image={{ style: { width: 25, height: 25, borderRadius: 6 } }}\n//                         source={{ uri: item.picture }}\n//                     >\n//                         {acronym}\n//                         <Avatar.Badge bg=\"green.800\" />\n//                     </Avatar>\n\n//                     <Text fontSize={16} fontWeight={400}>\n//                         {item.givenName} {item.familyName} {user.id == item.id ? '(you)' : ''}\n//                     </Text>\n//                 </HStack>\n//             </View>\n//         </TouchableOpacity>\n//     );\n// };\n"],"names":["React","_a","ch","_b","_c"],"mappings":"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"}
+{"version":3,"file":"DirectChannels.js","sources":["../../../../../src/screens/Home/Components/DirectChannels/DirectChannels.tsx"],"sourcesContent":["import { useIsFocused, useFocusEffect } from '@react-navigation/native';\nimport React, { useState, useEffect, useLayoutEffect, useCallback } from 'react';\nimport { TouchableOpacity, Share } from 'react-native';\nimport styles from '../../styles';\nimport {\n    Pressable,\n    View,\n    Image,\n    FlatList,\n    HStack,\n    Icon,\n    Box,\n    Text,\n    Avatar,\n    AvatarFallbackText,\n    AvatarImage,\n    AvatarBadge,\n    AvatarGroup,\n    Badge,\n    Spinner,\n    ButtonText,\n    AddIcon,\n} from '@admin-layout/gluestack-ui-mobile';\nimport more from '../../../../assets/images/more.png';\nimport right from '../../../../assets/images/right.png';\nimport { userSelector } from '@adminide-stack/user-auth0-client';\nimport { useSelector, shallowEqual } from 'react-redux';\nimport { useNavigation } from '@react-navigation/native';\nimport { startCase, orderBy } from 'lodash-es';\nimport { RoomType } from 'common';\nimport { useGetChannelsByUserQuery } from 'common/graphql';\nimport { NavigationRoutes } from '../../../../constants';\nimport { MaterialIcons } from '@expo/vector-icons';\nimport { useDrawerLayout } from '../../../../hooks';\nimport colors from 'tailwindcss/colors';\n\nconst DirectChannels = ({ userDirectChannels, loading, reFetchDirectChannels }: any) => {\n    const navigation = useNavigation<any>();\n    const [expandableMessage, setExpendableMessage] = useState(true);\n    const [directChannels, setDirectChannels] = useState<any>(null);\n    const user = useSelector(userSelector, shallowEqual);\n    const isFocused = useIsFocused();\n    const { orgName } = useDrawerLayout();\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Only fetch direct channels when first focused or when we don't have any\n            if (!userDirectChannels || userDirectChannels.length === 0) {\n                reFetchDirectChannels();\n            }\n\n            return () => {\n                // Do something when the screen is unfocused\n                // Useful for cleanup functions\n            };\n        }, [reFetchDirectChannels, userDirectChannels]),\n    );\n\n    React.useEffect(() => {\n        if (userDirectChannels) setDirectChannels(userDirectChannels);\n    }, [userDirectChannels]);\n\n    const organizationDirectChannels = React.useMemo(() => {\n        //Direct channel\n        if (!directChannels) return null;\n        return (\n            (directChannels &&\n                orderBy(\n                    directChannels\n                        ?.filter((i: any) => i.type == RoomType.Direct)\n                        ?.filter((c: any) =>\n                            c?.members?.some(\n                                // (u: any) => u !== null && u?.user?.id != user?.id && u.user.__typename == 'UserAccount',\n                                (u: any) =>\n                                    c?.members?.length == 1 && c?.members?.filter((ch: any) => ch?.user?.id == user?.id)\n                                        ? u !== null\n                                        : u !== null && u?.user?.id != user?.id,\n                            ),\n                        ),\n                    [(ch: any) => ch?.members?.map((u: any) => u?.user?.givenName?.toLowerCase())],\n                    ['asc'],\n                )) ||\n            []\n        );\n    }, [directChannels]);\n\n    const openUserInbox = React.useCallback(\n        (id: any, title: any, members: any, type?: any) => {\n            const channelMembers =\n                members\n                    // ?.filter((ch: any) => ch?.user?.id != user?.id && ch?.user?.__typename == 'UserAccount')\n                    ?.filter((ch: any) =>\n                        members?.length == 1 && members?.filter((ch: any) => ch?.user?.id == user?.id)\n                            ? ch !== null\n                            : ch !== null && ch?.user?.id != user?.id,\n                    )\n                    ?.map((m: any) => m?.user) ?? null;\n\n            const memberImage = channelMembers?.length == 1 ? channelMembers[0]?.picture ?? null : null;\n\n            const membersNameAsTitle =\n                channelMembers\n                    ?.map((u: any) => u?.givenName ?? '')\n                    ?.filter((mu: any) => mu)\n                    ?.join(', ') ?? '';\n\n            navigation.navigate(NavigationRoutes.DialogMessages, {\n                channelId: id?.toString(),\n                title: membersNameAsTitle?.toString() || title?.toString(),\n                totalMembers: members?.length,\n                memberImage: memberImage,\n                channelType: type,\n                orgName: orgName,\n                hideTabBar: true,\n            });\n        },\n        [orgName],\n    );\n\n    const renderChannelMemebers = useCallback(({ item }: any) => {\n        const channelMembers =\n            item?.members\n                // ?.filter((ch: any) => ch?.user?.id != user?.id && ch?.user?.__typename == 'UserAccount')\n                ?.filter((ch: any) =>\n                    item?.members?.length == 1 && item?.members?.filter((ch: any) => ch?.user?.id == user?.id)\n                        ? ch !== null\n                        : ch !== null && ch?.user?.id != user?.id,\n                )\n                ?.map((m: any) => m?.user) ?? null;\n\n        let title =\n            channelMembers\n                ?.map((u: any) =>\n                    u?.id == user?.id\n                        ? u?.givenName + ' ' + u?.familyName + ' (you)'\n                        : channelMembers?.length > 1\n                        ? u?.givenName ?? ''\n                        : u?.givenName ?? '' + ' ' + u?.familyName ?? '',\n                )\n                ?.filter((mu: any) => mu)\n                ?.join(', ') ?? '';\n\n        return (\n            <TouchableOpacity key={item.id} onPress={() => openUserInbox(item.id, 'Inbox', item?.members, item?.type)}>\n                <Box style={{ paddingVertical: 8, paddingHorizontal: 1, marginVertical: 1 }}>\n                    <HStack className=\"w-full flex-1 items-center\" space={'sm'}>\n                        <Avatar key={'direct-channel-profile-key'} size={'sm'} className=\"bg-transparent\">\n                            <AvatarFallbackText>{startCase(channelMembers[0]?.username?.charAt(0))}</AvatarFallbackText>\n                            {/* <AvatarImage\n                                alt=\"image\"\n                                size={'md'}\n                                style={{\n                                    // width: 25,\n                                    // height: 25,\n                                    borderRadius: 6,\n                                    borderWidth: 2,\n                                    borderColor: '#fff',\n                                }}\n                                source={{\n                                    uri: channelMembers[0]?.picture,\n                                }}\n                            /> */}\n                            {channelMembers?.length > 1 ? (\n                                <AvatarBadge\n                                    style={{ width: '100%', height: '100%' }}\n                                    className=\"items-center justify-center bg-gray-200 rounded-md\"\n                                >\n                                    <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#000' }}>\n                                        {channelMembers?.length}\n                                    </Text>\n                                </AvatarBadge>\n                            ) : (\n                                <>\n                                    <AvatarImage\n                                        alt=\"image\"\n                                        style={{\n                                            // width: 25,\n                                            // height: 25,\n                                            borderRadius: 'none',\n                                            borderWidth: 1,\n                                            borderColor: '#fff',\n                                            borderBottomRightRadius: 15,\n                                        }}\n                                        source={{\n                                            uri: channelMembers[0]?.picture,\n                                        }}\n                                        className=\"rounded-lg\"\n                                    />\n                                    <AvatarBadge\n                                        style={{ width: 10, height: 10, bottom: -1 }}\n                                        className=\"bg-green-600\"\n                                    />\n                                </>\n                            )}\n                        </Avatar>\n                        <Text style={{ fontSize: 15, fontWeight: '500' }} className=\"text-gray-800\">\n                            {title}\n                        </Text>\n                    </HStack>\n                </Box>\n            </TouchableOpacity>\n        );\n    }, []);\n\n    return (\n        <View style={[styles.channelContainer, { paddingHorizontal: 10 }]}>\n            <TouchableOpacity\n                style={[styles.headingContainer, { paddingVertical: 8, marginBottom: 4 }]}\n                onPress={() => setExpendableMessage(!expandableMessage)}\n            >\n                <HStack className=\"flex-1 items-center justify-between\">\n                    <Text style={{ fontSize: 15, fontWeight: '600', color: '#1f2937' }}>Direct Messages</Text>\n                    {expandableMessage ? (\n                        <MaterialIcons color={'#4b5563'} name={'keyboard-arrow-up'} size={22} />\n                    ) : (\n                        <MaterialIcons color={'#4b5563'} name={'keyboard-arrow-down'} size={22} />\n                    )}\n                </HStack>\n            </TouchableOpacity>\n\n            {expandableMessage && (\n                <FlatList\n                    style={{ paddingVertical: 4 }}\n                    data={\n                        organizationDirectChannels && organizationDirectChannels?.length > 0\n                            ? organizationDirectChannels\n                            : []\n                    }\n                    renderItem={renderChannelMemebers}\n                    key={'direct-messages-key'}\n                    keyExtractor={(item, index) => String(index)}\n                    contentContainerStyle={{\n                        flex: 1,\n                    }}\n                    ListEmptyComponent={() => {\n                        return (\n                            <Box className=\"py-2 px-1\">\n                                {loading ? (\n                                    <Spinner color={colors.blue[500]} />\n                                ) : (\n                                    <Text color={colors.gray[600]}>No members found</Text>\n                                )}\n                            </Box>\n                        );\n                    }}\n                    ListFooterComponent={() => {\n                        return (\n                            <>\n                                <TouchableOpacity\n                                    onPress={() => navigation.navigate(NavigationRoutes.SearchAddChannel, { orgName })}\n                                >\n                                    <Box className=\"pr-10 py-2\">\n                                        <HStack className=\"w-full flex-1 items-center\" space={'sm'}>\n                                            <Avatar\n                                                key={'direct-start-new-msg-key'}\n                                                size={'sm'}\n                                                className=\"bg-gray-100\"\n                                            >\n                                                <Icon\n                                                    as={AddIcon}\n                                                    style={{ width: '70%', height: '70%' }}\n                                                    color={colors.gray[700]}\n                                                />\n                                            </Avatar>\n                                            <Text style={{ fontSize: 14, fontWeight: '500' }} color={colors.gray[800]}>\n                                                Start a new message\n                                            </Text>\n                                        </HStack>\n                                    </Box>\n                                </TouchableOpacity>\n                            </>\n                        );\n                    }}\n                />\n            )}\n        </View>\n    );\n};\n\nexport default React.memo(DirectChannels);\n\n// -//last added//- const renderChannelMemebers = ({ item }: any) => {\n//     const channelMembers =\n//         item?.members\n//             ?.filter((ch: any) => ch?.user?.id != user?.id && ch?.user?.__typename == 'UserAccount')\n//             ?.map((m: any) => m?.user) ?? null;\n\n//     let title =\n//         channelMembers\n//             ?.map((u: any) => u?.givenName + ' ' + u?.familyName ?? '')\n//             ?.filter((mu: any) => mu)\n//             ?.join(', ') ?? '';\n\n//     return (\n//         <TouchableOpacity key={item.id} onPress={() => openUserInbox(item.id, 'Inbox', item?.members)}>\n//             <View style={{ paddingHorizontal: 20, paddingVertical: 4 }}>\n//                 <HStack w={'100%'} space={1} flex={1} alignItems={'center'}>\n//                     <Box flex={0.1} alignItems={'flex-start'}>\n//                         <Avatar.Group\n//                             _avatar={{\n//                                 size: 'sm',\n//                                 bg: 'transparent',\n//                             }}\n//                         >\n//                             {channelMembers &&\n//                                 channelMembers?.length > 0 &&\n//                                 channelMembers?.slice(0, 2)?.map((ch: any, i: Number) => (\n//                                     <Avatar\n//                                         key={'home-key' + i}\n//                                         size={'sm'}\n//                                         bg={'transparent'}\n//                                         top={i == 1 ? 2 : 0}\n//                                         zIndex={i == 1 ? 5 : 1}\n//                                         _image={{\n//                                             style: {\n//                                                 width: 25,\n//                                                 height: 25,\n//                                                 borderRadius: 6,\n//                                                 borderWidth: 2,\n//                                                 borderColor: '#fff',\n//                                             },\n//                                         }}\n//                                         // _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}\n//                                         source={{\n//                                             uri: ch?.picture,\n//                                         }}\n//                                     >\n//                                         {startCase(ch?.username?.charAt(0))}\n//                                         {channelMembers?.length == 1 && (\n//                                             <Avatar.Badge bg=\"green.800\" bottom={-4} right={-4} />\n//                                         )}\n//                                     </Avatar>\n//                                 ))}\n//                         </Avatar.Group>\n//                     </Box>\n//                     <Box flex={0.9}>\n//                         <Text fontSize={16} fontWeight={400}>\n//                             {title}\n//                         </Text>\n//                     </Box>\n//                 </HStack>\n//             </View>\n//         </TouchableOpacity>\n//     );\n// };\n\n// const renderChannelMemebers = ({ item }: any) => {\n//     const title = item.givenName + ' ' + item.familyName;\n//     const matches: any = title.match(/\\b(\\w)/g);\n//     const acronym: any = matches.join('').substring(0, 2); // JSON\n//     return (\n//         <TouchableOpacity key={item.id} onPress={() => openUserInbox(item.channelID, title)}>\n//             <View py={1}>\n//                 <HStack space={2} flex={1} alignItems={'center'}>\n//                     {/* <Image alt={acronym} source={{uri:item.picture}} w={6} h={6} /> */}\n//                     <Avatar\n//                         size={'sm'}\n//                         bg={'transparent'}\n//                         _image={{ style: { width: 25, height: 25, borderRadius: 6 } }}\n//                         source={{ uri: item.picture }}\n//                     >\n//                         {acronym}\n//                         <Avatar.Badge bg=\"green.800\" />\n//                     </Avatar>\n\n//                     <Text fontSize={16} fontWeight={400}>\n//                         {item.givenName} {item.familyName} {user.id == item.id ? '(you)' : ''}\n//                     </Text>\n//                 </HStack>\n//             </View>\n//         </TouchableOpacity>\n//     );\n// };\n"],"names":["React","_a","ch","_b","_c"],"mappings":"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"}

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

@@ -12,10 +12,12 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
   useSelector(userSelector);
   useIsFocused();
   useFocusEffect(React__default.useCallback(() => {
-    refetchTeams();
+    if (!teams || teams.length === 0) {
+      refetchTeams();
+    }
     return () => {
     };
-  }, []));
+  }, [refetchTeams, teams]));
   const organizationTeams = React__default.useMemo(() => {
     var _a;
     return teams && (teams == null ? void 0 : teams.length) && take(orderBy(uniqBy((_a = [...teams]) == null ? void 0 : _a.filter((t) => (t == null ? void 0 : t.orgName) === orgName), ({