From 1269c00f9bcc8619ffbe69a3260296cc31425199 Mon Sep 17 00:00:00 2001 From: Melvin Date: Wed, 30 Apr 2025 14:52:08 +0200 Subject: [PATCH 01/11] feat: add way of determining if closeToTop --- src/CuteChat.tsx | 7 +++++++ src/utils/isCloseToTop.ts | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 src/utils/isCloseToTop.ts diff --git a/src/CuteChat.tsx b/src/CuteChat.tsx index 398fbcd..7fc019d 100644 --- a/src/CuteChat.tsx +++ b/src/CuteChat.tsx @@ -15,6 +15,7 @@ import { GiftedChat, GiftedChatProps } from 'react-native-gifted-chat'; import { appendSnapshot } from './utils/appendSnapshot'; import { prepareSnapshot } from './utils/prepareSnapshot'; import { isCloseToBottom } from './utils/isCloseToBottom'; +import { isCloseToTop } from './utils/isCloseToTop'; interface CustomCuteChatProps { chatId: string; @@ -38,6 +39,7 @@ const messageBatch = 20; export function CuteChat(props: CuteChatProps) { const { chatId, user, setIsLoading } = props; + const [closeToTop, setCloseToTop] = useState(true); const [messages, setMessages] = useState([]); const [loading, setLoading] = useState(false); const [initializing, setInitializing] = useState(true); @@ -281,6 +283,8 @@ export function CuteChat(props: CuteChatProps) { console.log('Amount of msgs:', messages.length); + console.log('Close to top:', closeToTop); + return ( { if (isCloseToBottom(nativeEvent)) fetchMoreMessages(); + + if (isCloseToTop(nativeEvent)) setCloseToTop(true); + else setCloseToTop(false); }, scrollEventThrottle: 500, }} diff --git a/src/utils/isCloseToTop.ts b/src/utils/isCloseToTop.ts new file mode 100644 index 0000000..b460400 --- /dev/null +++ b/src/utils/isCloseToTop.ts @@ -0,0 +1,7 @@ +import { NativeScrollEvent } from 'react-native'; + +export function isCloseToTop({ contentOffset }: NativeScrollEvent) { + const paddingToTop = 500; + + return contentOffset.y <= paddingToTop; +} From e5414b8d42c1f1957e210f6900dd02a5c28844e6 Mon Sep 17 00:00:00 2001 From: Melvin Date: Wed, 30 Apr 2025 17:20:26 +0200 Subject: [PATCH 02/11] feat: display scrollToBottomComponent if not close to top --- src/CuteChat.tsx | 26 +++++++++++++++++++++++++- src/utils/isCloseToTop.ts | 2 +- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/CuteChat.tsx b/src/CuteChat.tsx index 7fc019d..98eeced 100644 --- a/src/CuteChat.tsx +++ b/src/CuteChat.tsx @@ -9,7 +9,7 @@ import React, { useMemo, useState, } from 'react'; -import { Alert, NativeScrollEvent } from 'react-native'; +import { Alert, NativeScrollEvent, View } from 'react-native'; import type { IMessage } from 'react-native-gifted-chat'; import { GiftedChat, GiftedChatProps } from 'react-native-gifted-chat'; import { appendSnapshot } from './utils/appendSnapshot'; @@ -288,6 +288,30 @@ export function CuteChat(props: CuteChatProps) { return ( ( + <> + {!closeToTop && props.scrollToBottomComponent && ( + + {props.scrollToBottomComponent()} + + )} + {props.renderChatFooter?.()} + + )} messages={messages} onSend={props.onSend || onSend} user={memoizedUser} diff --git a/src/utils/isCloseToTop.ts b/src/utils/isCloseToTop.ts index b460400..9d851d2 100644 --- a/src/utils/isCloseToTop.ts +++ b/src/utils/isCloseToTop.ts @@ -1,7 +1,7 @@ import { NativeScrollEvent } from 'react-native'; export function isCloseToTop({ contentOffset }: NativeScrollEvent) { - const paddingToTop = 500; + const paddingToTop = 2_000; return contentOffset.y <= paddingToTop; } From 303497f7b5bafa4c1f100d4853bcb2c15304e72f Mon Sep 17 00:00:00 2001 From: Melvin Date: Thu, 1 May 2025 03:21:03 +0200 Subject: [PATCH 03/11] feat: scroll to start of list on scrollToBottomComponent press --- src/CuteChat.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/CuteChat.tsx b/src/CuteChat.tsx index 98eeced..cf75063 100644 --- a/src/CuteChat.tsx +++ b/src/CuteChat.tsx @@ -7,9 +7,16 @@ import React, { useEffect, useLayoutEffect, useMemo, + useRef, useState, } from 'react'; -import { Alert, NativeScrollEvent, View } from 'react-native'; +import { + Alert, + FlatList, + NativeScrollEvent, + TouchableOpacity, + View, +} from 'react-native'; import type { IMessage } from 'react-native-gifted-chat'; import { GiftedChat, GiftedChatProps } from 'react-native-gifted-chat'; import { appendSnapshot } from './utils/appendSnapshot'; @@ -285,6 +292,12 @@ export function CuteChat(props: CuteChatProps) { console.log('Close to top:', closeToTop); + const chatRef = useRef>(null); + + const scrollToBottom = () => { + chatRef.current?.scrollToOffset({ offset: 0, animated: true }); + }; + return ( ( <> {!closeToTop && props.scrollToBottomComponent && ( - {props.scrollToBottomComponent()} - + )} {props.renderChatFooter?.()} @@ -317,6 +331,7 @@ export function CuteChat(props: CuteChatProps) { user={memoizedUser} inverted={true} listViewProps={{ + ref: chatRef, onScroll: ({ nativeEvent }: { nativeEvent: NativeScrollEvent }) => { if (isCloseToBottom(nativeEvent)) fetchMoreMessages(); From 2df5b6fd58224882bec2b8d38da375ebe11cf6a6 Mon Sep 17 00:00:00 2001 From: Melvin Date: Fri, 2 May 2025 09:13:47 +0200 Subject: [PATCH 04/11] feat: add render support for newMessagesBannerComponent --- src/CuteChat.tsx | 70 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 53 insertions(+), 17 deletions(-) diff --git a/src/CuteChat.tsx b/src/CuteChat.tsx index cf75063..10303c5 100644 --- a/src/CuteChat.tsx +++ b/src/CuteChat.tsx @@ -14,8 +14,10 @@ import { Alert, FlatList, NativeScrollEvent, + StyleProp, TouchableOpacity, View, + ViewStyle, } from 'react-native'; import type { IMessage } from 'react-native-gifted-chat'; import { GiftedChat, GiftedChatProps } from 'react-native-gifted-chat'; @@ -29,6 +31,8 @@ interface CustomCuteChatProps { user: User; onSend?: (newMessages: IMessage[]) => void; setIsLoading?: (isLoading: boolean) => void; + newMessagesBannerComponent?: () => React.ReactNode; + newMessagesBannerStyles?: StyleProp; } interface User { @@ -306,23 +310,55 @@ export function CuteChat(props: CuteChatProps) { // - New messages banner renderChatFooter={() => ( <> - {!closeToTop && props.scrollToBottomComponent && ( - - {props.scrollToBottomComponent()} - - )} + + + + {!closeToTop && props.newMessagesBannerComponent && ( + + {props.newMessagesBannerComponent()} + + )} + + + {!closeToTop && props.scrollToBottomComponent && ( + + {props.scrollToBottomComponent()} + + )} + + {props.renderChatFooter?.()} )} From 15a81ca7d0e885255cf6d0ca3f1eb919a56eec3c Mon Sep 17 00:00:00 2001 From: Melvin Date: Fri, 2 May 2025 09:29:31 +0200 Subject: [PATCH 05/11] refactor: extract ChatFooter into own component and file --- src/CuteChat.tsx | 68 ++++----------------- src/components/ChatFooter/ChatFooter.tsx | 75 ++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 57 deletions(-) create mode 100644 src/components/ChatFooter/ChatFooter.tsx diff --git a/src/CuteChat.tsx b/src/CuteChat.tsx index 10303c5..6c09bdc 100644 --- a/src/CuteChat.tsx +++ b/src/CuteChat.tsx @@ -15,8 +15,6 @@ import { FlatList, NativeScrollEvent, StyleProp, - TouchableOpacity, - View, ViewStyle, } from 'react-native'; import type { IMessage } from 'react-native-gifted-chat'; @@ -25,6 +23,7 @@ import { appendSnapshot } from './utils/appendSnapshot'; import { prepareSnapshot } from './utils/prepareSnapshot'; import { isCloseToBottom } from './utils/isCloseToBottom'; import { isCloseToTop } from './utils/isCloseToTop'; +import { ChatFooter } from './components/ChatFooter/ChatFooter'; interface CustomCuteChatProps { chatId: string; @@ -60,6 +59,8 @@ export function CuteChat(props: CuteChatProps) { const memoizedUser = useMemo(() => ({ _id: user.id, ...user }), [user]); const startDate = useMemo(() => new Date(), []); + const chatRef = useRef>(null); + const setIsLoadingBool = useCallback( (isLoading: boolean) => { setIsLoading?.(isLoading); @@ -296,12 +297,6 @@ export function CuteChat(props: CuteChatProps) { console.log('Close to top:', closeToTop); - const chatRef = useRef>(null); - - const scrollToBottom = () => { - chatRef.current?.scrollToOffset({ offset: 0, animated: true }); - }; - return ( ( <> - - - - {!closeToTop && props.newMessagesBannerComponent && ( - - {props.newMessagesBannerComponent()} - - )} - - - {!closeToTop && props.scrollToBottomComponent && ( - - {props.scrollToBottomComponent()} - - )} - - + {props.renderChatFooter?.()} )} diff --git a/src/components/ChatFooter/ChatFooter.tsx b/src/components/ChatFooter/ChatFooter.tsx new file mode 100644 index 0000000..49789b4 --- /dev/null +++ b/src/components/ChatFooter/ChatFooter.tsx @@ -0,0 +1,75 @@ +import { ReactNode, RefObject } from 'react'; +import { + FlatList, + StyleProp, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native'; +import { IMessage } from 'react-native-gifted-chat'; + +export const ChatFooter = (props: { + newMessagesBannerComponent?: () => ReactNode; + newMessagesBannerStyles?: StyleProp; + scrollToBottomComponent?: () => ReactNode; + scrollToBottomStyle?: StyleProp; + + closeToTop: boolean; + chatRef: RefObject>; +}) => { + const scrollToBottom = () => { + props.chatRef.current?.scrollToOffset({ offset: 0, animated: true }); + }; + + return ( + + + + {!props.closeToTop && props.newMessagesBannerComponent && ( + + {props.newMessagesBannerComponent()} + + )} + + + {!props.closeToTop && props.scrollToBottomComponent && ( + + {props.scrollToBottomComponent()} + + )} + + + ); +}; From c23bc65d871f90ecd5e69301c8fdecd027ec4535 Mon Sep 17 00:00:00 2001 From: Melvin Date: Fri, 2 May 2025 09:43:50 +0200 Subject: [PATCH 06/11] feat: separate all footer sections into own components --- src/CuteChat.tsx | 6 +- src/components/ChatFooter/ChatFooter.tsx | 67 +++++++-------------- src/components/ChatFooter/LeftSection.tsx | 5 ++ src/components/ChatFooter/MiddleSection.tsx | 32 ++++++++++ src/components/ChatFooter/RightSection.tsx | 31 ++++++++++ 5 files changed, 92 insertions(+), 49 deletions(-) create mode 100644 src/components/ChatFooter/LeftSection.tsx create mode 100644 src/components/ChatFooter/MiddleSection.tsx create mode 100644 src/components/ChatFooter/RightSection.tsx diff --git a/src/CuteChat.tsx b/src/CuteChat.tsx index 6c09bdc..b133fcc 100644 --- a/src/CuteChat.tsx +++ b/src/CuteChat.tsx @@ -59,7 +59,7 @@ export function CuteChat(props: CuteChatProps) { const memoizedUser = useMemo(() => ({ _id: user.id, ...user }), [user]); const startDate = useMemo(() => new Date(), []); - const chatRef = useRef>(null); + const chatListRef = useRef>(null); const setIsLoadingBool = useCallback( (isLoading: boolean) => { @@ -311,7 +311,7 @@ export function CuteChat(props: CuteChatProps) { scrollToBottomComponent={props.scrollToBottomComponent} scrollToBottomStyle={props.scrollToBottomStyle} closeToTop={closeToTop} - chatRef={chatRef} + chatRef={chatListRef} /> {props.renderChatFooter?.()} @@ -321,7 +321,7 @@ export function CuteChat(props: CuteChatProps) { user={memoizedUser} inverted={true} listViewProps={{ - ref: chatRef, + ref: chatListRef, onScroll: ({ nativeEvent }: { nativeEvent: NativeScrollEvent }) => { if (isCloseToBottom(nativeEvent)) fetchMoreMessages(); diff --git a/src/components/ChatFooter/ChatFooter.tsx b/src/components/ChatFooter/ChatFooter.tsx index 49789b4..1e1f93f 100644 --- a/src/components/ChatFooter/ChatFooter.tsx +++ b/src/components/ChatFooter/ChatFooter.tsx @@ -1,12 +1,9 @@ -import { ReactNode, RefObject } from 'react'; -import { - FlatList, - StyleProp, - TouchableOpacity, - View, - ViewStyle, -} from 'react-native'; +import React, { ReactNode, RefObject } from 'react'; +import { FlatList, StyleProp, View, ViewStyle } from 'react-native'; import { IMessage } from 'react-native-gifted-chat'; +import { RightSection } from './RightSection'; +import { MiddleSection } from './MiddleSection'; +import { LeftSection } from './LeftSection'; export const ChatFooter = (props: { newMessagesBannerComponent?: () => ReactNode; @@ -28,48 +25,26 @@ export const ChatFooter = (props: { position: 'absolute', flexDirection: 'row', justifyContent: 'flex-start', - backgroundColor: 'rgba(255, 255, 255, 0.8)', width: '100%', - height: 100, - bottom: 0, + bottom: 40, left: 0, }} > - - - {!props.closeToTop && props.newMessagesBannerComponent && ( - - {props.newMessagesBannerComponent()} - - )} - - - {!props.closeToTop && props.scrollToBottomComponent && ( - - {props.scrollToBottomComponent()} - - )} - + + + + + ); }; diff --git a/src/components/ChatFooter/LeftSection.tsx b/src/components/ChatFooter/LeftSection.tsx new file mode 100644 index 0000000..ac8139f --- /dev/null +++ b/src/components/ChatFooter/LeftSection.tsx @@ -0,0 +1,5 @@ +import { View } from 'react-native'; + +export const LeftSection = () => { + return ; +}; diff --git a/src/components/ChatFooter/MiddleSection.tsx b/src/components/ChatFooter/MiddleSection.tsx new file mode 100644 index 0000000..27b97b1 --- /dev/null +++ b/src/components/ChatFooter/MiddleSection.tsx @@ -0,0 +1,32 @@ +import { ReactNode } from 'react'; +import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native'; + +type Props = { + newMessagesBannerComponent?: () => ReactNode; + newMessagesBannerStyles?: StyleProp; + onNewMessagesBannerPress?: () => void; + + closeToTop: boolean; +}; + +export const MiddleSection = (props: Props) => { + return ( + + {!props.closeToTop && props.newMessagesBannerComponent && ( + + {props.newMessagesBannerComponent()} + + )} + + ); +}; diff --git a/src/components/ChatFooter/RightSection.tsx b/src/components/ChatFooter/RightSection.tsx new file mode 100644 index 0000000..86cd77e --- /dev/null +++ b/src/components/ChatFooter/RightSection.tsx @@ -0,0 +1,31 @@ +import { ReactNode } from 'react'; +import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native'; + +type Props = { + scrollToBottomComponent?: () => ReactNode; + scrollToBottomStyle?: StyleProp; + scrollToBottom?: () => void; + closeToTop: boolean; +}; + +export const RightSection = (props: Props) => { + return ( + + {!props.closeToTop && props.scrollToBottomComponent && ( + + {props.scrollToBottomComponent()} + + )} + + ); +}; From 8e531896528f64bf2214afdca8ccd19b3ffeb33f Mon Sep 17 00:00:00 2001 From: Melvin Date: Fri, 2 May 2025 09:55:49 +0200 Subject: [PATCH 07/11] feat: only show newMessagesBanner if new messages have been registered --- src/CuteChat.tsx | 5 +++++ src/components/ChatFooter/ChatFooter.tsx | 10 +++++++++- src/components/ChatFooter/MiddleSection.tsx | 6 +++++- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/CuteChat.tsx b/src/CuteChat.tsx index b133fcc..26deea1 100644 --- a/src/CuteChat.tsx +++ b/src/CuteChat.tsx @@ -55,6 +55,7 @@ export function CuteChat(props: CuteChatProps) { const [initializing, setInitializing] = useState(true); const [lastMessageDoc, setLastMessageDoc] = useState(null); + const [hasNewMessages, setHasNewMessages] = useState(false); const memoizedUser = useMemo(() => ({ _id: user.id, ...user }), [user]); const startDate = useMemo(() => new Date(), []); @@ -153,6 +154,8 @@ export function CuteChat(props: CuteChatProps) { console.log('New messages'); const snapshotChanges = await prepareSnapshot(snapshot, chatId); setMessages((old) => appendSnapshot(old, snapshotChanges)); + + setHasNewMessages(true); } }, (error: Error) => console.error('Error fetching documents: ', error) @@ -310,6 +313,8 @@ export function CuteChat(props: CuteChatProps) { newMessagesBannerStyles={props.newMessagesBannerStyles} scrollToBottomComponent={props.scrollToBottomComponent} scrollToBottomStyle={props.scrollToBottomStyle} + hasNewMessages={hasNewMessages} + markNewMessagesAsSeen={() => setHasNewMessages(false)} closeToTop={closeToTop} chatRef={chatListRef} /> diff --git a/src/components/ChatFooter/ChatFooter.tsx b/src/components/ChatFooter/ChatFooter.tsx index 1e1f93f..83e9a0d 100644 --- a/src/components/ChatFooter/ChatFooter.tsx +++ b/src/components/ChatFooter/ChatFooter.tsx @@ -12,12 +12,19 @@ export const ChatFooter = (props: { scrollToBottomStyle?: StyleProp; closeToTop: boolean; + hasNewMessages: boolean; + markNewMessagesAsSeen: () => void; chatRef: RefObject>; }) => { const scrollToBottom = () => { props.chatRef.current?.scrollToOffset({ offset: 0, animated: true }); }; + const onNewMessagesBannerPress = () => { + scrollToBottom(); + props.markNewMessagesAsSeen(); + }; + return ( void; closeToTop: boolean; + hasNewMessages: boolean; }; export const MiddleSection = (props: Props) => { + const shouldDisplayNewMessagesBanner = + !props.closeToTop && props.hasNewMessages; + return ( - {!props.closeToTop && props.newMessagesBannerComponent && ( + {shouldDisplayNewMessagesBanner && props.newMessagesBannerComponent && ( Date: Tue, 6 May 2025 09:21:58 +0200 Subject: [PATCH 08/11] fix: react and react native types mismatch --- package.json | 4 ++-- yarn.lock | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 8a37c04..0979620 100644 --- a/package.json +++ b/package.json @@ -58,8 +58,8 @@ "@react-native-community/eslint-config": "^3.0.2", "@release-it/conventional-changelog": "^5.0.0", "@types/jest": "^28.1.2", - "@types/react": "~17.0.21", - "@types/react-native": "0.70.0", + "@types/react": "18.2.0", + "@types/react-native": "0.71.7", "commitlint": "^17.0.2", "del-cli": "^5.0.0", "eslint": "^8.4.1", diff --git a/yarn.lock b/yarn.lock index 56de640..bcd9b51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2377,10 +2377,10 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== -"@types/react-native@0.70.0": - version "0.70.0" - resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.70.0.tgz#f8cdcdd542d36467d7591585b93d27e0563676e0" - integrity sha512-yBN7qJDfs0Vwr34NyfW1SWzalHQoYtpUWf0t4UJY9C5ft58BRr46+r92I0v+l3QX4VNsSRMHVAAWqLLCbIkM+g== +"@types/react-native@0.71.7": + version "0.71.7" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.71.7.tgz#b6ce1c512097fc2047bacd01cc18ce2b8ca2920a" + integrity sha512-SYlf5Vw2qX4qDQfdcCEdfskoMG6yn0T/jWwvBNR1xZJ3qEobcGNHuOTZQdfu4TNK+VFkH5rSXZraRlio1/bvcA== dependencies: "@types/react" "*" @@ -2393,10 +2393,10 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@~17.0.21": - version "17.0.62" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.62.tgz#2efe8ddf8533500ec44b1334dd1a97caa2f860e3" - integrity sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw== +"@types/react@18.2.0": + version "18.2.0" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21" + integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" From 5f8e1a18ffe57dbd412e953a3f473ea905a87198 Mon Sep 17 00:00:00 2001 From: Melvin Date: Tue, 6 May 2025 09:25:41 +0200 Subject: [PATCH 09/11] fix: build issues --- src/components/ChatFooter/LeftSection.tsx | 1 + src/components/ChatFooter/MiddleSection.tsx | 2 +- src/components/ChatFooter/RightSection.tsx | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ChatFooter/LeftSection.tsx b/src/components/ChatFooter/LeftSection.tsx index ac8139f..41902f1 100644 --- a/src/components/ChatFooter/LeftSection.tsx +++ b/src/components/ChatFooter/LeftSection.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { View } from 'react-native'; export const LeftSection = () => { diff --git a/src/components/ChatFooter/MiddleSection.tsx b/src/components/ChatFooter/MiddleSection.tsx index efcaa64..33a1fdd 100644 --- a/src/components/ChatFooter/MiddleSection.tsx +++ b/src/components/ChatFooter/MiddleSection.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react'; +import React, { ReactNode } from 'react'; import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native'; type Props = { diff --git a/src/components/ChatFooter/RightSection.tsx b/src/components/ChatFooter/RightSection.tsx index 86cd77e..5c0a1e8 100644 --- a/src/components/ChatFooter/RightSection.tsx +++ b/src/components/ChatFooter/RightSection.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react'; +import React, { ReactNode } from 'react'; import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native'; type Props = { From 981322c81db90596033bc6e3fb3624309639a659 Mon Sep 17 00:00:00 2001 From: Melvin Date: Tue, 6 May 2025 09:33:07 +0200 Subject: [PATCH 10/11] fix: lint warnings --- src/CuteChat.tsx | 3 --- src/components/ChatFooter/ChatFooter.tsx | 26 +++++++++--------- src/components/ChatFooter/LeftSection.tsx | 8 ++++-- src/components/ChatFooter/MiddleSection.tsx | 29 ++++++++++++++------- src/components/ChatFooter/RightSection.tsx | 29 ++++++++++++++------- 5 files changed, 58 insertions(+), 37 deletions(-) diff --git a/src/CuteChat.tsx b/src/CuteChat.tsx index 26deea1..e50007c 100644 --- a/src/CuteChat.tsx +++ b/src/CuteChat.tsx @@ -303,9 +303,6 @@ export function CuteChat(props: CuteChatProps) { return ( ( <> + ); }; + +const styles = StyleSheet.create({ + container: { + display: 'flex', + position: 'absolute', + flexDirection: 'row', + justifyContent: 'flex-start', + width: '100%', + bottom: 40, + left: 0, + }, +}); diff --git a/src/components/ChatFooter/LeftSection.tsx b/src/components/ChatFooter/LeftSection.tsx index 41902f1..f2c7f0b 100644 --- a/src/components/ChatFooter/LeftSection.tsx +++ b/src/components/ChatFooter/LeftSection.tsx @@ -1,6 +1,10 @@ import React from 'react'; -import { View } from 'react-native'; +import { StyleSheet, View } from 'react-native'; export const LeftSection = () => { - return ; + return ; }; + +const styles = StyleSheet.create({ + container: { display: 'flex', flex: 1 }, +}); diff --git a/src/components/ChatFooter/MiddleSection.tsx b/src/components/ChatFooter/MiddleSection.tsx index 33a1fdd..70b3784 100644 --- a/src/components/ChatFooter/MiddleSection.tsx +++ b/src/components/ChatFooter/MiddleSection.tsx @@ -1,5 +1,11 @@ import React, { ReactNode } from 'react'; -import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native'; +import { + StyleProp, + StyleSheet, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native'; type Props = { newMessagesBannerComponent?: () => ReactNode; @@ -15,18 +21,11 @@ export const MiddleSection = (props: Props) => { !props.closeToTop && props.hasNewMessages; return ( - + {shouldDisplayNewMessagesBanner && props.newMessagesBannerComponent && ( {props.newMessagesBannerComponent()} @@ -34,3 +33,13 @@ export const MiddleSection = (props: Props) => { ); }; + +const styles = StyleSheet.create({ + container: { display: 'flex', flex: 1 }, + newMessagesBanner: { + alignSelf: 'center', + backgroundColor: 'rgba(255, 255, 255, 0.9)', + padding: 10, + borderRadius: 100, + }, +}); diff --git a/src/components/ChatFooter/RightSection.tsx b/src/components/ChatFooter/RightSection.tsx index 5c0a1e8..b5b226e 100644 --- a/src/components/ChatFooter/RightSection.tsx +++ b/src/components/ChatFooter/RightSection.tsx @@ -1,5 +1,11 @@ import React, { ReactNode } from 'react'; -import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native'; +import { + StyleProp, + StyleSheet, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native'; type Props = { scrollToBottomComponent?: () => ReactNode; @@ -10,18 +16,11 @@ type Props = { export const RightSection = (props: Props) => { return ( - + {!props.closeToTop && props.scrollToBottomComponent && ( {props.scrollToBottomComponent()} @@ -29,3 +28,13 @@ export const RightSection = (props: Props) => { ); }; + +const styles = StyleSheet.create({ + container: { display: 'flex', flex: 1 }, + scrollToBottom: { + alignSelf: 'flex-end', + backgroundColor: 'rgba(255, 255, 255, 0.9)', + padding: 10, + borderRadius: 100, + }, +}); From 2802a7efc5975fe6d4aac1ed04a697cb91f289d0 Mon Sep 17 00:00:00 2001 From: Melvin Date: Tue, 6 May 2025 10:41:38 +0200 Subject: [PATCH 11/11] fix: arrow down does not mark as read --- src/components/ChatFooter/ChatFooter.tsx | 6 +++--- src/components/ChatFooter/MiddleSection.tsx | 4 ++++ src/components/ChatFooter/RightSection.tsx | 4 ++++ 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/ChatFooter/ChatFooter.tsx b/src/components/ChatFooter/ChatFooter.tsx index 086b2fb..774c3a4 100644 --- a/src/components/ChatFooter/ChatFooter.tsx +++ b/src/components/ChatFooter/ChatFooter.tsx @@ -20,7 +20,7 @@ export const ChatFooter = (props: { props.chatRef.current?.scrollToOffset({ offset: 0, animated: true }); }; - const onNewMessagesBannerPress = () => { + const scrollDownAndMarkAsRead = () => { scrollToBottom(); props.markNewMessagesAsSeen(); }; @@ -32,13 +32,13 @@ export const ChatFooter = (props: {