@messenger-box/slack-ui-mobile 10.0.3-alpha.36 → 10.0.3-alpha.38

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

@@ -1,4 +1,23 @@
-import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import React__default,{useState,useContext,useRef,useCallback,useEffect,useMemo}from'react';import {TouchableOpacity}from'react-native';import {HStack,Box,Text,Avatar,AvatarFallbackText,AvatarImage,Spinner,Icon,AddIcon,View,FlatList}from'@admin-layout/gluestack-ui-mobile';import {userSelector}from'@adminide-stack/user-auth0-client';import {useSelector,shallowEqual}from'react-redux';import {orderBy}from'lodash-es';import {RoomType}from'common';import {useGetChannelsByUserQuery,useAddDirectChannelMutation}from'common/graphql';import'../../../../constants/device.js';import'../../../../constants/globalStyles.js';import'../../../../constants/Layout.js';import {NavigationRoutes}from'../../../../constants/routes.js';import {Feather,MaterialIcons}from'@expo/vector-icons';import'expo-font';import'expo-splash-screen';import {useDrawerLayout}from'../../../../hooks/useDrawerLayout.js';import'../../../../hooks/useExpoNotificationProvider.js';import'./directChannels-xstate.js';import {useSafeDirectChannelsMachine}from'./useSafeDirectChannelsMachine.js';import {RefetchContext}from'../../HomeScreen.js';const DirectChannels = () => {
+import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import React__default,{useState,useContext,useRef,useCallback,useEffect,useMemo}from'react';import {TouchableOpacity}from'react-native';import {HStack,Avatar,AvatarFallbackText,AvatarImage,Text,Box,FlatList}from'@admin-layout/gluestack-ui-mobile';import {userSelector}from'@adminide-stack/user-auth0-client';import {useSelector,shallowEqual}from'react-redux';import {orderBy}from'lodash-es';import {RoomType}from'common';import {useGetChannelsByUserQuery,useAddDirectChannelMutation,GetChannelsByUserDocument}from'common/graphql';import'../../../../constants/device.js';import'../../../../constants/globalStyles.js';import'../../../../constants/Layout.js';import {NavigationRoutes}from'../../../../constants/routes.js';import {Feather,MaterialIcons,FontAwesome}from'@expo/vector-icons';import'expo-font';import'expo-splash-screen';import {useDrawerLayout}from'../../../../hooks/useDrawerLayout.js';import'../../../../hooks/useExpoNotificationProvider.js';import colors from'tailwindcss/colors';import {RefetchContext}from'../../HomeScreen.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const DirectChannels = () => {
   const navigation = useNavigation();
   const [expandableMessage, setExpendableMessage] = useState(true);
   const user = useSelector(userSelector, shallowEqual);
@@ -9,14 +28,15 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
   const {
     shouldRefetch
   } = useContext(RefetchContext);
+  const [state, setState] = useState({
+    directChannels: [],
+    error: null
+  });
   const reFetchDirectChannelsRef = useRef(() => {
   });
-  const [state, send] = useSafeDirectChannelsMachine();
   const {
     data: userDirectChannels,
-    loading: userDirectChannelsLoading,
-    refetch: reFetchUserDirectChannels,
-    error: userDirectChannelsError
+    refetch: reFetchUserDirectChannels
   } = useGetChannelsByUserQuery({
     variables: {
       criteria: {
@@ -29,48 +49,71 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
     fetchPolicy: "cache-and-network",
     nextFetchPolicy: "cache-first",
     onCompleted(data) {
-      send({
-        type: "SET_DIRECT_CHANNELS",
-        data: {
-          directChannels: (data == null ? void 0 : data.channelsByUser) || []
-        }
-      });
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        directChannels: (data == null ? void 0 : data.channelsByUser) || []
+      }));
     },
     onError(error) {
       const isChannelServiceError = error.message.includes("Service 'ChannelService.getAll' is not found");
       const errorMessage = isChannelServiceError ? "Channel service is temporarily unavailable. Please try again later." : error.message;
-      send({
-        type: "ERROR",
-        data: {
-          message: errorMessage
-        }
-      });
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        error: errorMessage
+      }));
     },
     skip: !orgName
   });
