Fix favorites add/remove from table context menu (#2571)

* Fix favorites add/remove from table context menu

* Fixed console.log

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/modules/favorites/components/Favorites.tsx

@@ -1,18 +1,10 @@
-import { useState } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilCallback } from 'recoil';
 
-import { favoritesState } from '@/favorites/states/favoritesState';
-import { mapFavorites } from '@/favorites/utils/mapFavorites';
-import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
-import { PaginatedObjectTypeResults } from '@/object-record/types/PaginatedObjectTypeResults';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import NavItem from '@/ui/navigation/navbar/components/NavItem';
 import NavTitle from '@/ui/navigation/navbar/components/NavTitle';
 import { Avatar } from '@/users/components/Avatar';
-import { Company, Favorite } from '~/generated-metadata/graphql';
-import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 import { useFavorites } from '../hooks/useFavorites';
 
@@ -28,73 +20,6 @@ export const Favorites = () => {
   const { favorites, handleReorderFavorite } = useFavorites({
     objectNamePlural: 'companiesV2',
   });
-  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: 'companiesV2',
-    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: 'peopleV2',
-    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: 'favoritesV2',
-    onCompleted: useRecoilCallback(
-      ({ snapshot, set }) =>
-        async (data: PaginatedObjectTypeResults<Required<Favorite>>) => {
-          const favoriteState = snapshot.getLoadable(favoritesState);
-          const favorites = favoriteState.getValue();
-
-          const queriedFavorites = mapFavorites(data.edges, {
-            ...allCompanies,
-            ...allPeople,
-          });
-          if (!isDeeplyEqual(favorites, queriedFavorites)) {
-            set(favoritesState, queriedFavorites);
-          }
-        },
-      [allCompanies, allPeople],
-    ),
-  });
 
   if (!favorites || favorites.length === 0) return <></>;
 

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

@@ -1,10 +1,16 @@
+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 { Favorite } from '@/favorites/types/Favorite';
+import { mapFavorites } from '@/favorites/utils/mapFavorites';
 import { useFindOneObjectMetadataItem } from '@/object-metadata/hooks/useFindOneObjectMetadataItem';
+import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
+import { PaginatedObjectTypeResults } from '@/object-record/types/PaginatedObjectTypeResults';
+import { Company } from '~/generated/graphql';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 import { favoritesState } from '../states/favoritesState';
 
@@ -29,11 +35,81 @@ 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: 'companiesV2',
+    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: 'peopleV2',
+    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: 'favoritesV2',
+    onCompleted: useRecoilCallback(
+      ({ snapshot, set }) =>
+        async (data: PaginatedObjectTypeResults<Required<Favorite>>) => {
+          const favorites = snapshot.getLoadable(favoritesState).getValue();
+
+          const queriedFavorites = mapFavorites(
+            data.edges.map((edge) => edge.node),
+            {
+              ...allCompanies,
+              ...allPeople,
+            },
+          );
+
+          if (!isDeeplyEqual(favorites, queriedFavorites)) {
+            set(favoritesState, queriedFavorites);
+          }
+        },
+      [allCompanies, allPeople],
+    ),
+  });
+
   const createFavorite = useRecoilCallback(
     ({ snapshot, set }) =>
       async (favoriteTargetObjectId: string, additionalData?: any) => {
-        const favoritesStateFromSnapshot = snapshot.getLoadable(favoritesState);
-        const favorites = favoritesStateFromSnapshot.getValue();
+        const favorites = snapshot.getLoadable(favoritesState).getValue();
 
         const targetObjectName =
           favoriteTargetObjectMetadataItem?.nameSingular.replace('V2', '') ??
@@ -54,14 +130,21 @@ export const useFavorites = ({
 
         const newFavorite = {
           ...additionalData,
-          ...createdFavorite[targetObjectName],
+          ...createdFavorite,
         };
 
+        const newFavoritesMapped = mapFavorites([newFavorite], {
+          ...allCompanies,
+          ...allPeople,
+        });
+
         if (createdFavorite) {
-          set(favoritesState, [...favorites, newFavorite]);
+          set(favoritesState, [...favorites, ...newFavoritesMapped]);
         }
       },
     [
+      allCompanies,
+      allPeople,
       apolloClient,
       createOneMutation,
       currentWorkspaceMember,

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

@@ -1,6 +1,7 @@
 import { Company, Person } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 import { assertNotNull } from '~/utils/assert';
+import { isDefined } from '~/utils/isDefined';
 
 export const mapFavorites = (
   favorites: any,
@@ -15,35 +16,38 @@ export const mapFavorites = (
   },
 ) => {
   return favorites
-    .map(({ node: favorite }: any) => {
-      const recordInformation = favorite.person
-        ? {
-            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}`,
-          }
-        : favorite.company
-        ? {
-            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;
+    .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;
 
       return {
         ...recordInformation,
         recordId: recordInformation?.id,
-        id: favorite.id,
-        position: favorite.position,
+        id: favorite?.id,
+        position: favorite?.position,
       };
     })
     .filter(assertNotNull)