@messenger-box/platform-mobile 0.0.1-alpha.391 → 0.0.1-alpha.392
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.
- package/CHANGELOG.md +4 -0
- package/lib/index.js +353 -95
- package/lib/index.js.map +1 -1
- package/package.json +4 -4
- package/src/screens/inbox/components/DialogsListItem.tsx +49 -4
- package/src/screens/inbox/config/config.ts +1 -1
- package/src/screens/inbox/containers/ConversationView.tsx +167 -56
- package/src/screens/inbox/containers/ThreadConversationView.tsx +217 -77
package/lib/index.js
CHANGED
|
@@ -707,25 +707,58 @@ const createdAtText = (value) => {
|
|
|
707
707
|
const DialogsListItemComponent = function DialogsListItem({ currentUser,
|
|
708
708
|
// users,
|
|
709
709
|
selectedChannelId, channel, onOpen, }) {
|
|
710
|
-
var _a, _b, _c;
|
|
710
|
+
var _a, _b, _c, _d;
|
|
711
711
|
const parentId = null;
|
|
712
712
|
const { data: messagesQuery, loading: messageLoading, refetch: refetchMessages, } = (0, platform_client_1.useMessagesQuery)({
|
|
713
713
|
variables: {
|
|
714
714
|
channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(),
|
|
715
715
|
parentId: parentId,
|
|
716
|
-
limit:
|
|
716
|
+
limit: 10,
|
|
717
|
+
sort: {
|
|
718
|
+
key: 'updatedAt',
|
|
719
|
+
value: platform_client_1.ISortEnum.Desc,
|
|
720
|
+
},
|
|
721
|
+
//limit: 25,
|
|
717
722
|
},
|
|
718
723
|
fetchPolicy: 'cache-and-network',
|
|
719
724
|
});
|
|
725
|
+
const { data: newMessage, loading: newMsgLoading, error: newMsgError, } = (0, platform_client_1.useOnChatMessageAddedSubscription)({
|
|
726
|
+
variables: {
|
|
727
|
+
channelId: (_b = channel === null || channel === void 0 ? void 0 : channel.id) === null || _b === void 0 ? void 0 : _b.toString(),
|
|
728
|
+
},
|
|
729
|
+
});
|
|
720
730
|
(0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
|
|
721
731
|
var _a;
|
|
722
732
|
// Do something when the screen is focused
|
|
723
|
-
refetchMessages({
|
|
733
|
+
refetchMessages({
|
|
734
|
+
channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(),
|
|
735
|
+
parentId: parentId,
|
|
736
|
+
limit: 10,
|
|
737
|
+
sort: {
|
|
738
|
+
key: 'updatedAt',
|
|
739
|
+
value: platform_client_1.ISortEnum.Desc,
|
|
740
|
+
},
|
|
741
|
+
//limit: 25
|
|
742
|
+
});
|
|
724
743
|
return () => {
|
|
725
744
|
// Do something when the screen is unfocused
|
|
726
745
|
// Useful for cleanup functions
|
|
727
746
|
};
|
|
728
747
|
}, []));
|
|
748
|
+
react_1.default.useEffect(() => {
|
|
749
|
+
var _a;
|
|
750
|
+
if (newMessage) {
|
|
751
|
+
refetchMessages({
|
|
752
|
+
channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(),
|
|
753
|
+
parentId: parentId,
|
|
754
|
+
limit: 10,
|
|
755
|
+
sort: {
|
|
756
|
+
key: 'updatedAt',
|
|
757
|
+
value: platform_client_1.ISortEnum.Desc,
|
|
758
|
+
},
|
|
759
|
+
});
|
|
760
|
+
}
|
|
761
|
+
}, [newMessage]);
|
|
729
762
|
const lastMessage = (0, react_1.useMemo)(() => {
|
|
730
763
|
var _a, _b;
|
|
731
764
|
if (!((_b = (_a = messagesQuery === null || messagesQuery === void 0 ? void 0 : messagesQuery.messages) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) {
|
|
@@ -766,7 +799,7 @@ selectedChannelId, channel, onOpen, }) {
|
|
|
766
799
|
bg: 'transparent',
|
|
767
800
|
} }, channelMembers &&
|
|
768
801
|
(channelMembers === null || channelMembers === void 0 ? void 0 : channelMembers.length) > 0 &&
|
|
769
|
-
((
|
|
802
|
+
((_c = channelMembers === null || channelMembers === void 0 ? void 0 : channelMembers.slice(0, 2)) === null || _c === void 0 ? void 0 : _c.map((ch, i) => {
|
|
770
803
|
var _a;
|
|
771
804
|
return (react_1.default.createElement(native_base_1.Avatar, { key: 'key' + i, bg: 'transparent', size: 9, top: i == 1 ? 4 : 0, right: i == 1 ? -2 : 0, zIndex: i == 1 ? 5 : 1, _image: { borderRadius: 6, borderWidth: 2, borderColor: '#fff' }, source: {
|
|
772
805
|
uri: ch === null || ch === void 0 ? void 0 : ch.picture,
|
|
@@ -778,7 +811,7 @@ selectedChannelId, channel, onOpen, }) {
|
|
|
778
811
|
react_1.default.createElement(native_base_1.HStack, { space: 1, flex: 1, direction: 'row', justifyContent: 'center', alignItems: 'center' },
|
|
779
812
|
react_1.default.createElement(native_base_1.Box, { flex: 0.8 },
|
|
780
813
|
react_1.default.createElement(native_base_1.Text, { color: "gray.600", fontSize: "lg", flexWrap: 'wrap', fontWeight: "semibold" }, title),
|
|
781
|
-
react_1.default.createElement(native_base_1.Text, { color: "gray.600", noOfLines: 1 }, (
|
|
814
|
+
react_1.default.createElement(native_base_1.Text, { color: "gray.600", noOfLines: 1 }, (_d = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message) !== null && _d !== void 0 ? _d : '')),
|
|
782
815
|
react_1.default.createElement(native_base_1.Box, { flex: 0.2 },
|
|
783
816
|
react_1.default.createElement(native_base_1.Text, { color: "gray.500" }, lastMessage ? createdAtText(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.createdAt) : '')))))));
|
|
784
817
|
};
|
|
@@ -1564,7 +1597,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
|
|
|
1564
1597
|
exports.config = void 0;
|
|
1565
1598
|
const envalid_1 = __webpack_require__(/*! envalid */ "envalid");
|
|
1566
1599
|
exports.config = (0, envalid_1.cleanEnv)(process['APP_ENV'] || process.env, {
|
|
1567
|
-
MESSAGES_PER_PAGE: (0, envalid_1.num)({ devDefault: 10, default:
|
|
1600
|
+
MESSAGES_PER_PAGE: (0, envalid_1.num)({ devDefault: 10, default: 10 }),
|
|
1568
1601
|
FILES_PER_MESSAGE: (0, envalid_1.num)({ default: 10 }),
|
|
1569
1602
|
INBOX_MESSEGE_PATH: (0, envalid_1.str)({ default: 'MainStack.Message' }),
|
|
1570
1603
|
// THREAD_MESSEGE_PATH: str({ default: 'MainStack.Thread' }),
|
|
@@ -1658,7 +1691,6 @@ const createdAtText = (value) => {
|
|
|
1658
1691
|
return (0, date_fns_1.format)(new Date(value), 'MMM dd, yyyy');
|
|
1659
1692
|
};
|
|
1660
1693
|
const ConversationViewComponent = ({ channelId, role }) => {
|
|
1661
|
-
var _a;
|
|
1662
1694
|
const [channelToTop, setChannelToTop] = (0, react_1.useState)(0);
|
|
1663
1695
|
const [channelMessages, setChannelMessages] = (0, react_1.useState)([]);
|
|
1664
1696
|
const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
|
|
@@ -1677,28 +1709,37 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
1677
1709
|
const [expoTokens, setExpoTokens] = (0, react_1.useState)([]);
|
|
1678
1710
|
const [isShowImageViewer, setImageViewer] = (0, react_1.useState)(false);
|
|
1679
1711
|
const [imageObject, setImageObject] = (0, react_1.useState)({});
|
|
1712
|
+
const [skip, setSkip] = (0, react_1.useState)(0);
|
|
1713
|
+
const messageRootListRef = (0, react_1.useRef)(null);
|
|
1680
1714
|
const isFocused = (0, native_1.useIsFocused)();
|
|
1681
1715
|
const { data: mongooseObjectId, refetch: refetchNewPostId } = (0, platform_client_1.useGetNewMongooseObjectIdQuery)({
|
|
1682
1716
|
fetchPolicy: 'network-only',
|
|
1683
1717
|
//pollInterval: 5000,
|
|
1684
1718
|
});
|
|
1685
|
-
const {
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
}
|
|
1719
|
+
// const {
|
|
1720
|
+
// data: newMessage,
|
|
1721
|
+
// loading: newMsgLoading,
|
|
1722
|
+
// error: newMsgError,
|
|
1723
|
+
// }: any = useOnChatMessageAddedSubscription({
|
|
1724
|
+
// variables: {
|
|
1725
|
+
// channelId: channelId?.toString(),
|
|
1726
|
+
// },
|
|
1727
|
+
// });
|
|
1690
1728
|
const { startUpload } = (0, platform_client_1.useUploadFilesNative)();
|
|
1691
1729
|
const [sendMsg] = (0, platform_client_1.useSendMessagesMutation)();
|
|
1692
1730
|
const [sendExpoNotificationOnPostMutation] = (0, platform_client_1.useSendExpoNotificationOnPostMutation)();
|
|
1693
|
-
const { data, loading: messageLoading, refetch, } = (0, platform_client_1.useMessagesQuery)({
|
|
1731
|
+
const { data, loading: messageLoading, refetch, fetchMore: fetchMoreMessages, subscribeToMore, } = (0, platform_client_1.useMessagesQuery)({
|
|
1694
1732
|
variables: {
|
|
1695
1733
|
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
1696
1734
|
parentId: null,
|
|
1697
1735
|
limit: MESSAGES_PER_PAGE,
|
|
1736
|
+
skip: skip,
|
|
1698
1737
|
},
|
|
1699
1738
|
skip: !channelId,
|
|
1700
1739
|
fetchPolicy: 'cache-and-network',
|
|
1701
|
-
|
|
1740
|
+
refetchWritePolicy: 'merge',
|
|
1741
|
+
// fetchPolicy: 'cache-and-network',
|
|
1742
|
+
// nextFetchPolicy: 'cache-first',
|
|
1702
1743
|
});
|
|
1703
1744
|
const { data: channelsDetail, loading: channelLoading, refetch: refetchChannelDetail, } = (0, platform_client_1.useViewChannelDetailQuery)({
|
|
1704
1745
|
variables: {
|
|
@@ -1716,11 +1757,13 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
1716
1757
|
// });
|
|
1717
1758
|
(0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
|
|
1718
1759
|
// Do something when the screen is focused
|
|
1760
|
+
setSkip(0);
|
|
1719
1761
|
refetchChannelDetail({ id: channelId === null || channelId === void 0 ? void 0 : channelId.toString() });
|
|
1720
1762
|
refetch({
|
|
1721
1763
|
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
1722
1764
|
parentId: null,
|
|
1723
1765
|
limit: MESSAGES_PER_PAGE,
|
|
1766
|
+
skip: 0,
|
|
1724
1767
|
}).then(({ data }) => {
|
|
1725
1768
|
if (!(data === null || data === void 0 ? void 0 : data.messages)) {
|
|
1726
1769
|
return;
|
|
@@ -1793,26 +1836,43 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
1793
1836
|
// if(loadingOldMessages) setLoadingOldMessages(false);
|
|
1794
1837
|
// }
|
|
1795
1838
|
// }, [data, channelMessages,loadingOldMessages]);
|
|
1839
|
+
// useEffect(() => {
|
|
1840
|
+
// if ((data?.messages?.data && channelMessages.length === 0) || (data?.messages?.data && loadingOldMessages)) {
|
|
1841
|
+
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
1842
|
+
// if (messages && messages.length > 0) {
|
|
1843
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
|
|
1844
|
+
// setTotalCount(messeageTotalCount);
|
|
1845
|
+
// }
|
|
1846
|
+
// setLoadEarlierMsg(false);
|
|
1847
|
+
// if (loadingOldMessages) setLoadingOldMessages(false);
|
|
1848
|
+
// }
|
|
1849
|
+
// }, [data, loadingOldMessages, channelMessages]);
|
|
1796
1850
|
(0, react_1.useEffect)(() => {
|
|
1797
|
-
var _a
|
|
1798
|
-
if ((
|
|
1851
|
+
var _a;
|
|
1852
|
+
if ((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data) {
|
|
1799
1853
|
const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
1800
|
-
if (messages && messages.length > 0)
|
|
1854
|
+
if ((messages && messages.length > 0 && messeageTotalCount > totalCount) ||
|
|
1855
|
+
(messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))) {
|
|
1801
1856
|
setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...messages, ...oldMessages], ({ id }) => id));
|
|
1802
1857
|
setTotalCount(messeageTotalCount);
|
|
1858
|
+
setLoadEarlierMsg(false);
|
|
1803
1859
|
}
|
|
1804
|
-
|
|
1805
|
-
if (loadingOldMessages)
|
|
1860
|
+
if (loadingOldMessages && channelMessages)
|
|
1806
1861
|
setLoadingOldMessages(false);
|
|
1862
|
+
if (channelMessages &&
|
|
1863
|
+
(channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length) == MESSAGES_PER_PAGE &&
|
|
1864
|
+
totalCount > (channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length)) {
|
|
1865
|
+
onFetchOld();
|
|
1866
|
+
}
|
|
1807
1867
|
}
|
|
1808
|
-
}, [data, loadingOldMessages, channelMessages]);
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
}, [newMessage]);
|
|
1868
|
+
}, [data, loadingOldMessages, channelMessages, totalCount]);
|
|
1869
|
+
// React.useEffect(() => {
|
|
1870
|
+
// if (newMessage) {
|
|
1871
|
+
// const msg = newMessage?.chatMessageAdded;
|
|
1872
|
+
// setTotalCount((preCount: any) => preCount + 1);
|
|
1873
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
|
|
1874
|
+
// }
|
|
1875
|
+
// }, [newMessage]);
|
|
1816
1876
|
// useEffect(() => {
|
|
1817
1877
|
// if (data?.messages?.data) {
|
|
1818
1878
|
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
@@ -1887,13 +1947,25 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
1887
1947
|
// });
|
|
1888
1948
|
// }
|
|
1889
1949
|
// }, [data, channelMessages]);
|
|
1890
|
-
const onFetchOld = (0, react_1.useCallback)((
|
|
1891
|
-
var _a
|
|
1892
|
-
if (
|
|
1950
|
+
const onFetchOld = (0, react_1.useCallback)(() => {
|
|
1951
|
+
var _a;
|
|
1952
|
+
if (totalCount > channelMessages.length && !loadingOldMessages) {
|
|
1953
|
+
setSkip(channelMessages.length);
|
|
1893
1954
|
setLoadEarlierMsg(true);
|
|
1894
|
-
(
|
|
1955
|
+
(_a = fetchMoreMessages({
|
|
1956
|
+
variables: {
|
|
1957
|
+
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
1958
|
+
parentId: null,
|
|
1959
|
+
skip: channelMessages.length,
|
|
1960
|
+
},
|
|
1961
|
+
})) === null || _a === void 0 ? void 0 : _a.then((res) => {
|
|
1962
|
+
setLoadingOldMessages(true);
|
|
1963
|
+
});
|
|
1964
|
+
// refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then(
|
|
1965
|
+
// (res: any) => setLoadingOldMessages(true),
|
|
1966
|
+
// );
|
|
1895
1967
|
}
|
|
1896
|
-
}, []);
|
|
1968
|
+
}, [totalCount, channelMessages]);
|
|
1897
1969
|
// const onFetchOld = () => {
|
|
1898
1970
|
// if(totalCount > channelMessages.length){
|
|
1899
1971
|
// console.log('totalCount',totalCount)
|
|
@@ -2502,14 +2574,28 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
2502
2574
|
// onFetchOld();
|
|
2503
2575
|
// }
|
|
2504
2576
|
// };
|
|
2577
|
+
const onMomentumScrollBegin = ({ nativeEvent }) => {
|
|
2578
|
+
onScroll = true;
|
|
2579
|
+
console.log('scroll top');
|
|
2580
|
+
if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > (channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length)) {
|
|
2581
|
+
onFetchOld();
|
|
2582
|
+
}
|
|
2583
|
+
};
|
|
2584
|
+
const onEndReached = () => {
|
|
2585
|
+
console.log('on end reached');
|
|
2586
|
+
if (!onScroll)
|
|
2587
|
+
return;
|
|
2588
|
+
// load messages, show ActivityIndicator
|
|
2589
|
+
onScroll = false;
|
|
2590
|
+
// setLoadingOldMessages(true);
|
|
2591
|
+
};
|
|
2505
2592
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
2506
2593
|
loadEarlierMsg && react_1.default.createElement(native_base_1.Spinner, null),
|
|
2507
|
-
react_1.default.createElement(react_native_gifted_chat_1.GiftedChat, { wrapInSafeArea: false, renderLoading: () => react_1.default.createElement(native_base_1.Spinner, null), messages: messageList,
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
// }}
|
|
2594
|
+
react_1.default.createElement(react_native_gifted_chat_1.GiftedChat, { ref: messageRootListRef, wrapInSafeArea: false, renderLoading: () => react_1.default.createElement(native_base_1.Spinner, null), messages: messageList, listViewProps: {
|
|
2595
|
+
onEndReached: onEndReached,
|
|
2596
|
+
onEndReachedThreshold: 0.5,
|
|
2597
|
+
onMomentumScrollBegin: onMomentumScrollBegin,
|
|
2598
|
+
},
|
|
2513
2599
|
// listViewProps={{
|
|
2514
2600
|
// scrollEventThrottle: 400,
|
|
2515
2601
|
// onScroll: ({ nativeEvent }) => { console.log('scroll')
|
|
@@ -2524,15 +2610,63 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
2524
2610
|
}, isTyping: true, alwaysShowSend: loading ? false : true,
|
|
2525
2611
|
//onLoadEarlier={onFetchOld}
|
|
2526
2612
|
//infiniteScroll={true}
|
|
2527
|
-
renderSend: renderSend,
|
|
2613
|
+
renderSend: renderSend,
|
|
2614
|
+
// loadEarlier={data?.messages?.totalCount > channelMessages.length}
|
|
2615
|
+
//isLoadingEarlier={loadEarlierMsg}
|
|
2528
2616
|
//extraData={{ isLoadingEarlier: loadingOldMessages }}
|
|
2529
|
-
renderLoadEarlier
|
|
2530
|
-
|
|
2617
|
+
// renderLoadEarlier={() =>
|
|
2618
|
+
// !loadEarlierMsg && (
|
|
2619
|
+
// <Center py={2}>
|
|
2620
|
+
// <Button
|
|
2621
|
+
// onPress={() => onFetchOld()}
|
|
2622
|
+
// variant={'outline'}
|
|
2623
|
+
// _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
|
|
2624
|
+
// >
|
|
2625
|
+
// Load earlier messages
|
|
2626
|
+
// </Button>
|
|
2627
|
+
// </Center>
|
|
2628
|
+
// )
|
|
2629
|
+
// }
|
|
2630
|
+
renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory, renderMessage: renderMessage, renderChatFooter: () => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
2631
|
+
react_1.default.createElement(SlackMessageContainer_1.ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent: modalContent }),
|
|
2632
|
+
react_1.default.createElement(SubscriptionHandler, { subscribeToNewMessages: () => subscribeToMore({
|
|
2633
|
+
document: platform_client_1.OnChatMessageAddedDocument,
|
|
2634
|
+
variables: {
|
|
2635
|
+
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
2636
|
+
},
|
|
2637
|
+
updateQuery: (prev, { subscriptionData }) => {
|
|
2638
|
+
var _a, _b, _c;
|
|
2639
|
+
if (!subscriptionData.data)
|
|
2640
|
+
return prev;
|
|
2641
|
+
const newMessage = (_a = subscriptionData === null || subscriptionData === void 0 ? void 0 : subscriptionData.data) === null || _a === void 0 ? void 0 : _a.chatMessageAdded;
|
|
2642
|
+
const previousData = ((_b = prev === null || prev === void 0 ? void 0 : prev.messages) === null || _b === void 0 ? void 0 : _b.data)
|
|
2643
|
+
? [...prev.messages.data, newMessage]
|
|
2644
|
+
: [];
|
|
2645
|
+
const totalMsgCount = ((_c = prev === null || prev === void 0 ? void 0 : prev.messages) === null || _c === void 0 ? void 0 : _c.totalCount) + 1;
|
|
2646
|
+
// const merged = {
|
|
2647
|
+
// ...prev,
|
|
2648
|
+
// data: previousData,
|
|
2649
|
+
// totalCount: totalMsgCount,
|
|
2650
|
+
// };
|
|
2651
|
+
const merged = Object.assign(Object.assign({}, prev), { messages: Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev.messages), { data: previousData, totalCount: totalMsgCount }) });
|
|
2652
|
+
return merged;
|
|
2653
|
+
// return Object.assign({}, prev, {
|
|
2654
|
+
// messages: {
|
|
2655
|
+
// data: [...prev.messages.data, newMessage],
|
|
2656
|
+
// totalCount: prev.messages.totalCount + 1,
|
|
2657
|
+
// },
|
|
2658
|
+
// });
|
|
2659
|
+
},
|
|
2660
|
+
}) }))), lightboxProps: {
|
|
2531
2661
|
underlayColor: 'transparent',
|
|
2532
2662
|
springConfig: { tension: 90000, friction: 90000 },
|
|
2533
2663
|
disabled: true,
|
|
2534
2664
|
} })));
|
|
2535
2665
|
};
|
|
2666
|
+
const SubscriptionHandler = ({ subscribeToNewMessages }) => {
|
|
2667
|
+
(0, react_1.useEffect)(() => subscribeToNewMessages(), []);
|
|
2668
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
2669
|
+
};
|
|
2536
2670
|
exports.ConversationView = react_1.default.memo(ConversationViewComponent);
|
|
2537
2671
|
|
|
2538
2672
|
|
|
@@ -2854,7 +2988,7 @@ const createdAtText = (value) => {
|
|
|
2854
2988
|
return (0, date_fns_1.format)(new Date(value), 'MMM dd, yyyy');
|
|
2855
2989
|
};
|
|
2856
2990
|
const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }) => {
|
|
2857
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u
|
|
2991
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
2858
2992
|
const { params } = (0, native_1.useRoute)();
|
|
2859
2993
|
const [channelToTop, setChannelToTop] = (0, react_1.useState)(0);
|
|
2860
2994
|
const [channelMessages, setChannelMessages] = (0, react_1.useState)([]);
|
|
@@ -2877,6 +3011,9 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2877
3011
|
const [parentId, setParentId] = (0, react_1.useState)(postParentId);
|
|
2878
3012
|
const { startUpload } = (0, platform_client_1.useUploadFilesNative)();
|
|
2879
3013
|
const [threadPost, setThreadPost] = (0, react_1.useState)([]);
|
|
3014
|
+
const [skip, setSkip] = (0, react_1.useState)(0);
|
|
3015
|
+
const [isScrollToBottom, setIsScrollToBottom] = (0, react_1.useState)(false);
|
|
3016
|
+
const threadMessageListRef = (0, react_1.useRef)(null);
|
|
2880
3017
|
const { data: mongooseObjectId, refetch: refetchNewPostId } = (0, platform_client_1.useGetNewMongooseObjectIdQuery)({
|
|
2881
3018
|
fetchPolicy: 'network-only',
|
|
2882
3019
|
// pollInterval: 5000,
|
|
@@ -2897,24 +3034,17 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2897
3034
|
},
|
|
2898
3035
|
fetchPolicy: 'cache-and-network',
|
|
2899
3036
|
});
|
|
2900
|
-
const { data, loading: messageLoading, refetch, } = (0, platform_client_1.
|
|
3037
|
+
const { data, loading: messageLoading, refetch, fetchMore: fetchMoreMessages, subscribeToMore, } = (0, platform_client_1.usePostThreadMessagesQuery)({
|
|
2901
3038
|
variables: {
|
|
2902
3039
|
channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
2903
3040
|
parentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
|
|
2904
3041
|
limit: MESSAGES_PER_PAGE,
|
|
3042
|
+
skip: skip,
|
|
2905
3043
|
},
|
|
2906
3044
|
skip: !channelId,
|
|
2907
3045
|
fetchPolicy: 'cache-and-network',
|
|
3046
|
+
refetchWritePolicy: 'merge',
|
|
2908
3047
|
});
|
|
2909
|
-
// const { data: checkForMessages }: any = useCheckForNewMessagesQuery({
|
|
2910
|
-
// variables: {
|
|
2911
|
-
// channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
|
|
2912
|
-
// parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
|
|
2913
|
-
// },
|
|
2914
|
-
// skip: !channelId,
|
|
2915
|
-
// fetchPolicy: 'network-only',
|
|
2916
|
-
// pollInterval: 5000,
|
|
2917
|
-
// });
|
|
2918
3048
|
(0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
|
|
2919
3049
|
var _a;
|
|
2920
3050
|
navigation === null || navigation === void 0 ? void 0 : navigation.setOptions({ title: (_a = params === null || params === void 0 ? void 0 : params.title) !== null && _a !== void 0 ? _a : 'Thread' });
|
|
@@ -2929,19 +3059,22 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2929
3059
|
channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
2930
3060
|
parentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
|
|
2931
3061
|
limit: MESSAGES_PER_PAGE,
|
|
3062
|
+
skip: 0,
|
|
2932
3063
|
}).then(({ data }) => {
|
|
2933
3064
|
if (!(data === null || data === void 0 ? void 0 : data.messages)) {
|
|
2934
3065
|
return;
|
|
2935
3066
|
}
|
|
2936
3067
|
const { data: messages, totalCount } = data.messages;
|
|
2937
3068
|
setTotalCount(totalCount);
|
|
2938
|
-
setChannelMessages(
|
|
3069
|
+
setChannelMessages(messages);
|
|
3070
|
+
//setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
|
|
2939
3071
|
});
|
|
2940
3072
|
return () => {
|
|
2941
3073
|
setTotalCount(0);
|
|
2942
3074
|
setChannelMessages([]);
|
|
3075
|
+
setThreadPost([]);
|
|
2943
3076
|
};
|
|
2944
|
-
}, []));
|
|
3077
|
+
}, [channelId, parentId]));
|
|
2945
3078
|
(0, react_1.useEffect)(() => {
|
|
2946
3079
|
setParentId(postParentId);
|
|
2947
3080
|
}, [postParentId]);
|
|
@@ -2957,24 +3090,39 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2957
3090
|
}
|
|
2958
3091
|
}, [parentId]);
|
|
2959
3092
|
(0, react_1.useEffect)(() => {
|
|
2960
|
-
|
|
3093
|
+
var _a;
|
|
3094
|
+
if ((_a = threadMessagesData === null || threadMessagesData === void 0 ? void 0 : threadMessagesData.threadMessages) === null || _a === void 0 ? void 0 : _a.data) {
|
|
2961
3095
|
const { data: threads, totalCount: threadTotalCount } = threadMessagesData === null || threadMessagesData === void 0 ? void 0 : threadMessagesData.threadMessages;
|
|
2962
3096
|
const threadMessage = threads === null || threads === void 0 ? void 0 : threads.map((t) => t === null || t === void 0 ? void 0 : t.post);
|
|
2963
|
-
|
|
3097
|
+
if ((threadPost === null || threadPost === void 0 ? void 0 : threadPost.length) == 0) {
|
|
3098
|
+
setThreadPost(threadMessage);
|
|
3099
|
+
setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...threadMessage, ...oldMessages], ({ id }) => id));
|
|
3100
|
+
}
|
|
2964
3101
|
// if (!isPostParentIdThread) {
|
|
2965
3102
|
// // setTotalCount((pc: any) => pc + threadTotalCount);
|
|
2966
3103
|
// setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
|
|
2967
3104
|
// }
|
|
2968
3105
|
}
|
|
2969
|
-
}, [threadMessagesData, isPostParentIdThread]);
|
|
3106
|
+
}, [threadMessagesData, threadPost, isPostParentIdThread]);
|
|
3107
|
+
// React.useEffect(() => {
|
|
3108
|
+
// if (newThreadMsg) {
|
|
3109
|
+
// console.log('newThreadMsg');
|
|
3110
|
+
// const msg = newThreadMsg?.threadChatMessageAdded;
|
|
3111
|
+
// setTotalCount((preCount: any) => preCount + 1);
|
|
3112
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
|
|
3113
|
+
// }
|
|
3114
|
+
// }, [newThreadMsg]);
|
|
2970
3115
|
react_1.default.useEffect(() => {
|
|
2971
3116
|
if (newThreadMsg) {
|
|
2972
3117
|
console.log('newThreadMsg');
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
3118
|
+
refetch({
|
|
3119
|
+
channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
3120
|
+
parentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
|
|
3121
|
+
limit: MESSAGES_PER_PAGE,
|
|
3122
|
+
skip: 0,
|
|
3123
|
+
});
|
|
2976
3124
|
}
|
|
2977
|
-
}, [newThreadMsg]);
|
|
3125
|
+
}, [newThreadMsg, skip, parentId]);
|
|
2978
3126
|
// useEffect(() => {
|
|
2979
3127
|
// if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
|
|
2980
3128
|
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
@@ -2985,23 +3133,43 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2985
3133
|
// if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
|
|
2986
3134
|
// }
|
|
2987
3135
|
// }, [data, loadingOldMessages, channelMessages, totalCount]);
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
3136
|
+
// useEffect(() => {
|
|
3137
|
+
// if ((data?.messages?.data && channelMessages.length === 0) || (data?.messages?.data && loadingOldMessages)) {
|
|
3138
|
+
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
3139
|
+
// if (messages && messages.length > 0) {
|
|
3140
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
|
|
3141
|
+
// setTotalCount(messeageTotalCount);
|
|
3142
|
+
// }
|
|
3143
|
+
// setLoadEarlierMsg(false);
|
|
3144
|
+
// if (loadingOldMessages) setLoadingOldMessages(false);
|
|
3145
|
+
// }
|
|
3146
|
+
// if (threadPost?.length && data?.messages?.totalCount == channelMessages.length) {
|
|
3147
|
+
// // setTotalCount((pc: any) => pc + threadTotalCount);
|
|
3148
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
|
|
3149
|
+
// }
|
|
3150
|
+
// }, [data, loadingOldMessages, channelMessages, threadPost]);
|
|
3151
|
+
react_1.default.useEffect(() => {
|
|
3152
|
+
var _a;
|
|
3153
|
+
if ((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data) {
|
|
2991
3154
|
const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
2992
|
-
if (messages && messages.length > 0)
|
|
3155
|
+
if ((messages && messages.length > 0 && messeageTotalCount > totalCount) ||
|
|
3156
|
+
(messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))) {
|
|
2993
3157
|
setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...messages, ...oldMessages], ({ id }) => id));
|
|
2994
3158
|
setTotalCount(messeageTotalCount);
|
|
3159
|
+
setLoadEarlierMsg(false);
|
|
2995
3160
|
}
|
|
2996
|
-
|
|
2997
|
-
if (loadingOldMessages)
|
|
3161
|
+
if (loadingOldMessages && channelMessages)
|
|
2998
3162
|
setLoadingOldMessages(false);
|
|
3163
|
+
if (channelMessages &&
|
|
3164
|
+
(channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length) == MESSAGES_PER_PAGE &&
|
|
3165
|
+
totalCount > (channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length)) {
|
|
3166
|
+
onFetchOld();
|
|
3167
|
+
}
|
|
2999
3168
|
}
|
|
3000
|
-
if (
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
}, [data, loadingOldMessages, channelMessages, threadPost]);
|
|
3169
|
+
// if (threadPost?.length > 0 && channelMessages.length == (0 || MESSAGES_PER_PAGE)) {
|
|
3170
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
|
|
3171
|
+
// }
|
|
3172
|
+
}, [data, loadingOldMessages, totalCount, channelMessages, isScrollToBottom]);
|
|
3005
3173
|
// useEffect(() => {
|
|
3006
3174
|
// if (
|
|
3007
3175
|
// !messageLoading &&
|
|
@@ -3038,17 +3206,39 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3038
3206
|
// })?.then((res: any) => setLoadingOldMessages(true));
|
|
3039
3207
|
// }
|
|
3040
3208
|
// }, [data, channelMessages]);
|
|
3041
|
-
const
|
|
3042
|
-
|
|
3043
|
-
|
|
3209
|
+
const scrollToBottom = react_1.default.useCallback(() => {
|
|
3210
|
+
if (threadMessageListRef === null || threadMessageListRef === void 0 ? void 0 : threadMessageListRef.current) {
|
|
3211
|
+
setIsScrollToBottom(false);
|
|
3212
|
+
threadMessageListRef.current.scrollTop = threadMessageListRef.current.scrollHeight;
|
|
3213
|
+
}
|
|
3214
|
+
}, [threadMessageListRef]);
|
|
3215
|
+
// const onFetchOld = useCallback((data: any, channelMessages: any) => {
|
|
3216
|
+
// if (data?.messages?.totalCount > channelMessages.length) {
|
|
3217
|
+
// setLoadEarlierMsg(true);
|
|
3218
|
+
// refetch({
|
|
3219
|
+
// channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
|
|
3220
|
+
// parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
|
|
3221
|
+
// skip: channelMessages.length,
|
|
3222
|
+
// })?.then((res: any) => setLoadingOldMessages(true));
|
|
3223
|
+
// }
|
|
3224
|
+
// }, []);
|
|
3225
|
+
const onFetchOld = (0, react_1.useCallback)(() => {
|
|
3226
|
+
var _a;
|
|
3227
|
+
if (totalCount > channelMessages.length && !loadingOldMessages) {
|
|
3228
|
+
setSkip(channelMessages.length);
|
|
3044
3229
|
setLoadEarlierMsg(true);
|
|
3045
|
-
(
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3230
|
+
(_a = fetchMoreMessages({
|
|
3231
|
+
variables: {
|
|
3232
|
+
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
3233
|
+
parentId: null,
|
|
3234
|
+
skip: channelMessages.length,
|
|
3235
|
+
},
|
|
3236
|
+
})) === null || _a === void 0 ? void 0 : _a.then((res) => setLoadingOldMessages(true));
|
|
3237
|
+
// refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then(
|
|
3238
|
+
// (res: any) => setLoadingOldMessages(true),
|
|
3239
|
+
// );
|
|
3050
3240
|
}
|
|
3051
|
-
}, []);
|
|
3241
|
+
}, [totalCount, channelMessages]);
|
|
3052
3242
|
// const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
|
|
3053
3243
|
// return contentOffset.y <= 100; // 100px from top
|
|
3054
3244
|
// };
|
|
@@ -3160,14 +3350,17 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3160
3350
|
const responseMessage = (_a = data === null || data === void 0 ? void 0 : data.sendThreadMessage) === null || _a === void 0 ? void 0 : _a.lastMessage;
|
|
3161
3351
|
if (!parentId || parentId == 0) {
|
|
3162
3352
|
setParentId(responseMessage === null || responseMessage === void 0 ? void 0 : responseMessage.id);
|
|
3163
|
-
setChannelMessages((messages) => [
|
|
3164
|
-
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
|
|
3168
|
-
|
|
3169
|
-
|
|
3170
|
-
|
|
3353
|
+
// setChannelMessages((messages: any) => [
|
|
3354
|
+
// ...messages,
|
|
3355
|
+
// {
|
|
3356
|
+
// ...responseMessage,
|
|
3357
|
+
// files: {
|
|
3358
|
+
// totalCount: uploadedFiles.length,
|
|
3359
|
+
// data: uploadedFiles,
|
|
3360
|
+
// },
|
|
3361
|
+
// },
|
|
3362
|
+
// ]);
|
|
3363
|
+
// setTotalCount((t: any) => t + 1);
|
|
3171
3364
|
}
|
|
3172
3365
|
setChannelToTop(channelToTop + 1);
|
|
3173
3366
|
setLoading(false);
|
|
@@ -3201,8 +3394,8 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3201
3394
|
const responseMessage = (_a = data === null || data === void 0 ? void 0 : data.sendThreadMessage) === null || _a === void 0 ? void 0 : _a.lastMessage;
|
|
3202
3395
|
if (!parentId || parentId == 0) {
|
|
3203
3396
|
setParentId(responseMessage === null || responseMessage === void 0 ? void 0 : responseMessage.id);
|
|
3204
|
-
setChannelMessages((messages) => [...messages, responseMessage]);
|
|
3205
|
-
setTotalCount((t) => t + 1);
|
|
3397
|
+
// setChannelMessages((messages: any) => [...messages, responseMessage]);
|
|
3398
|
+
// setTotalCount((t: any) => t + 1);
|
|
3206
3399
|
}
|
|
3207
3400
|
setChannelToTop(channelToTop + 1);
|
|
3208
3401
|
setLoading(false);
|
|
@@ -3394,8 +3587,24 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3394
3587
|
const renderMessage = (props) => {
|
|
3395
3588
|
return react_1.default.createElement(SlackMessageContainer_1.SlackMessage, Object.assign({}, props, { isShowImageViewer: isShowImageViewer, setImageViewer: setImageViewerObject }));
|
|
3396
3589
|
};
|
|
3590
|
+
let onScroll = false;
|
|
3591
|
+
const onMomentumScrollBegin = ({ nativeEvent }) => {
|
|
3592
|
+
onScroll = true;
|
|
3593
|
+
console.log('scroll top');
|
|
3594
|
+
if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > (channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length)) {
|
|
3595
|
+
onFetchOld();
|
|
3596
|
+
}
|
|
3597
|
+
};
|
|
3598
|
+
const onEndReached = () => {
|
|
3599
|
+
console.log('on end reached');
|
|
3600
|
+
if (!onScroll)
|
|
3601
|
+
return;
|
|
3602
|
+
// load messages, show ActivityIndicator
|
|
3603
|
+
onScroll = false;
|
|
3604
|
+
// setLoadingOldMessages(true);
|
|
3605
|
+
};
|
|
3397
3606
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
3398
|
-
loadEarlierMsg && react_1.default.createElement(native_base_1.Spinner, null),
|
|
3607
|
+
(loadingOldMessages || loadEarlierMsg) && react_1.default.createElement(native_base_1.Spinner, null),
|
|
3399
3608
|
isPostParentIdThread && (react_1.default.createElement(react_1.default.Fragment, null, (threadPost === null || threadPost === void 0 ? void 0 : threadPost.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
3400
3609
|
react_1.default.createElement(native_base_1.VStack, { px: 2, pt: 2, pb: 0, space: 2 },
|
|
3401
3610
|
react_1.default.createElement(native_base_1.HStack, { space: 2, alignItems: 'center' },
|
|
@@ -3418,12 +3627,57 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3418
3627
|
_s.totalCount,
|
|
3419
3628
|
' ',
|
|
3420
3629
|
((_u = (_t = threadPost[0]) === null || _t === void 0 ? void 0 : _t.replies) === null || _u === void 0 ? void 0 : _u.totalCount) > 0 ? 'replies' : 'reply'))))))),
|
|
3421
|
-
react_1.default.createElement(react_native_gifted_chat_1.GiftedChat, { wrapInSafeArea: false, renderLoading: () => react_1.default.createElement(native_base_1.Spinner, null), messages: messageList,
|
|
3630
|
+
react_1.default.createElement(react_native_gifted_chat_1.GiftedChat, { ref: threadMessageListRef, wrapInSafeArea: false, renderLoading: () => react_1.default.createElement(native_base_1.Spinner, null), messages: messageList, listViewProps: {
|
|
3631
|
+
onEndReached: onEndReached,
|
|
3632
|
+
onEndReachedThreshold: 0.5,
|
|
3633
|
+
onMomentumScrollBegin: onMomentumScrollBegin,
|
|
3634
|
+
}, onSend: (messages) => { var _a, _b; return handleSend((_b = (_a = messages[0]) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : ' '); }, text: msg ? msg : ' ', onInputTextChanged: (text) => setMsg(text), renderFooter: () => (loading ? react_1.default.createElement(native_base_1.Spinner, null) : imageLoading ? react_1.default.createElement(native_base_1.Spinner, null) : ''), scrollToBottom: true, user: {
|
|
3422
3635
|
_id: (auth === null || auth === void 0 ? void 0 : auth.id) || '',
|
|
3423
3636
|
}, isTyping: true, alwaysShowSend: loading ? false : true,
|
|
3424
3637
|
// onLoadEarlier={onFetchOld}
|
|
3425
|
-
infiniteScroll: true, renderSend: renderSend,
|
|
3426
|
-
|
|
3638
|
+
infiniteScroll: true, renderSend: renderSend,
|
|
3639
|
+
// loadEarlier={data?.messages?.totalCount > channelMessages.length}
|
|
3640
|
+
// isLoadingEarlier={loadEarlierMsg}
|
|
3641
|
+
// renderLoadEarlier={() =>
|
|
3642
|
+
// !loadEarlierMsg && (
|
|
3643
|
+
// <Center py={2}>
|
|
3644
|
+
// <Button
|
|
3645
|
+
// onPress={() => onFetchOld(channelMessages?.length)}
|
|
3646
|
+
// variant={'outline'}
|
|
3647
|
+
// _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
|
|
3648
|
+
// >
|
|
3649
|
+
// Load earlier messages
|
|
3650
|
+
// </Button>
|
|
3651
|
+
// </Center>
|
|
3652
|
+
// )
|
|
3653
|
+
// }
|
|
3654
|
+
renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory, renderMessage: renderMessage, renderChatFooter: () => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
3655
|
+
react_1.default.createElement(SlackMessageContainer_1.ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent: modalContent }),
|
|
3656
|
+
react_1.default.createElement(SubscriptionHandler, { subscribeToNewMessages: () => subscribeToMore({
|
|
3657
|
+
document: platform_client_1.OnThreadChatMessageAddedDocument,
|
|
3658
|
+
variables: {
|
|
3659
|
+
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
3660
|
+
postParentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
|
|
3661
|
+
},
|
|
3662
|
+
updateQuery: (prev, { subscriptionData }) => {
|
|
3663
|
+
var _a, _b, _c;
|
|
3664
|
+
if (!subscriptionData.data)
|
|
3665
|
+
return prev;
|
|
3666
|
+
const newMessage = (_a = subscriptionData === null || subscriptionData === void 0 ? void 0 : subscriptionData.data) === null || _a === void 0 ? void 0 : _a.threadChatMessageAdded;
|
|
3667
|
+
const mergedData = ((_b = prev === null || prev === void 0 ? void 0 : prev.messages) === null || _b === void 0 ? void 0 : _b.data)
|
|
3668
|
+
? [...prev.messages.data, newMessage]
|
|
3669
|
+
: [];
|
|
3670
|
+
const totalMsgCount = ((_c = prev === null || prev === void 0 ? void 0 : prev.messages) === null || _c === void 0 ? void 0 : _c.totalCount) + 1;
|
|
3671
|
+
const merged = Object.assign(Object.assign({}, prev), { messages: Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev.messages), { data: mergedData, totalCount: totalMsgCount }) });
|
|
3672
|
+
return merged;
|
|
3673
|
+
// return Object.assign({}, prev, {
|
|
3674
|
+
// messages: {
|
|
3675
|
+
// data: [...prev.messages.data, newMessage],
|
|
3676
|
+
// totalCount: prev.messages.totalCount + 1,
|
|
3677
|
+
// },
|
|
3678
|
+
// });
|
|
3679
|
+
},
|
|
3680
|
+
}) }))), messagesContainerStyle: (messageList === null || messageList === void 0 ? void 0 : messageList.length) == 0 && { transform: [{ scaleY: -1 }] }, renderChatEmpty: () => (react_1.default.createElement(react_1.default.Fragment, null, !threadLoading && !messageLoading && messageList && (messageList === null || messageList === void 0 ? void 0 : messageList.length) == 0 && (react_1.default.createElement(native_base_1.Box, { p: 5 },
|
|
3427
3681
|
react_1.default.createElement(native_base_1.Center, { mt: 6 },
|
|
3428
3682
|
react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: "chatbubbles", size: 'xl' }),
|
|
3429
3683
|
react_1.default.createElement(native_base_1.Text, null, "You don't have any message yet!")))))), lightboxProps: {
|
|
@@ -3432,6 +3686,10 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3432
3686
|
disabled: true,
|
|
3433
3687
|
} })));
|
|
3434
3688
|
};
|
|
3689
|
+
const SubscriptionHandler = ({ subscribeToNewMessages }) => {
|
|
3690
|
+
(0, react_1.useEffect)(() => subscribeToNewMessages(), []);
|
|
3691
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
3692
|
+
};
|
|
3435
3693
|
exports.ThreadConversationView = react_1.default.memo(ThreadConversationViewComponent);
|
|
3436
3694
|
|
|
3437
3695
|
|