Fix fetch more notes (#16442)

fixes : https://github.com/twentyhq/twenty/issues/16320

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/activities/notes/components/NoteList.tsx

@@ -1,5 +1,5 @@
-import { type ReactElement } from 'react';
 import styled from '@emotion/styled';
+import { type ReactElement } from 'react';
 
 import { type Note } from '@/activities/types/Note';
 
@@ -9,6 +9,7 @@ type NoteListProps = {
   title: string;
   notes: Note[];
   button?: ReactElement | false | null;
+  totalCount: number;
 };
 
 const StyledContainer = styled.div`
@@ -47,13 +48,18 @@ const StyledNoteContainer = styled.div`
   width: 100%;
 `;
 
-export const NoteList = ({ title, notes, button }: NoteListProps) => (
+export const NoteList = ({
+  title,
+  notes,
+  totalCount,
+  button,
+}: NoteListProps) => (
   <>
     {notes && notes.length > 0 && (
       <StyledContainer>
         <StyledTitleBar>
           <StyledTitle>
-            {title} <StyledCount>{notes.length}</StyledCount>
+            {title} <StyledCount>{totalCount}</StyledCount>
           </StyledTitle>
           {button}
         </StyledTitleBar>

packages/twenty-front/src/modules/activities/notes/components/NotesCard.tsx

@@ -1,3 +1,4 @@
+import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { NoteList } from '@/activities/notes/components/NoteList';
@@ -29,7 +30,14 @@ const StyledNotesContainer = styled.div`
 
 export const NotesCard = () => {
   const targetRecord = useTargetRecord();
-  const { notes, loading } = useNotes(targetRecord);
+  const { notes, loading, totalCountNotes, fetchMoreNotes, hasNextPage } =
+    useNotes(targetRecord);
+
+  const handleLastRowVisible = async () => {
+    if (hasNextPage) {
+      await fetchMoreNotes();
+    }
+  };
 
   const openCreateActivity = useOpenCreateActivityDrawer({
     activityObjectNameSingular: CoreObjectNameSingular.Note,
@@ -87,6 +95,7 @@ export const NotesCard = () => {
       <NoteList
         title={t`All`}
         notes={notes}
+        totalCount={totalCountNotes}
         button={
           hasObjectUpdatePermissions && (
             <Button
@@ -103,6 +112,10 @@ export const NotesCard = () => {
           )
         }
       />
+      <CustomResolverFetchMoreLoader
+        loading={loading}
+        onLastRowVisible={handleLastRowVisible}
+      />
     </StyledNotesContainer>
   );
 };

packages/twenty-front/src/modules/activities/notes/hooks/useNotes.ts

@@ -15,17 +15,22 @@ export const useNotes = (targetableObject: ActivityTargetableObject) => {
   const notesQueryVariables = useMemo(
     () =>
       ({
-        filter: {},
         orderBy: FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY,
       }) as RecordGqlOperationVariables,
     [],
   );
 
-  const { activities, loading } = useActivities<Note>({
+  const {
+    activities,
+    loading,
+    totalCountActivities,
+    fetchMoreActivities,
+    hasNextPage,
+  } = useActivities<Note>({
     objectNameSingular: CoreObjectNameSingular.Note,
-    activitiesFilters: notesQueryVariables.filter ?? {},
-    activitiesOrderByVariables: notesQueryVariables.orderBy ?? [{}],
+    activityTargetsOrderByVariables: notesQueryVariables.orderBy ?? [{}],
     targetableObjects: [targetableObject],
+    limit: 10,
   });
 
   const [currentNotesQueryVariables, setCurrentNotesQueryVariables] =
@@ -45,5 +50,8 @@ export const useNotes = (targetableObject: ActivityTargetableObject) => {
   return {
     notes: activities as Note[],
     loading,
+    totalCountNotes: totalCountActivities,
+    fetchMoreNotes: fetchMoreActivities,
+    hasNextPage,
   };
 };