@messenger-box/platform-mobile 0.0.1-alpha.391 → 0.0.1-alpha.393

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/index.js +412 -573
  3. package/lib/index.js.map +1 -1
  4. package/package.json +4 -4
  5. package/src/screens/inbox/components/DialogsListItem.tsx +115 -12
  6. package/src/screens/inbox/components/SlackMessageContainer/SlackMessage.tsx +36 -12
  7. package/src/screens/inbox/config/config.ts +1 -1
  8. package/src/screens/inbox/containers/ConversationView.tsx +173 -551
  9. package/src/screens/inbox/containers/ThreadConversationView.tsx +228 -86
package/src/screens/inbox/containers/ConversationView.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useEffect, useMemo, useState } from 'react';
1
+ import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
2
2
  import {
3
3
  Box,
4
4
  Button,
@@ -12,7 +12,7 @@ import {
12
12
  ScrollView,
13
13
  Center,
14
14
  } from 'native-base';
15
- import { Platform, TouchableOpacity, TouchableHighlight } from 'react-native';
15
+ import { Platform, TouchableHighlight } from 'react-native';
16
16
  import { useNavigation, useFocusEffect, useIsFocused } from '@react-navigation/native';
17
17
  import { useSelector } from 'react-redux';
18
18
  import { orderBy, uniqBy, startCase } from 'lodash';
@@ -31,6 +31,7 @@ import {
31
31
  useOnChatMessageAddedSubscription,
32
32
  IPreDefinedRole,
33
33
  useSendExpoNotificationOnPostMutation,
34
+ OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
34
35
  IPost,
35
36
  } from '@messenger-box/platform-client';
36
37
  import { IExpoNotificationData, IFileInfo } from '@messenger-box/core';
@@ -55,6 +56,11 @@ const createdAtText = (value: string) => {
55
56
  return format(new Date(value), 'MMM dd, yyyy');
56
57
  };
57
58
 
59
+ interface ISubscriptionHandlerProps {
60
+ subscribeToNewMessages: () => any;
61
+ channelId: string;
62
+ }
63
+
58
64
  interface IMessageProps extends IMessage {
59
65
  type: string;
60
66
  propsConfiguration?: any;
@@ -90,20 +96,11 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
90
96
  const [expoTokens, setExpoTokens] = useState<any[]>([]);
91
97
  const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
92
98
  const [imageObject, setImageObject] = useState<any>({});
99
+ const [skip, setSkip] = useState(0);
100
+ const messageRootListRef = useRef<any>(null);
93
101
  const isFocused = useIsFocused();
94
- const { data: mongooseObjectId,refetch:refetchNewPostId } = useGetNewMongooseObjectIdQuery({
102
+ const { data: mongooseObjectId, refetch: refetchNewPostId } = useGetNewMongooseObjectIdQuery({
95
103
  fetchPolicy: 'network-only',
96
- //pollInterval: 5000,
97
- });
98
-
99
- const {
100
- data: newMessage,
101
- loading: newMsgLoading,
102
- error: newMsgError,
103
- }: any = useOnChatMessageAddedSubscription({
104
- variables: {
105
- channelId: channelId?.toString(),
106
- },
107
104
  });
108
105
 
109
106
  const { startUpload } = useUploadFilesNative();
@@ -116,15 +113,19 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
116
113
  data,
117
114
  loading: messageLoading,
118
115
  refetch,
116
+ fetchMore: fetchMoreMessages,
117
+ subscribeToMore,
119
118
  }: any = useMessagesQuery({
120
119
  variables: {
121
120
  channelId: channelId?.toString(),
122
121
  parentId: null,
123
122
  limit: MESSAGES_PER_PAGE,
123
+ skip: skip,
124
124
  },
125
125
  skip: !channelId,
126
126
  fetchPolicy: 'cache-and-network',
127
127
  nextFetchPolicy: 'cache-first',
128
+ refetchWritePolicy: 'merge',
128
129
  });
129
130
 
130
131
  const {
@@ -138,36 +139,30 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
138
139
  });
139
140
  // const { data: users } = useGetAllUsersQuery();
140
141
 
141
- // const { data: checkForMessages }: any = useCheckForNewMessagesQuery({
142
- // variables: {
143
- // channelId: channelId?.toString(),
144
- // },
145
- // skip: !channelId,
146
- // fetchPolicy: 'network-only',
147
- // pollInterval: 5000,
148
- // });
149
-
150
142
  useFocusEffect(
151
143
  React.useCallback(() => {
152
144
  // Do something when the screen is focused
145
+ setSkip(0);
153
146
  refetchChannelDetail({ id: channelId?.toString() });
154
147
  refetch({
155
148
  channelId: channelId?.toString(),
156
149
  parentId: null,
157
150
  limit: MESSAGES_PER_PAGE,
151
+ skip: 0,
158
152
  }).then(({ data }) => {
159
153
  if (!data?.messages) {
160
154
  return;
161
155
  }
162
156
  const { data: messages, totalCount }: any = data.messages;
163
157
  setTotalCount(totalCount);
164
- setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
158
+ setChannelMessages(messages);
165
159
  });
166
160
  return () => {
167
161
  // Do something when the screen is unfocused
168
162
  // Useful for cleanup functions
169
163
  setTotalCount(0);
170
164
  setChannelMessages([]);
165
+ setSkip(0);
171
166
  };
172
167
  }, [isFocused]),
173
168
  );
@@ -176,184 +171,46 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
176
171
  if (selectedImage) setImageLoading(false);
177
172
  }, [selectedImage]);