-  const [addDirectChannel, {
-    loading: addDirectChannelLoading
-  }] = useAddDirectChannelMutation({
+  const [addDirectChannel] = useAddDirectChannelMutation({
     onCompleted: () => {
       reFetchDirectChannelsRef.current();
     },
     onError: (error) => {
-      send({
-        type: "ERROR",
-        data: {
-          message: error.message
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        error: error.message
+      }));
+    },
+    update: (cache, {
+      data
+    }) => {
+      try {
+        if (data == null ? void 0 : data.createDirectChannel) {
+          const existingData = cache.readQuery({
+            query: GetChannelsByUserDocument,
+            variables: {
+              criteria: {
+                orgName,
+                type: RoomType.Direct,
+                team: null
+              },
+              limit: 21
+            }
+          });
+          if (existingData == null ? void 0 : existingData.channelsByUser) {
+            const channelExists = existingData.channelsByUser.some((channel) => channel.id === data.createDirectChannel.id);
+            if (!channelExists) {
+              cache.writeQuery({
+                query: GetChannelsByUserDocument,
+                variables: {
+                  criteria: {
+                    orgName,
+                    type: RoomType.Direct,
+                    team: null
+                  },
+                  limit: 21
+                },
+                data: {
+                  channelsByUser: [data.createDirectChannel, ...existingData.channelsByUser]
+                }
+              });
+            }
+          }
         }
-      });
+      } catch (err) {
+        console.error("Error updating cache after adding direct channel:", err);
+      }
     }
   });
   const reFetchDirectChannels = useCallback(() => {
-    if (state.context.directChannelsLoading) {
-      return;
-    }
     if (orgName) {
-      send({
-        type: "REFETCH_DIRECT_CHANNELS"
-      });
       reFetchUserDirectChannels({
         criteria: {
           orgName,
@@ -81,22 +124,16 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
       }).then((res) => {
         var _a, _b, _c, _d;
         if ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.channelsByUser) {
-          send({
-            type: "SET_DIRECT_CHANNELS",
-            data: {
-              directChannels: res.data.channelsByUser
-            }
-          });
+          setState((prev) => __spreadProps(__spreadValues({}, prev), {
+            directChannels: res.data.channelsByUser
+          }));
         }
         if (((_b = res == null ? void 0 : res.data) == null ? void 0 : _b.channelsByUser) && (user == null ? void 0 : user.id)) {
           const filteredChannels = (_d = (_c = res == null ? void 0 : res.data) == null ? void 0 : _c.channelsByUser) == null ? void 0 : _d.filter((channel) => {
             var _a2, _b2;
             return channel.members.length === 1 && ((_b2 = (_a2 = channel.members[0]) == null ? void 0 : _a2.user) == null ? void 0 : _b2.id) === (user == null ? void 0 : user.id);
           });
-          if (!(filteredChannels == null ? void 0 : filteredChannels.length) && !addDirectChannelLoading) {
-            send({
-              type: "ADD_DIRECT_CHANNEL"
-            });
+          if (!(filteredChannels == null ? void 0 : filteredChannels.length)) {
             addDirectChannel({
               variables: {
                 receiver: [user.id],
@@ -110,194 +147,113 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
         }
       }).catch((error) => {
         const isChannelServiceError = error.message && error.message.includes("Service 'ChannelService.getAll' is not found");
-        const errorMessage = isChannelServiceError ? "Direct Channels is temporarily unavailable. Please try again later." : error.message || "Failed to fetch direct channels";
-        send({
-          type: "ERROR",
-          data: {
-            message: errorMessage
-          }
-        });
+        const errorMessage = isChannelServiceError ? "Direct messages are temporarily unavailable. Please try again later." : error.message || "Failed to fetch direct messages";
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          error: errorMessage
+        }));
       });
     }
-  }, [orgName, user, addDirectChannelLoading, send, state.context.directChannelsLoading, reFetchUserDirectChannels, addDirectChannel]);
+  }, [orgName, user == null ? void 0 : user.id, reFetchUserDirectChannels, addDirectChannel]);
   useEffect(() => {
     reFetchDirectChannelsRef.current = reFetchDirectChannels;
   }, [reFetchDirectChannels]);
   useEffect(() => {
-    if (orgName) {
-      send({
-        type: "INITIAL_CONTEXT",
-        data: {
-          orgName
-        }
-      });
-    }
     return () => {
-      send({
-        type: "CLEAR_DATA"
-      });
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        directChannels: []
+      }));
     };
