Revize bc25708c

#re 10797 NoteListView lazy loading -> scroll load more notes

src/components/notes/NotesListView.tsx

@@ -15 +15 @@
     const [newComment, setNewComment] = useState<string>("");
     const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
 
+    const [renderedNotes, setRenderedNotes] = useState(6);
+
     const cancelRef = React.useRef(null);
 
     const dispatch = useDispatch<AppDispatch>();
@@ -47 +49 @@
         }
     }, [dispatch, props.requestPending]);
 
+    const handleScrollEnd = (event : any) => {
+        const offsetY = event.nativeEvent.contentOffset.y;
+        const contentHeight = event.nativeEvent.contentSize.height;
+        const screenHeight = event.nativeEvent.layoutMeasurement.height;
+
+        if (offsetY + screenHeight >= contentHeight - 20) {
+            // 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){
+                setRenderedNotes(notes.length);
+                // TODO toast display info all rendered
+            }
+            else{
+                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}>
                 {/* Notes */}
-                <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+                <ScrollView contentContainerStyle={{ flexGrow: 1 }} onScrollEndDrag={handleScrollEnd}>
                     {
                         notes && notes.length > 0 ? (
                             <VStack>
-                                {notes.map((note, index) => {
-                                    // if(index >= 5){
-                                    //     return null;
-                                    // }
-                                    return (
+                                {
+                                    notes.slice(0, renderedNotes).map((note, index) => (
                                         <NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
-                                    )
-                                })}
+                                    ))
+                                }
                             </VStack>
                         ) : (
                             <Text>There are no notes.</Text>
@@ -84 +106 @@
                             </IconButton>
                         </Flex>
                     }
-                    
+
 
                     {/* Add comment */}
                     <HStack height={90} >

src/pages/NotesViewPage.tsx

@@ -75 +75 @@
   }, [generalCommentsCheck, myCommentsCheck])
 
 
-  const getNotes = () => {
+  const getNotes = useCallback(() => {
     dispatch(getAllNotes({
       myComments: myCommentsCheck,
       generalComments: generalCommentsCheck,
       sortOptions: sortSettings
     }));
-  }
+  }, [myCommentsCheck, generalCommentsCheck, sortSettings]);
 
-  const handleCreateComment = (newComment: string, replyingTo: { messageId: string; userName: string } | null) => {
 
+  const handleCreateComment = useCallback((newComment: string, replyingTo: { messageId: string; userName: string } | null) => {
     console.log(newComment, replyingTo)
 
     if (!requestPending) {
@@ -100 +100 @@
         }))
       }
     }
-  }
+  }, [dispatch, createNote]);
+
 
 
   return (

src/stores/actions/notesThunks.ts

@@ -2 +2 @@
 import { createNoteRequest, deleteNoteRequest, getAllNotesRequest, updateNoteRequest } from "../../api/notesservice"
 import { SortOptions } from "../../types/general";
 import { Note } from "../../types/note";
-import { useDispatch } from "react-redux";
-import { AppDispatch } from "../store";
 
 export const deleteNote = createAsyncThunk(
     "notes/deleteNote",