178
173
 
179
- // const currentUser = useMemo(
180
- // () => users?.getUsers?.find(({ alias }: any) => alias?.includes(auth?.auth0UserId)),
181
- // [users, auth],
182
- // );
183
-
184
- // useEffect(() => {
185
- // if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
186
- // const { data: messages, totalCount: messeageTotalCount } = data.messages;
187
- // if (messages && messages.length > 0) {
188
- // setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
189
- // }
190
- // if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
191
- // }
192
- // }, [data, loadingOldMessages, channelMessages]);
193
-
194
- // useEffect(() => {
195
- // if (data?.messages?.data) {
196
- // const { data: messages, totalCount: messeageTotalCount } = data.messages;
197
- // if (
198
- // messages &&
199
- // messages.length > 0 &&
200
- // totalCount !== messeageTotalCount &&
201
- // (loadingOldMessages || channelMessages.length === 0)
202
- // ) {
203
- // setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
204
- // setLoadingOldMessages(false);
205
- // setTotalCount(messeageTotalCount);
206
- // }
207
- // // if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
208
- // }
209
- // }, [data, loadingOldMessages, channelMessages]);///
210
- ////......... initiate messages ......................////
211
- // useEffect(() => {
212
- // if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
213
- // console.log('loading msg')
214
- // const { data: messages, totalCount: messeageTotalCount } = data.messages;
215
- // if (messages && messages.length > 0) {
216
- // setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
217
- // setLoadingOldMessages(false);
218
- // }
219
- // if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
220
- // }
221
- // }, [data, loadingOldMessages, channelMessages, totalCount]);
222
- ////.... initiate messages end................................////
223
-
224
- // useEffect(() => {
225
- // if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
226
- // console.log('initiate msg')
227
- // const { data: messages, totalCount: messeageTotalCount } = data.messages;
228
- // if (messages && messages.length > 0) {
229
- // setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
230
- // setTotalCount(messeageTotalCount);
231
- // }
232
- // if(loadingOldMessages) setLoadingOldMessages(false);
233
- // }
234
-
235
- // }, [data, channelMessages,loadingOldMessages]);
236
-
237
174
  useEffect(() => {
238
- if ((data?.messages?.data && channelMessages.length === 0) || (data?.messages?.data && loadingOldMessages)) {
175
+ if (data?.messages?.data) {
239
176
  const { data: messages, totalCount: messeageTotalCount } = data.messages;
240
- if (messages && messages.length > 0) {
177
+ if (
178
+ (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
179
+ (messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))
180
+ ) {
241
181
  setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
242
182
  setTotalCount(messeageTotalCount);
243
183
  }
244
- setLoadEarlierMsg(false);
245
- if (loadingOldMessages) setLoadingOldMessages(false);
246
- }
247
- }, [data, loadingOldMessages, channelMessages]);
248
184
 
249
- React.useEffect(() => {
250
- if (newMessage) {
251
- const msg = newMessage?.chatMessageAdded;
252
- setTotalCount((preCount: any) => preCount + 1);
253
- setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
185
+ if (loadingOldMessages && channelMessages) setLoadingOldMessages(false);
254
186
  }
255
- }, [newMessage]);
256
-
257
- // useEffect(() => {
258
- // if (data?.messages?.data) {
259
- // const { data: messages, totalCount: messeageTotalCount } = data.messages;
260
- // console.log('messeageTotalCount',messeageTotalCount)
261
- // console.log('totalCount',totalCount)
262
- // if (messages && messages.length > 0) {
263
- // setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
264
- // }
265
- // if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
266
- // }
267
- // }, [data]);
268
-
269
- // useEffect(() => {
270
- // if (checkForMessages?.messages?.totalCount > totalCount) {
271
- // const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
272
- // refetch({
273
- // limit: numberOfNewMessages,
274
- // }).then(({ data }) => {
275
- // if (!data?.messages) {
276
- // return;
277
- // }
278
- // const { data: messages, totalCount }:any = data.messages;
279
- // setTotalCount(totalCount);
280
- // setChannelMessages((oldMessages:any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
281
- // });
282
- // }
283
- // }, [checkForMessages, totalCount]);
284
- ////////...............New msg check...........////
285
- // useEffect(() => {
286
- // if (
287
- // !messageLoading &&
288
- // checkForMessages?.messages?.totalCount &&
289
- // checkForMessages?.messages?.totalCount > totalCount
290
- // ) {
291
- // const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
292
- // console.log('new msg check');
293
- // refetch({
294
- // channelId: channelId?.toString(),
295
- // parentId: null,
296
- // limit: numberOfNewMessages,
297
- // }).then(({ data }) => {
298
- // if (!data?.messages) {
299
- // return;
300
- // }
301
- // const { data: messages, totalCount }: any = data.messages;
302
- // setTotalCount(totalCount);
303
- // setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
304
- // });
305
- // }
306
- // }, [checkForMessages, totalCount]);
307
- ////////////....new msg check end.........//
308
-
309
- // const onFetchOld = useCallback(() => {
310
- // // if (data?.messages?.totalCount > channelMessages.length) {
311
- // //if(channelMessages.length !== data?.messages?.totalCount){
312
- // if(totalCount > channelMessages.length){
313
- // setLoadingOldMessages(true);
314
- // refetch({ skip: channelMessages.length });
315
- // }
316
- // }, [data, channelMessages]);
317
-
318
- // const onFetchOld = () => {
319
- // // if (data?.messages?.totalCount > channelMessages.length) {
320
- // //if(channelMessages.length !== data?.messages?.totalCount){
321
- // if(totalCount > channelMessages.length){
322
- // setLoadingOldMessages(true);
323
- // refetch({ skip: channelMessages.length });
324
- // }
325
- // };
187
+ }, [data, loadingOldMessages, channelMessages, totalCount]);
326
188
 
