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

package/lib/screens/inbox/containers/ConversationView.js

@@ -236,7 +236,7 @@ const ConversationViewComponent = (_a) => {
     "role",
     "isShowThreadMessage"
   ]);
-  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const [channelToTop, setChannelToTop] = useState(0);
   const isMountedRef = useRef(true);
   const [state, send] = useSafeMachine();
@@ -895,20 +895,12 @@ const ConversationViewComponent = (_a) => {
     };
   }, [state.context.channelId, state.context.channelMessages, fetchMessagesWithFallback]);
   const messageList = useMemo(() => {
-    var _a3, _b3, _c2, _d2, _e2, _f2;
+    var _a3;
     console.log("\u{1F504} CALCULATING MESSAGE LIST - Optimized version");
     if (!((_a3 = state == null ? void 0 : state.context) == null ? void 0 : _a3.channelMessages) || state.context.channelMessages.length === 0) {
       console.log("No messages to process");
       return [];
     }
-    if (state.context.channelMessages[0]) {
-      const sampleMsg = state.context.channelMessages[0];
-      console.log("\u{1F4F7} Sample message files:", JSON.stringify({
-        hasFiles: !!sampleMsg.files,
-        fileCount: ((_c2 = (_b3 = sampleMsg.files) == null ? void 0 : _b3.data) == null ? void 0 : _c2.length) || 0,
-        fileUrl: ((_f2 = (_e2 = (_d2 = sampleMsg.files) == null ? void 0 : _d2.data) == null ? void 0 : _e2[0]) == null ? void 0 : _f2.url) || "none"
-      }));
-    }
     const filteredMessages = uniqBy(state.context.channelMessages, ({
       id
     }) => id);
@@ -916,14 +908,13 @@ const ConversationViewComponent = (_a) => {
       return [];
     }
     return orderBy(filteredMessages, ["createdAt"], ["desc"]).map((msg) => {
-      var _a4, _b4, _c3, _d3, _e3, _f3;
+      var _a4, _b3, _c2, _d2, _e2, _f2;
       const date = new Date(msg.createdAt);
       let imageUrl = null;
       if (((_a4 = msg.files) == null ? void 0 : _a4.data) && msg.files.data.length > 0) {
         const fileData = msg.files.data[0];
         if (fileData && fileData.url) {
           imageUrl = fileData.url;
-          console.log("\u{1F4F7} Found image URL for message", msg.id, ":", imageUrl);
         }
       }
       return {
@@ -931,22 +922,22 @@ const ConversationViewComponent = (_a) => {
         text: msg.message,
         createdAt: date,
         user: {
-          _id: ((_b4 = msg.author) == null ? void 0 : _b4.id) || "",
-          name: `${((_c3 = msg.author) == null ? void 0 : _c3.givenName) || ""} ${((_d3 = msg.author) == null ? void 0 : _d3.familyName) || ""}`,
-          avatar: ((_e3 = msg.author) == null ? void 0 : _e3.picture) || ""
+          _id: ((_b3 = msg.author) == null ? void 0 : _b3.id) || "",
+          name: `${((_c2 = msg.author) == null ? void 0 : _c2.givenName) || ""} ${((_d2 = msg.author) == null ? void 0 : _d2.familyName) || ""}`,
+          avatar: ((_e2 = msg.author) == null ? void 0 : _e2.picture) || ""
         },
         image: imageUrl,
         sent: msg == null ? void 0 : msg.isDelivered,
         received: msg == null ? void 0 : msg.isRead,
         type: msg == null ? void 0 : msg.type,
         propsConfiguration: msg == null ? void 0 : msg.propsConfiguration,
-        replies: (_f3 = msg == null ? void 0 : msg.replies) != null ? _f3 : [],
+        replies: (_f2 = msg == null ? void 0 : msg.replies) != null ? _f2 : [],
         isShowThreadMessage
       };
     });
-  }, [(_i = state == null ? void 0 : state.context) == null ? void 0 : _i.channelMessages, (_j = state == null ? void 0 : state.context) == null ? void 0 : _j.channelId, isShowThreadMessage]);
+  }, [(_i = state == null ? void 0 : state.context) == null ? void 0 : _i.channelMessages, isShowThreadMessage]);
   const renderMessageText = useCallback((props) => {
-    var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U;
+    var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U;
     const {
       currentMessage
     } = props;
@@ -966,7 +957,7 @@ const ConversationViewComponent = (_a) => {
           param = ((_m2 = route == null ? void 0 : route.guest) == null ? void 0 : _m2.params) ? (_o2 = (_n2 = route == null ? void 0 : route.guest) == null ? void 0 : _n2.params) != null ? _o2 : null : null;
         } else if (role && role == PreDefinedRole.Owner) {
           path = ((_p2 = route == null ? void 0 : route.host) == null ? void 0 : _p2.name) ? (_r2 = (_q2 = route == null ? void 0 : route.host) == null ? void 0 : _q2.name) != null ? _r2 : null : null;
-          param = ((_s2 = route == null ? void 0 : route.host) == null ? void 0 : _s2.params) ? (_u = (_t2 = route == null ? void 0 : route.host) == null ? void 0 : _t2.params) != null ? _u : null : null;
+          param = ((_s2 = route == null ? void 0 : route.host) == null ? void 0 : _s2.params) ? (_u = (_t = route == null ? void 0 : route.host) == null ? void 0 : _t.params) != null ? _u : null : null;
         } else {
           path = ((_v = route == null ? void 0 : route.host) == null ? void 0 : _v.name) ? (_x = (_w = route == null ? void 0 : route.host) == null ? void 0 : _w.name) != null ? _x : null : null;
           param = ((_y = route == null ? void 0 : route.host) == null ? void 0 : _y.params) ? (_A = (_z = route == null ? void 0 : route.host) == null ? void 0 : _z.params) != null ? _A : null : null;
@@ -1052,7 +1043,7 @@ const ConversationViewComponent = (_a) => {
         fontSize: 12
       }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
     }
-  }, [navigation, (_k = state == null ? void 0 : state.context) == null ? void 0 : _k.channelId, role]);
+  }, [navigation, (_j = state == null ? void 0 : state.context) == null ? void 0 : _j.channelId, role]);
   const renderActions = (props) => {
     return /* @__PURE__ */ React__default.createElement(
       Actions$1,
@@ -1133,7 +1124,7 @@ const ConversationViewComponent = (_a) => {
       color: "white",
       fontWeight: "bold"
     } }, "X"))));
