Update favorites query and state to work with new backend (#2520)

* wip

* wip

* adding favorite works in the database

* favorites are showing in the left drawer

* update favoorite NavItem link

* wip

* adding favorite works

* everything seems to work

* fix delete bug

* fix update favorite position

* update Favorite type

* Fix

---------

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

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

@@ -1,16 +1,20 @@
+import { useState } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
+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 { useGetFavoritesQuery } from '~/generated/graphql';
-import { getLogoUrlFromDomainName } from '~/utils';
+import { Company, Favorite } from '~/generated-metadata/graphql';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 import { useFavorites } from '../hooks/useFavorites';
-import { favoritesState } from '../states/favoritesState';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -20,34 +24,73 @@ const StyledContainer = styled.div`
 `;
 
 export const Favorites = () => {
-  const [favorites, setFavorites] = useRecoilState(favoritesState);
-  const { handleReorderFavorite } = useFavorites();
+  const { favorites, handleReorderFavorite } = useFavorites();
+  const [allCompanies, setAllCompanies] = useState<
+    Record<string, { name: string; domainName?: string }>
+  >({});
+  const [allPeople, setAllPeople] = useState<
+    Record<string, { firstName: string; lastName: string; avatarUrl?: string }>
+  >({});
 
-  useGetFavoritesQuery({
-    onCompleted: (data) =>
-      setFavorites(
-        data?.findFavorites.map((favorite) => {
-          return {
-            id: favorite.id,
-            person: favorite.person
-              ? {
-                  id: favorite.person.id,
-                  firstName: favorite.person.firstName,
-                  lastName: favorite.person.lastName,
-                  avatarUrl: favorite.person.avatarUrl,
-                }
-              : undefined,
-            company: favorite.company
-              ? {
-                  id: favorite.company.id,
-                  name: favorite.company.name,
-                  domainName: favorite.company.domainName,
-                }
-              : undefined,
-            position: favorite.position,
-          };
-        }) ?? [],
-      ),
+  // 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 <></>;
@@ -60,47 +103,28 @@ export const Favorites = () => {
         draggableItems={
           <>
             {favorites.map((favorite, index) => {
-              const { id, person, company } = favorite;
+              const { id, labelIdentifier, avatarUrl, avatarType, link } =
+                favorite;
+
               return (
                 <DraggableItem
                   key={id}
                   draggableId={id}
                   index={index}
                   itemComponent={
-                    <>
-                      {person && (
-                        <NavItem
-                          key={id}
-                          label={`${person.firstName} ${person.lastName}`}
-                          Icon={() => (
-                            <Avatar
-                              colorId={person.id}
-                              avatarUrl={person.avatarUrl ?? ''}
-                              type="rounded"
-                              placeholder={`${person.firstName} ${person.lastName}`}
-                            />
-                          )}
-                          to={`/person/${person.id}`}
+                    <NavItem
+                      key={id}
+                      label={labelIdentifier}
+                      Icon={() => (
+                        <Avatar
+                          colorId={id}
+                          avatarUrl={avatarUrl}
+                          type={avatarType}
+                          placeholder={labelIdentifier}
                         />
                       )}
-                      {company && (
-                        <NavItem
-                          key={id}
-                          label={company.name}
-                          Icon={() => (
-                            <Avatar
-                              avatarUrl={
-                                getLogoUrlFromDomainName(company.domainName) ??
-                                ''
-                              }
-                              type="squared"
-                              placeholder={company.name}
-                            />
-                          )}
-                          to={`/companies/${company.id}`}
-                        />
-                      )}
-                    </>
+                      to={link}
+                    />
                   }
                 />
               );