Revize 8b1106f4

#re 10797 NoteView: higlight replying to

src/components/notes/NotesListView.tsx

@@ -1 @@
-import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea } from "native-base";
+import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea, useToast } from "native-base";
 import { Note } from "../../types/note";
 import NoteView from "./NoteView";
 import { MessageIcon } from "../general/Icons";
@@ -9 +9 @@
 import { useDispatch } from "react-redux";
 import { Dimensions } from "react-native";
 
+
+
 const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComment: any, requestPending: boolean }) => {
     const notes = props.notes;
 
+    const toast = useToast();
+
     const [newComment, setNewComment] = useState<string>("");
     const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
 
@@ -49 +53 @@
         }
     }, [dispatch, props.requestPending]);
 
-    const handleScrollEnd = (event : any) => {
+    const handleScrollEnd = (event: any) => {
         const offsetY = event.nativeEvent.contentOffset.y;
         const contentHeight = event.nativeEvent.contentSize.height;
         const screenHeight = event.nativeEvent.layoutMeasurement.height;
@@ -58 +62 @@
             // Load more notes when the user is near the end of the list
             const nextBatchSize = 5; // Number of notes to render in the next batch
 
-            if((renderedNotes + nextBatchSize) > notes.length && (renderedNotes + nextBatchSize) != notes.length){
+            if ((renderedNotes + nextBatchSize) > notes.length && (renderedNotes + nextBatchSize) != notes.length) {
                 setRenderedNotes(notes.length);
                 // TODO toast display info all rendered
             }
-            else{
+            else if ((renderedNotes + nextBatchSize) != notes.length) {
                 setRenderedNotes(renderedNotes + nextBatchSize);
                 // TODO toast display loading more notes
             }
         }
     };
 
-    console.log(renderedNotes)
-    console.log(notes.length)
-
     return (
         <VStack>
             <Box height={windowHeight - 70 - 160 - (replyingTo ? 40 : 0)} marginBottom={2}>
@@ -81 +82 @@
                         notes && notes.length > 0 ? (
                             <VStack>
                                 {
-                                    notes.slice(0, renderedNotes).map((note, index) => (
-                                        <NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
-                                    ))
+                                    notes.slice(0, renderedNotes).map((note, index) => {
+                                        
+                                        if(replyingTo?.messageId == note.uuid){
+                                            return <NoteView higlighted key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
+                                        }
+                                        
+                                        return <NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />;
+                                        
+                                    })
                                 }
                             </VStack>
                         ) : (
@@ -100 +107 @@
 
                     {/* Replying to */}
                     {replyingTo != null &&
-                        <Flex direction="row" alignItems="center" justify="flex-end" marginRight={20} height={10}>
+                        <Flex direction="row" alignItems="center" justify="flex-end" height={10} style={{backgroundColor: "#FFF8E1"}}>
                             <Text>Replying to {replyingTo.userName}</Text>
-                            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%">
-                            </IconButton>
+                            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%" marginRight={20 }/>
                         </Flex>
                     }