327
- // const onFetchOld = useCallback(() => {
328
- // if (data?.messages?.totalCount > channelMessages.length) {
329
- // console.log('fetchmore')
330
-
331
- // refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then((res:any)=>{
332
- // setLoadingOldMessages(true);
333
- // });
334
-
335
- // }
336
- // }, [data, channelMessages]);
337
-
338
- const onFetchOld = useCallback((data: any, channelMessages: any) => {
339
- if (data?.messages?.totalCount > channelMessages.length) {
189
+ const onFetchOld = useCallback(async () => {
190
+ if (totalCount > channelMessages.length && !loadingOldMessages) {
340
191
  setLoadEarlierMsg(true);
341
- refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then(
342
- (res: any) => setLoadingOldMessages(true),
343
- );
344
- }
345
- }, []);
192
+ try {
193
+ const response = await fetchMoreMessages({
194
+ variables: {
195
+ channelId: channelId?.toString(),
196
+ parentId: null,
197
+ skip: channelMessages.length,
198
+ },
199
+ });
200
+ if (response?.data) {
201
+ setSkip(channelMessages.length);
202
+ setLoadEarlierMsg(false);
203
+ setLoadingOldMessages(true);
204
+ }
205
+ } catch (error: any) {
206
+ setLoadEarlierMsg(false);
207
+ }
346
208
 
347
- // const onFetchOld = () => {
348
- // if(totalCount > channelMessages.length){
349
- // console.log('totalCount',totalCount)
350
- // console.log('channelMessages.length',channelMessages.length)
351
- // setLoadingOldMessages(true);
352
- // refetch({
353
- // skip: channelMessages.length
354
- // });
355
- // }
356
- // };
209
+ // ?.then((res: any) => {
210
+ // setLoadingOldMessages(true);
211
+ // });
212
+ }
213
+ }, [totalCount, channelMessages]);
357
214
 
