Revize f386a4fe

re #10818 Toast: implementation to pages

src/components/notes/NotesListView.tsx

@@ -8 +8 @@
 import { AppDispatch } from "../../stores/store";
 import { useDispatch } from "react-redux";
 import { Dimensions } from "react-native";
+import { InfoToast } from "../toast/InfoToast";
 
 
 
 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);
 
+    const toast = useToast();
+
     const [renderedNotes, setRenderedNotes] = useState(6);
 
     const cancelRef = React.useRef(null);
@@ -53 +54 @@
         }
     }, [dispatch, props.requestPending]);
 
+
+
     const handleScrollEnd = (event: any) => {
         const offsetY = event.nativeEvent.contentOffset.y;
         const contentHeight = event.nativeEvent.contentSize.height;
@@ -63 +66 @@
             const nextBatchSize = 5; // Number of notes to render in the next batch
 
             if ((renderedNotes + nextBatchSize) > notes.length && (renderedNotes + nextBatchSize) != notes.length) {
+                toast.closeAll()
+                toast.show({
+                    render: ({
+                        id
+                    }) => {
+                        return <InfoToast text={"All notes loaded..."} onClose={() => toast.close(id)} />;
+                    },
+                    duration: 3000
+                });
                 setRenderedNotes(notes.length);
-                // TODO toast display info all rendered
+
             }
             else if ((renderedNotes + nextBatchSize) != notes.length) {
+                toast.closeAll()
+                toast.show({
+                    render: ({
+                        id
+                    }) => {
+                        return <InfoToast text={"Loading more notes..."} onClose={() => toast.close(id)} />;
+                    },
+                    duration: 3000
+                });
                 setRenderedNotes(renderedNotes + nextBatchSize);
-                // TODO toast display loading more notes
+
             }
         }
     };
@@ -83 +104 @@
                             <VStack>
                                 {
                                     notes.slice(0, renderedNotes).map((note, index) => {
-                                        
-                                        if(replyingTo?.messageId == note.uuid){
+
+                                        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>
@@ -107 +128 @@
 
                     {/* Replying to */}
                     {replyingTo != null &&
-                        <Flex direction="row" alignItems="center" justify="flex-end" height={10} style={{backgroundColor: "#FFF8E1"}}>
+                        <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%" marginRight={20 }/>
+                            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%" marginRight={20} />
                         </Flex>
                     }