Feat: I can add a favorite directly from my table (#1747)

* implented add/remove favorite in context menu

* clear selected rows after favorite button click, context menu width 200px when remove from favorites is shown

* Update front/src/modules/ui/context-menu/components/ContextMenu.tsx

front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx

@@ -1,10 +1,19 @@
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
+import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
-import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
-import { ActivityType } from '~/generated/graphql';
+import {
+  IconCheckbox,
+  IconHeart,
+  IconHeartOff,
+  IconNotes,
+  IconTrash,
+} from '@/ui/icon';
+import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
+import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
+import { ActivityType, useGetFavoritesQuery } from '~/generated/graphql';
 
 import { useDeleteSelectedComapnies } from './useDeleteCompanies';
 
@@ -18,21 +27,55 @@ export const useCompanyTableContextMenuEntries = () => {
     openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
   };
 
+  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
+
+  const selectedCompanyId =
+    selectedRowIds.length === 1 ? selectedRowIds[0] : '';
+
+  const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
+
+  const resetRowSelection = useResetTableRowSelection();
+
+  const { data } = useGetFavoritesQuery();
+
+  const favorites = data?.findFavorites;
+
+  const isFavorite =
+    !!selectedCompanyId &&
+    !!favorites?.find((favorite) => favorite.company?.id === selectedCompanyId);
+
+  const handleFavoriteButtonClick = () => {
+    resetRowSelection();
+    if (isFavorite) deleteCompanyFavorite(selectedCompanyId);
+    else insertCompanyFavorite(selectedCompanyId);
+  };
+
   const deleteSelectedCompanies = useDeleteSelectedComapnies();
 
   return {
     setContextMenuEntries: () =>
       setContextMenuEntries([
         {
-          label: 'Note',
-          Icon: IconNotes,
-          onClick: () => handleButtonClick(ActivityType.Note),
-        },
-        {
-          label: 'Task',
+          label: 'New task',
           Icon: IconCheckbox,
           onClick: () => handleButtonClick(ActivityType.Task),
         },
+        {
+          label: 'New note',
+          Icon: IconNotes,
+          onClick: () => handleButtonClick(ActivityType.Note),
+        },
+        ...(!!selectedCompanyId
+          ? [
+              {
+                label: isFavorite
+                  ? 'Remove from favorites'
+                  : 'Add to favorites',
+                Icon: isFavorite ? IconHeartOff : IconHeart,
+                onClick: () => handleFavoriteButtonClick(),
+              },
+            ]
+          : []),
         {
           label: 'Delete',
           Icon: IconTrash,

front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx

@@ -1,12 +1,23 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
-import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
+import {
+  IconCheckbox,
+  IconHeart,
+  IconHeartOff,
+  IconNotes,
+  IconTrash,
+} from '@/ui/icon';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
-import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';
+import {
+  ActivityType,
+  useDeleteManyPersonMutation,
+  useGetFavoritesQuery,
+} from '~/generated/graphql';
 
 import { GET_PEOPLE } from '../graphql/queries/getPeople';
 
@@ -22,6 +33,24 @@ export const usePersonTableContextMenuEntries = () => {
 
   const resetRowSelection = useResetTableRowSelection();
 
+  const selectedPersonId = selectedRowIds.length === 1 ? selectedRowIds[0] : '';
+
+  const { data } = useGetFavoritesQuery();
+
+  const favorites = data?.findFavorites;
+
+  const isFavorite =
+    !!selectedPersonId &&
+    !!favorites?.find((favorite) => favorite.person?.id === selectedPersonId);
+
+  const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
+
+  const handleFavoriteButtonClick = () => {
+    resetRowSelection();
+    if (isFavorite) deletePersonFavorite(selectedPersonId);
+    else insertPersonFavorite(selectedPersonId);
+  };
+
   const [deleteManyPerson] = useDeleteManyPersonMutation({
     refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
   });
@@ -53,15 +82,26 @@ export const usePersonTableContextMenuEntries = () => {
     setContextMenuEntries: () =>
       setContextMenuEntries([
         {
-          label: 'Note',
-          Icon: IconNotes,
-          onClick: () => createActivityForPeople(ActivityType.Note),
-        },
-        {
-          label: 'Task',
+          label: 'New task',
           Icon: IconCheckbox,
           onClick: () => createActivityForPeople(ActivityType.Task),
         },
+        {
+          label: 'New note',
+          Icon: IconNotes,
+          onClick: () => createActivityForPeople(ActivityType.Note),
+        },
+        ...(!!selectedPersonId
+          ? [
+              {
+                label: isFavorite
+                  ? 'Remove from favorites'
+                  : 'Add to favorites',
+                Icon: isFavorite ? IconHeartOff : IconHeart,
+                onClick: () => handleFavoriteButtonClick(),
+              },
+            ]
+          : []),
         {
           label: 'Delete',
           Icon: IconTrash,

front/src/modules/ui/context-menu/components/ContextMenu.tsx

@@ -37,7 +37,7 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
   top: ${(props) => `${props.position.y}px`};
 
   transform: translateX(-50%);
-  width: 160px;
+  width: auto;
   z-index: 1;
 `;
 
@@ -60,13 +60,20 @@ export const ContextMenu = ({ selectedIds }: OwnProps) => {
   if (selectedIds.length === 0 || !contextMenuIsOpen) {
     return null;
   }
+
+  const width = contextMenuEntries.some(
+    (contextMenuEntry) => contextMenuEntry.label === 'Remove from favorites',
+  )
+    ? 200
+    : undefined;
+
   return (
     <StyledContainerContextMenu
       className="context-menu"
       ref={wrapperRef}
       position={contextMenuPosition}
     >
-      <StyledDropdownMenu data-select-disable>
+      <StyledDropdownMenu data-select-disable width={width}>
         <StyledDropdownMenuItemsContainer>
           {contextMenuEntries.map((item) => (
             <ContextMenuItem

front/src/modules/ui/icon/index.ts

@@ -41,6 +41,7 @@ export {
   IconForbid,
   IconGripVertical,
   IconHeart,
+  IconHeartOff,
   IconHelpCircle,
   IconInbox,
   IconLayoutKanban,