358
215
  // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
359
216
  // return contentOffset.y <= 100; // 100px from top
@@ -395,130 +252,6 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
395
252
  if (imageSource.cancelled) setLoading(false);
396
253
  };
397
254
 
398
- // const sendPushNotification = async (title: String, body: String, data: any, to: any) => {
399
- // try {
400
- // const response = await fetch('https://exp.host/--/api/v2/push/send/', {
401
- // method: 'POST',
402
- // headers: {
403
- // Accept: 'application/json',
404
- // 'Accept-Encoding': 'gzip, deflate',
405
- // 'Content-Type': 'application/json',
406
- // },
407
- // body: JSON.stringify({
408
- // to: to,
409
- // data: data,
410
- // title: title,
411
- // body: body,
412
- // sound: Platform.OS === 'android' ? undefined || null : 'default',
413
- // }),
414
- // });
415
- // const result: any = await response.json();
416
- // console.log('expo api response', result);
417
- // } catch (error) {
418
- // console.error('Error:', error);
419
- // }
420
-
421
- // // fetch('https://exp.host/--/api/v2/push/send/', {
422
- // // method: 'POST',
423
- // // headers: {
424
- // // Accept: 'application/json',
425
- // // 'Accept-Encoding': 'gzip, deflate',
426
- // // 'Content-Type': 'application/json',
427
- // // },
428
- // // body: JSON.stringify({
429
- // // to: to,
430
- // // data: data,
431
- // // title: title,
432
- // // body: body,
433
- // // sound: Platform.OS === 'android' ? null : 'default',
434
- // // }),
435
- // // });
436
- // };
437
-
438
- // const handleSend = useCallback(
439
- // async (message: string) => {
440
- // // if (!(message && channelId)) {
441
- // // return;
442
- // // }
443
-
444
- // if (!channelId) return;
445
- // if (!message && message != ' ' && images.length == 0) return;
446
-
447
- // setLoading(true);
448
- // const { data } = await sendMsg({
449
- // variables: {
450
- // channelId,
451
- // content: message,
452
- // },
453
- // update: (cache, { data, errors }) => {
454
- // if (!data || errors) {
455
- // setLoading(false);
456
- // return;
457
- // }
458
- // setChannelMessages((messages) => [...messages, data?.sendMessage]);
459
- // setTotalCount((t) => t + 1);
460
- // setChannelToTop(channelToTop + 1);
461
- // setLoading(false);
462
- // const title: String = currentUser?.givenName+' '+currentUser?.familyName+' in Followup Chat';
463
- // const body: String = message;
464
- // const notificationData: any = {
465
- // url: config.INBOX_MESSEGE_PATH,
466
- // params: { channelId, hideTabBar: true },
467
- // screen: 'DialogMessages',
468
- // };
469
- // console.log('expo to',JSON.stringify(expoTokens));
470
- // if (expoTokens?.length > 0) {
471
- // const to: any = expoTokens?.length > 0 ? expoTokens : [];
472
-
473
- // sendPushNotification(title, body, notificationData, to);
474
- // }
475
-
476
- // setMsg('');
477
- // },
478
- // });
479
- // if (images && images.length > 0 && data?.sendMessage?.id) {
480
- // const { id: postId } = data.sendMessage;
481
- // setLoading(true);
482
- // const uploadResponse = await startUpload({
483
- // file: images,
484
- // saveUploadedFile: {
485
- // variables: {
486
- // postId,
487
- // },
488
- // },
489
- // createUploadLink: {
490
- // variables: {
491
- // postId,
492
- // },
493
- // },
494
- // });
495
- // if (uploadResponse?.error) setLoading(false);
496
- // const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
497
- // if (uploadResponse.data) {
498
- // setImage('');
499
- // setFiles([]);
500
- // setImages([]);
501
- // setLoading(false);
502
- // }
503
- // setChannelMessages((messages) =>
504
- // messages.map((message) => {
505
- // if (message.id === postId) {
506
- // return {
507
- // ...message,
508
- // files: {
509
- // totalCount: uploadedFiles.length,
510
- // data: uploadedFiles,
511
- // },
512
- // };
513
- // }
514
- // return message;
515
- // }),
516
- // );
517
- // }
518
- // },
519
- // [setChannelMessages, currentUser, channelId, images,expoTokens],
520
- // );
521
-
522
255
  const handleSend = useCallback(
523
256
  async (message: string) => {
524
257
  if (!channelId) return;
@@ -534,7 +267,7 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
534
267
  if (images && images.length > 0) {
535
268
  const newPostId = await refetchNewPostId();
536
269
  const postId: any = newPostId?.data?.getNewMongooseObjectId?.toString();
537
- // const postId: any = mongooseObjectId?.getNewMongooseObjectId;
270
+
538
271
  setLoading(true);
539
272
  const uploadResponse = await startUpload({
540
273
  file: images,
@@ -571,22 +304,10 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
571
304
  setLoading(false);
572
305
  return;
573
306
  }
574
- // setChannelMessages((messages: any) => [
575
- // ...messages,
576
- // {
577
- // ...data?.sendMessage,
578
- // files: {
579
- // totalCount: uploadedFiles.length,
580
- // data: uploadedFiles,
581
- // },
582
- // },
583
- // ]);
584
- // setTotalCount((t: any) => t + 1);
307
+
585
308
  setChannelToTop(channelToTop + 1);
586
309
  setLoading(false);
587
310
  setMsg('');
588
- const msg = message == '' ? 'Send a file' : message;
589
- //sendPushNotification(data?.sendMessage, channelId);
590
311
  },
591
312
  });
592
313
  }
