Improve Performances of FE by reducing first print queries (#2623)

front/src/modules/favorites/hooks/useFavorites.ts

@@ -1,10 +1,8 @@
-import { useState } from 'react';
 import { useApolloClient } from '@apollo/client';
 import { OnDragEndResponder } from '@hello-pangea/dnd';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { Company } from '@/companies/types/Company';
 import { Favorite } from '@/favorites/types/Favorite';
 import { mapFavorites } from '@/favorites/utils/mapFavorites';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -35,55 +33,7 @@ export const useFavorites = ({
 
   const apolloClient = useApolloClient();
 
-  const [allCompanies, setAllCompanies] = useState<
-    Record<string, { name: string; domainName?: string }>
-  >({});
-  const [allPeople, setAllPeople] = useState<
-    Record<string, { firstName: string; lastName: string; avatarUrl?: string }>
-  >({});
-
-  // This is only temporary and will be refactored once we have main identifiers
-  const { loading: companiesLoading } = useFindManyObjectRecords({
-    objectNamePlural: 'companies',
-    onCompleted: async (
-      data: PaginatedObjectTypeResults<Required<Company>>,
-    ) => {
-      setAllCompanies(
-        data.edges.reduce(
-          (acc, { node: company }) => ({
-            ...acc,
-            [company.id]: {
-              name: company.name,
-              domainName: company.domainName,
-            },
-          }),
-          {},
-        ),
-      );
-    },
-  });
-
-  const { loading: peopleLoading } = useFindManyObjectRecords({
-    objectNamePlural: 'people',
-    onCompleted: async (data) => {
-      setAllPeople(
-        data.edges.reduce(
-          (acc, { node: person }) => ({
-            ...acc,
-            [person.id]: {
-              firstName: person.firstName,
-              lastName: person.lastName,
-              avatarUrl: person.avatarUrl,
-            },
-          }),
-          {},
-        ),
-      );
-    },
-  });
-
   useFindManyObjectRecords({
-    skip: companiesLoading || peopleLoading,
     objectNamePlural: 'favorites',
     onCompleted: useRecoilCallback(
       ({ snapshot, set }) =>
@@ -92,17 +42,13 @@ export const useFavorites = ({
 
           const queriedFavorites = mapFavorites(
             data.edges.map((edge) => edge.node),
-            {
-              ...allCompanies,
-              ...allPeople,
-            },
           );
 
           if (!isDeeplyEqual(favorites, queriedFavorites)) {
             set(favoritesState, queriedFavorites);
           }
         },
-      [allCompanies, allPeople],
+      [],
     ),
   });
 
@@ -125,25 +71,20 @@ export const useFavorites = ({
           },
         });
 
-        const createdFavorite = result?.data?.createFavoriteV2;
+        const createdFavorite = result?.data?.createFavorite;
 
         const newFavorite = {
           ...additionalData,
           ...createdFavorite,
         };
 
-        const newFavoritesMapped = mapFavorites([newFavorite], {
-          ...allCompanies,
-          ...allPeople,
-        });
+        const newFavoritesMapped = mapFavorites([newFavorite]);
 
         if (createdFavorite) {
           set(favoritesState, [...favorites, ...newFavoritesMapped]);
         }
       },
     [
-      allCompanies,
-      allPeople,
       apolloClient,
       createOneMutation,
       currentWorkspaceMember,

front/src/modules/favorites/utils/mapFavorites.ts

@@ -1,48 +1,30 @@
-import { Company } from '@/companies/types/Company';
-import { Person } from '@/people/types/Person';
 import { getLogoUrlFromDomainName } from '~/utils';
 import { assertNotNull } from '~/utils/assert';
 import { isDefined } from '~/utils/isDefined';
 
-export const mapFavorites = (
-  favorites: any,
-  recordsDict: {
-    [key: string]: {
-      firstName?: Person['name']['firstName'];
-      lastName?: Person['name']['lastName'];
-      avatarUrl?: Person['avatarUrl'];
-      name?: Company['name'];
-      domainName?: Company['domainName'];
-    };
-  },
-) => {
+export const mapFavorites = (favorites: any) => {
   return favorites
     .map((favorite: any) => {
-      const recordInformation =
-        isDefined(favorite?.person) &&
-        isDefined(recordsDict[favorite.person.id])
-          ? {
-              id: favorite.person.id,
-              labelIdentifier:
-                recordsDict[favorite.person.id].firstName +
-                ' ' +
-                recordsDict[favorite.person.id].lastName,
-              avatarUrl: recordsDict[favorite.person.id].avatarUrl,
-              avatarType: 'rounded',
-              link: `/object/personV2/${favorite.person.id}`,
-            }
-          : isDefined(favorite?.company) &&
-            isDefined(recordsDict[favorite.company.id])
-          ? {
-              id: favorite.company.id,
-              labelIdentifier: recordsDict[favorite.company.id].name,
-              avatarUrl: getLogoUrlFromDomainName(
-                recordsDict[favorite.company.id].domainName ?? '',
-              ),
-              avatarType: 'squared',
-              link: `/object/companyV2/${favorite.company.id}`,
-            }
-          : undefined;
+      const recordInformation = isDefined(favorite?.person)
+        ? {
+            id: favorite.person.id,
+            labelIdentifier:
+              favorite.person.name.firstName +
+              ' ' +
+              favorite.person.name.lastName,
+            avatarUrl: favorite.person.avatarUrl,
+            avatarType: 'rounded',
+            link: `/object/person/${favorite.person.id}`,
+          }
+        : isDefined(favorite?.company)
+        ? {
+            id: favorite.company.id,
+            labelIdentifier: favorite.company.name,
+            avatarUrl: getLogoUrlFromDomainName(favorite.company.domainName),
+            avatarType: 'squared',
+            link: `/object/company/${favorite.company.id}`,
+          }
+        : undefined;
 
       return {
         ...recordInformation,