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

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,{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;
@@ -17,6 +17,30 @@ 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: {
@@ -28,50 +52,76 @@ function useSafeMachine(machine) {
       selectedChannelId: null,
       channelRole: null,
       channelFilters: {},
-      supportServices: false
+      supportServices: false,
+      page: 1,
+      hasMoreChannels: true,
+      loadingMore: false
     },
     value: "idle"
   });
   const send = useCallback((event) => {
+    var _a, _b, _c, _d;
     try {
-      console.log("Dialogs Event received:", event.type);
+      console.log("Event received:", event.type);
       if (event.type === Actions.INITIAL_CONTEXT) {
         setState((prev) => {
-          var _a, _b, _c, _d;
+          var _a2, _b2, _c2, _d2;
           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
+              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.SET_SEARCH_QUERY) {
+      } 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 _a;
+          var _a2, _b2, _c2, _d2, _e;
           return __spreadProps(__spreadValues({}, prev), {
             context: __spreadProps(__spreadValues({}, prev.context), {
-              searchQuery: ((_a = event.data) == null ? void 0 : _a.searchQuery) || ""
-            })
+              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
+            refreshing: true,
+            page: 1,
+            hasMoreChannels: true
           }),
           value: MainState.RefreshChannels
         }));
       } else if (event.type === Actions.SELECT_CHANNEL) {
         setState((prev) => {
-          var _a;
+          var _a2;
           return __spreadProps(__spreadValues({}, prev), {
             context: __spreadProps(__spreadValues({}, prev.context), {
-              selectedChannelId: ((_a = event.data) == null ? void 0 : _a.channelId) || null
-            }),
-            value: MainState.SelectChannel
+              selectedChannelId: ((_a2 = event.data) == null ? void 0 : _a2.channelId) || null
+            })
           });
         });
       } else if (event.type === Actions.START_LOADING) {
@@ -81,54 +131,55 @@ function useSafeMachine(machine) {
           })
         }));
       } 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
-          })
+            loading: false,
+            refreshing: false,
+            loadingMore: false
+          }),
+          value: prev.value === BaseState.FetchChannels ? BaseState.Idle : prev.value
         }));
-      } 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") {
+      } 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 _a;
+          var _a2;
           return __spreadProps(__spreadValues({}, prev), {
             context: __spreadProps(__spreadValues({}, prev.context), {
-              channels: ((_a = event.data) == null ? void 0 : _a.channels) || [],
-              refreshing: false
-            }),
-            value: BaseState.Idle
+              searchQuery: ((_a2 = event.data) == null ? void 0 : _a2.searchQuery) || ""
+            })
           });
         });
-      } else if (event.type === "ERROR") {
+      } else if (event.type === Actions.ERROR_HANDLED) {
+        console.log("Error handled:", (_d = event.data) == null ? void 0 : _d.message);
         setState((prev) => {
-          var _a;
+          var _a2;
           return __spreadProps(__spreadValues({}, prev), {
             context: __spreadProps(__spreadValues({}, prev.context), {
-              error: ((_a = event.data) == null ? void 0 : _a.message) || "An error occurred",
+              error: ((_a2 = event.data) == null ? void 0 : _a2.message) || null,
               loading: false,
-              refreshing: false
+              refreshing: false,
+              loadingMore: false
             }),
-            value: BaseState.Error
+            value: BaseState.Idle
           });
         });
       }
-    } catch (err) {
-      console.error("Error in send function:", err);
+    } catch (error) {
+      console.error("Error handling event:", error);
     }
   }, []);
   const stateWithMatches = useMemo(() => {
     return __spreadProps(__spreadValues({}, state), {
-      matches: (value) => state.value === value
+      matches: (checkState) => {
+        return state.value === checkState;
+      }
     });
   }, [state]);
   return [stateWithMatches, send];
@@ -146,9 +197,7 @@ const DialogsComponent = (props) => {
     params
   } = useRoute();
   const auth = useSelector(userSelector);
-  useDispatch();
   const navigation = useNavigation();
-  const isFocused = useIsFocused();
   const isMountedRef = useRef(true);
   const [state, send] = useSafeMachine();
   useCallback(() => {
@@ -168,7 +217,7 @@ const DialogsComponent = (props) => {
       return defaultValue;
     }
   }, [state]);