@@ -603,12 +324,9 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
603
324
  setLoading(false);
604
325
  return;
605
326
  }
606
- // setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
607
- // setTotalCount((t: any) => t + 1);
608
327
  setChannelToTop(channelToTop + 1);
609
328
  setLoading(false);
610
329
  setMsg('');
611
- // sendPushNotification(data?.sendMessage, channelId);
612
330
  },
613
331
  });
614
332
  }
@@ -616,153 +334,6 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
616
334
  [mongooseObjectId, setChannelMessages, channelId, images, channelToTop, expoTokens],
617
335
  );
618
336
 
619
- // const sendPushNotification = async (post: IPost, channelId: string) => {
620
- // const notificationData: IExpoNotificationData = {
621
- // url: config.INBOX_MESSEGE_PATH,
622
- // params: { channelId, hideTabBar: true },
623
- // screen: 'DialogMessages',
624
- // other: { sound: Platform.OS === 'android' ? undefined || null : 'default' },
625
- // };
626
-
627
- // await sendExpoNotificationOnPostMutation({
628
- // variables: {
629
- // postId: post?.id?.toString(),
630
- // notificationData,
631
- // },
632
- // });
633
- // };
634
-
635
- // const fetchTokenAndSendPushNotification = (message: any, channelId: any) => {
636
- // const givenName = auth?.profile?.given_name ?? '';
637
- // const familyName = auth?.profile?.family_name ?? '';
638
- // const fullName = givenName ? givenName + ' ' + familyName : '';
639
- // const title: String = fullName ? fullName : 'Message';
640
- // const body: String = message;
641
- // const notificationData: any = {
642
- // url: config.INBOX_MESSEGE_PATH,
643
- // params: { channelId, hideTabBar: true },
644
- // screen: 'DialogMessages',
645
- // };
646
- // refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
647
- // if (res?.data?.viewChannelDetail?.members?.length) {
648
- // const channelData: any =
649
- // res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
650
- // const tokens: any =
651
- // channelData
652
- // ?.map(
653
- // (u: any) =>
654
- // u?.user?.tokens
655
- // ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
656
- // ?.map((et: any) => et?.token) ?? [],
657
- // )
658
- // ?.flat(1)
659
- // ?.filter((t: any) => t)
660
- // ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
661
- // console.log('expo to', JSON.stringify(tokens));
662
- // if (tokens?.length > 0) {
663
- // const to: any = tokens?.length > 0 ? tokens : [];
664
- // sendPushNotification(title, body, notificationData, to);
665
- // }
666
- // }
667
- // });
668
- // };
669
-
670
- // const handleSend1 = async (message: string) => {
671
- // if (!channelId) return;
672
- // if (!message && message != ' ' && images.length == 0) return;
673
-
674
- // setLoading(true);
675
- // const { data } = await sendMsg({
676
- // variables: {
677
- // channelId,
678
- // content: message,
679
- // },
680
- // update: (cache, { data, errors }: any) => {
681
- // if (!data || errors) {
682
- // setLoading(false);
683
- // return;
684
- // }
685
- // setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
686
- // setTotalCount((t: any) => t + 1);
687
- // setChannelToTop(channelToTop + 1);
688
- // setLoading(false);
689
- // setMsg('');
690
- // const givenName = auth?.profile?.given_name ?? '';
691
- // const familyName = auth?.profile?.family_name ?? '';
692
- // const fullName = givenName ? givenName + ' ' + familyName : '';
693
- // const title: String = fullName ? fullName : 'Message';
694
- // const body: String = message;
695
- // const notificationData: any = {
696
- // url: config.INBOX_MESSEGE_PATH,
697
- // params: { channelId, hideTabBar: true },
698
- // screen: 'DialogMessages',
699
- // };
700
- // refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
701
- // if (res?.data?.viewChannelDetail?.members?.length) {
702
- // const channelData: any =
703
- // res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
704
- // const tokens: any =
705
- // channelData
706
- // ?.map(
707
- // (u: any) =>
708
- // u?.user?.tokens
709
- // ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
710
- // ?.map((et: any) => et?.token) ?? [],
711
- // )
712
- // ?.flat(1)
713
- // ?.filter((t: any) => t)
714
- // ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
715
- // console.log('expo to', JSON.stringify(tokens));
716
- // if (tokens?.length > 0) {
717
- // const to: any = tokens?.length > 0 ? tokens : [];
718
-
719
- // sendPushNotification(title, body, notificationData, to);
720
- // }
721
- // }
722
- // });
723
- // },
724
- // });
725
- // if (images && images.length > 0 && data?.sendMessage?.id) {
726
- // const { id: postId } = data.sendMessage;
727
- // setLoading(true);
728
- // const uploadResponse = await startUpload({
729
- // file: images,
730
- // saveUploadedFile: {
731
- // variables: {
732
- // postId,
733
- // },
734
- // },
735
- // createUploadLink: {
736
- // variables: {
737
- // postId,
738
- // },
739
- // },
740
- // });
741
- // if (uploadResponse?.error) setLoading(false);
742
- // const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
743
- // if (uploadResponse.data) {
744
- // setImage('');
745
- // setFiles([]);
746
- // setImages([]);
747
- // setLoading(false);
748
- // }
749
- // setChannelMessages((messages: any) =>
750
- // messages.map((message: any) => {
751
- // if (message.id === postId) {
752
- // return {
753
- // ...message,
754
- // files: {
755
- // totalCount: uploadedFiles.length,
756
- // data: uploadedFiles,
757
- // },
758
- // };
759
- // }
760
- // return message;
761
- // }),
762
- // );
763
- // }
764
- // };
765
-
766
337
  const messageList = useMemo(() => {
767
338
  let currentDate = '';
768
339
  let res: any = [];
@@ -1047,74 +618,83 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
1047
618
  );
1048
619
  }, [imageObject]);
