@messenger-box/platform-mobile 10.0.3-alpha.19 → 10.0.3-alpha.22

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

@@ -1,4 +1,6 @@
-import React__default,{useState,useCallback}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';var __defProp = Object.defineProperty;
+import React__default,{useRef,useCallback,useEffect,useState,useMemo}from'react';import {Box,FlatList,Center,Spinner,Text,Heading,Input,InputField}from'@admin-layout/gluestack-ui-mobile';import {Ionicons}from'@expo/vector-icons';import {useSelector}from'react-redux';import {useRoute,useNavigation,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'./workflow/dialogs-xstate.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;
@@ -14,6 +16,174 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const Actions = {
+  INITIAL_CONTEXT: "INITIAL_CONTEXT",
+  ERROR_HANDLED: "ERROR_HANDLED",
+  FETCH_CHANNELS: "FETCH_CHANNELS",
+  APPEND_CHANNELS: "APPEND_CHANNELS",
+  REFRESH_CHANNELS: "REFRESH_CHANNELS",
+  SELECT_CHANNEL: "SELECT_CHANNEL",
+  START_LOADING: "START_LOADING",
+  STOP_LOADING: "STOP_LOADING",
+  LOAD_MORE_CHANNELS: "LOAD_MORE_CHANNELS",
+  SET_SEARCH_QUERY: "SET_SEARCH_QUERY"
+};
+const BaseState = {
+  Idle: "idle",
+  Error: "error",
+  Loading: "loading",
+  Done: "done",
+  FetchChannels: "fetchChannels"
+};
+const MainState = {
+  RefreshChannels: "refreshChannels",
+  SelectChannel: "selectChannel",
+  LoadMoreChannels: "loadMoreChannels"
+};
+function useSafeMachine(machine) {
+  const [state, setState] = useState({
+    context: {
+      channels: [],
+      refreshing: false,
+      loading: false,
+      error: null,
+      searchQuery: "",
+      selectedChannelId: null,
+      channelRole: null,
+      channelFilters: {},
+      supportServices: false,
+      page: 1,
+      hasMoreChannels: true,
+      loadingMore: false
+    },
+    value: "idle"
+  });
+  const send = useCallback((event) => {
+    var _a, _b, _c, _d;
+    try {
+      console.log("Event received:", event.type);
+      if (event.type === Actions.INITIAL_CONTEXT) {
+        setState((prev) => {
+          var _a2, _b2, _c2, _d2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              channelRole: ((_a2 = event.data) == null ? void 0 : _a2.channelRole) || null,
+              channelFilters: ((_b2 = event.data) == null ? void 0 : _b2.channelFilters) || {},
+              supportServices: ((_c2 = event.data) == null ? void 0 : _c2.supportServices) || false,
+              selectedChannelId: ((_d2 = event.data) == null ? void 0 : _d2.selectedChannelId) || null,
+              loading: true,
+              page: 1,
+              hasMoreChannels: true
+            }),
+            value: BaseState.FetchChannels
+          });
+        });
+      } else if (event.type === Actions.FETCH_CHANNELS) {
+        console.log("Setting channels:", ((_b = (_a = event.data) == null ? void 0 : _a.channels) == null ? void 0 : _b.length) || 0);
+        setState((prev) => {
+          var _a2, _b2, _c2, _d2, _e;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              channels: ((_a2 = event.data) == null ? void 0 : _a2.channels) || [],
+              hasMoreChannels: (((_c2 = (_b2 = event.data) == null ? void 0 : _b2.channels) == null ? void 0 : _c2.length) || 0) > 0,
+              loading: ((_d2 = event.data) == null ? void 0 : _d2.stopLoading) ? false : prev.context.loading,
+              refreshing: ((_e = event.data) == null ? void 0 : _e.stopLoading) ? false : prev.context.refreshing,
+              loadingMore: false
+            }),
+            value: BaseState.Idle
+          });
+        });
+      } else if (event.type === Actions.APPEND_CHANNELS) {
+        const newChannels = ((_c = event.data) == null ? void 0 : _c.channels) || [];
+        console.log("Appending channels:", newChannels.length);
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            channels: [...prev.context.channels, ...newChannels],
+            hasMoreChannels: newChannels.length >= 10,
+            page: prev.context.page + 1,
+            loadingMore: false
+          }),
+          value: BaseState.Idle
+        }));
+      } else if (event.type === Actions.REFRESH_CHANNELS) {
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            refreshing: true,
+            page: 1,
+            hasMoreChannels: true
+          }),
+          value: MainState.RefreshChannels
+        }));
+      } else if (event.type === Actions.SELECT_CHANNEL) {
+        setState((prev) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              selectedChannelId: ((_a2 = event.data) == null ? void 0 : _a2.channelId) || null
+            })
+          });
+        });
+      } 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) {
+        console.log("Explicitly stopping loading state");
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            loading: false,
+            refreshing: false,
+            loadingMore: false
+          }),
+          value: prev.value === BaseState.FetchChannels ? BaseState.Idle : prev.value
+        }));
+      } else if (event.type === Actions.LOAD_MORE_CHANNELS) {
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            loadingMore: true
+          }),
+          value: MainState.LoadMoreChannels
+        }));
+      } else if (event.type === Actions.SET_SEARCH_QUERY) {
+        setState((prev) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              searchQuery: ((_a2 = event.data) == null ? void 0 : _a2.searchQuery) || ""
+            })
+          });
+        });
+      } else if (event.type === Actions.ERROR_HANDLED) {
+        console.log("Error handled:", (_d = event.data) == null ? void 0 : _d.message);
+        setState((prev) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              error: ((_a2 = event.data) == null ? void 0 : _a2.message) || null,
+              loading: false,
+              refreshing: false,
+              loadingMore: false
+            }),
+            value: BaseState.Idle
+          });
+        });
+      }
+    } catch (error) {
+      console.error("Error handling event:", error);
+    }
+  }, []);
+  const stateWithMatches = useMemo(() => {
+    return __spreadProps(__spreadValues({}, state), {
+      matches: (checkState) => {
+        return state.value === checkState;
+      }
+    });
+  }, [state]);
+  return [stateWithMatches, send];
+}
 const DialogsComponent = (props) => {
   var _a;
   const {
@@ -27,13 +197,79 @@ const DialogsComponent = (props) => {
     params
   } = useRoute();
   const auth = useSelector(userSelector);
-  useDispatch();
   const navigation = useNavigation();
-  useIsFocused();
-  const [refreshing, setRefresh] = useState(false);
+  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]);
+  const safeMatches = 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 channels = safeContextProperty("channels", []);
+  const refreshing = safeContextProperty("refreshing", false);
+  const loading = safeContextProperty("loading", false);
+  const searchQuery = safeContextProperty("searchQuery", "");
+  const selectedChannelId = safeContextProperty("selectedChannelId", null);
+  const loadingMore = safeContextProperty("loadingMore", false);
+  const hasMoreChannels = safeContextProperty("hasMoreChannels", true);
+  const page = safeContextProperty("page", 1);
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  const safeGetContext = useCallback(() => {
+    if (stateRef.current && stateRef.current.context) {
+      return stateRef.current.context;
+    }
+    return {
+      channels: [],
+      refreshing: false,
+      loading: false,
+      error: null,
+      searchQuery: "",
+      selectedChannelId: null,
+      channelRole: null,
+      channelFilters: {},
+      supportServices: false,
+      page: 1,
+      hasMoreChannels: true,
+      loadingMore: false
+    };
+  }, []);
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
   const {
-    data: userChannels,
-    loading: userChannelsLoading,
     refetch: getChannelsRefetch
   } = useGetChannelsByUserWithServiceChannelsQuery({
     variables: {
@@ -42,81 +278,315 @@ const DialogsComponent = (props) => {
       supportServices: supportServices ? true : false,
       supportServiceCriteria: {
         type: RoomType.Service
-      }
-    }
+      },
+      limit: 15,
+      skip: 0
+    },
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "network-only",
+    notifyOnNetworkStatusChange: true,
+    skip: true
   });