-  useCallback((stateValue) => {
+  const safeMatches = useCallback((stateValue) => {
     var _a2;
     try {
       return ((_a2 = state == null ? void 0 : state.matches) == null ? void 0 : _a2.call(state, stateValue)) || false;
@@ -184,18 +233,43 @@ const DialogsComponent = (props) => {
       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: {
@@ -204,188 +278,315 @@ const DialogsComponent = (props) => {
       supportServices: supportServices ? true : false,
       supportServiceCriteria: {
         type: RoomType.Service
-      }
+      },
+      limit: 15,
+      skip: 0
     },
-    onCompleted: (data) => {
-      var _a2, _b;
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "network-only",
+    notifyOnNetworkStatusChange: true,
+    skip: true
+  });
+  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) {
-        const allChannels = [...(_a2 = data == null ? void 0 : data.supportServiceChannels) != null ? _a2 : [], ...(_b = data == null ? void 0 : data.channelsByUser) != null ? _b : []];
+        if (append) {
+          safeSend({
+            type: Actions.APPEND_CHANNELS,
+            data: {
+              channels: sortedChannels
+            }
+          });
+        } else {
+          safeSend({
+            type: Actions.FETCH_CHANNELS,
+            data: {
+              channels: sortedChannels
+            }
+          });
+        }
         safeSend({
-          type: "FETCH_CHANNELS_SUCCESS",
-          data: {
-            channels: allChannels
-          }
+          type: Actions.STOP_LOADING
         });
       }
-    },
-    onError: (error) => {
+    } catch (error) {
+      console.error("Error fetching channels:", error);
       if (isMountedRef.current) {
         safeSend({
-          type: "ERROR",
+          type: Actions.ERROR_HANDLED,
           data: {
-            message: error.message
+            message: "Failed to fetch channels"
           }
         });
       }
     }
-  });
+  }, [getChannelsRefetch, channelRole, channelFilters, supportServices, auth == null ? void 0 : auth.id, safeSend]);
   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 hasRefreshedRef = useRef(false);
-  const channelFiltersRef = useRef(channelFilters);
-  const refreshChannels = useCallback(() => {
-    if (safeContextProperty("refreshing", false)) {
-      console.log("Skipping refresh - already in progress");
-      return Promise.resolve();
+    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);
     }
-    console.log("Starting channel refresh");
-    safeSend({
-      type: Actions.REFRESH_CHANNELS
-    });
-    const currentFilters = channelFiltersRef.current;
-    return getChannelsRefetch({
-      role: channelRole,
-      criteria: currentFilters,
-      supportServices: supportServices ? true : false,
-      supportServiceCriteria: {
-        type: RoomType.Service
-      }
-    }).then((data) => {
-      var _a2, _b, _c, _d;
+  }, [loading, safeSend]);
+  const fastRefresh = useCallback(async () => {
+    var _a2, _b, _c;
+    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) {
-        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",
+          type: Actions.FETCH_CHANNELS,
           data: {
-            channels: allChannels
+            channels: sortedChannels,
+            stopLoading: true
           }
         });
       }
-    }).catch((error) => {
+    } catch (error) {
+      console.error("Error during fast refresh:", error);
       if (isMountedRef.current) {
-        console.error("Channel refresh error:", error.message);
         safeSend({
-          type: "ERROR",
-          data: {
-            message: error.message
-          }
+          type: Actions.STOP_LOADING
         });
       }
-    });
-  }, [channelRole, supportServices, getChannelsRefetch, safeSend, safeContextProperty]);
+    }
+  }, [getChannelsRefetch, channelRole, channelFilters, supportServices, auth == null ? void 0 : auth.id, safeSend]);
   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();
+    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 {
+      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);
     }
-  }, [channelFilters, refreshChannels, safeContextProperty]);
+  }, []);
+  const focusRefreshRef = useRef(null);
   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();
+    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 {
+      console.log("\u23E9 Skipping focus refresh:", {
+        isAlreadyFetching,
+        hasTriggeredRefresh,
+        shouldRefresh,
+        timeGap: lastRefresh === null ? "first refresh" : now - lastRefresh
+      });
     }
     return () => {
-      console.log("Screen unfocused, resetting refresh state");
-      hasRefreshedRef.current = false;
+      hasTriggeredRefresh = false;
     };
-  }, [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]);
+  }, [safeSend, channels.length, safeMatches, safeGetContext, fastRefresh]));
   const handleSelectChannel = useCallback((id, title) => {
-    var _a2;
     safeSend({
       type: Actions.SELECT_CHANNEL,
       data: {
         channelId: id
       }
     });
-    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
-      });
-    }
-  }, [params, navigation, channelRole, safeSend]);
+    navigation.navigate(config.INBOX_MESSEGE_PATH, {
+      channelId: id,
+      role: channelRole,
+      title,
+      hideTabBar: true,
+      timestamp: new Date().getTime()
+    });
+  }, [navigation, channelRole, safeSend]);
   const handleSelectServiceChannel = useCallback((id, title, postParentId) => {
-    var _a2;
     safeSend({
       type: Actions.SELECT_CHANNEL,
       data: {
         channelId: id
       }
     });
-    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
+    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 {
-      navigation.navigate(postParentId || postParentId == 0 ? config.THREAD_MESSEGE_PATH : config.THREADS_PATH, {
-        channelId: id,
-        role: channelRole,
-        title,
-        postParentId,
-        hideTabBar: true
-      });
+      console.log("Skip loading more: loadingMore=", loadingMore, "hasMoreChannels=", hasMoreChannels);
     }
-  }, [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: {
+  }, [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: 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
+  }) => {
+    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..."));
     }
-  }) })), /* @__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 /* @__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