🐛(frontend) fix infinity scroll on invitation list

The infinity scroll had some difficulties to
load the next page of invitations because the ref
could be not init.
This commit fixes the issue.

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts

@@ -66,6 +66,61 @@ test.describe('Document list members', () => {
     ).toBeVisible();
   });
 
+  test('it checks a big list of invitations', async ({ page }) => {
+    await page.route(
+      /.*\/documents\/.*\/invitations\/\?page=.*/,
+      async (route) => {
+        const request = route.request();
+        const url = new URL(request.url());
+        const pageId = url.searchParams.get('page');
+        const accesses = {
+          count: 100,
+          next: 'http://anything/?page=2',
+          previous: null,
+          results: Array.from({ length: 20 }, (_, i) => ({
+            id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
+            email: `[email protected]${pageId}-${i}`,
+            team: '',
+            role: 'editor',
+            abilities: {
+              destroy: true,
+              update: true,
+              partial_update: true,
+              retrieve: true,
+            },
+          })),
+        };
+
+        if (request.method().includes('GET')) {
+          await route.fulfill({
+            json: accesses,
+          });
+        } else {
+          await route.continue();
+        }
+      },
+    );
+
+    await goToGridDoc(page);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    const list = page.getByLabel('List invitation card').locator('ul');
+    await expect(list.locator('li')).toHaveCount(20);
+    await list.getByText(`[email protected]${1}-18`).hover();
+    await page.mouse.wheel(0, 10);
+
+    await waitForElementCount(list.locator('li'), 21, 10000);
+
+    expect(await list.locator('li').count()).toBeGreaterThan(20);
+    await expect(
+      list.getByText(`[email protected]`),
+    ).toBeVisible();
+    await expect(
+      list.getByText(`[email protected]`),
+    ).toBeVisible();
+  });
+
   test('it checks the role rules', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
 

src/frontend/apps/impress/src/features/docs/members/invitation-list/components/InvitationList.tsx

@@ -1,5 +1,5 @@
 import { Loader } from '@openfun/cunningham-react';
-import React, { useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { APIError } from '@/api';
@@ -73,6 +73,7 @@ interface InvitationListProps {
 export const InvitationList = ({ doc }: InvitationListProps) => {
   const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
+  const [, setRefInitialized] = useState(false);
   const {
     data,
     isLoading,
@@ -90,6 +91,17 @@ export const InvitationList = ({ doc }: InvitationListProps) => {
     }, [] as Invitation[]);
   }, [data?.pages]);
 
+  /**
+   *  The "return null;" statement below blocks a necessary rerender
+   *  for the InfiniteScroll component to work properly.
+   *  This useEffect is a workaround to force the rerender.
+   */
+  useEffect(() => {
+    if (containerRef.current) {
+      setRefInitialized(true);
+    }
+  }, [invitations?.length]);
+
   if (!invitations?.length) {
     return null;
   }