@messenger-box/platform-mobile 0.0.1-alpha.392 → 0.0.1-alpha.394

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 +342 -658
  3. package/lib/index.js.map +1 -1
  4. package/package.json +4 -4
  5. package/src/screens/inbox/components/DialogsListItem.tsx +85 -27
  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 +72 -561
  9. package/src/screens/inbox/containers/ThreadConversationView.tsx +222 -112
package/src/screens/inbox/containers/ThreadConversationView.tsx CHANGED
@@ -77,6 +77,7 @@ export interface AlertMessageAttachmentsInterface {
77
77
 
78
78
  interface IThreadSubscriptionHandlerProps {
79
79
  subscribeToNewMessages: () => any;
80
+ channelId: string;
80
81
  }
81
82
 
82
83
  const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }: any) => {
@@ -124,97 +125,160 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
124
125
  const [sendThreadMessage] = useSendThreadMessageMutation();
125
126
  const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
126
127
 
127
- const [getThreadMessages, { data: threadMessagesData, loading: threadLoading, refetch: refetchThreadMessages }] =
128
- useThreadMessagesLazyQuery({
129
- variables: {
130
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
131
- role: role?.toString(),
132
- postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
133
- },
134
- fetchPolicy: 'cache-and-network',
135
- });
128
+ // const [getThreadMessages, { data: threadMessagesData, loading: threadLoading, refetch: refetchThreadMessages }] =
129
+ // useThreadMessagesLazyQuery({
130
+ // variables: {
131
+ // channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
132
+ // role: role?.toString(),
133
+ // postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
134
+ // },
135
+ // fetchPolicy: 'cache-and-network',
136
+ // });
136
137
 
137
- const {
138
- data,
139
- loading: messageLoading,
140
- refetch,
141
- fetchMore: fetchMoreMessages,
142
- subscribeToMore,
143
- }: any = usePostThreadMessagesQuery({
144
- variables: {
145
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
146
- parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
147
- limit: MESSAGES_PER_PAGE,
148
- skip: skip,
149
- },
150
- skip: !channelId,
151
- fetchPolicy: 'cache-and-network',
152
- refetchWritePolicy: 'merge',
153
- });
138
+ const [
139
+ getThreadMessages,
140
+ { data, loading: threadLoading, fetchMore: fetchMoreMessages, refetch: refetchThreadMessages, subscribeToMore },
141
+ ] = useThreadMessagesLazyQuery();
142
+
143
+ // const {
144
+ // data,
145
+ // loading: messageLoading,
146
+ // refetch,
147
+ // fetchMore: fetchMoreMessages,
148
+ // subscribeToMore,
149
+ // }: any = usePostThreadMessagesQuery({
150
+ // variables: {
151
+ // channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
152
+ // parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
153
+ // limit: MESSAGES_PER_PAGE,
154
+ // skip: skip,
155
+ // },
156
+ // skip: !channelId,
157
+ // fetchPolicy: 'cache-and-network',
158
+ // refetchWritePolicy: 'merge',
159
+ // });
160
+
161
+ // useFocusEffect(
162
+ // React.useCallback(() => {
163
+ // navigation?.setOptions({ title: params?.title ?? 'Thread' });
164
+ // if (parentId || parentId == 0) {
165
+ // refetchThreadMessages({
166
+ // channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
167
+ // role: role?.toString(),
168
+ // postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
169
+ // });
170
+ // }
171
+ // refetch({
172
+ // channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
173
+ // parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
174
+ // limit: MESSAGES_PER_PAGE,
175
+ // skip: 0,
176
+ // }).then(({ data }) => {
177
+ // if (!data?.messages) {
178
+ // return;
179
+ // }
180
+ // const { data: messages, totalCount }: any = data.messages;
181
+ // setTotalCount(totalCount);
182
+ // setChannelMessages(messages);
183
+ // //setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
184
+ // });
185
+ // return () => {
186
+ // setTotalCount(0);
187
+ // setChannelMessages([]);
188
+ // setThreadPost([]);
189
+ // };
190
+ // }, [channelId, parentId]),
191
+ // );
154
192
 
155
193
  useFocusEffect(
156
194
  React.useCallback(() => {
157
195
  navigation?.setOptions({ title: params?.title ?? 'Thread' });
158
- if (parentId || parentId == 0) {
196
+ if (postParentId) {
159
197
  refetchThreadMessages({
160
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
198
+ channelId: channelId?.toString(),
161
199
  role: role?.toString(),
162
- postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
200
+ postParentId: postParentId?.toString(),
201
+ selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
202
+ repliesLimit2: MESSAGES_PER_PAGE,
203
+ repliesSkip2: 0,
204
+ skip: 0,
205
+ limit: 1,
163
206
  });
164
207
  }
165
- refetch({
166
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
167
- parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
168
- limit: MESSAGES_PER_PAGE,
169
- skip: 0,
170
- }).then(({ data }) => {
171
- if (!data?.messages) {
172
- return;
173
- }
174
- const { data: messages, totalCount }: any = data.messages;
175
- setTotalCount(totalCount);
176
- setChannelMessages(messages);
177
- //setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
178
- });
208
+ setParentId(postParentId);
209
+
179
210
  return () => {
180
211
  setTotalCount(0);
181
212
  setChannelMessages([]);
182
213
  setThreadPost([]);
183
214
  };
184
- }, [channelId, parentId]),
215
+ }, [postParentId]),
185
216
  );
