Fix search results not loading at bottom of chat

This commit is contained in:
Max Leiter 2022-05-30 23:02:34 -07:00
parent 9e1416504c
commit 16c6bcf0fc
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA

View file

@ -123,7 +123,6 @@ export default defineComponent({
const router = useRouter(); const router = useRouter();
const chat = ref<HTMLDivElement>(); const chat = ref<HTMLDivElement>();
const chatRef = chat.value;
const loadMoreButton = ref<HTMLButtonElement>(); const loadMoreButton = ref<HTMLButtonElement>();
@ -205,15 +204,15 @@ export default defineComponent({
}; };
const onShowMoreClick = () => { const onShowMoreClick = () => {
if (!chatRef) { if (!chat.value) {
return; return;
} }
offset.value += 100; offset.value += 100;
store.commit("messageSearchInProgress", true); store.commit("messageSearchInProgress", true);
oldScrollTop.value = chatRef.scrollTop; oldScrollTop.value = chat.value.scrollTop;
oldChatHeight.value = chatRef.scrollHeight; oldChatHeight.value = chat.value.scrollHeight;
socket.emit("search", { socket.emit("search", {
networkUuid: network.value?.uuid, networkUuid: network.value?.uuid,
@ -223,18 +222,16 @@ export default defineComponent({
}); });
}; };
const jumpToBottom = () => { const jumpToBottom = async () => {
nextTick(() => { await nextTick();
if (!chatRef) {
return;
}
const el = chatRef; const el = chat.value;
el.scrollTop = el.scrollHeight;
}).catch((e) => { if (!el) {
// eslint-disable-next-line no-console return;
console.error(e); }
});
el.scrollTop = el.scrollHeight;
}; };
const jump = (message: ClientMessage, id: number) => { const jump = (message: ClientMessage, id: number) => {
@ -265,28 +262,34 @@ export default defineComponent({
} }
); );
watch(route.query, () => { watch(
doSearch(); () => route.query,
setActiveChannel(); () => {
}); doSearch();
setActiveChannel();
}
);
watch(messages, () => { watch(messages, async () => {
moreResultsAvailable.value = !!( moreResultsAvailable.value = !!(
messages.value.length && !(messages.value.length % 100) messages.value.length && !(messages.value.length % 100)
); );
if (!offset.value) { console.log("offset", offset.value);
jumpToBottom();
} else {
void nextTick(() => {
if (!chatRef) {
return;
}
const currentChatHeight = chatRef.scrollHeight; if (!offset.value) {
chatRef.scrollTop = await jumpToBottom();
oldScrollTop.value + currentChatHeight - oldChatHeight.value; } else {
}); await nextTick();
const el = chat.value;
if (!el) {
return;
}
const currentChatHeight = el.scrollHeight;
el.scrollTop = oldScrollTop.value + currentChatHeight - oldChatHeight.value;
} }
}); });