1049
620
 
1050
- const renderMessage = (props: any) => {
1051
- // const {
1052
- // currentMessage: { text: currText },
1053
- // } = props;
621
+ const renderMessage = useCallback(
622
+ (props: any) => {
623
+ // const {
624
+ // currentMessage: { text: currText },
625
+ // } = props;
1054
626
 
1055
- //let messageTextStyle: any;
627
+ //let messageTextStyle: any;
1056
628
 
1057
- // Make "pure emoji" messages much bigger than plain text.
1058
- // if (currText && emojiUtils.isPureEmojiString(currText)) {
1059
- // messageTextStyle = {
1060
- // fontSize: 28,
1061
- // // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
1062
- // lineHeight: Platform.OS === 'android' ? 34 : 30,
1063
- // }
1064
- // }
629
+ // Make "pure emoji" messages much bigger than plain text.
630
+ // if (currText && emojiUtils.isPureEmojiString(currText)) {
631
+ // messageTextStyle = {
632
+ // fontSize: 28,
633
+ // // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
634
+ // lineHeight: Platform.OS === 'android' ? 34 : 30,
635
+ // }
636
+ // }
1065
637
 
1066
- // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
1067
- return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
1068
- };
638
+ // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
639
+ return (
640
+ <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
641
+ );
642
+ },
643
+ [isShowImageViewer],
644
+ );
1069
645
 
