diff --git a/web/hooks/use-private-messages.ts b/web/hooks/use-private-messages.ts index 2a6fdb9e..bb56f95f 100644 --- a/web/hooks/use-private-messages.ts +++ b/web/hooks/use-private-messages.ts @@ -3,7 +3,7 @@ import {PrivateMessageChannel} from 'common/supabase/private-messages' import {millisToTs, tsToMillis} from 'common/supabase/utils' import {orderBy, uniq, uniqBy} from 'lodash' import {usePathname} from 'next/navigation' -import {useEffect, useState} from 'react' +import {useCallback, useEffect, useState} from 'react' import {useAPIGetter} from 'web/hooks/use-api-getter' import {useApiSubscription} from 'web/hooks/use-api-subscription' import {useIsPageVisible} from 'web/hooks/use-page-visible' @@ -21,33 +21,30 @@ export function usePrivateMessages(channelId: number, limit: number, userId: str key, ) - const fetchMessages = async (id?: number, beforeId?: number) => { - const data = { - channelId, - limit, - id, - beforeId, - } - const newMessages = await api('get-channel-messages', data) - // console.debug(key, {newMessages, messages, data}) - if (beforeId) { - setMessages((prevMessages) => - orderBy( - uniqBy([...(prevMessages ?? []), ...newMessages], (m) => m.id), - 'createdTime', - 'desc', - ), - ) - } else { - setMessages((prevMessages) => - orderBy( - uniqBy([...newMessages, ...(prevMessages && id ? prevMessages : [])], (m) => m.id), - 'createdTime', - 'desc', - ), - ) - } - } + const fetchMessages = useCallback( + async (id?: number, beforeId?: number) => { + const data = {channelId, limit, id, beforeId} + const newMessages = await api('get-channel-messages', data) + if (beforeId) { + setMessages((prevMessages) => + orderBy( + uniqBy([...(prevMessages ?? []), ...newMessages], (m) => m.id), + 'createdTime', + 'desc', + ), + ) + } else { + setMessages((prevMessages) => + orderBy( + uniqBy([...newMessages, ...(prevMessages && id ? prevMessages : [])], (m) => m.id), + 'createdTime', + 'desc', + ), + ) + } + }, + [channelId, limit], + ) useEffect(() => { fetchMessages() @@ -95,11 +92,13 @@ export const useUnseenPrivateMessageChannels = (userId: string, ignorePageSeenTi const seenTimes = await api('get-channel-seen-time', { channelIds: forChannelIds, }) - const newState = lastSeenChatTimeByChannelId ?? {} - seenTimes.forEach(([channelId, time]) => { - newState[channelId] = time + setLastSeenChatTimeByChannelId((prevState) => { + const newState = {...(prevState ?? {})} + seenTimes.forEach(([channelId, time]) => { + newState[channelId] = time + }) + return newState }) - setLastSeenChatTimeByChannelId(newState) } useEffect(() => { diff --git a/web/lib/supabase/chat-messages.ts b/web/lib/supabase/chat-messages.ts index 8a8c64ff..8084dc41 100644 --- a/web/lib/supabase/chat-messages.ts +++ b/web/lib/supabase/chat-messages.ts @@ -74,6 +74,7 @@ export const usePaginatedScrollingMessages = ( const isScrolledToBottom = difference <= 0 if (scrollToOldTop.current && messages?.length > expectedLengthAfterLoad.current) { + debug('Loaded more messages, holding position') // Loaded more messages, scroll to old top position const height = innerDivHeight! - prevInnerDivHeight! outerDiv?.current?.scrollTo({ @@ -84,6 +85,7 @@ export const usePaginatedScrollingMessages = ( scrollToOldTop.current = false } else if (!prevInnerDivHeight || isScrolledToBottom || initialScroll.current) { if (messages) { + debug('Scenario 2') outerDiv?.current?.scrollTo({ top: innerDivHeight! - outerDivHeight!, left: 0, @@ -93,6 +95,7 @@ export const usePaginatedScrollingMessages = ( initialScroll.current = false } } else if (last(messages)?.userId === userId) { + debug('Sent message') // Sent a message, scroll to bottom outerDiv?.current?.scrollTo({ top: innerDivHeight! - outerDivHeight!,