@messenger-box/platform-mobile 0.0.1-alpha.393 → 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 (5) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/lib/index.js +193 -90
  3. package/lib/index.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/screens/inbox/containers/ThreadConversationView.tsx +205 -97
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@messenger-box/platform-mobile",
3
- "version": "0.0.1-alpha.393",
3
+ "version": "0.0.1-alpha.394",
4
4
  "description": "Sample core for higher packages to depend on",
5
5
  "license": "ISC",
6
6
  "author": "CDMBase LLC",
@@ -40,5 +40,5 @@
40
40
  "typescript": {
41
41
  "definition": "lib/index.d.ts"
42
42
  },
43
- "gitHead": "f254347ff1e530eebfa57500fd05521a6d87c361"
43
+ "gitHead": "dafe4a45d99d1549b995883eefe8160f14d0559e"
44
44
  }
package/src/screens/inbox/containers/ThreadConversationView.tsx CHANGED
@@ -125,97 +125,160 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
125
125
  const [sendThreadMessage] = useSendThreadMessageMutation();
126
126
  const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
127
127
 
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
- });
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
+ // });
137
137
 
138
- const {
139
- data,
140
- loading: messageLoading,
141
- refetch,
142
- fetchMore: fetchMoreMessages,
143
- subscribeToMore,
144
- }: any = usePostThreadMessagesQuery({
145
- variables: {
146
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
147
- parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
148
- limit: MESSAGES_PER_PAGE,
149
- skip: skip,
150
- },
151
- skip: !channelId,
152
- fetchPolicy: 'cache-and-network',
153
- refetchWritePolicy: 'merge',
154
- });
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
+ // );
155
192
 
156
193
  useFocusEffect(
157
194
  React.useCallback(() => {
158
195
  navigation?.setOptions({ title: params?.title ?? 'Thread' });
159
- if (parentId || parentId == 0) {
196
+ if (postParentId) {
160
197
  refetchThreadMessages({
161
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
198
+ channelId: channelId?.toString(),
162
199
  role: role?.toString(),
163
- 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,
164
206
  });
165
207
  }
166
- refetch({
167
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
168
- parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
169
- limit: MESSAGES_PER_PAGE,
170
- skip: 0,
171
- }).then(({ data }) => {
172
- if (!data?.messages) {
173
- return;
174
- }
175
- const { data: messages, totalCount }: any = data.messages;
176
- setTotalCount(totalCount);
177
- setChannelMessages(messages);
178
- //setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
179
- });
208
+ setParentId(postParentId);
209
+
180
210
  return () => {
181
211
  setTotalCount(0);
182
212
  setChannelMessages([]);
183
213
  setThreadPost([]);
184
214
  };
185
- }, [channelId, parentId]),
215
+ }, [postParentId]),
186
216
  );
187
217
 
188
- useEffect(() => {
189
- setParentId(postParentId);
190
- }, [postParentId]);
218
+ // useEffect(() => {
219
+ // setParentId(postParentId);
220
+ // }, [postParentId]);
191
221
 
192
222
  useEffect(() => {
193
- if (parentId && parentId == 0) {
223
+ //if (parentId && parentId == 0) {
224
+ if (channelId && parentId) {
194
225
  getThreadMessages({
195
226
  variables: {
196
- channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
227
+ channelId: channelId?.toString(),
197
228
  role: role?.toString(),
198
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,
199
235
  },
200
236
  });
201
237
  }
202
238
  }, [parentId]);
203
239
 
204
- useEffect(() => {
205
- //if (threadMessagesData?.threadMessages?.data) {
206
- // console.log('threadMessagesData?.threadMessages', JSON.stringify(threadMessagesData?.threadMessages));
207
- const threads: any = threadMessagesData?.threadMessages;
208
- if (threadPost?.length == 0 && threads?.data?.length > 0) {
209
- const threadMessage = threads?.data?.map((t: any) => t?.post);
210
- setThreadPost(threadMessage);
211
- 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);
252
+ }
212
253
  }
254
+ if (isScrollToBottom && channelMessages) scrollToBottom();
255
+ // scrollToBottom();
213
256
  // if (!isPostParentIdThread) {
214
257
  // // setTotalCount((pc: any) => pc + threadTotalCount);
215
258
  // setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
216
259
  // }
217
- // }
218
- }, [threadMessagesData, threadPost, isPostParentIdThread]);
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]);
219
282
 
