Fix context menu and favorites (#2564)

front/src/modules/object-record/components/RecordShowPage.tsx

@@ -36,14 +36,16 @@ export const RecordShowPage = () => {
     objectMetadataId: string;
   }>();
 
-  const { favorites, createFavorite, deleteFavorite } = useFavorites();
-
   const { icons } = useLazyLoadIcons();
 
   const { foundObjectMetadataItem } = useFindOneObjectMetadataItem({
     objectNameSingular,
   });
 
+  const { favorites, createFavorite, deleteFavorite } = useFavorites({
+    objectNamePlural: foundObjectMetadataItem?.namePlural,
+  });
+
   const [, setEntityFields] = useRecoilState(
     entityFieldsFamilyState(objectMetadataId ?? ''),
   );
@@ -106,11 +108,7 @@ export const RecordShowPage = () => {
               recordId: object.id,
             }
           : {};
-      createFavorite(
-        objectNameSingular.replace('V2', ''),
-        object.id,
-        additionalData,
-      );
+      createFavorite(object.id, additionalData);
     }
   };
 

front/src/modules/object-record/components/RecordTableEffect.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 
 import { useFindOneObjectMetadataItem } from '@/object-metadata/hooks/useFindOneObjectMetadataItem';
+import { useRecordTableContextMenuEntries } from '@/object-record/hooks/useRecordTableContextMenuEntries';
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 import { useView } from '@/views/hooks/useView';
@@ -56,5 +57,13 @@ export const RecordTableEffect = () => {
     setAvailableTableColumns,
   ]);
 
+  const { setActionBarEntries, setContextMenuEntries } =
+    useRecordTableContextMenuEntries();
+
+  useEffect(() => {
+    setActionBarEntries?.();
+    setContextMenuEntries?.();
+  }, [setActionBarEntries, setContextMenuEntries]);
+
   return <></>;
 };

front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx

@@ -0,0 +1,133 @@
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
+
+import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { useDeleteOneObjectRecord } from '@/object-record/hooks/useDeleteOneObjectRecord';
+import {
+  IconCheckbox,
+  IconHeart,
+  IconHeartOff,
+  IconNotes,
+  IconTrash,
+} from '@/ui/display/icon';
+import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
+import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
+import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
+import { selectedRowIdsSelector } from '@/ui/object/record-table/states/selectors/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
+import { useGetFavoritesQuery } from '~/generated/graphql';
+
+export const useRecordTableContextMenuEntries = () => {
+  const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
+  const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState);
+
+  const setTableRowIds = useSetRecoilState(tableRowIdsState);
+
+  const { scopeId: objectNamePlural, resetTableRowSelection } =
+    useRecordTable();
+
+  const { data } = useGetFavoritesQuery();
+  const favorites = data?.findFavorites;
+
+  const { createFavorite, deleteFavorite } = useFavorites({ objectNamePlural });
+
+  const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
+    const selectedRowIds = snapshot
+      .getLoadable(selectedRowIdsSelector)
+      .getValue();
+
+    const selectedRowId = selectedRowIds.length === 1 ? selectedRowIds[0] : '';
+
+    const isFavorite =
+      !!selectedRowId &&
+      !!favorites?.find((favorite) => favorite.company?.id === selectedRowId);
+
+    resetTableRowSelection();
+
+    if (isFavorite) {
+      deleteFavorite(selectedRowId);
+    } else {
+      createFavorite(selectedRowId);
+    }
+  });
+
+  const { deleteOneObject } = useDeleteOneObjectRecord({
+    objectNamePlural,
+  });
+
+  const handleDeleteClick = useRecoilCallback(({ snapshot }) => async () => {
+    const rowIdsToDelete = snapshot
+      .getLoadable(selectedRowIdsSelector)
+      .getValue();
+
+    resetTableRowSelection();
+
+    if (deleteOneObject) {
+      for (const rowId of rowIdsToDelete) {
+        await deleteOneObject(rowId);
+      }
+
+      setTableRowIds((tableRowIds) =>
+        tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
+      );
+    }
+  });
+
+  return {
+    setContextMenuEntries: useRecoilCallback(({ snapshot }) => () => {
+      const selectedRowIds = snapshot
+        .getLoadable(selectedRowIdsSelector)
+        .getValue();
+
+      const selectedRowId =
+        selectedRowIds.length === 1 ? selectedRowIds[0] : '';
+
+      const isFavorite =
+        !!selectedRowId &&
+        !!favorites?.find((favorite) => favorite.company?.id === selectedRowId);
+
+      setContextMenuEntries([
+        {
+          label: 'New task',
+          Icon: IconCheckbox,
+          onClick: () => {},
+        },
+        {
+          label: 'New note',
+          Icon: IconNotes,
+          onClick: () => {},
+        },
+        {
+          label: isFavorite ? 'Remove from favorites' : 'Add to favorites',
+          Icon: isFavorite ? IconHeartOff : IconHeart,
+          onClick: () => handleFavoriteButtonClick(),
+        },
+        {
+          label: 'Delete',
+          Icon: IconTrash,
+          accent: 'danger',
+          onClick: () => handleDeleteClick(),
+        },
+      ]);
+    }),
+    setActionBarEntries: useRecoilCallback(() => () => {
+      setActionBarEntriesState([
+        {
+          label: 'Task',
+          Icon: IconCheckbox,
+          onClick: () => {},
+        },
+        {
+          label: 'Note',
+          Icon: IconNotes,
+          onClick: () => {},
+        },
+        {
+          label: 'Delete',
+          Icon: IconTrash,
+          accent: 'danger',
+          onClick: () => handleDeleteClick(),
+        },
+      ]);
+    }),
+  };
+};