-  }, [orgName, send]);
+  }, [orgName]);
   useEffect(() => {
     if (shouldRefetch && orgName) {
       reFetchDirectChannels();
     }
   }, [shouldRefetch, orgName, reFetchDirectChannels]);
   useFocusEffect(useCallback(() => {
-    if (orgName && (!state.context.directChannels || state.context.directChannels.length === 0)) {
+    if (orgName) {
       reFetchDirectChannels();
     }
-  }, [orgName, reFetchDirectChannels, state.context.directChannels]));
+  }, [orgName]));
   const organizationDirectChannels = useMemo(() => {
     var _a, _b;
-    if (!state.context.directChannels)
-      return [];
-    return orderBy((_b = (_a = state.context.directChannels) == null ? void 0 : _a.filter((i) => i.type === RoomType.Direct)) == null ? void 0 : _b.filter((c) => {
-      var _a2;
-      return (_a2 = c == null ? void 0 : c.members) == null ? void 0 : _a2.some((u) => {
-        var _a3, _b2, _c;
-        return ((_a3 = c == null ? void 0 : c.members) == null ? void 0 : _a3.length) === 1 && ((_b2 = c == null ? void 0 : c.members) == null ? void 0 : _b2.filter((ch) => {
-          var _a4;
-          return ((_a4 = ch == null ? void 0 : ch.user) == null ? void 0 : _a4.id) === (user == null ? void 0 : user.id);
-        }).length) > 0 ? u !== null : u !== null && ((_c = u == null ? void 0 : u.user) == null ? void 0 : _c.id) !== (user == null ? void 0 : user.id);
-      });
-    }), [(ch) => {
+    return state.directChannels && ((_a = state.directChannels) == null ? void 0 : _a.length) && orderBy((_b = [...state.directChannels]) == null ? void 0 : _b.filter((i) => i.type === RoomType.Direct), [(ch) => {
       var _a2, _b2;
-      return (_b2 = (_a2 = ch == null ? void 0 : ch.members) == null ? void 0 : _a2.filter((m) => m == null ? void 0 : m.user)) == null ? void 0 : _b2.map((u) => {
-        var _a3, _b3;
-        return (_b3 = (_a3 = u == null ? void 0 : u.user) == null ? void 0 : _a3.givenName) == null ? void 0 : _b3.toLowerCase();
-      });
+      return ch.members && ch.members.length > 0 ? (_b2 = (_a2 = ch.members[0]) == null ? void 0 : _a2.user) == null ? void 0 : _b2.givenName : "";
     }], ["asc"]) || [];
-  }, [state.context.directChannels, user == null ? void 0 : user.id]);
-  const openUserInbox = useCallback((id, title, members, type) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const channelMembers = (_b = (_a = members == null ? void 0 : members.filter((ch) => {
-      var _a2;
-      return (members == null ? void 0 : members.length) === 1 && (members == null ? void 0 : members.filter((mem) => {
-        var _a3;
-        return ((_a3 = mem == null ? void 0 : mem.user) == null ? void 0 : _a3.id) === (user == null ? void 0 : user.id);
-      }).length) > 0 ? ch !== null : ch !== null && ((_a2 = ch == null ? void 0 : ch.user) == null ? void 0 : _a2.id) !== (user == null ? void 0 : user.id);
-    })) == null ? void 0 : _a.map((m) => m == null ? void 0 : m.user)) != null ? _b : null;
-    const memberImage = (channelMembers == null ? void 0 : channelMembers.length) === 1 ? (_d = (_c = channelMembers[0]) == null ? void 0 : _c.picture) != null ? _d : null : null;
-    const membersNameAsTitle = (_g = (_f = (_e = channelMembers == null ? void 0 : channelMembers.map((u) => {
-      var _a2;
-      return (_a2 = u == null ? void 0 : u.givenName) != null ? _a2 : "";
-    })) == null ? void 0 : _e.filter((mu) => mu)) == null ? void 0 : _f.join(", ")) != null ? _g : "";
+  }, [state.directChannels]);
+  const openInbox = useCallback((id, title, totalMembers, type) => {
     navigation.navigate(NavigationRoutes.DialogMessages, {
       channelId: id == null ? void 0 : id.toString(),
-      title: (membersNameAsTitle == null ? void 0 : membersNameAsTitle.toString()) || (title == null ? void 0 : title.toString()),
-      totalMembers: members == null ? void 0 : members.length,
-      memberImage,
+      title: title == null ? void 0 : title.toString(),
+      totalMembers,
       channelType: type,
       orgName,
       hideTabBar: true
     });
-  }, [orgName, navigation, user == null ? void 0 : user.id]);
+  }, [orgName, navigation]);
+  const renderDirectChannelItem = useCallback(({
+    item
+  }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const isSelfDM = ((_a = item.members) == null ? void 0 : _a.length) === 1 && ((_d = (_c = (_b = item.members) == null ? void 0 : _b[0]) == null ? void 0 : _c.user) == null ? void 0 : _d.id) === (user == null ? void 0 : user.id);
+    const member = ((_g = (_f = (_e = item.members) == null ? void 0 : _e.filter((m) => {
+      var _a2;
+      return ((_a2 = m == null ? void 0 : m.user) == null ? void 0 : _a2.id) !== (user == null ? void 0 : user.id);
+    })) == null ? void 0 : _f[0]) == null ? void 0 : _g.user) || ((_i = (_h = item.members) == null ? void 0 : _h[0]) == null ? void 0 : _i.user);
+    const getUserName = () => {
+      if (isSelfDM) {
+        return (user == null ? void 0 : user.givenName) || (user == null ? void 0 : user.username) || "You";
+      }
+      return (member == null ? void 0 : member.givenName) || (member == null ? void 0 : member.username) || "Unknown";
+    };
+    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => {
+      var _a2;
+      return openInbox(item.id, getUserName(), (_a2 = item.members) == null ? void 0 : _a2.length, item.type);
+    }, style: {
+      paddingVertical: 2,
+      paddingHorizontal: 12
+    } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "items-center" }, /* @__PURE__ */ React__default.createElement(Avatar, { size: "xs", style: {
+      backgroundColor: getUserAvatarColor(getUserName())
+    } }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, getUserName()), (member == null ? void 0 : member.picture) && /* @__PURE__ */ React__default.createElement(AvatarImage, { source: {
+      uri: member.picture
+    }, alt: getUserName() })), /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-900 flex-1 text-base" }, getUserName(), isSelfDM && " (you)")));
+  }, [user, openInbox]);
   const getUserAvatarColor = (name) => {
-    const colors2 = [
-      "#4a154b",
-      "#36c5f0",
-      "#2eb67d",
-      "#ecb22e",
-      "#e01e5a",
-      "#8d44ad",
-      "#3498db",
-      "#1abc9c",
-      "#f39c12",
-      "#e74c3c"
+    const colorOptions = [
+      "#E57373",
+      "#F06292",
+      "#BA68C8",
+      "#9575CD",
+      "#7986CB",
+      "#64B5F6",
+      "#4FC3F7",
+      "#4DD0E1",
+      "#4DB6AC",
+      "#81C784",
+      "#AED581",
+      "#DCE775",
+      "#FFD54F",
+      "#FFB74D",
+      "#FF8A65"
     ];
     let hash = 0;
     for (let i = 0; i < name.length; i++) {
       hash = name.charCodeAt(i) + ((hash << 5) - hash);
     }
-    return colors2[Math.abs(hash) % colors2.length];
+    hash = Math.abs(hash);
+    return colorOptions[hash % colorOptions.length];
   };
-  const renderChannelMemebers = useCallback(({
-    item
-  }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    const validMembers = ((_a = item == null ? void 0 : item.members) == null ? void 0 : _a.filter((m) => m && m.user)) || [];
-    const channelMembers = (_c = (_b = validMembers == null ? void 0 : validMembers.filter((ch) => {
-      var _a2;
-      return validMembers.length === 1 && validMembers.filter((mem) => {
-        var _a3;
-        return ((_a3 = mem == null ? void 0 : mem.user) == null ? void 0 : _a3.id) === (user == null ? void 0 : user.id);
-      }).length > 0 ? ch !== null : ch !== null && ((_a2 = ch == null ? void 0 : ch.user) == null ? void 0 : _a2.id) !== (user == null ? void 0 : user.id);
-    })) == null ? void 0 : _b.map((m) => m == null ? void 0 : m.user)) != null ? _c : null;
-    if (!channelMembers || channelMembers.length === 0) {
-      return null;
-    }
-    const isGroupChat = channelMembers.length > 1;
-    let title = (_f = (_e = (_d = channelMembers == null ? void 0 : channelMembers.map((u) => {
-      var _a2, _b2;
-      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)" : ((_a2 = u == null ? void 0 : u.givenName) != null ? _a2 : "") + " " + ((_b2 = u == null ? void 0 : u.familyName) != null ? _b2 : "");
-    })) == null ? void 0 : _d.filter((mu) => mu)) == null ? void 0 : _e.join(", ")) != null ? _f : "";
-    let orgNamePart = ((_g = item == null ? void 0 : item.team) == null ? void 0 : _g.displayName) || "smarni";
-    if (isGroupChat) {
-      title = channelMembers.map((u) => (u == null ? void 0 : u.givenName) || (u == null ? void 0 : u.username) || "").filter(Boolean).join(", ");
-      title = `${title}, ${orgNamePart}`;
-    }
-    const displayName = ((_h = channelMembers[0]) == null ? void 0 : _h.givenName) || ((_i = channelMembers[0]) == null ? void 0 : _i.username) || "?";
-    const firstInitial = displayName.charAt(0).toUpperCase();
-    const avatarBgColor = getUserAvatarColor(displayName);
-    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { key: item.id, onPress: () => openUserInbox(item.id, "Inbox", validMembers, item == null ? void 0 : item.type), style: {
-      paddingVertical: 8,
-      paddingHorizontal: 12
-    } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", style: {
-      alignItems: "center"
-    } }, isGroupChat ? /* @__PURE__ */ React__default.createElement(Box, { style: {
-      width: 25,
-      height: 25,
-      borderRadius: "none",
-      backgroundColor: "#E8E8E8",
-      alignItems: "center",
-      justifyContent: "center"
-    }, className: "rounded-lg" }, /* @__PURE__ */ React__default.createElement(Text, { style: {
-      fontWeight: "600",
-      color: "#000"
-    } }, channelMembers.length)) : /* @__PURE__ */ React__default.createElement(Box, { style: {
-      position: "relative"
-    } }, /* @__PURE__ */ React__default.createElement(Avatar, { size: "md", style: {
-      width: 25,
-      height: 25,
-      borderRadius: 25,
-      backgroundColor: avatarBgColor
-    }, className: "rounded-lg" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, { style: {
-      color: "#FFF",
-      fontWeight: "600"
-    } }, firstInitial), ((_j = channelMembers[0]) == null ? void 0 : _j.picture) && /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: firstInitial, source: {
-      uri: (_k = channelMembers[0]) == null ? void 0 : _k.picture
-    }, style: {
-      borderRadius: "none"
-    }, className: "rounded-lg" })), /* @__PURE__ */ React__default.createElement(Box, { style: {
-      position: "absolute",
-      width: 8,
-      height: 8,
-      borderRadius: 4,
-      backgroundColor: "#2EB67D",
-      borderWidth: 1,
-      borderColor: "#FFF",
-      bottom: 0,
-      right: 0
-    } })), /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-900 flex-1 text-base" }, title)));
-  }, [openUserInbox, user == null ? void 0 : user.id]);
   const ListEmptyComponent = useCallback(() => {
     return /* @__PURE__ */ React__default.createElement(Box, { style: {
       padding: 12
-    } }, state.context.directChannelsLoading ? /* @__PURE__ */ React__default.createElement(Box, { style: {
-      alignItems: "center",
-      paddingVertical: 16
-    } }, /* @__PURE__ */ React__default.createElement(Spinner, { color: "#4A154B", size: "small" }), /* @__PURE__ */ React__default.createElement(Text, { style: {
-      marginTop: 8,
-      color: "#616061"
-    } }, "Loading messages...")) : state.context.error ? /* @__PURE__ */ React__default.createElement(Box, { style: {
+    } }, state.error ? /* @__PURE__ */ React__default.createElement(Box, { style: {
       padding: 8,
       backgroundColor: "#FFF4F4",
       borderRadius: 4
     } }, /* @__PURE__ */ React__default.createElement(Text, { color: "#E01E5A", style: {
       marginBottom: 8,
       fontWeight: "500"
-    } }, state.context.error), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: reFetchDirectChannels }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", style: {
+    } }, state.error), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: reFetchDirectChannels }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", style: {
       alignItems: "center"
     } }, /* @__PURE__ */ React__default.createElement(Feather, { name: "refresh-cw", color: "#1264A3", size: 16 }), /* @__PURE__ */ React__default.createElement(Text, { color: "#1264A3", style: {
       fontWeight: "500"
@@ -309,59 +265,35 @@ import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native'
       marginBottom: 8,
       borderRadius: 24,
       backgroundColor: "#F8F8F8"
-    } }, /* @__PURE__ */ React__default.createElement(Feather, { name: "message-circle", color: "#616061", size: 20 })), /* @__PURE__ */ React__default.createElement(Text, { style: {
+    } }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { name: "person-outline", color: "#616061", size: 20 })), /* @__PURE__ */ React__default.createElement(Text, { style: {
       color: "#616061",
       textAlign: "center"
     } }, "No direct messages yet")));
