From 6f9993ca55f0c01509c1a159b225d73f75ed8778 Mon Sep 17 00:00:00 2001 From: Hailey Date: Wed, 1 May 2024 11:48:19 -0700 Subject: [Clipclops] Fix list, rework structure (#3799) * proper min index * move keyextractor out of react * move onSendMessage out * don't render the flatlist conditionally * add loader * rework structure * remove some unneeded logic --- src/screens/Messages/Conversation/MessagesList.tsx | 100 ++++++++++----------- src/screens/Messages/Conversation/index.tsx | 43 ++++++--- 2 files changed, 80 insertions(+), 63 deletions(-) (limited to 'src') diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx index ca32a6d68..ec7147e3c 100644 --- a/src/screens/Messages/Conversation/MessagesList.tsx +++ b/src/screens/Messages/Conversation/MessagesList.tsx @@ -3,7 +3,6 @@ import {FlatList, View, ViewToken} from 'react-native' import {KeyboardAvoidingView} from 'react-native-keyboard-controller' import {useChat} from '#/state/messages' -import {ChatProvider} from '#/state/messages' import {ConvoItem, ConvoStatus} from '#/state/messages/convo' import {isWeb} from 'platform/detection' import {MessageInput} from '#/screens/Messages/Conversation/MessageInput' @@ -37,31 +36,20 @@ function renderItem({item}: {item: ConvoItem}) { return null } -function onScrollToEndFailed() { - // Placeholder function. You have to give FlatList something or else it will error. +function keyExtractor(item: ConvoItem) { + return item.key } -export function MessagesList({convoId}: {convoId: string}) { - return ( - - - - ) +function onScrollToEndFailed() { + // Placeholder function. You have to give FlatList something or else it will error. } -export function MessagesListInner() { +export function MessagesList() { const chat = useChat() const flatListRef = useRef(null) // We use this to know if we should scroll after a new clop is added to the list const isAtBottom = useRef(false) - // Because the viewableItemsChanged callback won't have access to the updated state, we use a ref to store the - // total number of clops - // TODO this needs to be set to whatever the initial number of messages is - // const totalMessages = useRef(10) - - // TODO later - const [onViewableItemsChanged, viewabilityConfig] = useMemo(() => { return [ (info: {viewableItems: Array; changed: Array}) => { @@ -94,49 +82,59 @@ export function MessagesListInner() { const onInputBlur = useCallback(() => {}, []) + const onSendMessage = useCallback( + (text: string) => { + chat.service.sendMessage({ + text, + }) + }, + [chat.service], + ) + return ( - {chat.state.status === ConvoStatus.Ready && ( - item.key} - renderItem={renderItem} - contentContainerStyle={{paddingHorizontal: 10}} - // In the future, we might want to adjust this value. Not very concerning right now as long as we are only - // dealing with text. But whenever we have images or other media and things are taller, we will want to lower - // this...probably. - initialNumToRender={20} - // Same with the max to render per batch. Let's be safe for now though. - maxToRenderPerBatch={25} - inverted={true} - onEndReached={onEndReached} - onScrollToIndexFailed={onScrollToEndFailed} - onContentSizeChange={onContentSizeChange} - onViewableItemsChanged={onViewableItemsChanged} - viewabilityConfig={viewabilityConfig} - maintainVisibleContentPosition={{ - minIndexForVisible: 0, - }} - ListFooterComponent={ - - } - removeClippedSubviews={true} - ref={flatListRef} - keyboardDismissMode="none" - /> - )} + + } + removeClippedSubviews={true} + ref={flatListRef} + keyboardDismissMode="none" + /> { - chat.service.sendMessage({ - text, - }) - }} + onSendMessage={onSendMessage} onFocus={onInputFocus} onBlur={onInputBlur} /> diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index 9c5fd7912..79c49f051 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -9,9 +9,10 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack' import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' import {useGate} from '#/lib/statsig/statsig' -import {useConvoQuery} from '#/state/queries/messages/conversation' import {BACK_HITSLOP} from 'lib/constants' import {isWeb} from 'platform/detection' +import {ChatProvider, useChat} from 'state/messages' +import {ConvoStatus} from 'state/messages/convo' import {useSession} from 'state/session' import {UserAvatar} from 'view/com/util/UserAvatar' import {CenteredView} from 'view/com/util/Views' @@ -30,33 +31,49 @@ type Props = NativeStackScreenProps< export function MessagesConversationScreen({route}: Props) { const gate = useGate() const convoId = route.params.conversation + + if (!gate('dms')) return + + return ( + + + + ) +} + +function Inner() { + const chat = useChat() const {currentAccount} = useSession() const myDid = currentAccount?.did - const {data: chat, isError: isError} = useConvoQuery(convoId) const otherProfile = React.useMemo(() => { - return chat?.members?.find(m => m.did !== myDid) - }, [chat?.members, myDid]) + if (chat.state.status !== ConvoStatus.Ready) return + return chat.state.convo.members.find(m => m.did !== myDid) + }, [chat.state, myDid]) - if (!gate('dms')) return - - if (!chat || !otherProfile) { + // TODO whenever we have error messages, we should use them in here -hailey + if (chat.state.status !== ConvoStatus.Ready || !otherProfile) { return ( - - - + ) } return (
- + ) } -function Header({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) { +let Header = ({ + profile, +}: { + profile: AppBskyActorDefs.ProfileViewBasic +}): React.ReactNode => { const t = useTheme() const {_} = useLingui() const {gtTablet} = useBreakpoints() @@ -126,3 +143,5 @@ function Header({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) { ) } + +Header = React.memo(Header) -- cgit 1.4.1