commit bc25708c93f4d33e05f6a36a8ba82c2ab3c02673
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Thu Oct 5 12:31:55 2023 +0200

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

diff --git a/src/components/notes/NotesListView.tsx b/src/components/notes/NotesListView.tsx
index e372554..591905f 100644
--- a/src/components/notes/NotesListView.tsx
+++ b/src/components/notes/NotesListView.tsx
@@ -15,6 +15,8 @@ const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComm
     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,22 +49,42 @@ const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComm
         }
     }, [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,7 +106,7 @@ const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComm
                             </IconButton>
                         </Flex>
                     }
-                    
+
 
                     {/* Add comment */}
                     <HStack height={90} >
diff --git a/src/pages/NotesViewPage.tsx b/src/pages/NotesViewPage.tsx
index 5a51197..347233d 100644
--- a/src/pages/NotesViewPage.tsx
+++ b/src/pages/NotesViewPage.tsx
@@ -75,16 +75,16 @@ const NotesViewPage = ({ navigation }: DrawerScreenProps<RootDrawerParamList, 'N
   }, [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,7 +100,8 @@ const NotesViewPage = ({ navigation }: DrawerScreenProps<RootDrawerParamList, 'N
         }))
       }
     }
-  }
+  }, [dispatch, createNote]);
+
 
 
   return (
diff --git a/src/stores/actions/notesThunks.ts b/src/stores/actions/notesThunks.ts
index ab23078..97456ca 100644
--- a/src/stores/actions/notesThunks.ts
+++ b/src/stores/actions/notesThunks.ts
@@ -2,8 +2,6 @@ import { createAsyncThunk } from "@reduxjs/toolkit"
 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",