-  }, [state.context.directChannelsLoading, state.context.error, reFetchDirectChannels]);
+  }, [state.error, reFetchDirectChannels]);
   const ListFooterComponent = useCallback(() => {
-    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => navigation.navigate(NavigationRoutes.SearchAddChannel, {
+    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => navigation.navigate(NavigationRoutes.AddPeople, {
       orgName
     }), style: {
-      paddingVertical: 8,
+      paddingVertical: 6,
       paddingHorizontal: 12
-    } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", style: {
-      alignItems: "center"
-    } }, /* @__PURE__ */ React__default.createElement(Icon, { as: AddIcon, style: {
-      color: "#616061"
-    } }), /* @__PURE__ */ React__default.createElement(Text, { style: {
+    } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "items-center" }, /* @__PURE__ */ React__default.createElement(Feather, { color: "#616061", name: "plus", size: 18 }), /* @__PURE__ */ React__default.createElement(Text, { style: {
       fontSize: 16,
       color: "#616061"
-    } }, "Start a new message")));
-  }, [navigation, orgName]);
+    } }, "Add People")));
+  }, [orgName, navigation]);
   const SectionHeader = useCallback(() => {
-    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: {
-      paddingVertical: 8,
-      paddingHorizontal: 12,
-      marginBottom: 4
-    }, onPress: () => setExpendableMessage(!expandableMessage) }, /* @__PURE__ */ React__default.createElement(HStack, { style: {
-      alignItems: "center",
-      justifyContent: "space-between"
-    } }, /* @__PURE__ */ React__default.createElement(Text, { style: {
-      fontSize: 17,
-      fontWeight: "700",
+    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => setExpendableMessage(!expandableMessage), style: {
+      paddingVertical: 6,
+      paddingHorizontal: 16
+    } }, /* @__PURE__ */ React__default.createElement(HStack, { className: "justify-between items-center" }, /* @__PURE__ */ React__default.createElement(Text, { className: "font-semibold", style: {
+      fontSize: 15,
       color: "#1D1C1D"
-    } }, "Direct Messages"), /* @__PURE__ */ React__default.createElement(MaterialIcons, { name: expandableMessage ? "keyboard-arrow-up" : "keyboard-arrow-down", color: "#616061", size: 22 })));
+    } }, "Direct Messages"), /* @__PURE__ */ React__default.createElement(FontAwesome, { name: expandableMessage ? "chevron-down" : "chevron-left", color: colors.gray[800], size: 12 })));
   }, [expandableMessage]);