186
217
 
187
- useEffect(() => {
188
- setParentId(postParentId);
189
- }, [postParentId]);
218
+ // useEffect(() => {
219
+ // setParentId(postParentId);
220
+ // }, [postParentId]);
190
221
 
191
222
  useEffect(() => {
192
- if (parentId && parentId == 0) {
223
+ //if (parentId && parentId == 0) {
224
+ if (channelId && parentId) {
193
225
  getThreadMessages({
194
226
  variables: {
195
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
227
+ channelId: channelId?.toString(),
196
228
  role: role?.toString(),
197
229
  postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
230
+ selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
231
+ repliesLimit2: MESSAGES_PER_PAGE,
232
+ repliesSkip2: 0,
233
+ skip: 0,
234
+ limit: 1,
198
235
  },
199
236
  });
200
237
  }
201
238
  }, [parentId]);
202
239
 
203
- useEffect(() => {
204
- if (threadMessagesData?.threadMessages?.data) {
205
- const { data: threads, totalCount: threadTotalCount }: any = threadMessagesData?.threadMessages;
206
- const threadMessage = threads?.map((t: any) => t?.post);
207
-
208
- if (threadPost?.length == 0) {
209
- setThreadPost(threadMessage);
210
- setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
240
+ React.useEffect(() => {
241
+ if (data?.threadMessages?.data) {
242
+ const threads: any = data.threadMessages;
243
+ const threadPost = threads?.data?.map((t: any) => t?.post) ?? [];
244
+ const threadReplies = threads?.data?.map((t: any) => t?.replies)?.flat(1) ?? [];
245
+ const messeageTotalCount = threads?.data?.map((t: any) => t?.replyCount)?.[0] ?? 0;
246
+ const messages = [...threadPost, ...threadReplies];
247
+ if (
248
+ (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
249
+ (messages && messages.length > 0 && channelMessages.length === 0)
250
+ ) {
251
+ setThreadMessages(messages, messeageTotalCount);
211
252
  }
212
- // if (!isPostParentIdThread) {
213
- // // setTotalCount((pc: any) => pc + threadTotalCount);
214
- // setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
215
- // }
216
253
  }
217
- }, [threadMessagesData, threadPost, isPostParentIdThread]);
254
+ if (isScrollToBottom && channelMessages) scrollToBottom();
255
+ // scrollToBottom();
256
+ // if (!isPostParentIdThread) {
257
+ // // setTotalCount((pc: any) => pc + threadTotalCount);
258
+ // setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
259
+ // }
260
+ }, [data, channelMessages, loadingOldMessages, totalCount, isPostParentIdThread, isScrollToBottom]);
261
+
262
+ const setThreadMessages = (messages: any, messagesTotalCount: number) => {
263
+ setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
264
+ setTotalCount(messagesTotalCount);
265
+ };
266
+
267
+ // useEffect(() => {
268
+ // //if (threadMessagesData?.threadMessages?.data) {
269
+ // // console.log('threadMessagesData?.threadMessages', JSON.stringify(threadMessagesData?.threadMessages));
270
+ // const threads: any = threadMessagesData?.threadMessages;
271
+ // if (threadPost?.length == 0 && threads?.data?.length > 0) {
272
+ // const threadMessage = threads?.data?.map((t: any) => t?.post);
273
+ // setThreadPost(threadMessage);
274
+ // setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
275
+ // }
276
+ // // if (!isPostParentIdThread) {
277
+ // // // setTotalCount((pc: any) => pc + threadTotalCount);
278
+ // // setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
279
+ // // }
280
+ // // }
281
+ // }, [threadMessagesData, threadPost, isPostParentIdThread]);
218
282
 
219
283
  // React.useEffect(() => {
220
284
  // if (newThreadMsg) {
@@ -225,17 +289,17 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
225
289
  // }
226
290
  // }, [newThreadMsg]);
227
291
 
228
- React.useEffect(() => {
229
- if (newThreadMsg) {
230
- console.log('newThreadMsg');
231
- refetch({
232
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
233
- parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
234
- limit: MESSAGES_PER_PAGE,
235
- skip: 0,
236
- });
237
- }
238
- }, [newThreadMsg, skip, parentId]);
292
+ // React.useEffect(() => {
293
+ // if (newThreadMsg) {
294
+ // console.log('newThreadMsg');
295
+ // refetch({
296
+ // channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
297
+ // parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
298
+ // limit: MESSAGES_PER_PAGE,
299
+ // skip: 0,
300
+ // });
301
+ // }
302
+ // }, [newThreadMsg, skip, parentId]);
239
303
 
240
304
  // useEffect(() => {
241
305
  // if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
@@ -264,33 +328,33 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
264
328
  // }
265
329
  // }, [data, loadingOldMessages, channelMessages, threadPost]);
266
330
 
267
- React.useEffect(() => {
268
- if (data?.messages?.data) {
269
- const { data: messages, totalCount: messeageTotalCount } = data.messages;
270
- if (
271
- (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
272
- (messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))
273
- ) {
274
- setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
275
- setTotalCount(messeageTotalCount);
276
- setLoadEarlierMsg(false);
277
- }
331
+ // React.useEffect(() => {
332
+ // if (data?.messages?.data) {
333
+ // const { data: messages, totalCount: messeageTotalCount } = data.messages;
334
+ // if (
335
+ // (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
336
+ // (messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))
337
+ // ) {
338
+ // setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
339
+ // setTotalCount(messeageTotalCount);
340
+ // setLoadEarlierMsg(false);
341
+ // }
278
342
 
279
- if (loadingOldMessages && channelMessages) setLoadingOldMessages(false);
343
+ // if (loadingOldMessages && channelMessages) setLoadingOldMessages(false);
280
344
 
281
- if (
282
- channelMessages &&
283
- channelMessages?.length == MESSAGES_PER_PAGE &&
284
- totalCount > channelMessages?.length
285
- ) {
286
- onFetchOld();
287
- }
288
- }
345
+ // // if (
346
+ // // channelMessages &&
347
+ // // channelMessages?.length == MESSAGES_PER_PAGE &&
348
+ // // totalCount > channelMessages?.length
349
+ // // ) {
350
+ // // onFetchOld();
351
+ // // }
352
+ // }
289
353
 
290
- // if (threadPost?.length > 0 && channelMessages.length == (0 || MESSAGES_PER_PAGE)) {
291
- // setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
292
- // }
293
- }, [data, loadingOldMessages, totalCount, channelMessages, isScrollToBottom]);
354
+ // // if (threadPost?.length > 0 && channelMessages.length == (0 || MESSAGES_PER_PAGE)) {
355
+ // // setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
356
+ // // }
357
+ // }, [data, loadingOldMessages, totalCount, channelMessages, isScrollToBottom]);
294
358
 
295
359
  // useEffect(() => {
296
360
  // if (
@@ -355,15 +419,41 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
355
419
  fetchMoreMessages({
356
420
  variables: {
357
421
  channelId: channelId?.toString(),
358
- parentId: null,
359
- skip: channelMessages.length,
422
+ role: role?.toString(),
423
+ postParentId: parentId?.toString(),
424
+ selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
425
+ repliesLimit2: MESSAGES_PER_PAGE,
426
+ repliesSkip2: channelMessages.length - 1,
427
+ skip: 0,
428
+ limit: 1,
429
+ // channelId: channelId?.toString(),
430
+ // parentId: null,
431
+ // skip: channelMessages.length,
360
432
  },
361
- })?.then((res: any) => setLoadingOldMessages(true));
433
+ })
434
+ .then((res: any) => {
435
+ if (res?.data?.threadMessages?.data) {
436
+ const threadReplies =
437
+ res?.data?.threadMessages?.data?.map((t: any) => t?.replies)?.flat(1) ?? [];
438
+ const messeageTotalCount =
439
+ res?.data?.threadMessages?.data?.map((t: any) => t?.replyCount)?.[0] ?? 0;
440
+ setThreadMessages(threadReplies, messeageTotalCount);
441
+ }
442
+ })
443
+ .finally(() => {
444
+ setLoadEarlierMsg(false);
445
+ setLoadingOldMessages(false);
446
+ })
447
+ .catch((error: any) => {
448
+ setLoadEarlierMsg(false);
449
+ setLoadingOldMessages(false);
450
+ });
451
+ //?.then((res: any) => setLoadingOldMessages(true));
362
452
  // refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then(
363
453
  // (res: any) => setLoadingOldMessages(true),
364
454
  // );
365
455
  }
366
- }, [totalCount, channelMessages]);
456
+ }, [parentId, channelId, totalCount, channelMessages]);
367
457
 
