From 8dcd6d5bb8c2c930e9037897efa3b612b8aa540e Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 28 Jun 2024 10:12:31 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20fix=20flickering=20on?=
 =?UTF-8?q?=20datagrid=20sorting=20member?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The datagrid was flickering when sorting the member list.
This was due to the fact that the list was getting
empty and then filled again with the sorted list
causing the flickering.
---
 .../components/MemberGrid.tsx                 | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/frontend/apps/desk/src/features/teams/member-management/components/MemberGrid.tsx b/src/frontend/apps/desk/src/features/teams/member-management/components/MemberGrid.tsx
index c7db738..9f5e0bc 100644
--- a/src/frontend/apps/desk/src/features/teams/member-management/components/MemberGrid.tsx
+++ b/src/frontend/apps/desk/src/features/teams/member-management/components/MemberGrid.tsx
@@ -15,6 +15,7 @@ import { Role, Team } from '@/features/teams/team-management';
 
 import { useTeamAccesses } from '../api';
 import { PAGE_SIZE } from '../conf';
+import { Access } from '../types';
 
 import { MemberAction } from './MemberAction';
 
@@ -23,7 +24,6 @@ interface MemberGridProps {
   currentRole: Role;
 }
 
-// FIXME : ask Cunningham to export this type
 type SortModelItem = {
   field: string;
   sort: 'asc' | 'desc' | null;
@@ -58,6 +58,7 @@ export const MemberGrid = ({ team, currentRole }: MemberGridProps) => {
     pageSize: PAGE_SIZE,
   });
   const [sortModel, setSortModel] = useState<SortModel>([]);
+  const [accesses, setAccesses] = useState<Access[]>([]);
   const { page, pageSize, setPagesCount } = pagination;
 
   const ordering = sortModel.length ? formatSortModel(sortModel[0]) : undefined;
@@ -68,26 +69,34 @@ export const MemberGrid = ({ team, currentRole }: MemberGridProps) => {
     ordering,
   });
 
-  const localizedRoles = {
-    [Role.ADMIN]: t('Administration'),
-    [Role.MEMBER]: t('Member'),
-    [Role.OWNER]: t('Owner'),
-  };
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
 
-  /*
-   * Bug occurs from the Cunningham Datagrid component, when applying sorting
-   * on null values. Sanitize empty values to ensure consistent sorting functionality.
-   */
-  const accesses =
-    data?.results?.map((access) => ({
-      ...access,
-      localizedRole: localizedRoles[access.role],
-      user: {
-        ...access.user,
-        name: access.user.name || '',
-        email: access.user.email || '',
-      },
-    })) || [];
+    const localizedRoles = {
+      [Role.ADMIN]: t('Administration'),
+      [Role.MEMBER]: t('Member'),
+      [Role.OWNER]: t('Owner'),
+    };
+
+    /*
+     * Bug occurs from the Cunningham Datagrid component, when applying sorting
+     * on null values. Sanitize empty values to ensure consistent sorting functionality.
+     */
+    const accesses =
+      data?.results?.map((access) => ({
+        ...access,
+        localizedRole: localizedRoles[access.role],
+        user: {
+          ...access.user,
+          name: access.user.name || '',
+          email: access.user.email || '',
+        },
+      })) || [];
+
+    setAccesses(accesses);
+  }, [data?.results, t, isLoading]);
 
   useEffect(() => {
     setPagesCount(data?.count ? Math.ceil(data.count / pageSize) : 0);