@messenger-box/platform-mobile 10.0.3-alpha.47 → 10.0.3-alpha.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,9 +3,13 @@ import { FlatList, Box, Heading, Input, InputField, Text, Center, Spinner } from
3
3
  import { Ionicons } from '@expo/vector-icons';
4
4
  import { useSelector, shallowEqual } from 'react-redux';
5
5
  import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native';
6
- import { DialogsListItem } from '../components/DialogsListItem';
7
- import { ServiceDialogsListItem } from '../components/ServiceDialogsListItem';
8
- import { useChannelsQuery, CHAT_MESSAGE_ADDED } from '../../../queries/inboxQueries';
6
+ import { DialogItem } from '../components/DialogItem';
7
+ // import { useChannelsQuery, CHAT_MESSAGE_ADDED } from '../../../queries/inboxQueries';
8
+ import {
9
+ useGetChannelsByUserQuery,
10
+ useGetChannelsByUserWithLastMessageQuery,
11
+ OnChatMessageAddedDocument,
12
+ } from 'common/graphql';
9
13
  import { RoomType } from 'common';
10
14
  import { userSelector } from '@adminide-stack/user-auth0-client';
11
15
  import { config } from '../config';
@@ -26,11 +30,8 @@ const DialogsComponent = (props: InboxProps) => {
26
30
  const { params } = useRoute<any>();
27
31
  const auth = useSelector(userSelector, shallowEqual);
28
32
  const navigation = useNavigation<any>();
29
- // Local state for UI control
33
+ // Local state for UI control - only keeping searchQuery as it's needed for local filtering
30
34
  const [searchQuery, setSearchQuery] = useState('');
31
- const [selectedChannelId, setSelectedChannelId] = useState<string | null>(params?.channelId || null);
32
- const [page, setPage] = useState(1);
33
- const [isLoadingMore, setIsLoadingMore] = useState(false);
34
35
 
35
36
  // Create a ref to track if component is mounted
36
37
  const isMountedRef = useRef(true);
@@ -46,11 +47,11 @@ const DialogsComponent = (props: InboxProps) => {
46
47
  const resetActiveChannelTimeoutRef = useRef<NodeJS.Timeout | null>(null);
47
48
 
48
49
  // Apollo query with pagination and optimistic updates
49
- const { data, loading, refetch, fetchMore, subscribeToMore } = useChannelsQuery({
50
+ const { data, loading, refetch, fetchMore, subscribeToMore } = useGetChannelsByUserWithLastMessageQuery({
50
51
  variables: {
51
52
  role: channelRole,
52
53
  criteria: channelFilters,
53
- supportServices: false,
54
+ // supportServices: false,
54
55
  // supportServices: supportServices ? true : false,
55
56
  // supportServiceCriteria: {
56
57
  // type: RoomType.Service,
@@ -62,6 +63,89 @@ const DialogsComponent = (props: InboxProps) => {
62
63
  fetchPolicy: 'cache-and-network',
63
64
  });
64
65
 
66
+ // Subscribe to new messages to update lastMessage in channels
67
+ // useEffect(() => {
68
+ // if (!data?.channelsByUser?.length || !subscribeToMore) return;
69
+
70
+ // const subscriptions: (() => void)[] = [];
71
+
72
+ // // Subscribe to each channel for real-time lastMessage updates
73
+ // data.channelsByUser.forEach(channel => {
74
+ // if (!channel?.id) return;
75
+
76
+ // const unsubscribe = subscribeToMore({
77
+ // document: OnChatMessageAddedDocument,
78
+ // variables: {
79
+ // channelId: channel.id.toString(),
80
+ // },
81
+ // updateQuery: (prev, { subscriptionData }: any) => {
82
+ // if (!subscriptionData?.data?.chatMessageAdded || !isMountedRef.current) {
83
+ // return prev;
84
+ // }
85
+
86
+ // const newMessage = subscriptionData.data.chatMessageAdded;
87
+ // const channelId = newMessage.channel?.id;
88
+
89
+ // if (!channelId) return prev;
90
+
91
+ // // Update the specific channel's lastMessage
92
+ // const updatedChannels = (prev.channelsByUser || []).map(ch => {
93
+ // if (ch?.id === channelId) {
94
+ // return {
95
+ // ...ch,
96
+ // lastMessage: {
97
+ // id: newMessage.id,
98
+ // message: newMessage.message || '',
99
+ // createdAt: newMessage.createdAt,
100
+ // updatedAt: newMessage.updatedAt,
101
+ // author: newMessage.author ? {
102
+ // id: newMessage.author.id,
103
+ // givenName: newMessage.author.givenName,
104
+ // familyName: newMessage.author.familyName,
105
+ // username: newMessage.author.username,
106
+ // } : null,
107
+ // files: newMessage.files ? {
108
+ // totalCount: newMessage.files.totalCount || 0,
109
+ // data: (newMessage.files.data || []).map(file => ({
110
+ // id: file.id,
111
+ // name: file.name,
112
+ // extension: file.extension,
113
+ // mimeType: file.mimeType,
114
+ // }))
115
+ // } : null,
116
+ // },
117
+ // updatedAt: newMessage.createdAt,
118
+ // lastPostAt: newMessage.createdAt,
119
+ // };
120
+ // }
121
+ // return ch;
122
+ // });
123
+
124
+ // return {
125
+ // ...prev,
126
+ // channelsByUser: updatedChannels,
127
+ // };
128
+ // },
129
+ // onError: (error) => {
130
+ // console.error(`LastMessage subscription error for channel ${channel.id}:`, error);
131
+ // },
132
+ // });
133
+
134
+ // subscriptions.push(unsubscribe);
135
+ // });
136
+
137
+ // // Cleanup subscriptions
138
+ // return () => {
139
+ // subscriptions.forEach(unsub => {
140
+ // try {
141
+ // unsub?.();
142
+ // } catch (error) {
143
+ // console.error('Error unsubscribing from lastMessage updates:', error);
144
+ // }
145
+ // });
146
+ // };
147
+ // }, [data?.channelsByUser, subscribeToMore]);
148
+
65
149
  // Memoize processChannels and sortChannels to avoid unnecessary recalculations
66
150
  const processChannels = useCallback(
67
151
  (rawChannels = []) => {
@@ -100,7 +184,6 @@ const DialogsComponent = (props: InboxProps) => {
100
184
  resetActiveChannelTimeoutRef.current = setTimeout(() => {
101
185
  activeChannelRef.current = null;
102
186
  }, 2000);
103
- setSelectedChannelId(id);
104
187
  console.log('📱 Navigating to channel:', id);
105
188
  navigation.navigate(config.INBOX_MESSEGE_PATH, {
106
189
  channelId: id,
@@ -127,7 +210,6 @@ const DialogsComponent = (props: InboxProps) => {
127
210
  resetActiveChannelTimeoutRef.current = setTimeout(() => {
128
211
  activeChannelRef.current = null;
129
212
  }, 2000);
130
- setSelectedChannelId(id);
131
213
  console.log('📱 Navigating to service channel:', id);
132
214
  navigation.navigate(postParentId || postParentId === 0 ? config.THREAD_MESSEGE_PATH : config.THREADS_PATH, {
133
215
  channelId: id,
@@ -179,39 +261,27 @@ const DialogsComponent = (props: InboxProps) => {
179
261
  const renderItem = useCallback(
180
262
  ({ item: channel }) => {
181
263
  const key = `${channel.type === RoomType.Service ? 'service' : 'direct'}-${channel.id}`;
182
- return channel?.type === RoomType.Service ? (
183
- <ServiceDialogsListItem
184
- key={key}
185
- onOpen={handleSelectServiceChannel}
186
- currentUser={auth}
187
- channel={channel}
188
- refreshing={loading}
189
- selectedChannelId={selectedChannelId}
190
- role={channelRole}
191
- />
192
- ) : (
193
- <DialogsListItem
264
+ return (
265
+ <DialogItem
194
266
  key={key}
195
- onOpen={handleSelectChannel}
267
+ onOpen={channel?.type === RoomType.Service ? handleSelectServiceChannel : handleSelectChannel}
196
268
  currentUser={auth}
197
269
  channel={channel}
198
- selectedChannelId={selectedChannelId}
199
- forceRefresh={true}
200
270
  />
201
271
  );
202
272
  },
203
- [auth, channelRole, handleSelectChannel, handleSelectServiceChannel, loading, selectedChannelId],
273
+ [auth, handleSelectChannel, handleSelectServiceChannel],
204
274
  );
205
275
 
206
276
  // Memoize ListFooterComponent and ListEmptyComponent
207
277
  const ListFooterComponent = useMemo(
208
278
  () =>
209
- isLoadingMore ? (
279
+ loading ? (
210
280
  <Center className="py-4">
211
281
  <Spinner color={colors.blue[500]} size="small" />
212
282
  </Center>
213
283
  ) : null,
214
- [isLoadingMore],
284
+ [loading],
215
285
  );
216
286
 
217
287
  const ListEmptyComponent = useMemo(() => {
@@ -325,22 +395,18 @@ const DialogsComponent = (props: InboxProps) => {
325
395
 
326
396
  // Load more channels
327
397
  const handleLoadMore = useCallback(() => {
328
- if (isLoadingMore || !data || channels.length < 10) {
398
+ if (loading || !data || channels.length < 10) {
329
399
  console.log('Skip loading more: already loading or all data loaded');
330
400
  return;
331
401
  }
332
402
 
333
- console.log('Loading more channels at page:', page + 1);
334
- setIsLoadingMore(true);
403
+ console.log('Loading more channels');
335
404
 
336
405
  fetchMore({
337
406
  variables: {
338
- skip: page * 15,
407
+ skip: channels.length,
339
408
  },
340
409
  updateQuery: (prev, { fetchMoreResult }) => {
341
- setIsLoadingMore(false);
342
- setPage((prevPage) => prevPage + 1);
343
-
344
410
  if (!fetchMoreResult) return prev;
345
411
 
346
412
  // Combine previous and new results
@@ -355,22 +421,15 @@ const DialogsComponent = (props: InboxProps) => {
355
421
  },
356
422
  }).catch((error) => {
357
423
  console.error('Error loading more channels:', error);
358
- setIsLoadingMore(false);
359
424
  });
360
- }, [fetchMore, isLoadingMore, data, channels.length, page]);
425
+ }, [fetchMore, loading, data, channels.length]);
361
426
 
362
427
  return (
363
428
  <Box className="p-2">
364
- <SubscriptionHandler
365
- subscribeToMore={subscribeToMore}
366
- document={CHAT_MESSAGE_ADDED}
367
- variables={{}}
368
- updateQuery={undefined}
369
- />
370
429
  <FlatList
371
430
  data={displayChannels}
372
431
  onRefresh={handlePullToRefresh}
373
- refreshing={loading && !isLoadingMore}
432
+ refreshing={loading}
374
433
  contentContainerStyle={{ minHeight: '100%' }}
375
434
  ItemSeparatorComponent={React.useCallback(
376
435
  () => (
@@ -1,355 +0,0 @@
1
- import React__default,{useRef,useState,useEffect,useCallback,useMemo}from'react';import {Pressable,HStack,Box,AvatarGroup,Avatar,AvatarFallbackText,AvatarBadge,Text,AvatarImage}from'@admin-layout/gluestack-ui-mobile';import {isToday,isYesterday,format}from'date-fns';import {useFocusEffect}from'@react-navigation/native';import {useChatMessageAddedSubscription,CHAT_MESSAGE_ADDED}from'../../../queries/inboxQueries.js';import {startCase}from'lodash-es';import colors from'tailwindcss/colors';import {SubscriptionHandler}from'./SubscriptionHandler.js';import {useMessagesQuery}from'common/graphql';var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- const createdAtText = (value) => {
21
- if (!value)
22
- return "";
23
- let date = new Date(value);
24
- if (isToday(date))
25
- return "Today";
26
- if (isYesterday(date))
27
- return "Yesterday";
28
- return format(new Date(value), "MMM dd, yyyy");
29
- };
30
- const LastMessageComponent = ({
31
- subscribeToNewMessages,
32
- title,
33
- lastMessage,
34
- channelId,
35
- subscribeToMore
36
- }) => {
37
- var _a, _b;
38
- React__default.useEffect(() => {
39
- const unsubscribe = subscribeToNewMessages();
40
- return () => {
41
- if (unsubscribe && typeof unsubscribe === "function") {
42
- unsubscribe();
43
- }
44
- };
45
- }, [channelId, subscribeToNewMessages]);
46
- const count = 30;
47
- const channelTitle = (title == null ? void 0 : title.slice(0, count)) + ((title == null ? void 0 : title.length) > count ? "..." : "") || "";
48
- let displayMessage = "No messages yet";
49
- if (lastMessage) {
50
- if (lastMessage.message && lastMessage.message.trim() !== "") {
51
- displayMessage = lastMessage.message;
52
- } else if (((_b = (_a = lastMessage.files) == null ? void 0 : _a.data) == null ? void 0 : _b.length) > 0) {
53
- displayMessage = "\u{1F4CE} File attachment";
54
- } else {
55
- displayMessage = "(Empty message)";
56
- }
57
- }
58
- const displayDate = (lastMessage == null ? void 0 : lastMessage.createdAt) ? createdAtText(lastMessage.createdAt) : (lastMessage == null ? void 0 : lastMessage.updatedAt) ? createdAtText(lastMessage.updatedAt) : "";
59
- return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
60
- SubscriptionHandler,
61
- {
62
- subscribeToMore,
63
- document: CHAT_MESSAGE_ADDED,
64
- variables: {
65
- channelId: channelId == null ? void 0 : channelId.toString()
66
- },
67
- updateQuery: void 0
68
- }
69
- ), /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "flex-1 justify-between" }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-[0.8]" }, /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600], className: "text-base text-wrap flex-wrap font-semibold" }, channelTitle), /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600], numberOfLines: 1 }, displayMessage)), /* @__PURE__ */ React__default.createElement(Box, { className: "flex-[0.2]" }, /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[500] }, displayDate))));
70
- };
71
- const DialogsListItemComponent = function DialogsListItem2({
72
- currentUser,
73
- selectedChannelId,
74
- channel,
75
- onOpen,
76
- forceRefresh,
77
- visible = true
78
- }) {
79
- var _a, _b, _c, _d;
80
- const isMountedRef = useRef(true);
81
- const parentId = null;
82
- const [loading, setLoading] = useState(false);
83
- const [title, setTitle] = useState("");
84
- const [messages, setMessages] = useState([]);
85
- const [lastMessage, setLastMessage] = useState(null);
86
- const shouldQuery = !!(channel == null ? void 0 : channel.id) && visible;
87
- const {
88
- data: messagesQuery,
89
- loading: messageLoading,
90
- refetch: refetchMessages,
91
- subscribeToMore
92
- } = useMessagesQuery({
93
- variables: {
94
- channelId: (_a = channel == null ? void 0 : channel.id) == null ? void 0 : _a.toString(),
95
- parentId,
96
- limit: 10
97
- },
98
- skip: !shouldQuery,
99
- fetchPolicy: "cache-and-network",
100
- refetchWritePolicy: "overwrite",
101
- nextFetchPolicy: "network-only",
102
- onCompleted: (data) => {
103
- var _a2;
104
- if (!shouldQuery)
105
- return;
106
- if ((_a2 = data == null ? void 0 : data.messages) == null ? void 0 : _a2.data) {
107
- setMessages(data.messages.data);
108
- const sortedMessages = [...data.messages.data].sort((a, b) => new Date((b == null ? void 0 : b.updatedAt) || (b == null ? void 0 : b.createdAt)).getTime() - new Date((a == null ? void 0 : a.updatedAt) || (a == null ? void 0 : a.createdAt)).getTime());
109
- if (sortedMessages.length > 0) {
110
- setLastMessage(sortedMessages[0]);
111
- }
112
- }
113
- },
114
- onError: (error) => {
115
- if (!shouldQuery)
116
- return;
117
- console.error(`Error fetching messages for channel ${channel == null ? void 0 : channel.id}:`, error);
118
- }
119
- });
120
- const {
121
- data: newMessage
122
- } = useChatMessageAddedSubscription({
123
- variables: {
124
- channelId: (_b = channel == null ? void 0 : channel.id) == null ? void 0 : _b.toString()
125
- },
126
- skip: !shouldQuery
127
- });
128
- useEffect(() => {
129
- isMountedRef.current = true;
130
- return () => {
131
- isMountedRef.current = false;
132
- };
133
- }, []);
134
- const refreshDialogState = useCallback(() => {
135
- var _a2;
136
- if (shouldQuery && isMountedRef.current) {
137
- setLoading(true);
138
- const options = {
139
- channelId: (_a2 = channel == null ? void 0 : channel.id) == null ? void 0 : _a2.toString(),
140
- parentId,
141
- limit: 10
142
- };
143
- refetchMessages(options).then((result) => {
144
- var _a3, _b2;
145
- if (((_b2 = (_a3 = result.data) == null ? void 0 : _a3.messages) == null ? void 0 : _b2.data) && isMountedRef.current) {
146
- const sortedMessages = [...result.data.messages.data].sort((a, b) => new Date((b == null ? void 0 : b.updatedAt) || (b == null ? void 0 : b.createdAt)).getTime() - new Date((a == null ? void 0 : a.updatedAt) || (a == null ? void 0 : a.createdAt)).getTime());
147
- const latestMessage = sortedMessages.length > 0 ? sortedMessages[0] : null;
148
- setMessages(result.data.messages.data);
149
- setLastMessage(latestMessage);
150
- }
151
- setLoading(false);
152
- }).catch((err) => {
153
- console.error("Error refreshing dialog state:", err);
154
- setLoading(false);
155
- });
156
- }
157
- }, [shouldQuery, channel == null ? void 0 : channel.id, refetchMessages, parentId]);
158
- const firstRenderRef = useRef(true);
159
- useFocusEffect(React__default.useCallback(() => {
160
- if (!(channel == null ? void 0 : channel.id))
161
- return;
162
- console.log("DialogsListItem focused for channel:", channel == null ? void 0 : channel.id);
163
- if (firstRenderRef.current) {
164
- console.log("Skipping initial focus refresh for channel:", channel == null ? void 0 : channel.id);
165
- firstRenderRef.current = false;
166
- return;
167
- }
168
- console.log("FOCUS EFFECT: Force refetching messages on navigation back for channel:", channel == null ? void 0 : channel.id);
169
- setLoading(true);
170
- const fetchFreshData = async () => {
171
- var _a2, _b2, _c2, _d2, _e, _f;
172
- try {
173
- const options = {
174
- channelId: (_a2 = channel == null ? void 0 : channel.id) == null ? void 0 : _a2.toString(),
175
- parentId,
176
- limit: 10
177
- };
178
- const result = await refetchMessages(options);
179
- console.log(`FOCUS EFFECT: Refetched ${((_d2 = (_c2 = (_b2 = result == null ? void 0 : result.data) == null ? void 0 : _b2.messages) == null ? void 0 : _c2.data) == null ? void 0 : _d2.length) || 0} messages for channel ${channel == null ? void 0 : channel.id}`);
180
- if (((_f = (_e = result == null ? void 0 : result.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.data) && isMountedRef.current) {
181
- const currentMessages = messages;
182
- const fetchedMessages = result.data.messages.data;
183
- console.log("Data comparison:", {
184
- currentCount: currentMessages.length,
185
- fetchedCount: fetchedMessages.length,
186
- isDifferent: JSON.stringify(currentMessages) !== JSON.stringify(fetchedMessages)
187
- });
188
- const sortedMessages = [...fetchedMessages].sort((a, b) => new Date((b == null ? void 0 : b.updatedAt) || (b == null ? void 0 : b.createdAt)).getTime() - new Date((a == null ? void 0 : a.updatedAt) || (a == null ? void 0 : a.createdAt)).getTime());
189
- const latestMessage = sortedMessages.length > 0 ? sortedMessages[0] : null;
190
- setMessages(fetchedMessages);
191
- setLastMessage(latestMessage);
192
- }
193
- } catch (error) {
194
- console.error("Error refetching messages on focus:", error);
195
- } finally {
196
- if (isMountedRef.current) {
197
- setLoading(false);
198
- }
199
- }
200
- };
201
- fetchFreshData();
202
- return () => {
203
- };
204
- }, [channel == null ? void 0 : channel.id, refetchMessages, messages, isMountedRef, parentId]));
205
- useEffect(() => {
206
- if (!shouldQuery)
207
- return;
208
- if ((channel == null ? void 0 : channel.id) && isMountedRef.current) {
209
- const timer = setTimeout(() => {
210
- if (isMountedRef.current) {
211
- refreshDialogState();
212
- }
213
- }, 100);
214
- return () => {
215
- clearTimeout(timer);
216
- };
217
- }
218
- }, [shouldQuery, channel == null ? void 0 : channel.id, refreshDialogState]);
219
- useEffect(() => {
220
- if (forceRefresh && shouldQuery && (channel == null ? void 0 : channel.id) && isMountedRef.current) {
221
- const timer = setTimeout(() => {
222
- var _a2;
223
- if (isMountedRef.current && refetchMessages) {
224
- refetchMessages({
225
- channelId: (_a2 = channel == null ? void 0 : channel.id) == null ? void 0 : _a2.toString(),
226
- parentId,
227
- limit: 10
228
- }).then((result) => {
229
- var _a3, _b2;
230
- if (((_b2 = (_a3 = result == null ? void 0 : result.data) == null ? void 0 : _a3.messages) == null ? void 0 : _b2.data) && isMountedRef.current) {
231
- const sortedMessages = [...result.data.messages.data].sort((a, b) => new Date((b == null ? void 0 : b.updatedAt) || (b == null ? void 0 : b.createdAt)).getTime() - new Date((a == null ? void 0 : a.updatedAt) || (a == null ? void 0 : a.createdAt)).getTime());
232
- const latestMessage = sortedMessages.length > 0 ? sortedMessages[0] : null;
233
- setMessages(result.data.messages.data);
234
- setLastMessage(latestMessage);
235
- }
236
- }).catch((error) => {
237
- console.error(`Error force refreshing channel ${channel == null ? void 0 : channel.id}:`, error);
238
- });
239
- }
240
- }, 50);
241
- return () => clearTimeout(timer);
242
- }
243
- }, [shouldQuery, channel == null ? void 0 : channel.id, forceRefresh, refetchMessages, parentId]);
244
- const channelMembers = useMemo(() => {
245
- var _a2, _b2, _c2;
246
- return (_c2 = (_b2 = (_a2 = channel == null ? void 0 : channel.members) == null ? void 0 : _a2.filter((ch) => {
247
- var _a3, _b3;
248
- return ((_a3 = ch == null ? void 0 : ch.user) == null ? void 0 : _a3.id) != (currentUser == null ? void 0 : currentUser.id) && ((_b3 = ch == null ? void 0 : ch.user) == null ? void 0 : _b3.__typename) == "UserAccount";
249
- })) == null ? void 0 : _b2.map((m) => m == null ? void 0 : m.user)) != null ? _c2 : null;
250
- }, [currentUser, channel]);
251
- useEffect(() => {
252
- var _a2, _b2, _c2;
253
- if (channelMembers && isMountedRef.current) {
254
- const titleString = (_c2 = (_b2 = (_a2 = channelMembers == null ? void 0 : channelMembers.map((u) => {
255
- var _a3;
256
- return (u == null ? void 0 : u.givenName) + " " + ((_a3 = u == null ? void 0 : u.familyName) != null ? _a3 : "");
257
- })) == null ? void 0 : _a2.filter((mu) => mu)) == null ? void 0 : _b2.join(", ")) != null ? _c2 : "";
258
- setTitle(titleString);
259
- }
260
- }, [channelMembers]);
261
- const displayTitle = useMemo(() => {
262
- const length = 30;
263
- return title.length > length ? title.substring(0, length - 3) + "..." : title;
264
- }, [title]);
265
- useEffect(() => {
266
- var _a2, _b2;
267
- console.log(`DialogsListItem for channel ${channel == null ? void 0 : channel.id}: `, {
268
- hasLastMessage: !!lastMessage,
269
- message: ((_a2 = lastMessage == null ? void 0 : lastMessage.message) == null ? void 0 : _a2.substring(0, 20)) + (((_b2 = lastMessage == null ? void 0 : lastMessage.message) == null ? void 0 : _b2.length) > 20 ? "..." : ""),
270
- messagesCount: messages.length
271
- });
272
- }, [channel == null ? void 0 : channel.id, lastMessage, messages.length]);
273
- useEffect(() => {
274
- if (!shouldQuery)
275
- return;
276
- if ((newMessage == null ? void 0 : newMessage.chatMessageAdded) && (channel == null ? void 0 : channel.id)) {
277
- const incomingMessage = newMessage.chatMessageAdded;
278
- if (messages.some((msg) => msg.id === incomingMessage.id)) {
279
- return;
280
- }
281
- setMessages((prevMessages) => [...prevMessages, incomingMessage]);
282
- setLastMessage(incomingMessage);
283
- }
284
- }, [shouldQuery, newMessage, channel == null ? void 0 : channel.id, messages]);
285
- useEffect(() => {
286
- if (!shouldQuery)
287
- return;
288
- if ((channel == null ? void 0 : channel.lastMessage) && channel.lastMessage.id) {
289
- if (!messages.some((msg) => msg.id === channel.lastMessage.id)) {
290
- setMessages((prevMessages) => [...prevMessages, channel.lastMessage]);
291
- setLastMessage(channel.lastMessage);
292
- }
293
- }
294
- }, [shouldQuery, (_c = channel == null ? void 0 : channel.lastMessage) == null ? void 0 : _c.id, messages]);
295
- return /* @__PURE__ */ React__default.createElement(Pressable, { onPress: () => onOpen(channel == null ? void 0 : channel.id, displayTitle), className: "flex-1 border-gray-200 rounded-md dark:border-gray-600 dark:bg-gray-700", style: {
296
- borderBottomWidth: 1,
297
- borderColor: "#e5e7eb",
298
- marginVertical: 0,
299
- paddingHorizontal: 10
300
- } }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "flex-1 w-[100%] py-3 items-center" }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-[0.1] items-start pl-3" }, /* @__PURE__ */ React__default.createElement(AvatarGroup, null, channelMembers && (channelMembers == null ? void 0 : channelMembers.length) > 0 && ((_d = channelMembers == null ? void 0 : channelMembers.slice(0, 1)) == null ? void 0 : _d.map((ch, i) => {
301
- var _a2;
302
- return /* @__PURE__ */ React__default.createElement(Avatar, { key: "dialogs-list-" + i, size: "sm", className: `bg-transparent top-[${i == 1 ? "4" : "0"}] right-[${i == 1 ? "-2" : "0"}] z-[${i == 1 ? 5 : 1}]` }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_a2 = ch == null ? void 0 : ch.username) == null ? void 0 : _a2.charAt(0))), (channelMembers == null ? void 0 : channelMembers.length) > 1 && /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: {
303
- width: "100%",
304
- height: "100%",
305
- backgroundColor: "#e5e7eb",
306
- borderRadius: 5
307
- }, className: "items-center justify-center bg-gray-200 rounded-md" }, /* @__PURE__ */ React__default.createElement(Text, { style: {
308
- fontSize: 12,
309
- fontWeight: "bold",
310
- color: "#000"
311
- } }, channelMembers == null ? void 0 : channelMembers.length)), (channelMembers == null ? void 0 : channelMembers.length) == 1 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
312
- borderRadius: 6,
313
- borderWidth: 2,
314
- borderColor: "#fff"
315
- }, source: {
316
- uri: ch == null ? void 0 : ch.picture
317
- } }), /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: {
318
- width: 10,
319
- height: 10
320
- } })));
321
- })))), /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1" }, /* @__PURE__ */ React__default.createElement(LastMessageComponent, { key: `last-msg-${(lastMessage == null ? void 0 : lastMessage.id) || "none"}-${messages.length}`, title: displayTitle, lastMessage, channelId: channel == null ? void 0 : channel.id, subscribeToNewMessages: () => {
322
- var _a2;
323
- return shouldQuery ? subscribeToMore({
324
- document: CHAT_MESSAGE_ADDED,
325
- variables: {
326
- channelId: (_a2 = channel.id) == null ? void 0 : _a2.toString()
327
- },
328
- updateQuery: (prev, {
329
- subscriptionData
330
- }) => {
331
- var _a3;
332
- if (!subscriptionData.data)
333
- return prev;
334
- const newMessage2 = (_a3 = subscriptionData == null ? void 0 : subscriptionData.data) == null ? void 0 : _a3.chatMessageAdded;
335
- if (isMountedRef.current) {
336
- if (!messages.some((msg) => msg.id === newMessage2.id)) {
337
- setMessages((prevMessages) => [...prevMessages, newMessage2]);
338
- setLastMessage(newMessage2);
339
- }
340
- }
341
- const existingMessages = prev == null ? void 0 : prev.messages;
342
- const previousData = (existingMessages == null ? void 0 : existingMessages.data) ? [...existingMessages.data, newMessage2] : [];
343
- const totalMsgCount = (existingMessages == null ? void 0 : existingMessages.totalCount) + 1;
344
- const merged = __spreadProps(__spreadValues({}, prev), {
345
- messages: __spreadProps(__spreadValues({}, existingMessages), {
346
- data: previousData,
347
- totalCount: totalMsgCount
348
- })
349
- });
350
- return merged;
351
- }
352
- }) : void 0;
353
- }, subscribeToMore }))));
354
- };
355
- const DialogsListItem = React__default.memo(DialogsListItemComponent);export{DialogsListItem,DialogsListItemComponent};//# sourceMappingURL=DialogsListItem.js.map