@messenger-box/platform-mobile 10.0.3-alpha.18 → 10.0.3-alpha.180

package/lib/screens/inbox/containers/Dialogs.js

@@ -1,4 +1,4 @@
-import React__default,{useRef,useCallback,useEffect,useState,useMemo}from'react';import {Box,FlatList,Center,Spinner,Heading,Input,InputField,Text}from'@admin-layout/gluestack-ui-mobile';import {Ionicons}from'@expo/vector-icons';import {useSelector,useDispatch}from'react-redux';import {useRoute,useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import {orderBy}from'lodash-es';import {DialogsListItem}from'../components/DialogsListItem.js';import {ServiceDialogsListItem}from'../components/ServiceDialogsListItem.js';import {useGetChannelsByUserWithServiceChannelsQuery}from'common/graphql';import {RoomType}from'common';import {userSelector}from'@adminide-stack/user-auth0-client';import {config}from'../config/config.js';import colors from'tailwindcss/colors';import {Actions,BaseState,MainState}from'./workflow/dialogs-xstate.js';var __defProp = Object.defineProperty;
+import React__default,{useState,useRef,useCallback,useMemo,useEffect}from'react';import {Center,Spinner,Text,Box,Heading,Input,InputField,FlatList}from'@admin-layout/gluestack-ui-mobile';import {Ionicons}from'@expo/vector-icons';import {useSelector,shallowEqual}from'react-redux';import {useRoute,useNavigation,useFocusEffect}from'@react-navigation/native';import {DialogItem}from'../components/DialogItem.js';import {useGetChannelsByUserWithLastMessageQuery}from'common/graphql';import {RoomType}from'common';import {userSelector}from'@adminide-stack/user-auth0-client';import {config}from'../config/config.js';import colors from'tailwindcss/colors';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,122 +17,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-function useSafeMachine(machine) {
-  const [state, setState] = useState({
-    context: {
-      channels: [],
-      refreshing: false,
-      loading: false,
-      error: null,
-      searchQuery: "",
-      selectedChannelId: null,
-      channelRole: null,
-      channelFilters: {},
-      supportServices: false
-    },
-    value: "idle"
-  });
-  const send = useCallback((event) => {
-    try {
-      console.log("Dialogs Event received:", event.type);
-      if (event.type === Actions.INITIAL_CONTEXT) {
-        setState((prev) => {
-          var _a, _b, _c, _d;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              channelRole: ((_a = event.data) == null ? void 0 : _a.channelRole) || null,
-              channelFilters: ((_b = event.data) == null ? void 0 : _b.channelFilters) || {},
-              supportServices: ((_c = event.data) == null ? void 0 : _c.supportServices) || false,
-              selectedChannelId: ((_d = event.data) == null ? void 0 : _d.selectedChannelId) || null
-            }),
-            value: BaseState.FetchChannels
-          });
-        });
-      } else if (event.type === Actions.SET_SEARCH_QUERY) {
-        setState((prev) => {
-          var _a;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              searchQuery: ((_a = event.data) == null ? void 0 : _a.searchQuery) || ""
-            })
-          });
-        });
-      } else if (event.type === Actions.REFRESH_CHANNELS) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            refreshing: true
-          }),
-          value: MainState.RefreshChannels
-        }));
-      } else if (event.type === Actions.SELECT_CHANNEL) {
-        setState((prev) => {
-          var _a;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              selectedChannelId: ((_a = event.data) == null ? void 0 : _a.channelId) || null
-            }),
-            value: MainState.SelectChannel
-          });
-        });
-      } else if (event.type === Actions.START_LOADING) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loading: true
-          })
-        }));
-      } else if (event.type === Actions.STOP_LOADING) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loading: false
-          })
-        }));
-      } else if (event.type === "FETCH_CHANNELS_SUCCESS") {
-        setState((prev) => {
-          var _a;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              channels: ((_a = event.data) == null ? void 0 : _a.channels) || [],
-              loading: false,
-              refreshing: false
-            }),
-            value: BaseState.Idle
-          });
-        });
-      } else if (event.type === "REFRESH_CHANNELS_SUCCESS") {
-        setState((prev) => {
-          var _a;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              channels: ((_a = event.data) == null ? void 0 : _a.channels) || [],
-              refreshing: false
-            }),
-            value: BaseState.Idle
-          });
-        });
-      } else if (event.type === "ERROR") {
-        setState((prev) => {
-          var _a;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              error: ((_a = event.data) == null ? void 0 : _a.message) || "An error occurred",
-              loading: false,
-              refreshing: false
-            }),
-            value: BaseState.Error
-          });
-        });
-      }
-    } catch (err) {
-      console.error("Error in send function:", err);
-    }
-  }, []);
-  const stateWithMatches = useMemo(() => {
-    return __spreadProps(__spreadValues({}, state), {
-      matches: (value) => state.value === value
-    });
-  }, [state]);
-  return [stateWithMatches, send];
-}
 const DialogsComponent = (props) => {
   var _a;
   const {
@@ -141,251 +25,213 @@ const DialogsComponent = (props) => {
     supportServices
   } = props;
   const channelFilters = __spreadValues({}, channelFilterProp);
-  channelFilters.type = (_a = channelFilters == null ? void 0 : channelFilters.type) != null ? _a : RoomType.Direct;
+  const channelType = (_a = channelFilters == null ? void 0 : channelFilters.type) != null ? _a : RoomType.Direct;
+  channelFilters.type = supportServices ? [channelType, RoomType.Service] : channelType;
   const {
     params
   } = useRoute();
-  const auth = useSelector(userSelector);
-  useDispatch();
+  const auth = useSelector(userSelector, shallowEqual);
   const navigation = useNavigation();
-  const isFocused = useIsFocused();
+  const [searchQuery, setSearchQuery] = useState("");
   const isMountedRef = useRef(true);
-  const [state, send] = useSafeMachine();
-  useCallback(() => {
-    try {
-      return (state == null ? void 0 : state.context) || {};
-    } catch (error) {
-      console.error("Error accessing state.context:", error);
-      return {};
-    }
-  }, [state]);
-  const safeContextProperty = useCallback((property, defaultValue = null) => {
-    var _a2, _b;
-    try {
-      return (_b = (_a2 = state == null ? void 0 : state.context) == null ? void 0 : _a2[property]) != null ? _b : defaultValue;
-    } catch (error) {
-      console.error(`Error accessing state.context.${property}:`, error);
-      return defaultValue;
-    }
-  }, [state]);
-  useCallback((stateValue) => {
-    var _a2;
-    try {
-      return ((_a2 = state == null ? void 0 : state.matches) == null ? void 0 : _a2.call(state, stateValue)) || false;
-    } catch (error) {
-      console.error(`Error calling state.matches with ${stateValue}:`, error);
-      return false;
-    }
-  }, [state]);
-  const safeSend = useCallback((event) => {
-    try {
-      send(event);
-    } catch (error) {
-      console.error("Error sending event to state machine:", error, event);
-    }
-  }, [send]);
-  const stateRef = useRef(state);
-  useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
+  const focusRefreshRef = useRef(null);
+  const lastRefreshTimeRef = useRef(Date.now());
+  const MIN_REFRESH_INTERVAL = 2e3;
+  const lastNavigationTimestamp = useRef(0);
+  const activeChannelRef = useRef(null);
+  const resetActiveChannelTimeoutRef = useRef(null);
   const {
-    data: userChannels,
-    loading: userChannelsLoading,
-    refetch: getChannelsRefetch
-  } = useGetChannelsByUserWithServiceChannelsQuery({
+    data,
+    loading,
+    refetch,
+    fetchMore,
+    subscribeToMore
+  } = useGetChannelsByUserWithLastMessageQuery({
     variables: {
       role: channelRole,
       criteria: channelFilters,
-      supportServices: supportServices ? true : false,
-      supportServiceCriteria: {
-        type: RoomType.Service
-      }
-    },
-    onCompleted: (data) => {
-      var _a2, _b;
-      if (isMountedRef.current) {
-        const allChannels = [...(_a2 = data == null ? void 0 : data.supportServiceChannels) != null ? _a2 : [], ...(_b = data == null ? void 0 : data.channelsByUser) != null ? _b : []];
-        safeSend({
-          type: "FETCH_CHANNELS_SUCCESS",
-          data: {
-            channels: allChannels
-          }
-        });
-      }
+      // supportServices: false,
+      // supportServices: supportServices ? true : false,
+      // supportServiceCriteria: {
+      //     type: RoomType.Service,
+      // },
+      limit: 15,
+      skip: 0
     },
-    onError: (error) => {
-      if (isMountedRef.current) {
-        safeSend({
-          type: "ERROR",
-          data: {
-            message: error.message
-          }
-        });
-      }
-    }
+    notifyOnNetworkStatusChange: true,
+    fetchPolicy: "cache-and-network"
   });
-  useEffect(() => {
-    console.log("Setting initial context");
-    safeSend({
-      type: Actions.INITIAL_CONTEXT,
-      data: {
-        channelRole,
-        channelFilters: channelFiltersRef.current,
-        supportServices,
-        selectedChannelId: params == null ? void 0 : params.channelId
-      }
+  const processChannels = useCallback((rawChannels = []) => {
+    if (!(rawChannels == null ? void 0 : rawChannels.length)) return [];
+    return rawChannels.filter((c) => {
+      if (!(c == null ? void 0 : c.members)) return false;
+      return c.members.some((member) => (member == null ? void 0 : member.user) && member.user.id !== (auth == null ? void 0 : auth.id) && member.user.__typename === "UserAccount");
     });
+  }, [auth == null ? void 0 : auth.id]);
+  const sortChannels = useCallback((channels2) => {
+    if (!(channels2 == null ? void 0 : channels2.length)) return [];
+    return channels2;
   }, []);
-  const hasRefreshedRef = useRef(false);
-  const channelFiltersRef = useRef(channelFilters);
-  const refreshChannels = useCallback(() => {
-    if (safeContextProperty("refreshing", false)) {
-      console.log("Skipping refresh - already in progress");
-      return Promise.resolve();
+  const handleSelectChannel = useCallback((id, title) => {
+    if (activeChannelRef.current === id) {
+      console.log("\u{1F4F1} Ignoring repeated tap on channel:", id);
+      return;
+    }
+    activeChannelRef.current = id;
+    if (resetActiveChannelTimeoutRef.current) {
+      clearTimeout(resetActiveChannelTimeoutRef.current);
     }
-    console.log("Starting channel refresh");
-    safeSend({
-      type: Actions.REFRESH_CHANNELS
+    resetActiveChannelTimeoutRef.current = setTimeout(() => {
+      activeChannelRef.current = null;
+    }, 2e3);
+    console.log("\u{1F4F1} Navigating to channel:", id);
+    navigation.navigate(config.INBOX_MESSEGE_PATH, {
+      channelId: id,
+      role: channelRole,
+      title,
+      hideTabBar: true,
+      timestamp: (/* @__PURE__ */ new Date()).getTime(),
+      orgName: params == null ? void 0 : params.orgName
     });
-    const currentFilters = channelFiltersRef.current;
-    return getChannelsRefetch({
+  }, [navigation, channelRole]);
+  const handleSelectServiceChannel = useCallback((id, title, postParentId) => {
+    if (activeChannelRef.current === id) {
+      console.log("\u{1F4F1} Ignoring repeated tap on service channel:", id);
+      return;
+    }
+    activeChannelRef.current = id;
+    if (resetActiveChannelTimeoutRef.current) {
+      clearTimeout(resetActiveChannelTimeoutRef.current);
+    }
+    resetActiveChannelTimeoutRef.current = setTimeout(() => {
+      activeChannelRef.current = null;
+    }, 2e3);
+    console.log("\u{1F4F1} Navigating to service channel:", id);
+    navigation.navigate(postParentId || postParentId === 0 ? config.THREAD_MESSEGE_PATH : config.THREADS_PATH, {
+      channelId: id,
       role: channelRole,
-      criteria: currentFilters,
-      supportServices: supportServices ? true : false,
-      supportServiceCriteria: {
-        type: RoomType.Service
-      }
-    }).then((data) => {
-      var _a2, _b, _c, _d;
-      if (isMountedRef.current) {
-        const allChannels = [...(_b = (_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.supportServiceChannels) != null ? _b : [], ...(_d = (_c = data == null ? void 0 : data.data) == null ? void 0 : _c.channelsByUser) != null ? _d : []];
-        console.log(`Refresh completed, found ${allChannels.length} channels`);
-        safeSend({
-          type: "REFRESH_CHANNELS_SUCCESS",
-          data: {
-            channels: allChannels
-          }
-        });
-      }
-    }).catch((error) => {
-      if (isMountedRef.current) {
-        console.error("Channel refresh error:", error.message);
-        safeSend({
-          type: "ERROR",
-          data: {
-            message: error.message
-          }
+      title,
+      postParentId,
+      hideTabBar: true,
+      orgName: params == null ? void 0 : params.orgName
+    });
+  }, [navigation, channelRole]);
+  const handleSearchChange = useCallback((text) => {
+    setSearchQuery(text);
+  }, []);
+  const allChannels = useMemo(() => [...(data == null ? void 0 : data.channelsByUser) || []], [data]);
+  const channels = useMemo(() => sortChannels(processChannels(allChannels)), [allChannels, processChannels, sortChannels]);
+  const displayChannels = useMemo(() => {
+    if (!searchQuery.trim()) return channels;
+    const query = searchQuery.toLowerCase();
+    return channels.filter((channel) => {
+      if (channel.title && channel.title.toLowerCase().includes(query)) return true;
+      if (channel.members) {
+        return channel.members.some((member) => {
+          const user = member == null ? void 0 : member.user;
+          if (!user) return false;
+          const fullName = `${user.givenName || ""} ${user.familyName || ""}`.toLowerCase();
+          return fullName.includes(query) || user.username && user.username.toLowerCase().includes(query);
         });
       }
+      return false;
     });
-  }, [channelRole, supportServices, getChannelsRefetch, safeSend, safeContextProperty]);
+  }, [channels, searchQuery]);
+  const renderItem = useCallback(({
+    item: channel
+  }) => {
+    const key = `${channel.type === RoomType.Service ? "service" : "direct"}-${channel.id}`;
+    return /* @__PURE__ */ React__default.createElement(DialogItem, { key, onOpen: (channel == null ? void 0 : channel.type) === RoomType.Service ? handleSelectServiceChannel : handleSelectChannel, currentUser: auth, channel });
+  }, [auth, handleSelectChannel, handleSelectServiceChannel]);
+  const ListFooterComponent = useMemo(() => loading ? /* @__PURE__ */ React__default.createElement(Center, { className: "py-4" }, /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500], size: "small" })) : null, [loading]);
+  const ListEmptyComponent = useMemo(() => {
+    if (loading && displayChannels.length === 0) {
+      return /* @__PURE__ */ React__default.createElement(Center, { className: "flex-1 justify-center items-center", style: {
+        height: 300
+      } }, /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500], size: "large" }), /* @__PURE__ */ React__default.createElement(Text, { className: "mt-4 text-gray-500" }, "Loading conversations..."));
+    }
+    return /* @__PURE__ */ React__default.createElement(Box, { className: "p-6" }, /* @__PURE__ */ React__default.createElement(Box, { className: "mb-6" }, /* @__PURE__ */ React__default.createElement(Heading, { className: "text-2xl font-bold" }, "Direct Messages"), /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-600 mt-1" }, "Private conversations with other users")), /* @__PURE__ */ React__default.createElement(Input, { className: "mb-8 h-[50] rounded-md border-gray-300 border", size: "md", style: {
+      paddingVertical: 8,
+      marginBottom: 10,
+      borderColor: "#d1d5db",
+      borderRadius: 10
+    } }, /* @__PURE__ */ React__default.createElement(InputField, { placeholder: "Search messages...", onChangeText: handleSearchChange, value: searchQuery })), /* @__PURE__ */ React__default.createElement(Center, { className: "items-center", style: {
+      paddingVertical: 5
+    } }, /* @__PURE__ */ React__default.createElement(Box, { className: "w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center mb-5" }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "chatbubble-ellipses", size: 30, color: "white" })), /* @__PURE__ */ React__default.createElement(Text, { className: "text-2xl font-bold text-center mb-2" }, "No messages yet"), /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-600 text-center mb-8" }, "When you start conversations with others,", "\n", "they'll appear here.")));
+  }, [loading, displayChannels.length, handleSearchChange, searchQuery]);
   useEffect(() => {
-    const filtersChanged = JSON.stringify(channelFiltersRef.current) !== JSON.stringify(channelFilters);
-    if (filtersChanged) {
-      console.log("Channel filters changed, updating ref");
-      channelFiltersRef.current = channelFilters;
-      if (isMountedRef.current && safeContextProperty("channelRole") !== null) {
-        console.log("Refreshing due to filter change");
-        refreshChannels();
+    return () => {
+      isMountedRef.current = false;
+      if (resetActiveChannelTimeoutRef.current) {
+        clearTimeout(resetActiveChannelTimeoutRef.current);
       }
-    }
-  }, [channelFilters, refreshChannels, safeContextProperty]);
+    };
+  }, []);
   useFocusEffect(useCallback(() => {
-    if (!isFocused)
-      return;
-    console.log("Screen focused, checking if refresh needed");
-    if (isMountedRef.current && !hasRefreshedRef.current) {
-      console.log("Refreshing on focus");
-      hasRefreshedRef.current = true;
-      refreshChannels();
+    const now = Date.now();
+    if (now - lastNavigationTimestamp.current > 300) {
+      activeChannelRef.current = null;
+      console.log("Reset active channel reference on focus");
     }
     return () => {
-      console.log("Screen unfocused, resetting refresh state");
-      hasRefreshedRef.current = false;
+      lastNavigationTimestamp.current = Date.now();
     };
-  }, [isFocused, refreshChannels]));
-  const handleRefresh = useCallback(() => {
-    if (safeContextProperty("refreshing", false)) {
-      console.log("Manual refresh ignored - refresh already in progress");
-      return;
-    }
-    console.log("Manual refresh triggered");
-    refreshChannels();
-  }, [refreshChannels, safeContextProperty]);
-  const channels = React__default.useMemo(() => {
-    var _a2, _b, _c;
-    const allChannels = [...(_a2 = userChannels == null ? void 0 : userChannels.supportServiceChannels) != null ? _a2 : [], ...(_b = userChannels == null ? void 0 : userChannels.channelsByUser) != null ? _b : []];
-    let uChannels = (_c = allChannels == null ? void 0 : allChannels.filter((c) => c.members.some((u) => {
-      var _a3;
-      return u !== null && ((_a3 = u == null ? void 0 : u.user) == null ? void 0 : _a3.id) != (auth == null ? void 0 : auth.id) && u.user.__typename == "UserAccount";
-    }))) != null ? _c : [];
-    return uChannels && orderBy(uChannels, ["updatedAt"], ["desc"]) || [];
-  }, [userChannels, auth == null ? void 0 : auth.id]);
-  const handleSelectChannel = useCallback((id, title) => {
-    var _a2;
-    safeSend({
-      type: Actions.SELECT_CHANNEL,
-      data: {
-        channelId: id
+  }, []));
+  useFocusEffect(useCallback(() => {
+    console.log("\u{1F4F1} Focus effect triggered for Dialogs screen");
+    const performRefresh = () => {
+      const now = Date.now();
+      if (now - lastRefreshTimeRef.current < MIN_REFRESH_INTERVAL) {
+        console.log("\u23E9 Skipping refresh: too soon after previous refresh");
+        return;
       }
-    });
-    if (params == null ? void 0 : params.channelId) {
-      navigation.navigate(config.INBOX_MESSEGE_PATH, {
-        channelId: params == null ? void 0 : params.channelId,
-        role: params == null ? void 0 : params.role,
-        title: (_a2 = params == null ? void 0 : params.title) != null ? _a2 : null,
-        hideTabBar: true
-      });
-    } else {
-      navigation.navigate(config.INBOX_MESSEGE_PATH, {
-        channelId: id,
-        role: channelRole,
-        title,
-        hideTabBar: true
-      });
+      console.log("\u{1F504} Performing refresh on screen focus");
+      if (isMountedRef.current) {
+        lastRefreshTimeRef.current = now;
+        refetch();
+      }
+    };
+    const focusRefreshTimeout = setTimeout(performRefresh, 100);
+    return () => clearTimeout(focusRefreshTimeout);
+  }, [refetch]));
+  const handlePullToRefresh = useCallback(() => {
+    const now = Date.now();
+    focusRefreshRef.current = now;
+    console.log("\u{1F504} Pull-to-refresh triggered");
+    refetch();
+  }, [refetch]);
+  const handleLoadMore = useCallback(() => {
+    if (loading || !data || channels.length < 10) {
+      console.log("Skip loading more: already loading or all data loaded");
+      return;
     }
-  }, [params, navigation, channelRole, safeSend]);
-  const handleSelectServiceChannel = useCallback((id, title, postParentId) => {
-    var _a2;
-    safeSend({
-      type: Actions.SELECT_CHANNEL,
-      data: {
-        channelId: id
+    console.log("Loading more channels");
+    fetchMore({
+      variables: {
+        skip: channels.length
+      },
+      updateQuery: (prev, {
+        fetchMoreResult
+      }) => {
+        if (!fetchMoreResult) return prev;
+        return __spreadProps(__spreadValues({}, fetchMoreResult), {
+          channelsByUser: [...prev.channelsByUser || [], ...fetchMoreResult.channelsByUser || []]
+          // supportServiceChannels: [
+          //     ...(prev.supportServiceChannels || []),
+          //     ...(fetchMoreResult.supportServiceChannels || []),
+          // ],
+        });
       }
+    }).catch((error) => {
+      console.error("Error loading more channels:", error);
     });
-    if (params == null ? void 0 : params.channelId) {
-      navigation.navigate((params == null ? void 0 : params.postParentId) || (params == null ? void 0 : params.postParentId) == 0 ? config.THREAD_MESSEGE_PATH : config.THREADS_PATH, {
-        channelId: params == null ? void 0 : params.channelId,
-        role: params == null ? void 0 : params.role,
-        title: (_a2 = params == null ? void 0 : params.title) != null ? _a2 : null,
-        postParentId: params == null ? void 0 : params.postParentId,
-        hideTabBar: true
-      });
-    } else {
-      navigation.navigate(postParentId || postParentId == 0 ? config.THREAD_MESSEGE_PATH : config.THREADS_PATH, {
-        channelId: id,
-        role: channelRole,
-        title,
-        postParentId,
-        hideTabBar: true
-      });
-    }
-  }, [params, navigation, channelRole, safeSend]);
-  const searchQuery = safeContextProperty("searchQuery", "");
-  return /* @__PURE__ */ React__default.createElement(Box, { className: "p-2" }, /* @__PURE__ */ React__default.createElement(FlatList, { data: channels && (channels == null ? void 0 : channels.length) > 0 ? channels : [], onRefresh: handleRefresh, refreshing: safeContextProperty("refreshing", false), contentContainerStyle: {
+  }, [fetchMore, loading, data, channels.length]);
+  return /* @__PURE__ */ React__default.createElement(Box, { className: "p-2" }, /* @__PURE__ */ React__default.createElement(FlatList, { data: displayChannels, onRefresh: handlePullToRefresh, refreshing: loading, contentContainerStyle: {
     minHeight: "100%"
-  }, ItemSeparatorComponent: () => /* @__PURE__ */ React__default.createElement(Box, { className: "h-0.5 bg-gray-200" }), renderItem: ({
-    item: channel
-  }) => (channel == null ? void 0 : channel.type) === RoomType.Service ? /* @__PURE__ */ React__default.createElement(ServiceDialogsListItem, { onOpen: handleSelectServiceChannel, currentUser: auth, channel, refreshing: safeContextProperty("refreshing", false), selectedChannelId: safeContextProperty("selectedChannelId", params == null ? void 0 : params.channelId), role: channelRole }) : /* @__PURE__ */ React__default.createElement(DialogsListItem, { onOpen: handleSelectChannel, currentUser: auth, channel, selectedChannelId: safeContextProperty("selectedChannelId", params == null ? void 0 : params.channelId) }), ListEmptyComponent: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, userChannelsLoading || safeContextProperty("loading", false) ? /* @__PURE__ */ React__default.createElement(Center, { className: "flex-1 justify-center items-center" }, /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] })) : /* @__PURE__ */ React__default.createElement(Box, { className: "p-5" }, /* @__PURE__ */ React__default.createElement(Heading, null, "Chat"), /* @__PURE__ */ React__default.createElement(Input, { className: `h-[50] mt-3 rounded-[50] border-gray-200 border ` }, /* @__PURE__ */ React__default.createElement(InputField, { placeholder: "Search", value: searchQuery, onChangeText: (text) => safeSend({
-    type: Actions.SET_SEARCH_QUERY,
-    data: {
-      searchQuery: text
-    }
-  }) })), /* @__PURE__ */ React__default.createElement(Center, { className: "mt-6" }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "chatbubbles", size: 50 }), /* @__PURE__ */ React__default.createElement(Text, null, "You don't have any messages yet!")))), keyExtractor: (item, index) => "key" + index }));
+  }, ItemSeparatorComponent: React__default.useCallback(() => /* @__PURE__ */ React__default.createElement(Box, { className: "h-0.5 bg-gray-200" }), []), renderItem, ListFooterComponent, onEndReached: handleLoadMore, onEndReachedThreshold: 0.5, initialNumToRender: 5, maxToRenderPerBatch: 5, windowSize: 5, removeClippedSubviews: true, updateCellsBatchingPeriod: 100, getItemLayout: React__default.useCallback((data2, index) => ({
+    length: 80,
+    offset: 80 * index,
+    index
+  }), []), keyExtractor: React__default.useCallback((item) => `channel-${item.id}`, []), ListEmptyComponent }));
 };
 const Dialogs = React__default.memo(DialogsComponent);export{Dialogs};//# sourceMappingURL=Dialogs.js.map