@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.
- package/CHANGELOG.md +8 -0
- package/lib/index.js +412 -573
- package/lib/index.js.map +1 -1
- package/package.json +4 -4
- package/src/screens/inbox/components/DialogsListItem.tsx +115 -12
- package/src/screens/inbox/components/SlackMessageContainer/SlackMessage.tsx +36 -12
- package/src/screens/inbox/config/config.ts +1 -1
- package/src/screens/inbox/containers/ConversationView.tsx +173 -551
- package/src/screens/inbox/containers/ThreadConversationView.tsx +228 -86
package/lib/index.js
CHANGED
|
@@ -709,33 +709,70 @@ const DialogsListItemComponent = function DialogsListItem({ currentUser,
|
|
|
709
709
|
selectedChannelId, channel, onOpen, }) {
|
|
710
710
|
var _a, _b, _c;
|
|
711
711
|
const parentId = null;
|
|
712
|
-
const
|
|
712
|
+
const [messages, setMessages] = (0, react_1.useState)([]);
|
|
713
|
+
const { data: messagesQuery, loading: messageLoading, refetch: refetchMessages, subscribeToMore, } = (0, platform_client_1.useMessagesQuery)({
|
|
713
714
|
variables: {
|
|
714
715
|
channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(),
|
|
715
716
|
parentId: parentId,
|
|
716
|
-
limit:
|
|
717
|
+
limit: 10,
|
|
718
|
+
// sort: {
|
|
719
|
+
// key: 'updatedAt',
|
|
720
|
+
// value: ISortEnum.Desc,
|
|
721
|
+
// },
|
|
722
|
+
//limit: 25,
|
|
717
723
|
},
|
|
718
724
|
fetchPolicy: 'cache-and-network',
|
|
725
|
+
refetchWritePolicy: 'merge',
|
|
726
|
+
});
|
|
727
|
+
const { data: newMessage, loading: newMsgLoading, error: newMsgError, } = (0, platform_client_1.useOnChatMessageAddedSubscription)({
|
|
728
|
+
variables: {
|
|
729
|
+
channelId: (_b = channel === null || channel === void 0 ? void 0 : channel.id) === null || _b === void 0 ? void 0 : _b.toString(),
|
|
730
|
+
},
|
|
719
731
|
});
|
|
720
732
|
(0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
|
|
721
733
|
var _a;
|
|
722
734
|
// Do something when the screen is focused
|
|
723
|
-
refetchMessages({
|
|
735
|
+
refetchMessages({
|
|
736
|
+
channelId: (_a = channel === null || channel === void 0 ? void 0 : channel.id) === null || _a === void 0 ? void 0 : _a.toString(),
|
|
737
|
+
parentId: parentId,
|
|
738
|
+
limit: 10,
|
|
739
|
+
// sort: {
|
|
740
|
+
// key: 'updatedAt',
|
|
741
|
+
// value: ISortEnum.Desc,
|
|
742
|
+
// },
|
|
743
|
+
//limit: 25
|
|
744
|
+
});
|
|
724
745
|
return () => {
|
|
725
746
|
// Do something when the screen is unfocused
|
|
726
747
|
// Useful for cleanup functions
|
|
727
748
|
};
|
|
728
749
|
}, []));
|
|
750
|
+
react_1.default.useEffect(() => {
|
|
751
|
+
var _a, _b, _c;
|
|
752
|
+
if (messagesQuery) {
|
|
753
|
+
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) {
|
|
754
|
+
const msg = (_c = messagesQuery === null || messagesQuery === void 0 ? void 0 : messagesQuery.messages) === null || _c === void 0 ? void 0 : _c.data;
|
|
755
|
+
setMessages((pre) => [...pre, ...msg]);
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
}, [messagesQuery]);
|
|
729
759
|
const lastMessage = (0, react_1.useMemo)(() => {
|
|
730
|
-
var _a
|
|
731
|
-
if (!(
|
|
760
|
+
var _a;
|
|
761
|
+
if (!(messages === null || messages === void 0 ? void 0 : messages.length)) {
|
|
732
762
|
return null;
|
|
733
763
|
}
|
|
734
|
-
const { data } = messagesQuery.messages;
|
|
764
|
+
// const { data } = messagesQuery.messages;
|
|
765
|
+
const data = messages;
|
|
735
766
|
const filteredData = data === null || data === void 0 ? void 0 : data.filter((p) => (p === null || p === void 0 ? void 0 : p.message) !== '');
|
|
736
|
-
return filteredData[0];
|
|
767
|
+
// return filteredData[0];
|
|
768
|
+
let filteredLastMessage = filteredData && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length)
|
|
769
|
+
? (_a = filteredData === null || filteredData === void 0 ? void 0 : filteredData.reduce((a, b) => {
|
|
770
|
+
return new Date(a === null || a === void 0 ? void 0 : a.updatedAt) > new Date(b === null || b === void 0 ? void 0 : b.updatedAt) ? a : b;
|
|
771
|
+
}, [])) !== null && _a !== void 0 ? _a : null
|
|
772
|
+
: null;
|
|
773
|
+
return filteredLastMessage;
|
|
737
774
|
//return data[data.length - 1];
|
|
738
|
-
}, [
|
|
775
|
+
}, [messages]);
|
|
739
776
|
const channelMembers = (0, react_1.useMemo)(() => {
|
|
740
777
|
var _a, _b, _c;
|
|
741
778
|
return (_c = (_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.filter((ch) => { var _a, _b; return ((_a = ch === null || ch === void 0 ? void 0 : ch.user) === null || _a === void 0 ? void 0 : _a.id) != (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) && ((_b = ch === null || ch === void 0 ? void 0 : ch.user) === null || _b === void 0 ? void 0 : _b.__typename) == 'UserAccount'; })) === null || _b === void 0 ? void 0 : _b.map((m) => m === null || m === void 0 ? void 0 : m.user)) !== null && _c !== void 0 ? _c : null;
|
|
@@ -766,7 +803,7 @@ selectedChannelId, channel, onOpen, }) {
|
|
|
766
803
|
bg: 'transparent',
|
|
767
804
|
} }, channelMembers &&
|
|
768
805
|
(channelMembers === null || channelMembers === void 0 ? void 0 : channelMembers.length) > 0 &&
|
|
769
|
-
((
|
|
806
|
+
((_c = channelMembers === null || channelMembers === void 0 ? void 0 : channelMembers.slice(0, 2)) === null || _c === void 0 ? void 0 : _c.map((ch, i) => {
|
|
770
807
|
var _a;
|
|
771
808
|
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
809
|
uri: ch === null || ch === void 0 ? void 0 : ch.picture,
|
|
@@ -775,14 +812,40 @@ selectedChannelId, channel, onOpen, }) {
|
|
|
775
812
|
(channelMembers === null || channelMembers === void 0 ? void 0 : channelMembers.length) == 1 && (react_1.default.createElement(native_base_1.Avatar.Badge, { bg: "green.800", bottom: -4, right: -4 }))));
|
|
776
813
|
})))),
|
|
777
814
|
react_1.default.createElement(native_base_1.Box, { flex: 0.9 },
|
|
778
|
-
react_1.default.createElement(
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
815
|
+
react_1.default.createElement(LastMessageComponent, { title: title, lastMessage: lastMessage, channelId: channel === null || channel === void 0 ? void 0 : channel.id, subscribeToNewMessages: () => {
|
|
816
|
+
var _a;
|
|
817
|
+
return subscribeToMore({
|
|
818
|
+
document: platform_client_1.OnChatMessageAddedDocument,
|
|
819
|
+
variables: {
|
|
820
|
+
channelId: (_a = channel.id) === null || _a === void 0 ? void 0 : _a.toString(),
|
|
821
|
+
},
|
|
822
|
+
updateQuery: (prev, { subscriptionData }) => {
|
|
823
|
+
var _a;
|
|
824
|
+
if (!subscriptionData.data)
|
|
825
|
+
return prev;
|
|
826
|
+
const newMessage = (_a = subscriptionData === null || subscriptionData === void 0 ? void 0 : subscriptionData.data) === null || _a === void 0 ? void 0 : _a.chatMessageAdded;
|
|
827
|
+
const existingMessages = prev === null || prev === void 0 ? void 0 : prev.messages;
|
|
828
|
+
const previousData = (existingMessages === null || existingMessages === void 0 ? void 0 : existingMessages.data)
|
|
829
|
+
? [...existingMessages.data, newMessage]
|
|
830
|
+
: [];
|
|
831
|
+
const totalMsgCount = (existingMessages === null || existingMessages === void 0 ? void 0 : existingMessages.totalCount) + 1;
|
|
832
|
+
const merged = Object.assign(Object.assign({}, prev), { messages: Object.assign(Object.assign({}, existingMessages), { data: previousData, totalCount: totalMsgCount }) });
|
|
833
|
+
return merged;
|
|
834
|
+
},
|
|
835
|
+
});
|
|
836
|
+
} })))));
|
|
784
837
|
};
|
|
785
838
|
exports.DialogsListItemComponent = DialogsListItemComponent;
|
|
839
|
+
const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, channelId }) => {
|
|
840
|
+
var _a;
|
|
841
|
+
react_1.default.useEffect(() => subscribeToNewMessages(), [channelId]);
|
|
842
|
+
return (react_1.default.createElement(native_base_1.HStack, { space: 1, flex: 1, direction: 'row', justifyContent: 'center', alignItems: 'center' },
|
|
843
|
+
react_1.default.createElement(native_base_1.Box, { flex: 0.8 },
|
|
844
|
+
react_1.default.createElement(native_base_1.Text, { color: "gray.600", fontSize: "lg", flexWrap: 'wrap', fontWeight: "semibold" }, title),
|
|
845
|
+
react_1.default.createElement(native_base_1.Text, { color: "gray.600", noOfLines: 1 }, (_a = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message) !== null && _a !== void 0 ? _a : '')),
|
|
846
|
+
react_1.default.createElement(native_base_1.Box, { flex: 0.2 },
|
|
847
|
+
react_1.default.createElement(native_base_1.Text, { color: "gray.500" }, lastMessage ? createdAtText(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.createdAt) : ''))));
|
|
848
|
+
};
|
|
786
849
|
exports.DialogsListItem = react_1.default.memo(exports.DialogsListItemComponent);
|
|
787
850
|
|
|
788
851
|
|
|
@@ -1139,6 +1202,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
|
|
|
1139
1202
|
const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
|
|
1140
1203
|
const react_native_1 = __webpack_require__(/*! react-native */ "react-native");
|
|
1141
1204
|
const react_native_gifted_chat_1 = __webpack_require__(/*! react-native-gifted-chat */ "react-native-gifted-chat");
|
|
1205
|
+
const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
|
|
1142
1206
|
const SlackBubble_1 = __importDefault(__webpack_require__(/*! ./SlackBubble */ "./src/screens/inbox/components/SlackMessageContainer/SlackBubble.tsx"));
|
|
1143
1207
|
const { isSameUser, isSameDay } = react_native_gifted_chat_1.utils;
|
|
1144
1208
|
class Message extends react_1.default.Component {
|
|
@@ -1162,19 +1226,31 @@ class Message extends react_1.default.Component {
|
|
|
1162
1226
|
if (this.props.renderBubble) {
|
|
1163
1227
|
return this.props.renderBubble(bubbleProps);
|
|
1164
1228
|
}
|
|
1165
|
-
return react_1.default.createElement(SlackBubble_1.default, Object.assign({}, bubbleProps, { isShowImageViewer: this.props.isShowImageViewer, setImageViewer: this.props.setImageViewer }));
|
|
1229
|
+
return (react_1.default.createElement(SlackBubble_1.default, Object.assign({}, bubbleProps, { isShowImageViewer: this.props.isShowImageViewer, setImageViewer: this.props.setImageViewer })));
|
|
1166
1230
|
}
|
|
1167
1231
|
renderAvatar() {
|
|
1232
|
+
var _a, _b, _c, _d;
|
|
1168
1233
|
let extraStyle;
|
|
1234
|
+
//new param added
|
|
1235
|
+
let isSameUserAndSameDay = false;
|
|
1169
1236
|
if (isSameUser(this.props.currentMessage, this.props.previousMessage) &&
|
|
1170
1237
|
isSameDay(this.props.currentMessage, this.props.previousMessage)) {
|
|
1171
1238
|
// Set the invisible avatar height to 0, but keep the width, padding, etc.
|
|
1172
1239
|
extraStyle = { height: 0 };
|
|
1240
|
+
isSameUserAndSameDay = true;
|
|
1173
1241
|
}
|
|
1174
1242
|
const avatarProps = this.getInnerComponentProps();
|
|
1175
|
-
return (react_1.default.createElement(
|
|
1176
|
-
|
|
1177
|
-
} })))
|
|
1243
|
+
return (react_1.default.createElement(native_base_1.Avatar, { size: 'sm', bg: 'transparent', borderRadius: 0, source: {
|
|
1244
|
+
uri: isSameUserAndSameDay ? null : (_b = (_a = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.currentMessage) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.avatar,
|
|
1245
|
+
}, marginRight: 2, _image: Object.assign(Object.assign({}, styles.slackAvatar), avatarProps.imageStyle) }, isSameUserAndSameDay ? '' : (_d = (_c = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.currentMessage) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.name[0])
|
|
1246
|
+
// <Avatar
|
|
1247
|
+
// {...avatarProps}
|
|
1248
|
+
// showAvatarForEveryMessage={true}
|
|
1249
|
+
// imageStyle={{
|
|
1250
|
+
// left: [styles.slackAvatar, avatarProps.imageStyle, extraStyle],
|
|
1251
|
+
// }}
|
|
1252
|
+
// />
|
|
1253
|
+
);
|
|
1178
1254
|
}
|
|
1179
1255
|
render() {
|
|
1180
1256
|
const marginBottom = isSameUser(this.props.currentMessage, this.props.nextMessage) ? 2 : 10;
|
|
@@ -1199,7 +1275,8 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
1199
1275
|
height: 40,
|
|
1200
1276
|
width: 40,
|
|
1201
1277
|
borderRadius: 3,
|
|
1202
|
-
marginTop: 0,
|
|
1278
|
+
// marginTop: 0,
|
|
1279
|
+
marginTop: 1,
|
|
1203
1280
|
},
|
|
1204
1281
|
});
|
|
1205
1282
|
Message.defaultProps = {
|
|
@@ -1564,7 +1641,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
|
|
|
1564
1641
|
exports.config = void 0;
|
|
1565
1642
|
const envalid_1 = __webpack_require__(/*! envalid */ "envalid");
|
|
1566
1643
|
exports.config = (0, envalid_1.cleanEnv)(process['APP_ENV'] || process.env, {
|
|
1567
|
-
MESSAGES_PER_PAGE: (0, envalid_1.num)({ devDefault:
|
|
1644
|
+
MESSAGES_PER_PAGE: (0, envalid_1.num)({ devDefault: 20, default: 20 }),
|
|
1568
1645
|
FILES_PER_MESSAGE: (0, envalid_1.num)({ default: 10 }),
|
|
1569
1646
|
INBOX_MESSEGE_PATH: (0, envalid_1.str)({ default: 'MainStack.Message' }),
|
|
1570
1647
|
// THREAD_MESSEGE_PATH: str({ default: 'MainStack.Thread' }),
|
|
@@ -1658,7 +1735,6 @@ const createdAtText = (value) => {
|
|
|
1658
1735
|
return (0, date_fns_1.format)(new Date(value), 'MMM dd, yyyy');
|
|
1659
1736
|
};
|
|
1660
1737
|
const ConversationViewComponent = ({ channelId, role }) => {
|
|
1661
|
-
var _a;
|
|
1662
1738
|
const [channelToTop, setChannelToTop] = (0, react_1.useState)(0);
|
|
1663
1739
|
const [channelMessages, setChannelMessages] = (0, react_1.useState)([]);
|
|
1664
1740
|
const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
|
|
@@ -1677,28 +1753,26 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
1677
1753
|
const [expoTokens, setExpoTokens] = (0, react_1.useState)([]);
|
|
1678
1754
|
const [isShowImageViewer, setImageViewer] = (0, react_1.useState)(false);
|
|
1679
1755
|
const [imageObject, setImageObject] = (0, react_1.useState)({});
|
|
1756
|
+
const [skip, setSkip] = (0, react_1.useState)(0);
|
|
1757
|
+
const messageRootListRef = (0, react_1.useRef)(null);
|
|
1680
1758
|
const isFocused = (0, native_1.useIsFocused)();
|
|
1681
1759
|
const { data: mongooseObjectId, refetch: refetchNewPostId } = (0, platform_client_1.useGetNewMongooseObjectIdQuery)({
|
|
1682
1760
|
fetchPolicy: 'network-only',
|
|
1683
|
-
//pollInterval: 5000,
|
|
1684
|
-
});
|
|
1685
|
-
const { data: newMessage, loading: newMsgLoading, error: newMsgError, } = (0, platform_client_1.useOnChatMessageAddedSubscription)({
|
|
1686
|
-
variables: {
|
|
1687
|
-
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
1688
|
-
},
|
|
1689
1761
|
});
|
|
1690
1762
|
const { startUpload } = (0, platform_client_1.useUploadFilesNative)();
|
|
1691
1763
|
const [sendMsg] = (0, platform_client_1.useSendMessagesMutation)();
|
|
1692
1764
|
const [sendExpoNotificationOnPostMutation] = (0, platform_client_1.useSendExpoNotificationOnPostMutation)();
|
|
1693
|
-
const { data, loading: messageLoading, refetch, } = (0, platform_client_1.useMessagesQuery)({
|
|
1765
|
+
const { data, loading: messageLoading, refetch, fetchMore: fetchMoreMessages, subscribeToMore, } = (0, platform_client_1.useMessagesQuery)({
|
|
1694
1766
|
variables: {
|
|
1695
1767
|
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
1696
1768
|
parentId: null,
|
|
1697
1769
|
limit: MESSAGES_PER_PAGE,
|
|
1770
|
+
skip: skip,
|
|
1698
1771
|
},
|
|
1699
1772
|
skip: !channelId,
|
|
1700
1773
|
fetchPolicy: 'cache-and-network',
|
|
1701
1774
|
nextFetchPolicy: 'cache-first',
|
|
1775
|
+
refetchWritePolicy: 'merge',
|
|
1702
1776
|
});
|
|
1703
1777
|
const { data: channelsDetail, loading: channelLoading, refetch: refetchChannelDetail, } = (0, platform_client_1.useViewChannelDetailQuery)({
|
|
1704
1778
|
variables: {
|
|
@@ -1706,204 +1780,73 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
1706
1780
|
},
|
|
1707
1781
|
});
|
|
1708
1782
|
// const { data: users } = useGetAllUsersQuery();
|
|
1709
|
-
// const { data: checkForMessages }: any = useCheckForNewMessagesQuery({
|
|
1710
|
-
// variables: {
|
|
1711
|
-
// channelId: channelId?.toString(),
|
|
1712
|
-
// },
|
|
1713
|
-
// skip: !channelId,
|
|
1714
|
-
// fetchPolicy: 'network-only',
|
|
1715
|
-
// pollInterval: 5000,
|
|
1716
|
-
// });
|
|
1717
1783
|
(0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
|
|
1718
1784
|
// Do something when the screen is focused
|
|
1785
|
+
setSkip(0);
|
|
1719
1786
|
refetchChannelDetail({ id: channelId === null || channelId === void 0 ? void 0 : channelId.toString() });
|
|
1720
1787
|
refetch({
|
|
1721
1788
|
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
1722
1789
|
parentId: null,
|
|
1723
1790
|
limit: MESSAGES_PER_PAGE,
|
|
1791
|
+
skip: 0,
|
|
1724
1792
|
}).then(({ data }) => {
|
|
1725
1793
|
if (!(data === null || data === void 0 ? void 0 : data.messages)) {
|
|
1726
1794
|
return;
|
|
1727
1795
|
}
|
|
1728
1796
|
const { data: messages, totalCount } = data.messages;
|
|
1729
1797
|
setTotalCount(totalCount);
|
|
1730
|
-
setChannelMessages(
|
|
1798
|
+
setChannelMessages(messages);
|
|
1731
1799
|
});
|
|
1732
1800
|
return () => {
|
|
1733
1801
|
// Do something when the screen is unfocused
|
|
1734
1802
|
// Useful for cleanup functions
|
|
1735
1803
|
setTotalCount(0);
|
|
1736
1804
|
setChannelMessages([]);
|
|
1805
|
+
setSkip(0);
|
|
1737
1806
|
};
|
|
1738
1807
|
}, [isFocused]));
|
|
1739
1808
|
react_1.default.useEffect(() => {
|
|
1740
1809
|
if (selectedImage)
|
|
1741
1810
|
setImageLoading(false);
|
|
1742
1811
|
}, [selectedImage]);
|
|
1743
|
-
// const currentUser = useMemo(
|
|
1744
|
-
// () => users?.getUsers?.find(({ alias }: any) => alias?.includes(auth?.auth0UserId)),
|
|
1745
|
-
// [users, auth],
|
|
1746
|
-
// );
|
|
1747
|
-
// useEffect(() => {
|
|
1748
|
-
// if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
|
|
1749
|
-
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
1750
|
-
// if (messages && messages.length > 0) {
|
|
1751
|
-
// setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
|
|
1752
|
-
// }
|
|
1753
|
-
// if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
|
|
1754
|
-
// }
|
|
1755
|
-
// }, [data, loadingOldMessages, channelMessages]);
|
|
1756
|
-
// useEffect(() => {
|
|
1757
|
-
// if (data?.messages?.data) {
|
|
1758
|
-
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
1759
|
-
// if (
|
|
1760
|
-
// messages &&
|
|
1761
|
-
// messages.length > 0 &&
|
|
1762
|
-
// totalCount !== messeageTotalCount &&
|
|
1763
|
-
// (loadingOldMessages || channelMessages.length === 0)
|
|
1764
|
-
// ) {
|
|
1765
|
-
// setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
|
|
1766
|
-
// setLoadingOldMessages(false);
|
|
1767
|
-
// setTotalCount(messeageTotalCount);
|
|
1768
|
-
// }
|
|
1769
|
-
// // if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
|
|
1770
|
-
// }
|
|
1771
|
-
// }, [data, loadingOldMessages, channelMessages]);///
|
|
1772
|
-
////......... initiate messages ......................////
|
|
1773
|
-
// useEffect(() => {
|
|
1774
|
-
// if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
|
|
1775
|
-
// console.log('loading msg')
|
|
1776
|
-
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
1777
|
-
// if (messages && messages.length > 0) {
|
|
1778
|
-
// setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
|
|
1779
|
-
// setLoadingOldMessages(false);
|
|
1780
|
-
// }
|
|
1781
|
-
// if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
|
|
1782
|
-
// }
|
|
1783
|
-
// }, [data, loadingOldMessages, channelMessages, totalCount]);
|
|
1784
|
-
////.... initiate messages end................................////
|
|
1785
|
-
// useEffect(() => {
|
|
1786
|
-
// if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
|
|
1787
|
-
// console.log('initiate msg')
|
|
1788
|
-
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
1789
|
-
// if (messages && messages.length > 0) {
|
|
1790
|
-
// setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
|
|
1791
|
-
// setTotalCount(messeageTotalCount);
|
|
1792
|
-
// }
|
|
1793
|
-
// if(loadingOldMessages) setLoadingOldMessages(false);
|
|
1794
|
-
// }
|
|
1795
|
-
// }, [data, channelMessages,loadingOldMessages]);
|
|
1796
1812
|
(0, react_1.useEffect)(() => {
|
|
1797
|
-
var _a
|
|
1798
|
-
if ((
|
|
1813
|
+
var _a;
|
|
1814
|
+
if ((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data) {
|
|
1799
1815
|
const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
1800
|
-
if (messages && messages.length > 0)
|
|
1816
|
+
if ((messages && messages.length > 0 && messeageTotalCount > totalCount) ||
|
|
1817
|
+
(messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))) {
|
|
1801
1818
|
setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...messages, ...oldMessages], ({ id }) => id));
|
|
1802
1819
|
setTotalCount(messeageTotalCount);
|
|
1803
1820
|
}
|
|
1804
|
-
|
|
1805
|
-
if (loadingOldMessages)
|
|
1821
|
+
if (loadingOldMessages && channelMessages)
|
|
1806
1822
|
setLoadingOldMessages(false);
|
|
1807
1823
|
}
|
|
1808
|
-
}, [data, loadingOldMessages, channelMessages]);
|
|
1809
|
-
react_1.
|
|
1810
|
-
if (
|
|
1811
|
-
const msg = newMessage === null || newMessage === void 0 ? void 0 : newMessage.chatMessageAdded;
|
|
1812
|
-
setTotalCount((preCount) => preCount + 1);
|
|
1813
|
-
setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...oldMessages, msg], ({ id }) => id));
|
|
1814
|
-
}
|
|
1815
|
-
}, [newMessage]);
|
|
1816
|
-
// useEffect(() => {
|
|
1817
|
-
// if (data?.messages?.data) {
|
|
1818
|
-
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
1819
|
-
// console.log('messeageTotalCount',messeageTotalCount)
|
|
1820
|
-
// console.log('totalCount',totalCount)
|
|
1821
|
-
// if (messages && messages.length > 0) {
|
|
1822
|
-
// setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
|
|
1823
|
-
// }
|
|
1824
|
-
// if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
|
|
1825
|
-
// }
|
|
1826
|
-
// }, [data]);
|
|
1827
|
-
// useEffect(() => {
|
|
1828
|
-
// if (checkForMessages?.messages?.totalCount > totalCount) {
|
|
1829
|
-
// const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
|
|
1830
|
-
// refetch({
|
|
1831
|
-
// limit: numberOfNewMessages,
|
|
1832
|
-
// }).then(({ data }) => {
|
|
1833
|
-
// if (!data?.messages) {
|
|
1834
|
-
// return;
|
|
1835
|
-
// }
|
|
1836
|
-
// const { data: messages, totalCount }:any = data.messages;
|
|
1837
|
-
// setTotalCount(totalCount);
|
|
1838
|
-
// setChannelMessages((oldMessages:any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
|
|
1839
|
-
// });
|
|
1840
|
-
// }
|
|
1841
|
-
// }, [checkForMessages, totalCount]);
|
|
1842
|
-
////////...............New msg check...........////
|
|
1843
|
-
// useEffect(() => {
|
|
1844
|
-
// if (
|
|
1845
|
-
// !messageLoading &&
|
|
1846
|
-
// checkForMessages?.messages?.totalCount &&
|
|
1847
|
-
// checkForMessages?.messages?.totalCount > totalCount
|
|
1848
|
-
// ) {
|
|
1849
|
-
// const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
|
|
1850
|
-
// console.log('new msg check');
|
|
1851
|
-
// refetch({
|
|
1852
|
-
// channelId: channelId?.toString(),
|
|
1853
|
-
// parentId: null,
|
|
1854
|
-
// limit: numberOfNewMessages,
|
|
1855
|
-
// }).then(({ data }) => {
|
|
1856
|
-
// if (!data?.messages) {
|
|
1857
|
-
// return;
|
|
1858
|
-
// }
|
|
1859
|
-
// const { data: messages, totalCount }: any = data.messages;
|
|
1860
|
-
// setTotalCount(totalCount);
|
|
1861
|
-
// setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
|
|
1862
|
-
// });
|
|
1863
|
-
// }
|
|
1864
|
-
// }, [checkForMessages, totalCount]);
|
|
1865
|
-
////////////....new msg check end.........//
|
|
1866
|
-
// const onFetchOld = useCallback(() => {
|
|
1867
|
-
// // if (data?.messages?.totalCount > channelMessages.length) {
|
|
1868
|
-
// //if(channelMessages.length !== data?.messages?.totalCount){
|
|
1869
|
-
// if(totalCount > channelMessages.length){
|
|
1870
|
-
// setLoadingOldMessages(true);
|
|
1871
|
-
// refetch({ skip: channelMessages.length });
|
|
1872
|
-
// }
|
|
1873
|
-
// }, [data, channelMessages]);
|
|
1874
|
-
// const onFetchOld = () => {
|
|
1875
|
-
// // if (data?.messages?.totalCount > channelMessages.length) {
|
|
1876
|
-
// //if(channelMessages.length !== data?.messages?.totalCount){
|
|
1877
|
-
// if(totalCount > channelMessages.length){
|
|
1878
|
-
// setLoadingOldMessages(true);
|
|
1879
|
-
// refetch({ skip: channelMessages.length });
|
|
1880
|
-
// }
|
|
1881
|
-
// };
|
|
1882
|
-
// const onFetchOld = useCallback(() => {
|
|
1883
|
-
// if (data?.messages?.totalCount > channelMessages.length) {
|
|
1884
|
-
// console.log('fetchmore')
|
|
1885
|
-
// refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then((res:any)=>{
|
|
1886
|
-
// setLoadingOldMessages(true);
|
|
1887
|
-
// });
|
|
1888
|
-
// }
|
|
1889
|
-
// }, [data, channelMessages]);
|
|
1890
|
-
const onFetchOld = (0, react_1.useCallback)((data, channelMessages) => {
|
|
1891
|
-
var _a, _b;
|
|
1892
|
-
if (((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.totalCount) > channelMessages.length) {
|
|
1824
|
+
}, [data, loadingOldMessages, channelMessages, totalCount]);
|
|
1825
|
+
const onFetchOld = (0, react_1.useCallback)(async () => {
|
|
1826
|
+
if (totalCount > channelMessages.length && !loadingOldMessages) {
|
|
1893
1827
|
setLoadEarlierMsg(true);
|
|
1894
|
-
|
|
1828
|
+
try {
|
|
1829
|
+
const response = await fetchMoreMessages({
|
|
1830
|
+
variables: {
|
|
1831
|
+
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
1832
|
+
parentId: null,
|
|
1833
|
+
skip: channelMessages.length,
|
|
1834
|
+
},
|
|
1835
|
+
});
|
|
1836
|
+
if (response === null || response === void 0 ? void 0 : response.data) {
|
|
1837
|
+
setSkip(channelMessages.length);
|
|
1838
|
+
setLoadEarlierMsg(false);
|
|
1839
|
+
setLoadingOldMessages(true);
|
|
1840
|
+
}
|
|
1841
|
+
}
|
|
1842
|
+
catch (error) {
|
|
1843
|
+
setLoadEarlierMsg(false);
|
|
1844
|
+
}
|
|
1845
|
+
// ?.then((res: any) => {
|
|
1846
|
+
// setLoadingOldMessages(true);
|
|
1847
|
+
// });
|
|
1895
1848
|
}
|
|
1896
|
-
}, []);
|
|
1897
|
-
// const onFetchOld = () => {
|
|
1898
|
-
// if(totalCount > channelMessages.length){
|
|
1899
|
-
// console.log('totalCount',totalCount)
|
|
1900
|
-
// console.log('channelMessages.length',channelMessages.length)
|
|
1901
|
-
// setLoadingOldMessages(true);
|
|
1902
|
-
// refetch({
|
|
1903
|
-
// skip: channelMessages.length
|
|
1904
|
-
// });
|
|
1905
|
-
// }
|
|
1906
|
-
// };
|
|
1849
|
+
}, [totalCount, channelMessages]);
|
|
1907
1850
|
// const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
|
|
1908
1851
|
// return contentOffset.y <= 100; // 100px from top
|
|
1909
1852
|
// };
|
|
@@ -1937,123 +1880,6 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
1937
1880
|
if (imageSource.cancelled)
|
|
1938
1881
|
setLoading(false);
|
|
1939
1882
|
};
|
|
1940
|
-
// const sendPushNotification = async (title: String, body: String, data: any, to: any) => {
|
|
1941
|
-
// try {
|
|
1942
|
-
// const response = await fetch('https://exp.host/--/api/v2/push/send/', {
|
|
1943
|
-
// method: 'POST',
|
|
1944
|
-
// headers: {
|
|
1945
|
-
// Accept: 'application/json',
|
|
1946
|
-
// 'Accept-Encoding': 'gzip, deflate',
|
|
1947
|
-
// 'Content-Type': 'application/json',
|
|
1948
|
-
// },
|
|
1949
|
-
// body: JSON.stringify({
|
|
1950
|
-
// to: to,
|
|
1951
|
-
// data: data,
|
|
1952
|
-
// title: title,
|
|
1953
|
-
// body: body,
|
|
1954
|
-
// sound: Platform.OS === 'android' ? undefined || null : 'default',
|
|
1955
|
-
// }),
|
|
1956
|
-
// });
|
|
1957
|
-
// const result: any = await response.json();
|
|
1958
|
-
// console.log('expo api response', result);
|
|
1959
|
-
// } catch (error) {
|
|
1960
|
-
// console.error('Error:', error);
|
|
1961
|
-
// }
|
|
1962
|
-
// // fetch('https://exp.host/--/api/v2/push/send/', {
|
|
1963
|
-
// // method: 'POST',
|
|
1964
|
-
// // headers: {
|
|
1965
|
-
// // Accept: 'application/json',
|
|
1966
|
-
// // 'Accept-Encoding': 'gzip, deflate',
|
|
1967
|
-
// // 'Content-Type': 'application/json',
|
|
1968
|
-
// // },
|
|
1969
|
-
// // body: JSON.stringify({
|
|
1970
|
-
// // to: to,
|
|
1971
|
-
// // data: data,
|
|
1972
|
-
// // title: title,
|
|
1973
|
-
// // body: body,
|
|
1974
|
-
// // sound: Platform.OS === 'android' ? null : 'default',
|
|
1975
|
-
// // }),
|
|
1976
|
-
// // });
|
|
1977
|
-
// };
|
|
1978
|
-
// const handleSend = useCallback(
|
|
1979
|
-
// async (message: string) => {
|
|
1980
|
-
// // if (!(message && channelId)) {
|
|
1981
|
-
// // return;
|
|
1982
|
-
// // }
|
|
1983
|
-
// if (!channelId) return;
|
|
1984
|
-
// if (!message && message != ' ' && images.length == 0) return;
|
|
1985
|
-
// setLoading(true);
|
|
1986
|
-
// const { data } = await sendMsg({
|
|
1987
|
-
// variables: {
|
|
1988
|
-
// channelId,
|
|
1989
|
-
// content: message,
|
|
1990
|
-
// },
|
|
1991
|
-
// update: (cache, { data, errors }) => {
|
|
1992
|
-
// if (!data || errors) {
|
|
1993
|
-
// setLoading(false);
|
|
1994
|
-
// return;
|
|
1995
|
-
// }
|
|
1996
|
-
// setChannelMessages((messages) => [...messages, data?.sendMessage]);
|
|
1997
|
-
// setTotalCount((t) => t + 1);
|
|
1998
|
-
// setChannelToTop(channelToTop + 1);
|
|
1999
|
-
// setLoading(false);
|
|
2000
|
-
// const title: String = currentUser?.givenName+' '+currentUser?.familyName+' in Followup Chat';
|
|
2001
|
-
// const body: String = message;
|
|
2002
|
-
// const notificationData: any = {
|
|
2003
|
-
// url: config.INBOX_MESSEGE_PATH,
|
|
2004
|
-
// params: { channelId, hideTabBar: true },
|
|
2005
|
-
// screen: 'DialogMessages',
|
|
2006
|
-
// };
|
|
2007
|
-
// console.log('expo to',JSON.stringify(expoTokens));
|
|
2008
|
-
// if (expoTokens?.length > 0) {
|
|
2009
|
-
// const to: any = expoTokens?.length > 0 ? expoTokens : [];
|
|
2010
|
-
// sendPushNotification(title, body, notificationData, to);
|
|
2011
|
-
// }
|
|
2012
|
-
// setMsg('');
|
|
2013
|
-
// },
|
|
2014
|
-
// });
|
|
2015
|
-
// if (images && images.length > 0 && data?.sendMessage?.id) {
|
|
2016
|
-
// const { id: postId } = data.sendMessage;
|
|
2017
|
-
// setLoading(true);
|
|
2018
|
-
// const uploadResponse = await startUpload({
|
|
2019
|
-
// file: images,
|
|
2020
|
-
// saveUploadedFile: {
|
|
2021
|
-
// variables: {
|
|
2022
|
-
// postId,
|
|
2023
|
-
// },
|
|
2024
|
-
// },
|
|
2025
|
-
// createUploadLink: {
|
|
2026
|
-
// variables: {
|
|
2027
|
-
// postId,
|
|
2028
|
-
// },
|
|
2029
|
-
// },
|
|
2030
|
-
// });
|
|
2031
|
-
// if (uploadResponse?.error) setLoading(false);
|
|
2032
|
-
// const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
|
|
2033
|
-
// if (uploadResponse.data) {
|
|
2034
|
-
// setImage('');
|
|
2035
|
-
// setFiles([]);
|
|
2036
|
-
// setImages([]);
|
|
2037
|
-
// setLoading(false);
|
|
2038
|
-
// }
|
|
2039
|
-
// setChannelMessages((messages) =>
|
|
2040
|
-
// messages.map((message) => {
|
|
2041
|
-
// if (message.id === postId) {
|
|
2042
|
-
// return {
|
|
2043
|
-
// ...message,
|
|
2044
|
-
// files: {
|
|
2045
|
-
// totalCount: uploadedFiles.length,
|
|
2046
|
-
// data: uploadedFiles,
|
|
2047
|
-
// },
|
|
2048
|
-
// };
|
|
2049
|
-
// }
|
|
2050
|
-
// return message;
|
|
2051
|
-
// }),
|
|
2052
|
-
// );
|
|
2053
|
-
// }
|
|
2054
|
-
// },
|
|
2055
|
-
// [setChannelMessages, currentUser, channelId, images,expoTokens],
|
|
2056
|
-
// );
|
|
2057
1883
|
const handleSend = (0, react_1.useCallback)(async (message) => {
|
|
2058
1884
|
var _a, _b, _c;
|
|
2059
1885
|
if (!channelId)
|
|
@@ -2069,7 +1895,6 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
2069
1895
|
if (images && images.length > 0) {
|
|
2070
1896
|
const newPostId = await refetchNewPostId();
|
|
2071
1897
|
const postId = (_b = (_a = newPostId === null || newPostId === void 0 ? void 0 : newPostId.data) === null || _a === void 0 ? void 0 : _a.getNewMongooseObjectId) === null || _b === void 0 ? void 0 : _b.toString();
|
|
2072
|
-
// const postId: any = mongooseObjectId?.getNewMongooseObjectId;
|
|
2073
1898
|
setLoading(true);
|
|
2074
1899
|
const uploadResponse = await startUpload({
|
|
2075
1900
|
file: images,
|
|
@@ -2106,22 +1931,9 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
2106
1931
|
setLoading(false);
|
|
2107
1932
|
return;
|
|
2108
1933
|
}
|
|
2109
|
-
// setChannelMessages((messages: any) => [
|
|
2110
|
-
// ...messages,
|
|
2111
|
-
// {
|
|
2112
|
-
// ...data?.sendMessage,
|
|
2113
|
-
// files: {
|
|
2114
|
-
// totalCount: uploadedFiles.length,
|
|
2115
|
-
// data: uploadedFiles,
|
|
2116
|
-
// },
|
|
2117
|
-
// },
|
|
2118
|
-
// ]);
|
|
2119
|
-
// setTotalCount((t: any) => t + 1);
|
|
2120
1934
|
setChannelToTop(channelToTop + 1);
|
|
2121
1935
|
setLoading(false);
|
|
2122
1936
|
setMsg('');
|
|
2123
|
-
const msg = message == '' ? 'Send a file' : message;
|
|
2124
|
-
//sendPushNotification(data?.sendMessage, channelId);
|
|
2125
1937
|
},
|
|
2126
1938
|
});
|
|
2127
1939
|
}
|
|
@@ -2139,157 +1951,13 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
2139
1951
|
setLoading(false);
|
|
2140
1952
|
return;
|
|
2141
1953
|
}
|
|
2142
|
-
// setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
|
|
2143
|
-
// setTotalCount((t: any) => t + 1);
|
|
2144
1954
|
setChannelToTop(channelToTop + 1);
|
|
2145
1955
|
setLoading(false);
|
|
2146
1956
|
setMsg('');
|
|
2147
|
-
// sendPushNotification(data?.sendMessage, channelId);
|
|
2148
1957
|
},
|
|
2149
1958
|
});
|
|
2150
1959
|
}
|
|
2151
1960
|
}, [mongooseObjectId, setChannelMessages, channelId, images, channelToTop, expoTokens]);
|
|
2152
|
-
// const sendPushNotification = async (post: IPost, channelId: string) => {
|
|
2153
|
-
// const notificationData: IExpoNotificationData = {
|
|
2154
|
-
// url: config.INBOX_MESSEGE_PATH,
|
|
2155
|
-
// params: { channelId, hideTabBar: true },
|
|
2156
|
-
// screen: 'DialogMessages',
|
|
2157
|
-
// other: { sound: Platform.OS === 'android' ? undefined || null : 'default' },
|
|
2158
|
-
// };
|
|
2159
|
-
// await sendExpoNotificationOnPostMutation({
|
|
2160
|
-
// variables: {
|
|
2161
|
-
// postId: post?.id?.toString(),
|
|
2162
|
-
// notificationData,
|
|
2163
|
-
// },
|
|
2164
|
-
// });
|
|
2165
|
-
// };
|
|
2166
|
-
// const fetchTokenAndSendPushNotification = (message: any, channelId: any) => {
|
|
2167
|
-
// const givenName = auth?.profile?.given_name ?? '';
|
|
2168
|
-
// const familyName = auth?.profile?.family_name ?? '';
|
|
2169
|
-
// const fullName = givenName ? givenName + ' ' + familyName : '';
|
|
2170
|
-
// const title: String = fullName ? fullName : 'Message';
|
|
2171
|
-
// const body: String = message;
|
|
2172
|
-
// const notificationData: any = {
|
|
2173
|
-
// url: config.INBOX_MESSEGE_PATH,
|
|
2174
|
-
// params: { channelId, hideTabBar: true },
|
|
2175
|
-
// screen: 'DialogMessages',
|
|
2176
|
-
// };
|
|
2177
|
-
// refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
|
|
2178
|
-
// if (res?.data?.viewChannelDetail?.members?.length) {
|
|
2179
|
-
// const channelData: any =
|
|
2180
|
-
// res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
|
|
2181
|
-
// const tokens: any =
|
|
2182
|
-
// channelData
|
|
2183
|
-
// ?.map(
|
|
2184
|
-
// (u: any) =>
|
|
2185
|
-
// u?.user?.tokens
|
|
2186
|
-
// ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
|
|
2187
|
-
// ?.map((et: any) => et?.token) ?? [],
|
|
2188
|
-
// )
|
|
2189
|
-
// ?.flat(1)
|
|
2190
|
-
// ?.filter((t: any) => t)
|
|
2191
|
-
// ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
|
|
2192
|
-
// console.log('expo to', JSON.stringify(tokens));
|
|
2193
|
-
// if (tokens?.length > 0) {
|
|
2194
|
-
// const to: any = tokens?.length > 0 ? tokens : [];
|
|
2195
|
-
// sendPushNotification(title, body, notificationData, to);
|
|
2196
|
-
// }
|
|
2197
|
-
// }
|
|
2198
|
-
// });
|
|
2199
|
-
// };
|
|
2200
|
-
// const handleSend1 = async (message: string) => {
|
|
2201
|
-
// if (!channelId) return;
|
|
2202
|
-
// if (!message && message != ' ' && images.length == 0) return;
|
|
2203
|
-
// setLoading(true);
|
|
2204
|
-
// const { data } = await sendMsg({
|
|
2205
|
-
// variables: {
|
|
2206
|
-
// channelId,
|
|
2207
|
-
// content: message,
|
|
2208
|
-
// },
|
|
2209
|
-
// update: (cache, { data, errors }: any) => {
|
|
2210
|
-
// if (!data || errors) {
|
|
2211
|
-
// setLoading(false);
|
|
2212
|
-
// return;
|
|
2213
|
-
// }
|
|
2214
|
-
// setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
|
|
2215
|
-
// setTotalCount((t: any) => t + 1);
|
|
2216
|
-
// setChannelToTop(channelToTop + 1);
|
|
2217
|
-
// setLoading(false);
|
|
2218
|
-
// setMsg('');
|
|
2219
|
-
// const givenName = auth?.profile?.given_name ?? '';
|
|
2220
|
-
// const familyName = auth?.profile?.family_name ?? '';
|
|
2221
|
-
// const fullName = givenName ? givenName + ' ' + familyName : '';
|
|
2222
|
-
// const title: String = fullName ? fullName : 'Message';
|
|
2223
|
-
// const body: String = message;
|
|
2224
|
-
// const notificationData: any = {
|
|
2225
|
-
// url: config.INBOX_MESSEGE_PATH,
|
|
2226
|
-
// params: { channelId, hideTabBar: true },
|
|
2227
|
-
// screen: 'DialogMessages',
|
|
2228
|
-
// };
|
|
2229
|
-
// refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
|
|
2230
|
-
// if (res?.data?.viewChannelDetail?.members?.length) {
|
|
2231
|
-
// const channelData: any =
|
|
2232
|
-
// res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
|
|
2233
|
-
// const tokens: any =
|
|
2234
|
-
// channelData
|
|
2235
|
-
// ?.map(
|
|
2236
|
-
// (u: any) =>
|
|
2237
|
-
// u?.user?.tokens
|
|
2238
|
-
// ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
|
|
2239
|
-
// ?.map((et: any) => et?.token) ?? [],
|
|
2240
|
-
// )
|
|
2241
|
-
// ?.flat(1)
|
|
2242
|
-
// ?.filter((t: any) => t)
|
|
2243
|
-
// ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
|
|
2244
|
-
// console.log('expo to', JSON.stringify(tokens));
|
|
2245
|
-
// if (tokens?.length > 0) {
|
|
2246
|
-
// const to: any = tokens?.length > 0 ? tokens : [];
|
|
2247
|
-
// sendPushNotification(title, body, notificationData, to);
|
|
2248
|
-
// }
|
|
2249
|
-
// }
|
|
2250
|
-
// });
|
|
2251
|
-
// },
|
|
2252
|
-
// });
|
|
2253
|
-
// if (images && images.length > 0 && data?.sendMessage?.id) {
|
|
2254
|
-
// const { id: postId } = data.sendMessage;
|
|
2255
|
-
// setLoading(true);
|
|
2256
|
-
// const uploadResponse = await startUpload({
|
|
2257
|
-
// file: images,
|
|
2258
|
-
// saveUploadedFile: {
|
|
2259
|
-
// variables: {
|
|
2260
|
-
// postId,
|
|
2261
|
-
// },
|
|
2262
|
-
// },
|
|
2263
|
-
// createUploadLink: {
|
|
2264
|
-
// variables: {
|
|
2265
|
-
// postId,
|
|
2266
|
-
// },
|
|
2267
|
-
// },
|
|
2268
|
-
// });
|
|
2269
|
-
// if (uploadResponse?.error) setLoading(false);
|
|
2270
|
-
// const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
|
|
2271
|
-
// if (uploadResponse.data) {
|
|
2272
|
-
// setImage('');
|
|
2273
|
-
// setFiles([]);
|
|
2274
|
-
// setImages([]);
|
|
2275
|
-
// setLoading(false);
|
|
2276
|
-
// }
|
|
2277
|
-
// setChannelMessages((messages: any) =>
|
|
2278
|
-
// messages.map((message: any) => {
|
|
2279
|
-
// if (message.id === postId) {
|
|
2280
|
-
// return {
|
|
2281
|
-
// ...message,
|
|
2282
|
-
// files: {
|
|
2283
|
-
// totalCount: uploadedFiles.length,
|
|
2284
|
-
// data: uploadedFiles,
|
|
2285
|
-
// },
|
|
2286
|
-
// };
|
|
2287
|
-
// }
|
|
2288
|
-
// return message;
|
|
2289
|
-
// }),
|
|
2290
|
-
// );
|
|
2291
|
-
// }
|
|
2292
|
-
// };
|
|
2293
1961
|
const messageList = (0, react_1.useMemo)(() => {
|
|
2294
1962
|
let currentDate = '';
|
|
2295
1963
|
let res = [];
|
|
@@ -2455,7 +2123,7 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
2455
2123
|
expiresIn: 86400,
|
|
2456
2124
|
}, alt: 'image' }));
|
|
2457
2125
|
}, [imageObject]);
|
|
2458
|
-
const renderMessage = (props) => {
|
|
2126
|
+
const renderMessage = (0, react_1.useCallback)((props) => {
|
|
2459
2127
|
// const {
|
|
2460
2128
|
// currentMessage: { text: currText },
|
|
2461
2129
|
// } = props;
|
|
@@ -2469,47 +2137,47 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
2469
2137
|
// }
|
|
2470
2138
|
// }
|
|
2471
2139
|
// return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
|
|
2472
|
-
return react_1.default.createElement(SlackMessageContainer_1.SlackMessage, Object.assign({}, props, { isShowImageViewer: isShowImageViewer, setImageViewer: setImageViewerObject }));
|
|
2473
|
-
};
|
|
2474
|
-
|
|
2475
|
-
// const
|
|
2476
|
-
//
|
|
2477
|
-
//
|
|
2478
|
-
// //
|
|
2479
|
-
//
|
|
2480
|
-
// //
|
|
2481
|
-
//
|
|
2482
|
-
//
|
|
2483
|
-
//
|
|
2484
|
-
//
|
|
2485
|
-
//
|
|
2486
|
-
//
|
|
2487
|
-
//
|
|
2488
|
-
//
|
|
2489
|
-
// onFetchOld();
|
|
2490
|
-
// }
|
|
2491
|
-
// },
|
|
2492
|
-
// [loadingOldMessages, channelMessages],
|
|
2493
|
-
// );
|
|
2494
|
-
// const onMomentumScrollBegin = ({ nativeEvent }: any) => {
|
|
2495
|
-
// onScroll = true;
|
|
2496
|
-
// console.log('scroll top');
|
|
2497
|
-
// if (
|
|
2498
|
-
// !loadingOldMessages &&
|
|
2499
|
-
// (channelMessages?.length <= 10 || isCloseToTop(nativeEvent)) &&
|
|
2500
|
-
// channelMessages?.length != totalCount
|
|
2501
|
-
// ) {
|
|
2502
|
-
// onFetchOld();
|
|
2503
|
-
// }
|
|
2140
|
+
return (react_1.default.createElement(SlackMessageContainer_1.SlackMessage, Object.assign({}, props, { isShowImageViewer: isShowImageViewer, setImageViewer: setImageViewerObject })));
|
|
2141
|
+
}, [isShowImageViewer]);
|
|
2142
|
+
// const renderMessage = (props: any) => {
|
|
2143
|
+
// // const {
|
|
2144
|
+
// // currentMessage: { text: currText },
|
|
2145
|
+
// // } = props;
|
|
2146
|
+
// //let messageTextStyle: any;
|
|
2147
|
+
// // Make "pure emoji" messages much bigger than plain text.
|
|
2148
|
+
// // if (currText && emojiUtils.isPureEmojiString(currText)) {
|
|
2149
|
+
// // messageTextStyle = {
|
|
2150
|
+
// // fontSize: 28,
|
|
2151
|
+
// // // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
|
|
2152
|
+
// // lineHeight: Platform.OS === 'android' ? 34 : 30,
|
|
2153
|
+
// // }
|
|
2154
|
+
// // }
|
|
2155
|
+
// // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
|
|
2156
|
+
// return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
|
|
2504
2157
|
// };
|
|
2158
|
+
let onScroll = false;
|
|
2159
|
+
const onMomentumScrollBegin = async ({ nativeEvent }) => {
|
|
2160
|
+
onScroll = true;
|
|
2161
|
+
console.log('scroll top');
|
|
2162
|
+
if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > (channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length)) {
|
|
2163
|
+
await onFetchOld();
|
|
2164
|
+
}
|
|
2165
|
+
};
|
|
2166
|
+
const onEndReached = () => {
|
|
2167
|
+
console.log('on end reached');
|
|
2168
|
+
if (!onScroll)
|
|
2169
|
+
return;
|
|
2170
|
+
// load messages, show ActivityIndicator
|
|
2171
|
+
onScroll = false;
|
|
2172
|
+
// setLoadingOldMessages(true);
|
|
2173
|
+
};
|
|
2505
2174
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
2506
2175
|
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
|
-
// }}
|
|
2176
|
+
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: {
|
|
2177
|
+
onEndReached: onEndReached,
|
|
2178
|
+
onEndReachedThreshold: 0.5,
|
|
2179
|
+
onMomentumScrollBegin: onMomentumScrollBegin,
|
|
2180
|
+
},
|
|
2513
2181
|
// listViewProps={{
|
|
2514
2182
|
// scrollEventThrottle: 400,
|
|
2515
2183
|
// onScroll: ({ nativeEvent }) => { console.log('scroll')
|
|
@@ -2524,15 +2192,59 @@ const ConversationViewComponent = ({ channelId, role }) => {
|
|
|
2524
2192
|
}, isTyping: true, alwaysShowSend: loading ? false : true,
|
|
2525
2193
|
//onLoadEarlier={onFetchOld}
|
|
2526
2194
|
//infiniteScroll={true}
|
|
2527
|
-
renderSend: renderSend,
|
|
2195
|
+
renderSend: renderSend,
|
|
2196
|
+
// loadEarlier={data?.messages?.totalCount > channelMessages.length}
|
|
2197
|
+
//isLoadingEarlier={loadEarlierMsg}
|
|
2528
2198
|
//extraData={{ isLoadingEarlier: loadingOldMessages }}
|
|
2529
|
-
renderLoadEarlier
|
|
2530
|
-
|
|
2199
|
+
// renderLoadEarlier={() =>
|
|
2200
|
+
// !loadEarlierMsg && (
|
|
2201
|
+
// <Center py={2}>
|
|
2202
|
+
// <Button
|
|
2203
|
+
// onPress={() => onFetchOld()}
|
|
2204
|
+
// variant={'outline'}
|
|
2205
|
+
// _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
|
|
2206
|
+
// >
|
|
2207
|
+
// Load earlier messages
|
|
2208
|
+
// </Button>
|
|
2209
|
+
// </Center>
|
|
2210
|
+
// )
|
|
2211
|
+
// }
|
|
2212
|
+
renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory, renderMessage: renderMessage, renderChatFooter: () => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
2213
|
+
react_1.default.createElement(SlackMessageContainer_1.ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent: modalContent }),
|
|
2214
|
+
react_1.default.createElement(SubscriptionHandler, { channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(), subscribeToNewMessages: () => subscribeToMore({
|
|
2215
|
+
document: platform_client_1.OnChatMessageAddedDocument,
|
|
2216
|
+
variables: {
|
|
2217
|
+
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
2218
|
+
},
|
|
2219
|
+
updateQuery: (prev, { subscriptionData }) => {
|
|
2220
|
+
var _a, _b, _c;
|
|
2221
|
+
if (!subscriptionData.data)
|
|
2222
|
+
return prev;
|
|
2223
|
+
setSkip(0);
|
|
2224
|
+
const newMessage = (_a = subscriptionData === null || subscriptionData === void 0 ? void 0 : subscriptionData.data) === null || _a === void 0 ? void 0 : _a.chatMessageAdded;
|
|
2225
|
+
const previousData = ((_b = prev === null || prev === void 0 ? void 0 : prev.messages) === null || _b === void 0 ? void 0 : _b.data)
|
|
2226
|
+
? [...prev.messages.data, newMessage]
|
|
2227
|
+
: [];
|
|
2228
|
+
const totalMsgCount = ((_c = prev === null || prev === void 0 ? void 0 : prev.messages) === null || _c === void 0 ? void 0 : _c.totalCount) + 1;
|
|
2229
|
+
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 }) });
|
|
2230
|
+
return merged;
|
|
2231
|
+
// return Object.assign({}, prev, {
|
|
2232
|
+
// messages: {
|
|
2233
|
+
// data: [...prev.messages.data, newMessage],
|
|
2234
|
+
// totalCount: prev.messages.totalCount + 1,
|
|
2235
|
+
// },
|
|
2236
|
+
// });
|
|
2237
|
+
},
|
|
2238
|
+
}) }))), lightboxProps: {
|
|
2531
2239
|
underlayColor: 'transparent',
|
|
2532
2240
|
springConfig: { tension: 90000, friction: 90000 },
|
|
2533
2241
|
disabled: true,
|
|
2534
2242
|
} })));
|
|
2535
2243
|
};
|
|
2244
|
+
const SubscriptionHandler = ({ subscribeToNewMessages, channelId }) => {
|
|
2245
|
+
(0, react_1.useEffect)(() => subscribeToNewMessages(), [channelId]);
|
|
2246
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
2247
|
+
};
|
|
2536
2248
|
exports.ConversationView = react_1.default.memo(ConversationViewComponent);
|
|
2537
2249
|
|
|
2538
2250
|
|
|
@@ -2854,7 +2566,7 @@ const createdAtText = (value) => {
|
|
|
2854
2566
|
return (0, date_fns_1.format)(new Date(value), 'MMM dd, yyyy');
|
|
2855
2567
|
};
|
|
2856
2568
|
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
|
|
2569
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
2858
2570
|
const { params } = (0, native_1.useRoute)();
|
|
2859
2571
|
const [channelToTop, setChannelToTop] = (0, react_1.useState)(0);
|
|
2860
2572
|
const [channelMessages, setChannelMessages] = (0, react_1.useState)([]);
|
|
@@ -2877,6 +2589,9 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2877
2589
|
const [parentId, setParentId] = (0, react_1.useState)(postParentId);
|
|
2878
2590
|
const { startUpload } = (0, platform_client_1.useUploadFilesNative)();
|
|
2879
2591
|
const [threadPost, setThreadPost] = (0, react_1.useState)([]);
|
|
2592
|
+
const [skip, setSkip] = (0, react_1.useState)(0);
|
|
2593
|
+
const [isScrollToBottom, setIsScrollToBottom] = (0, react_1.useState)(false);
|
|
2594
|
+
const threadMessageListRef = (0, react_1.useRef)(null);
|
|
2880
2595
|
const { data: mongooseObjectId, refetch: refetchNewPostId } = (0, platform_client_1.useGetNewMongooseObjectIdQuery)({
|
|
2881
2596
|
fetchPolicy: 'network-only',
|
|
2882
2597
|
// pollInterval: 5000,
|
|
@@ -2897,24 +2612,17 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2897
2612
|
},
|
|
2898
2613
|
fetchPolicy: 'cache-and-network',
|
|
2899
2614
|
});
|
|
2900
|
-
const { data, loading: messageLoading, refetch, } = (0, platform_client_1.
|
|
2615
|
+
const { data, loading: messageLoading, refetch, fetchMore: fetchMoreMessages, subscribeToMore, } = (0, platform_client_1.usePostThreadMessagesQuery)({
|
|
2901
2616
|
variables: {
|
|
2902
2617
|
channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
2903
2618
|
parentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
|
|
2904
2619
|
limit: MESSAGES_PER_PAGE,
|
|
2620
|
+
skip: skip,
|
|
2905
2621
|
},
|
|
2906
2622
|
skip: !channelId,
|
|
2907
2623
|
fetchPolicy: 'cache-and-network',
|
|
2624
|
+
refetchWritePolicy: 'merge',
|
|
2908
2625
|
});
|
|
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
2626
|
(0, native_1.useFocusEffect)(react_1.default.useCallback(() => {
|
|
2919
2627
|
var _a;
|
|
2920
2628
|
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 +2637,22 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2929
2637
|
channelId: !parentId || parentId == 0 ? null : channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
2930
2638
|
parentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
|
|
2931
2639
|
limit: MESSAGES_PER_PAGE,
|
|
2640
|
+
skip: 0,
|
|
2932
2641
|
}).then(({ data }) => {
|
|
2933
2642
|
if (!(data === null || data === void 0 ? void 0 : data.messages)) {
|
|
2934
2643
|
return;
|
|
2935
2644
|
}
|
|
2936
2645
|
const { data: messages, totalCount } = data.messages;
|
|
2937
2646
|
setTotalCount(totalCount);
|
|
2938
|
-
setChannelMessages(
|
|
2647
|
+
setChannelMessages(messages);
|
|
2648
|
+
//setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
|
|
2939
2649
|
});
|
|
2940
2650
|
return () => {
|
|
2941
2651
|
setTotalCount(0);
|
|
2942
2652
|
setChannelMessages([]);
|
|
2653
|
+
setThreadPost([]);
|
|
2943
2654
|
};
|
|
2944
|
-
}, []));
|
|
2655
|
+
}, [channelId, parentId]));
|
|
2945
2656
|
(0, react_1.useEffect)(() => {
|
|
2946
2657
|
setParentId(postParentId);
|
|
2947
2658
|
}, [postParentId]);
|
|
@@ -2957,24 +2668,40 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2957
2668
|
}
|
|
2958
2669
|
}, [parentId]);
|
|
2959
2670
|
(0, react_1.useEffect)(() => {
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2671
|
+
var _a, _b;
|
|
2672
|
+
//if (threadMessagesData?.threadMessages?.data) {
|
|
2673
|
+
// console.log('threadMessagesData?.threadMessages', JSON.stringify(threadMessagesData?.threadMessages));
|
|
2674
|
+
const threads = threadMessagesData === null || threadMessagesData === void 0 ? void 0 : threadMessagesData.threadMessages;
|
|
2675
|
+
if ((threadPost === null || threadPost === void 0 ? void 0 : threadPost.length) == 0 && ((_a = threads === null || threads === void 0 ? void 0 : threads.data) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
2676
|
+
const threadMessage = (_b = threads === null || threads === void 0 ? void 0 : threads.data) === null || _b === void 0 ? void 0 : _b.map((t) => t === null || t === void 0 ? void 0 : t.post);
|
|
2963
2677
|
setThreadPost(threadMessage);
|
|
2964
|
-
|
|
2965
|
-
// // setTotalCount((pc: any) => pc + threadTotalCount);
|
|
2966
|
-
// setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
|
|
2967
|
-
// }
|
|
2968
|
-
}
|
|
2969
|
-
}, [threadMessagesData, isPostParentIdThread]);
|
|
2970
|
-
react_1.default.useEffect(() => {
|
|
2971
|
-
if (newThreadMsg) {
|
|
2972
|
-
console.log('newThreadMsg');
|
|
2973
|
-
const msg = newThreadMsg === null || newThreadMsg === void 0 ? void 0 : newThreadMsg.threadChatMessageAdded;
|
|
2974
|
-
setTotalCount((preCount) => preCount + 1);
|
|
2975
|
-
setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...oldMessages, msg], ({ id }) => id));
|
|
2678
|
+
setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...threadMessage, ...oldMessages], ({ id }) => id));
|
|
2976
2679
|
}
|
|
2977
|
-
|
|
2680
|
+
// if (!isPostParentIdThread) {
|
|
2681
|
+
// // setTotalCount((pc: any) => pc + threadTotalCount);
|
|
2682
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
|
|
2683
|
+
// }
|
|
2684
|
+
// }
|
|
2685
|
+
}, [threadMessagesData, threadPost, isPostParentIdThread]);
|
|
2686
|
+
// React.useEffect(() => {
|
|
2687
|
+
// if (newThreadMsg) {
|
|
2688
|
+
// console.log('newThreadMsg');
|
|
2689
|
+
// const msg = newThreadMsg?.threadChatMessageAdded;
|
|
2690
|
+
// setTotalCount((preCount: any) => preCount + 1);
|
|
2691
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
|
|
2692
|
+
// }
|
|
2693
|
+
// }, [newThreadMsg]);
|
|
2694
|
+
// React.useEffect(() => {
|
|
2695
|
+
// if (newThreadMsg) {
|
|
2696
|
+
// console.log('newThreadMsg');
|
|
2697
|
+
// refetch({
|
|
2698
|
+
// channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
|
|
2699
|
+
// parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
|
|
2700
|
+
// limit: MESSAGES_PER_PAGE,
|
|
2701
|
+
// skip: 0,
|
|
2702
|
+
// });
|
|
2703
|
+
// }
|
|
2704
|
+
// }, [newThreadMsg, skip, parentId]);
|
|
2978
2705
|
// useEffect(() => {
|
|
2979
2706
|
// if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
|
|
2980
2707
|
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
@@ -2985,23 +2712,45 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
2985
2712
|
// if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
|
|
2986
2713
|
// }
|
|
2987
2714
|
// }, [data, loadingOldMessages, channelMessages, totalCount]);
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2715
|
+
// useEffect(() => {
|
|
2716
|
+
// if ((data?.messages?.data && channelMessages.length === 0) || (data?.messages?.data && loadingOldMessages)) {
|
|
2717
|
+
// const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
2718
|
+
// if (messages && messages.length > 0) {
|
|
2719
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
|
|
2720
|
+
// setTotalCount(messeageTotalCount);
|
|
2721
|
+
// }
|
|
2722
|
+
// setLoadEarlierMsg(false);
|
|
2723
|
+
// if (loadingOldMessages) setLoadingOldMessages(false);
|
|
2724
|
+
// }
|
|
2725
|
+
// if (threadPost?.length && data?.messages?.totalCount == channelMessages.length) {
|
|
2726
|
+
// // setTotalCount((pc: any) => pc + threadTotalCount);
|
|
2727
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
|
|
2728
|
+
// }
|
|
2729
|
+
// }, [data, loadingOldMessages, channelMessages, threadPost]);
|
|
2730
|
+
react_1.default.useEffect(() => {
|
|
2731
|
+
var _a;
|
|
2732
|
+
if ((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data) {
|
|
2991
2733
|
const { data: messages, totalCount: messeageTotalCount } = data.messages;
|
|
2992
|
-
if (messages && messages.length > 0)
|
|
2734
|
+
if ((messages && messages.length > 0 && messeageTotalCount > totalCount) ||
|
|
2735
|
+
(messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))) {
|
|
2993
2736
|
setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...messages, ...oldMessages], ({ id }) => id));
|
|
2994
2737
|
setTotalCount(messeageTotalCount);
|
|
2738
|
+
setLoadEarlierMsg(false);
|
|
2995
2739
|
}
|
|
2996
|
-
|
|
2997
|
-
if (loadingOldMessages)
|
|
2740
|
+
if (loadingOldMessages && channelMessages)
|
|
2998
2741
|
setLoadingOldMessages(false);
|
|
2742
|
+
// if (
|
|
2743
|
+
// channelMessages &&
|
|
2744
|
+
// channelMessages?.length == MESSAGES_PER_PAGE &&
|
|
2745
|
+
// totalCount > channelMessages?.length
|
|
2746
|
+
// ) {
|
|
2747
|
+
// onFetchOld();
|
|
2748
|
+
// }
|
|
2999
2749
|
}
|
|
3000
|
-
if (
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
}, [data, loadingOldMessages, channelMessages, threadPost]);
|
|
2750
|
+
// if (threadPost?.length > 0 && channelMessages.length == (0 || MESSAGES_PER_PAGE)) {
|
|
2751
|
+
// setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
|
|
2752
|
+
// }
|
|
2753
|
+
}, [data, loadingOldMessages, totalCount, channelMessages, isScrollToBottom]);
|
|
3005
2754
|
// useEffect(() => {
|
|
3006
2755
|
// if (
|
|
3007
2756
|
// !messageLoading &&
|
|
@@ -3038,17 +2787,39 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3038
2787
|
// })?.then((res: any) => setLoadingOldMessages(true));
|
|
3039
2788
|
// }
|
|
3040
2789
|
// }, [data, channelMessages]);
|
|
3041
|
-
const
|
|
3042
|
-
|
|
3043
|
-
|
|
2790
|
+
const scrollToBottom = react_1.default.useCallback(() => {
|
|
2791
|
+
if (threadMessageListRef === null || threadMessageListRef === void 0 ? void 0 : threadMessageListRef.current) {
|
|
2792
|
+
setIsScrollToBottom(false);
|
|
2793
|
+
threadMessageListRef.current.scrollTop = threadMessageListRef.current.scrollHeight;
|
|
2794
|
+
}
|
|
2795
|
+
}, [threadMessageListRef]);
|
|
2796
|
+
// const onFetchOld = useCallback((data: any, channelMessages: any) => {
|
|
2797
|
+
// if (data?.messages?.totalCount > channelMessages.length) {
|
|
2798
|
+
// setLoadEarlierMsg(true);
|
|
2799
|
+
// refetch({
|
|
2800
|
+
// channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
|
|
2801
|
+
// parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
|
|
2802
|
+
// skip: channelMessages.length,
|
|
2803
|
+
// })?.then((res: any) => setLoadingOldMessages(true));
|
|
2804
|
+
// }
|
|
2805
|
+
// }, []);
|
|
2806
|
+
const onFetchOld = (0, react_1.useCallback)(() => {
|
|
2807
|
+
var _a;
|
|
2808
|
+
if (totalCount > channelMessages.length && !loadingOldMessages) {
|
|
2809
|
+
setSkip(channelMessages.length);
|
|
3044
2810
|
setLoadEarlierMsg(true);
|
|
3045
|
-
(
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
2811
|
+
(_a = fetchMoreMessages({
|
|
2812
|
+
variables: {
|
|
2813
|
+
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
2814
|
+
parentId: null,
|
|
2815
|
+
skip: channelMessages.length,
|
|
2816
|
+
},
|
|
2817
|
+
})) === null || _a === void 0 ? void 0 : _a.then((res) => setLoadingOldMessages(true));
|
|
2818
|
+
// refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then(
|
|
2819
|
+
// (res: any) => setLoadingOldMessages(true),
|
|
2820
|
+
// );
|
|
3050
2821
|
}
|
|
3051
|
-
}, []);
|
|
2822
|
+
}, [totalCount, channelMessages]);
|
|
3052
2823
|
// const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
|
|
3053
2824
|
// return contentOffset.y <= 100; // 100px from top
|
|
3054
2825
|
// };
|
|
@@ -3160,14 +2931,17 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3160
2931
|
const responseMessage = (_a = data === null || data === void 0 ? void 0 : data.sendThreadMessage) === null || _a === void 0 ? void 0 : _a.lastMessage;
|
|
3161
2932
|
if (!parentId || parentId == 0) {
|
|
3162
2933
|
setParentId(responseMessage === null || responseMessage === void 0 ? void 0 : responseMessage.id);
|
|
3163
|
-
setChannelMessages((messages) => [
|
|
3164
|
-
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
|
|
3168
|
-
|
|
3169
|
-
|
|
3170
|
-
|
|
2934
|
+
// setChannelMessages((messages: any) => [
|
|
2935
|
+
// ...messages,
|
|
2936
|
+
// {
|
|
2937
|
+
// ...responseMessage,
|
|
2938
|
+
// files: {
|
|
2939
|
+
// totalCount: uploadedFiles.length,
|
|
2940
|
+
// data: uploadedFiles,
|
|
2941
|
+
// },
|
|
2942
|
+
// },
|
|
2943
|
+
// ]);
|
|
2944
|
+
// setTotalCount((t: any) => t + 1);
|
|
3171
2945
|
}
|
|
3172
2946
|
setChannelToTop(channelToTop + 1);
|
|
3173
2947
|
setLoading(false);
|
|
@@ -3201,8 +2975,8 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3201
2975
|
const responseMessage = (_a = data === null || data === void 0 ? void 0 : data.sendThreadMessage) === null || _a === void 0 ? void 0 : _a.lastMessage;
|
|
3202
2976
|
if (!parentId || parentId == 0) {
|
|
3203
2977
|
setParentId(responseMessage === null || responseMessage === void 0 ? void 0 : responseMessage.id);
|
|
3204
|
-
setChannelMessages((messages) => [...messages, responseMessage]);
|
|
3205
|
-
setTotalCount((t) => t + 1);
|
|
2978
|
+
// setChannelMessages((messages: any) => [...messages, responseMessage]);
|
|
2979
|
+
// setTotalCount((t: any) => t + 1);
|
|
3206
2980
|
}
|
|
3207
2981
|
setChannelToTop(channelToTop + 1);
|
|
3208
2982
|
setLoading(false);
|
|
@@ -3394,8 +3168,24 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3394
3168
|
const renderMessage = (props) => {
|
|
3395
3169
|
return react_1.default.createElement(SlackMessageContainer_1.SlackMessage, Object.assign({}, props, { isShowImageViewer: isShowImageViewer, setImageViewer: setImageViewerObject }));
|
|
3396
3170
|
};
|
|
3171
|
+
let onScroll = false;
|
|
3172
|
+
const onMomentumScrollBegin = ({ nativeEvent }) => {
|
|
3173
|
+
onScroll = true;
|
|
3174
|
+
console.log('scroll top');
|
|
3175
|
+
if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > (channelMessages === null || channelMessages === void 0 ? void 0 : channelMessages.length)) {
|
|
3176
|
+
onFetchOld();
|
|
3177
|
+
}
|
|
3178
|
+
};
|
|
3179
|
+
const onEndReached = () => {
|
|
3180
|
+
console.log('on end reached');
|
|
3181
|
+
if (!onScroll)
|
|
3182
|
+
return;
|
|
3183
|
+
// load messages, show ActivityIndicator
|
|
3184
|
+
onScroll = false;
|
|
3185
|
+
// setLoadingOldMessages(true);
|
|
3186
|
+
};
|
|
3397
3187
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
3398
|
-
loadEarlierMsg && react_1.default.createElement(native_base_1.Spinner, null),
|
|
3188
|
+
(loadingOldMessages || loadEarlierMsg) && react_1.default.createElement(native_base_1.Spinner, null),
|
|
3399
3189
|
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
3190
|
react_1.default.createElement(native_base_1.VStack, { px: 2, pt: 2, pb: 0, space: 2 },
|
|
3401
3191
|
react_1.default.createElement(native_base_1.HStack, { space: 2, alignItems: 'center' },
|
|
@@ -3418,12 +3208,57 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3418
3208
|
_s.totalCount,
|
|
3419
3209
|
' ',
|
|
3420
3210
|
((_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,
|
|
3211
|
+
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: {
|
|
3212
|
+
onEndReached: onEndReached,
|
|
3213
|
+
onEndReachedThreshold: 0.5,
|
|
3214
|
+
onMomentumScrollBegin: onMomentumScrollBegin,
|
|
3215
|
+
}, 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
3216
|
_id: (auth === null || auth === void 0 ? void 0 : auth.id) || '',
|
|
3423
3217
|
}, isTyping: true, alwaysShowSend: loading ? false : true,
|
|
3424
3218
|
// onLoadEarlier={onFetchOld}
|
|
3425
|
-
infiniteScroll: true, renderSend: renderSend,
|
|
3426
|
-
|
|
3219
|
+
infiniteScroll: true, renderSend: renderSend,
|
|
3220
|
+
// loadEarlier={data?.messages?.totalCount > channelMessages.length}
|
|
3221
|
+
// isLoadingEarlier={loadEarlierMsg}
|
|
3222
|
+
// renderLoadEarlier={() =>
|
|
3223
|
+
// !loadEarlierMsg && (
|
|
3224
|
+
// <Center py={2}>
|
|
3225
|
+
// <Button
|
|
3226
|
+
// onPress={() => onFetchOld(channelMessages?.length)}
|
|
3227
|
+
// variant={'outline'}
|
|
3228
|
+
// _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
|
|
3229
|
+
// >
|
|
3230
|
+
// Load earlier messages
|
|
3231
|
+
// </Button>
|
|
3232
|
+
// </Center>
|
|
3233
|
+
// )
|
|
3234
|
+
// }
|
|
3235
|
+
renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory, renderMessage: renderMessage, renderChatFooter: () => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
3236
|
+
react_1.default.createElement(SlackMessageContainer_1.ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent: modalContent }),
|
|
3237
|
+
react_1.default.createElement(SubscriptionHandler, { channelId: channelId, subscribeToNewMessages: () => subscribeToMore({
|
|
3238
|
+
document: platform_client_1.OnThreadChatMessageAddedDocument,
|
|
3239
|
+
variables: {
|
|
3240
|
+
channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
|
|
3241
|
+
postParentId: !parentId || parentId == 0 ? null : parentId === null || parentId === void 0 ? void 0 : parentId.toString(),
|
|
3242
|
+
},
|
|
3243
|
+
updateQuery: (prev, { subscriptionData }) => {
|
|
3244
|
+
var _a, _b, _c;
|
|
3245
|
+
if (!subscriptionData.data)
|
|
3246
|
+
return prev;
|
|
3247
|
+
const newMessage = (_a = subscriptionData === null || subscriptionData === void 0 ? void 0 : subscriptionData.data) === null || _a === void 0 ? void 0 : _a.threadChatMessageAdded;
|
|
3248
|
+
const mergedData = ((_b = prev === null || prev === void 0 ? void 0 : prev.messages) === null || _b === void 0 ? void 0 : _b.data)
|
|
3249
|
+
? [...prev.messages.data, newMessage]
|
|
3250
|
+
: [];
|
|
3251
|
+
const totalMsgCount = ((_c = prev === null || prev === void 0 ? void 0 : prev.messages) === null || _c === void 0 ? void 0 : _c.totalCount) + 1;
|
|
3252
|
+
const merged = Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev.messages), { messages: Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev.messages), { data: mergedData, totalCount: totalMsgCount }) });
|
|
3253
|
+
return merged;
|
|
3254
|
+
// return Object.assign({}, prev, {
|
|
3255
|
+
// messages: {
|
|
3256
|
+
// data: [...prev.messages.data, newMessage],
|
|
3257
|
+
// totalCount: prev.messages.totalCount + 1,
|
|
3258
|
+
// },
|
|
3259
|
+
// });
|
|
3260
|
+
},
|
|
3261
|
+
}) }))), 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
3262
|
react_1.default.createElement(native_base_1.Center, { mt: 6 },
|
|
3428
3263
|
react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: "chatbubbles", size: 'xl' }),
|
|
3429
3264
|
react_1.default.createElement(native_base_1.Text, null, "You don't have any message yet!")))))), lightboxProps: {
|
|
@@ -3432,6 +3267,10 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
|
|
|
3432
3267
|
disabled: true,
|
|
3433
3268
|
} })));
|
|
3434
3269
|
};
|
|
3270
|
+
const SubscriptionHandler = ({ subscribeToNewMessages, channelId }) => {
|
|
3271
|
+
(0, react_1.useEffect)(() => subscribeToNewMessages(), [channelId]);
|
|
3272
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
3273
|
+
};
|
|
3435
3274
|
exports.ThreadConversationView = react_1.default.memo(ThreadConversationViewComponent);
|
|
3436
3275
|
|
|
3437
3276
|
|