-  return /* @__PURE__ */ React__default.createElement(View, { style: {
-    flex: 1
-  } }, /* @__PURE__ */ React__default.createElement(SectionHeader, null), expandableMessage && /* @__PURE__ */ React__default.createElement(
-    FlatList,
-    {
-      data: organizationDirectChannels,
-      renderItem: renderChannelMemebers,
-      key: "direct-messages-key",
-      keyExtractor: (item) => String(item.id),
-      contentContainerStyle: {
-        flexGrow: 1
-      },
-      ListEmptyComponent,
-      ListFooterComponent,
-      showsVerticalScrollIndicator: false,
-      initialNumToRender: 10,
-      maxToRenderPerBatch: 10,
-      windowSize: 5
-    }
-  ));
-};
-var DirectChannels$1 = React__default.memo(DirectChannels);export{DirectChannels$1 as default};//# sourceMappingURL=DirectChannels.js.map
+  if (!expandableMessage) {
+    return /* @__PURE__ */ React__default.createElement(SectionHeader, null);
+  }
+  return /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(SectionHeader, null), (organizationDirectChannels == null ? void 0 : organizationDirectChannels.length) > 0 ? /* @__PURE__ */ React__default.createElement(FlatList, { keyExtractor: (item) => ((item == null ? void 0 : item.id) || "direct") + "-" + (item == null ? void 0 : item.title), data: organizationDirectChannels, renderItem: renderDirectChannelItem, ListFooterComponent, style: {
+    marginTop: 6
+  }, scrollEnabled: false }) : /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(ListEmptyComponent, null), /* @__PURE__ */ React__default.createElement(ListFooterComponent, null)));
+};export{DirectChannels as default};//# sourceMappingURL=DirectChannels.js.map