-  }, [(_l = state == null ? void 0 : state.context) == null ? void 0 : _l.selectedImage, safeSend]);
+  }, [(_k = state == null ? void 0 : state.context) == null ? void 0 : _k.selectedImage, safeSend]);
   const setImageViewerObject = (obj, v) => {
     setImageObject(obj);
     setImageViewer(v);
@@ -1302,7 +1293,7 @@ const ConversationViewComponent = (_a) => {
             return prev;
           }
           lastProcessedMessageRef.current = newMessage.id;
-          setTimeout(() => {
+          queueMicrotask(() => {
             var _a6;
             safeSend({
               type: Actions.SET_CHANNEL_MESSAGES,
@@ -1313,7 +1304,7 @@ const ConversationViewComponent = (_a) => {
                 totalCount: (((_a6 = prev == null ? void 0 : prev.messages) == null ? void 0 : _a6.totalCount) || 0) + 1
               }
             });
-          }, 0);
+          });
           return __spreadProps(__spreadValues({}, prev), {
             messages: __spreadProps(__spreadValues({}, prev == null ? void 0 : prev.messages), {
               data: [...currentMessages, newMessage],
@@ -1323,7 +1314,7 @@ const ConversationViewComponent = (_a) => {
         }
       });
     } }));
-  }, [isShowImageViewer, modalContent, (_m = state == null ? void 0 : state.context) == null ? void 0 : _m.channelId, (_n = state == null ? void 0 : state.context) == null ? void 0 : _n.channelMessages, subscribeToMore, safeSend]);
+  }, [isShowImageViewer, modalContent, (_l = state == null ? void 0 : state.context) == null ? void 0 : _l.channelId, (_m = state == null ? void 0 : state.context) == null ? void 0 : _m.channelMessages, subscribeToMore, safeSend]);
   const lastProcessedMessageRef = useRef(null);
   const listViewProps = useMemo(() => ({
     onEndReached,
@@ -1331,8 +1322,10 @@ const ConversationViewComponent = (_a) => {
     onMomentumScrollBegin,
     removeClippedSubviews: true,
     initialNumToRender: 10,
-    maxToRenderPerBatch: 10,
-    windowSize: 10
+    maxToRenderPerBatch: 7,
+    windowSize: 7,
+    updateCellsBatchingPeriod: 50,
+    keyExtractor: (item) => item._id
   }), [onEndReached, onMomentumScrollBegin]);
   const renderLoadEarlier = useCallback(() => {
     var _a3;
@@ -1342,7 +1335,7 @@ const ConversationViewComponent = (_a) => {
       borderRadius: 10,
       marginTop: 10
     } }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: "#3b82f6" })) : null;