368
458
  // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
369
459
  // return contentOffset.y <= 100; // 100px from top
@@ -910,6 +1000,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
910
1000
  modalContent={modalContent}
911
1001
  />
912
1002
  <SubscriptionHandler
1003
+ channelId={channelId}
913
1004
  subscribeToNewMessages={() =>
914
1005
  subscribeToMore({
915
1006
  document: CHAT_MESSAGE_ADDED,
@@ -921,19 +1012,38 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
921
1012
  if (!subscriptionData.data) return prev;
922
1013
 
923
1014
  const newMessage: any = subscriptionData?.data?.threadChatMessageAdded;
924
- const mergedData = prev?.messages?.data
925
- ? [...prev.messages.data, newMessage]
926
- : [];
927
- const totalMsgCount = prev?.messages?.totalCount + 1;
1015
+ const threadReplies =
1016
+ prev?.threadMessages?.data?.map((t: any) => t?.replies)?.flat(1) ?? [];
1017
+ const replies = [...threadReplies, newMessage];
1018
+ const previousData = prev?.threadMessages?.data?.map((t: any) => {
1019
+ let thread = { ...t };
1020
+ thread.replies = replies;
1021
+ return thread;
1022
+ });
1023
+
1024
+ // const previousData = prev?.threadMessages?.data ? [...prev.threadMessages.data, newMessage] : [];
1025
+ // const totalMsgCount = prev?.threadMessages?.totalCount + 1;
928
1026
  const merged = {
929
1027
  ...prev,
930
- messages: {
931
- ...prev?.messages,
932
- data: mergedData,
933
- totalCount: totalMsgCount,
1028
+ threadMessages: {
1029
+ ...prev?.threadMessages,
1030
+ data: previousData,
934
1031
  },
935
1032
  };
936
1033
  return merged;
1034
+ // const mergedData = prev?.messages?.data
1035
+ // ? [...prev.messages.data, newMessage]
1036
+ // : [];
1037
+ // const totalMsgCount = prev?.messages?.totalCount + 1;
1038
+ // const merged = {
1039
+ // ...prev?.messages,
1040
+ // messages: {
1041
+ // ...prev?.messages,
1042
+ // data: mergedData,
1043
+ // totalCount: totalMsgCount,
1044
+ // },
1045
+ // };
1046
+ // return merged;
937
1047
  // return Object.assign({}, prev, {
938
1048
  // messages: {
939
1049
  // data: [...prev.messages.data, newMessage],
@@ -949,7 +1059,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
949
1059
  messagesContainerStyle={messageList?.length == 0 && { transform: [{ scaleY: -1 }] }}
950
1060
  renderChatEmpty={() => (
951
1061
  <>
952
- {!threadLoading && !messageLoading && messageList && messageList?.length == 0 && (
1062
+ {!threadLoading && messageList && messageList?.length == 0 && (
953
1063
  <Box p={5}>
954
1064
  <Center mt={6}>
955
1065
  <Icon as={Ionicons} name="chatbubbles" size={'xl'} />
@@ -969,8 +1079,8 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
969
1079
  );
970
1080
  };
971
1081
 
972
- const SubscriptionHandler = ({ subscribeToNewMessages }: IThreadSubscriptionHandlerProps) => {
973
- useEffect(() => subscribeToNewMessages(), []);
1082
+ const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubscriptionHandlerProps) => {
1083
+ useEffect(() => subscribeToNewMessages(), [channelId]);
974
1084
  return <></>;
975
1085
  };
976
1086