1070
- let onScroll = false;
646
+ // const renderMessage = (props: any) => {
647
+ // // const {
648
+ // // currentMessage: { text: currText },
649
+ // // } = props;
1071
650
 
1072
- // const onEndReached = () => {
1073
- // console.log('on end reached');
1074
- // if (!onScroll) return;
1075
- // // load messages, show ActivityIndicator
1076
- // onScroll = false;
1077
- // // setLoadingOldMessages(true);
1078
- // };
651
+ // //let messageTextStyle: any;
1079
652
 
1080
- // const onMomentumScrollBegin = useCallback(
1081
- // ({ nativeEvent }: any) => {
1082
- // onScroll = true;
1083
- // console.log('scroll top');
1084
- // if (!loadingOldMessages && channelMessages?.length <= 10 && channelMessages?.length != totalCount) {
1085
- // onFetchOld();
1086
- // } else if (!loadingOldMessages && isCloseToTop(nativeEvent) && channelMessages?.length != totalCount) {
1087
- // onFetchOld();
1088
- // }
1089
- // },
1090
- // [loadingOldMessages, channelMessages],
1091
- // );
653
+ // // Make "pure emoji" messages much bigger than plain text.
654
+ // // if (currText && emojiUtils.isPureEmojiString(currText)) {
655
+ // // messageTextStyle = {
656
+ // // fontSize: 28,
657
+ // // // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
658
+ // // lineHeight: Platform.OS === 'android' ? 34 : 30,
659
+ // // }
660
+ // // }
1092
661
 
1093
- // const onMomentumScrollBegin = ({ nativeEvent }: any) => {
1094
- // onScroll = true;
1095
- // console.log('scroll top');
1096
- // if (
1097
- // !loadingOldMessages &&
1098
- // (channelMessages?.length <= 10 || isCloseToTop(nativeEvent)) &&
1099
- // channelMessages?.length != totalCount
1100
- // ) {
1101
- // onFetchOld();
1102
- // }
662
+ // // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
663
+ // return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
1103
664
  // };
1104
665
 