-  }, [(_o = state == null ? void 0 : state.context) == null ? void 0 : _o.loadingOldMessages]);
+  }, [(_n = state == null ? void 0 : state.context) == null ? void 0 : _n.loadingOldMessages]);
   const renderInputToolbar = useCallback((props) => {
     return /* @__PURE__ */ React__default.createElement(InputToolbar, __spreadProps(__spreadValues({}, props), { containerStyle: {
       backgroundColor: "white",
@@ -1381,7 +1374,7 @@ const ConversationViewComponent = (_a) => {
           messageText: text
         }
       }),
-      renderFooter: () => safeContextProperty("loading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : safeContextProperty("imageLoading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : "",
+      renderFooter: () => safeContextProperty("loading") || safeContextProperty("imageLoading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : null,
       scrollToBottom: true,
       user: {
         _id: (auth == null ? void 0 : auth.id) || ""
@@ -1393,12 +1386,12 @@ const ConversationViewComponent = (_a) => {
       renderInputToolbar,
       minInputToolbarHeight: 50,
       renderActions: safeContextProperty("channelId") && renderActions,
-      renderAccessory: !!((_p = state == null ? void 0 : state.context) == null ? void 0 : _p.selectedImage) ? renderAccessory : void 0,
+      renderAccessory: !!((_o = state == null ? void 0 : state.context) == null ? void 0 : _o.selectedImage) ? renderAccessory : void 0,
       renderMessage,
       renderChatFooter,
       renderLoadEarlier,
-      loadEarlier: ((_q = state == null ? void 0 : state.context) == null ? void 0 : _q.totalCount) > ((_s = (_r = state == null ? void 0 : state.context) == null ? void 0 : _r.channelMessages) == null ? void 0 : _s.length),
-      isLoadingEarlier: (_t = state == null ? void 0 : state.context) == null ? void 0 : _t.loadingOldMessages,
+      loadEarlier: ((_p = state == null ? void 0 : state.context) == null ? void 0 : _p.totalCount) > ((_r = (_q = state == null ? void 0 : state.context) == null ? void 0 : _q.channelMessages) == null ? void 0 : _r.length),
+      isLoadingEarlier: (_s = state == null ? void 0 : state.context) == null ? void 0 : _s.loadingOldMessages,
       bottomOffset: Platform.OS === "ios" ? 10 : 0,
       textInputProps: {
         style: {
@@ -1441,7 +1434,16 @@ const SubscriptionHandler = ({
   subscribeToNewMessages,
   channelId
 }) => {
-  useEffect(() => subscribeToNewMessages(), [channelId]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+  const channelIdRef = useRef(channelId);
+  useEffect(() => {
+    if (channelId && channelId !== channelIdRef.current) {
+      channelIdRef.current = channelId;
+      console.log("Setting up subscription for channel:", channelId);
+      return subscribeToNewMessages();
+    }
+  }, [channelId, subscribeToNewMessages]);
+  return null;
 };
-const ConversationView = React__default.memo(ConversationViewComponent);export{ConversationView};//# sourceMappingURL=ConversationView.js.map
+const ConversationView = React__default.memo(ConversationViewComponent, (prevProps, nextProps) => {
+  return prevProps.channelId === nextProps.channelId && prevProps.role === nextProps.role && prevProps.isShowThreadMessage === nextProps.isShowThreadMessage;
+});export{ConversationView};//# sourceMappingURL=ConversationView.js.map