220
283
  // React.useEffect(() => {
221
284
  // if (newThreadMsg) {
@@ -265,33 +328,33 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
265
328
  // }
266
329
  // }, [data, loadingOldMessages, channelMessages, threadPost]);
267
330
 
268
- React.useEffect(() => {
269
- if (data?.messages?.data) {
270
- const { data: messages, totalCount: messeageTotalCount } = data.messages;
271
- if (
272
- (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
273
- (messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))
274
- ) {
275
- setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
276
- setTotalCount(messeageTotalCount);
277
- setLoadEarlierMsg(false);
278
- }
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
+ // }
279
342
 
280
- if (loadingOldMessages && channelMessages) setLoadingOldMessages(false);
343
+ // if (loadingOldMessages && channelMessages) setLoadingOldMessages(false);
281
344
 
282
- // if (
283
- // channelMessages &&
284
- // channelMessages?.length == MESSAGES_PER_PAGE &&
285
- // totalCount > channelMessages?.length
286
- // ) {
287
- // onFetchOld();
288
- // }
289
- }
345
+ // // if (
346
+ // // channelMessages &&
347
+ // // channelMessages?.length == MESSAGES_PER_PAGE &&
348
+ // // totalCount > channelMessages?.length
349
+ // // ) {
350
+ // // onFetchOld();
351
+ // // }
352
+ // }
290
353
 
291
- // if (threadPost?.length > 0 && channelMessages.length == (0 || MESSAGES_PER_PAGE)) {
292
- // setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
293
- // }
294
- }, [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]);
295
358
 
296
359
  // useEffect(() => {
297
360
  // if (
@@ -356,15 +419,41 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
356
419
  fetchMoreMessages({
357
420
  variables: {
358
421
  channelId: channelId?.toString(),
359
- parentId: null,
360
- 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,
361
432
  },
362
- })?.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));
363
452
  // refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then(
364
453
  // (res: any) => setLoadingOldMessages(true),
365
454
  // );
366
455
  }
367
- }, [totalCount, channelMessages]);
456
+ }, [parentId, channelId, totalCount, channelMessages]);
368
457
 
369
458
  // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
370
459
  // return contentOffset.y <= 100; // 100px from top
@@ -923,19 +1012,38 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
923
1012
  if (!subscriptionData.data) return prev;
924
1013
 
925
1014
  const newMessage: any = subscriptionData?.data?.threadChatMessageAdded;
926
- const mergedData = prev?.messages?.data
927
- ? [...prev.messages.data, newMessage]
928
- : [];
929
- 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;
930
1026
  const merged = {
931
- ...prev?.messages,
932
- messages: {
933
- ...prev?.messages,
934
- data: mergedData,
935
- totalCount: totalMsgCount,
1027
+ ...prev,
1028
+ threadMessages: {
1029
+ ...prev?.threadMessages,
1030
+ data: previousData,
936
1031
  },
937
1032
  };
938
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;
939
1047
  // return Object.assign({}, prev, {
940
1048
  // messages: {
941
1049
  // data: [...prev.messages.data, newMessage],
@@ -951,7 +1059,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
951
1059
  messagesContainerStyle={messageList?.length == 0 && { transform: [{ scaleY: -1 }] }}
952
1060
  renderChatEmpty={() => (
953
1061
  <>
954
- {!threadLoading && !messageLoading && messageList && messageList?.length == 0 && (
1062
+ {!threadLoading && messageList && messageList?.length == 0 && (
955
1063
  <Box p={5}>
956
1064
  <Center mt={6}>
957
1065
  <Icon as={Ionicons} name="chatbubbles" size={'xl'} />