666
+ let onScroll = false;
667
+
668
+ const onMomentumScrollBegin = async ({ nativeEvent }: any) => {
669
+ onScroll = true;
670
+ console.log('scroll top');
671
+ if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > channelMessages?.length) {
672
+ await onFetchOld();
673
+ }
674
+ };
675
+
676
+ const onEndReached = () => {
677
+ console.log('on end reached');
678
+ if (!onScroll) return;
679
+ // load messages, show ActivityIndicator
680
+ onScroll = false;
681
+ // setLoadingOldMessages(true);
682
+ };
683
+
1105
684
  return (
1106
685
  <>
1107
686
  {loadEarlierMsg && <Spinner />}
1108
687
 
1109
688
  <GiftedChat
689
+ ref={messageRootListRef}
1110
690
  wrapInSafeArea={false}
1111
691
  renderLoading={() => <Spinner />}
1112
692
  messages={messageList}
1113
- // listViewProps={{
1114
- // onEndReached: onEndReached,
1115
- // onEndReachedThreshold: 0.5,
1116
- // onMomentumScrollBegin: onMomentumScrollBegin,
1117
- // }}
693
+ listViewProps={{
694
+ onEndReached: onEndReached,
695
+ onEndReachedThreshold: 0.5,
696
+ onMomentumScrollBegin: onMomentumScrollBegin,
697
+ }}
1118
698
  // listViewProps={{
1119
699
  // scrollEventThrottle: 400,
1120
700
  // onScroll: ({ nativeEvent }) => { console.log('scroll')
@@ -1137,33 +717,70 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
1137
717
  //onLoadEarlier={onFetchOld}
1138
718
  //infiniteScroll={true}
1139
719
  renderSend={renderSend}
1140
- loadEarlier={data?.messages?.totalCount > channelMessages.length}
1141
- isLoadingEarlier={loadEarlierMsg}
720
+ // loadEarlier={data?.messages?.totalCount > channelMessages.length}
721
+ //isLoadingEarlier={loadEarlierMsg}
1142
722
  //extraData={{ isLoadingEarlier: loadingOldMessages }}
1143
- renderLoadEarlier={() =>
1144
- !loadEarlierMsg && (
1145
- <Center py={2}>
1146
- <Button
1147
- onPress={() => onFetchOld(data, channelMessages)}
1148
- variant={'outline'}
1149
- _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
1150
- >
1151
- Load earlier messages
1152
- </Button>
1153
- </Center>
1154
- )
1155
- }
723
+ // renderLoadEarlier={() =>
724
+ // !loadEarlierMsg && (
725
+ // <Center py={2}>
726
+ // <Button
727
+ // onPress={() => onFetchOld()}
728
+ // variant={'outline'}
729
+ // _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
730
+ // >
731
+ // Load earlier messages
732
+ // </Button>
733
+ // </Center>
734
+ // )
735
+ // }
1156
736
  renderMessageText={renderMessageText}
1157
737
  minInputToolbarHeight={50}
1158
738
  renderActions={renderActions}
1159
739
  renderAccessory={renderAccessory}
1160
740
  renderMessage={renderMessage}
1161
741
  renderChatFooter={() => (
1162
- <ImageViewerModal
1163
- isVisible={isShowImageViewer}
1164
- setVisible={setImageViewer}
1165
- modalContent={modalContent}
1166
- />
742
+ <>
743
+ <ImageViewerModal
744
+ isVisible={isShowImageViewer}
745
+ setVisible={setImageViewer}
746
+ modalContent={modalContent}
747
+ />
748
+ <SubscriptionHandler
749
+ channelId={channelId?.toString()}
750
+ subscribeToNewMessages={() =>
751
+ subscribeToMore({
752
+ document: CHAT_MESSAGE_ADDED,
753
+ variables: {
754
+ channelId: channelId?.toString(),
755
+ },
756
+ updateQuery: (prev, { subscriptionData }: any) => {
757
+ if (!subscriptionData.data) return prev;
758
+ setSkip(0);
759
+ const newMessage: any = subscriptionData?.data?.chatMessageAdded;
760
+ const previousData = prev?.messages?.data
761
+ ? [...prev.messages.data, newMessage]
762
+ : [];
763
+ const totalMsgCount = prev?.messages?.totalCount + 1;
764
+ const merged = {
765
+ ...prev,
766
+ messages: {
767
+ ...prev?.messages,
768
+ data: previousData,
769
+ totalCount: totalMsgCount,
770
+ },
771
+ };
772
+ return merged;
773
+ // return Object.assign({}, prev, {
774
+ // messages: {
775
+ // data: [...prev.messages.data, newMessage],
776
+ // totalCount: prev.messages.totalCount + 1,
777
+ // },
778
+ // });
779
+ },
780
+ })
781
+ }
782
+ />
783
+ </>
1167
784
  )}
1168
785
  lightboxProps={{
1169
786
  underlayColor: 'transparent',
@@ -1175,4 +792,9 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
1175
792
  );
1176
793
  };
1177
794
 
795
+ const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: ISubscriptionHandlerProps) => {
796
+ useEffect(() => subscribeToNewMessages(), [channelId]);
797
+ return <></>;
798
+ };
799
+
1178
800
  export const ConversationView = React.memo(ConversationViewComponent);