-  useFocusEffect(React__default.useCallback(() => {
-    setRefresh(false);
-    getChannelsRefetch({
-      role: channelRole,
-      criteria: channelFilters,
-      supportServices: supportServices ? true : false,
-      supportServiceCriteria: {
-        type: RoomType.Service
+  const fetchChannelsDirectly = useCallback(async (pageNum = 1, append = false) => {
+    var _a2, _b, _c;
+    try {
+      const context = safeGetContext();
+      console.log(`\u{1F4AB} FETCHING channels (page: ${pageNum}, append: ${append})`);
+      const skipCount = (pageNum - 1) * 15;
+      const {
+        data
+      } = await getChannelsRefetch({
+        role: channelRole,
+        criteria: channelFilters,
+        supportServices: supportServices ? true : false,
+        supportServiceCriteria: {
+          type: RoomType.Service
+        },
+        limit: 15,
+        skip: skipCount
+      });
+      const allChannels = [...(_a2 = data == null ? void 0 : data.supportServiceChannels) != null ? _a2 : [], ...(_b = data == null ? void 0 : data.channelsByUser) != null ? _b : []];
+      const filteredChannels = (_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 : [];
+      const sortedChannels = filteredChannels && orderBy(filteredChannels, ["updatedAt"], ["desc"]) || [];
+      console.log(`\u{1F4CA} Processed channels: ${sortedChannels.length} (page: ${pageNum}, skip: ${skipCount})`);
+      if (isMountedRef.current) {
+        if (append) {
+          safeSend({
+            type: Actions.APPEND_CHANNELS,
+            data: {
+              channels: sortedChannels
+            }
+          });
+        } else {
+          safeSend({
+            type: Actions.FETCH_CHANNELS,
+            data: {
+              channels: sortedChannels
+            }
+          });
+        }
+        safeSend({
+          type: Actions.STOP_LOADING
+        });
       }
-    });
-    return () => {
-    };
-  }, [channelFilters]));
-  const channels = React__default.useMemo(() => {
+    } catch (error) {
+      console.error("Error fetching channels:", error);
+      if (isMountedRef.current) {
+        safeSend({
+          type: Actions.ERROR_HANDLED,
+          data: {
+            message: "Failed to fetch channels"
+          }
+        });
+      }
+    }
+  }, [getChannelsRefetch, channelRole, channelFilters, supportServices, auth == null ? void 0 : auth.id, safeSend]);
+  useEffect(() => {
+    if (loading) {
+      const safetyTimeout = setTimeout(() => {
+        console.log("\u26A0\uFE0F Safety timeout triggered - forcing loading state to stop");
+        if (isMountedRef.current) {
+          safeSend({
+            type: Actions.STOP_LOADING
+          });
+        }
+      }, 5e3);
+      return () => clearTimeout(safetyTimeout);
+    }
+  }, [loading, safeSend]);
+  const fastRefresh = useCallback(async () => {
     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]);
-  const handleSelectChannel = useCallback((id, title) => {
-    var _a2;
-    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
+    try {
+      console.log("\u{1F504} Fast refreshing channels...");
+      const clearRefreshingTimeout = setTimeout(() => {
+        if (isMountedRef.current) {
+          console.log("\u26A0\uFE0F Fast refresh timeout - stopping refresh state");
+          safeSend({
+            type: Actions.STOP_LOADING
+          });
+        }
+      }, 3e3);
+      const {
+        data
+      } = await getChannelsRefetch({
+        role: channelRole,
+        criteria: channelFilters,
+        supportServices: supportServices ? true : false,
+        supportServiceCriteria: {
+          type: RoomType.Service
+        },
+        limit: 10,
+        skip: 0
       });
+      clearTimeout(clearRefreshingTimeout);
+      if (!isMountedRef.current)
+        return;
+      const allChannels = [...(_a2 = data == null ? void 0 : data.supportServiceChannels) != null ? _a2 : [], ...(_b = data == null ? void 0 : data.channelsByUser) != null ? _b : []];
+      const filteredChannels = (_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 : [];
+      const sortedChannels = filteredChannels && orderBy(filteredChannels, ["updatedAt"], ["desc"]) || [];
+      console.log(`\u{1F4CA} Fast refresh completed: ${sortedChannels.length} channels`);
+      if (isMountedRef.current) {
+        safeSend({
+          type: Actions.FETCH_CHANNELS,
+          data: {
+            channels: sortedChannels,
+            stopLoading: true
+          }
+        });
+      }
+    } catch (error) {
+      console.error("Error during fast refresh:", error);
+      if (isMountedRef.current) {
+        safeSend({
+          type: Actions.STOP_LOADING
+        });
+      }
+    }
+  }, [getChannelsRefetch, channelRole, channelFilters, supportServices, auth == null ? void 0 : auth.id, safeSend]);
+  useEffect(() => {
+    const context = safeGetContext();
+    const isAlreadyFetching = context.refreshing || context.loading;
+    if (!isAlreadyFetching) {
+      if (safeMatches(BaseState.FetchChannels)) {
+        console.log("\u{1F504} Fetching channels...");
+        fetchChannelsDirectly(1, false);
+      } else if (safeMatches(MainState.RefreshChannels)) {
+        console.log("\u{1F504} Refreshing channels...");
+        fetchChannelsDirectly(1, false);
+      } else if (safeMatches(MainState.LoadMoreChannels)) {
+        console.log("\u{1F504} Loading more channels...");
+        fetchChannelsDirectly(page, true);
+      }
     } else {
-      navigation.navigate(config.INBOX_MESSEGE_PATH, {
-        channelId: id,
-        role: channelRole,
-        title,
-        hideTabBar: true
+      console.log("\u23E9 Skipping fetch because isAlreadyFetching:", isAlreadyFetching);
+    }
+  }, [fetchChannelsDirectly, safeMatches, safeGetContext, state.value, page]);
+  useEffect(() => {
+    console.log("State changed to:", state.value);
+    console.log("Context:", JSON.stringify({
+      channelsCount: channels.length,
+      loading,
+      refreshing
+    }));
+  }, [state.value, channels.length, loading, refreshing]);
+  useEffect(() => {
+    if (isMountedRef.current) {
+      console.log("\u{1F680} Initializing state machine with props", {
+        channelRole,
+        channelFilters,
+        supportServices,
+        selectedChannelId: params == null ? void 0 : params.channelId
+      });
+      safeSend({
+        type: Actions.INITIAL_CONTEXT,
+        data: {
+          channelRole,
+          channelFilters,
+          supportServices,
+          selectedChannelId: params == null ? void 0 : params.channelId
+        }
       });
+      const initSafetyTimeout = setTimeout(() => {
+        if (isMountedRef.current && loading) {
+          console.log("\u26A0\uFE0F Init safety timeout triggered - forcing loading state to stop");
+          safeSend({
+            type: Actions.STOP_LOADING
+          });
+        }
+      }, 8e3);
+      return () => clearTimeout(initSafetyTimeout);
     }
   }, []);
-  const handleSelectServiceChannel = useCallback((id, title, postParentId) => {
-    var _a2;
-    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
+  const focusRefreshRef = useRef(null);
+  useFocusEffect(useCallback(() => {
+    let hasTriggeredRefresh = false;
+    const now = Date.now();
+    const lastRefresh = focusRefreshRef.current;
+    const shouldRefresh = lastRefresh === null || now - lastRefresh > 2e3;
+    const context = safeGetContext();
+    const isAlreadyFetching = context.refreshing || context.loading;
+    if (isMountedRef.current && !hasTriggeredRefresh && !isAlreadyFetching && shouldRefresh && (channels.length > 0 || safeMatches(BaseState.Idle))) {
+      hasTriggeredRefresh = true;
+      focusRefreshRef.current = now;
+      console.log("\u{1F504} Focus effect: triggering fast refresh");
+      safeSend({
+        type: Actions.START_LOADING,
+        data: {
+          refreshing: true
+        }
       });
+      setTimeout(() => {
+        if (isMountedRef.current) {
+          fastRefresh();
+        }
+      }, 100);
     } else {
-      navigation.navigate(postParentId || postParentId == 0 ? config.THREAD_MESSEGE_PATH : config.THREADS_PATH, {
-        channelId: id,
-        role: channelRole,
-        title,
-        postParentId,
-        hideTabBar: true
+      console.log("\u23E9 Skipping focus refresh:", {
+        isAlreadyFetching,
+        hasTriggeredRefresh,
+        shouldRefresh,
+        timeGap: lastRefresh === null ? "first refresh" : now - lastRefresh
       });
     }
-  }, []);
-  const handleRefresh = useCallback(() => {
-    var _a2;
-    setRefresh(true);
-    (_a2 = getChannelsRefetch({
+    return () => {
+      hasTriggeredRefresh = false;
+    };
+  }, [safeSend, channels.length, safeMatches, safeGetContext, fastRefresh]));
+  const handleSelectChannel = useCallback((id, title) => {
+    safeSend({
+      type: Actions.SELECT_CHANNEL,
+      data: {
+        channelId: id
+      }
+    });
+    navigation.navigate(config.INBOX_MESSEGE_PATH, {
+      channelId: id,
       role: channelRole,
-      criteria: channelFilters
-    })) == null ? void 0 : _a2.finally(() => setRefresh(false));
-  }, []);
-  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, contentContainerStyle: {
+      title,
+      hideTabBar: true,
+      timestamp: new Date().getTime()
+    });
+  }, [navigation, channelRole, safeSend]);
+  const handleSelectServiceChannel = useCallback((id, title, postParentId) => {
+    safeSend({
+      type: Actions.SELECT_CHANNEL,
+      data: {
+        channelId: id
+      }
+    });
+    navigation.navigate(postParentId || postParentId === 0 ? config.THREAD_MESSEGE_PATH : config.THREADS_PATH, {
+      channelId: id,
+      role: channelRole,
+      title,
+      postParentId,
+      hideTabBar: true
+    });
+  }, [navigation, channelRole, safeSend]);
+  const handlePullToRefresh = useCallback(() => {
+    if (refreshing) {
+      console.log("\u23E9 Skipping refresh because already refreshing");
+      return;
+    }
+    const now = Date.now();
+    focusRefreshRef.current = now;
+    console.log("\u{1F504} Pull-to-refresh triggered");
+    safeSend({
+      type: Actions.START_LOADING,
+      data: {
+        refreshing: true
+      }
+    });
+    fastRefresh();
+  }, [safeSend, refreshing, fastRefresh]);
+  const handleSearchChange = useCallback((text) => {
+    safeSend({
+      type: Actions.SET_SEARCH_QUERY,
+      data: {
+        searchQuery: text
+      }
+    });
+  }, [safeSend]);
+  const handleLoadMore = useCallback(() => {
+    if (!loadingMore && hasMoreChannels) {
+      console.log("Loading more channels at page:", page + 1);
+      safeSend({
+        type: Actions.LOAD_MORE_CHANNELS
+      });
+    } else {
+      console.log("Skip loading more: loadingMore=", loadingMore, "hasMoreChannels=", hasMoreChannels);
+    }
+  }, [safeSend, loadingMore, hasMoreChannels, page]);
+  return /* @__PURE__ */ React__default.createElement(Box, { className: "p-2" }, /* @__PURE__ */ React__default.createElement(FlatList, { data: channels, onRefresh: handlePullToRefresh, refreshing, 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, selectedChannelId: params == null ? void 0 : params.channelId, role: channelRole }) : /* @__PURE__ */ React__default.createElement(DialogsListItem, { onOpen: handleSelectChannel, currentUser: auth, channel, selectedChannelId: params == null ? void 0 : params.channelId }), ListEmptyComponent: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, userChannelsLoading ? /* @__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" })), /* @__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 }));
+  }) => {
+    return (channel == null ? void 0 : channel.type) === RoomType.Service ? /* @__PURE__ */ React__default.createElement(ServiceDialogsListItem, { key: `service-${channel.id}`, onOpen: handleSelectServiceChannel, currentUser: auth, channel, refreshing, selectedChannelId, role: channelRole }) : /* @__PURE__ */ React__default.createElement(DialogsListItem, { key: `direct-${channel.id}`, onOpen: handleSelectChannel, currentUser: auth, channel, selectedChannelId, forceRefresh: true });
+  }, ListFooterComponent: () => loadingMore ? /* @__PURE__ */ React__default.createElement(Center, { className: "py-4" }, /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500], size: "small" })) : null, onEndReached: handleLoadMore, onEndReachedThreshold: 0.3, initialNumToRender: 10, maxToRenderPerBatch: 10, windowSize: 10, removeClippedSubviews: true, updateCellsBatchingPeriod: 50, ListEmptyComponent: () => {
+    console.log("Rendering ListEmptyComponent", {
+      loading,
+      refreshing,
+      stateValue: state.value
+    });
+    if (loading && channels.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.")));
+  }, keyExtractor: (item) => `channel-${item.id}` }));
 };
 const Dialogs = React__default.memo(DialogsComponent);export{Dialogs};//# sourceMappingURL=Dialogs.js.map