favorite for three dot menu

web/src/components/features/list/FavoriteStar.tsx

@@ -37,26 +37,7 @@ export const FavoriteStar: React.FC<{
   className?: string;
   iconStyle?: 'default' | 'tertiary';
 }> = React.memo(({ title: name, id, type, className = '', iconStyle = 'default' }) => {
-  const { data: userFavorites } = useGetUserFavorites();
+  const { isFavorited, onFavoriteClick } = useFavoriteStar({ id, type, name });
-  const { mutateAsync: removeItemFromFavorite } = useDeleteUserFavorite();
-  const { mutateAsync: addItemToFavorite } = useAddUserFavorite();
-
-  const isFavorited = useMemo(() => {
-    return userFavorites?.some((favorite) => favorite.id === id || favorite.collection_id === id);
-  }, [userFavorites, id]);
-
-  const onFavoriteClick = useMemoizedFn(async (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!isFavorited)
-      return await addItemToFavorite({
-        asset_type: type,
-        id,
-        name
-      });
-
-    await removeItemFromFavorite(id);
-  });
 
   const tooltipText = isFavorited ? 'Remove from favorites' : 'Add to favorites';
 
@@ -82,3 +63,43 @@ export const FavoriteStar: React.FC<{
   );
 });
 FavoriteStar.displayName = 'FavoriteStar';
+
+export const useFavoriteStar = ({
+  id,
+  type,
+  name
+}: {
+  id: string;
+  type: ShareAssetType;
+  name: string;
+}) => {
+  const { data: userFavorites } = useGetUserFavorites();
+  const { mutateAsync: removeItemFromFavorite } = useDeleteUserFavorite();
+  const { mutateAsync: addItemToFavorite } = useAddUserFavorite();
+
+  const isFavorited = useMemo(() => {
+    return userFavorites?.some((favorite) => favorite.id === id || favorite.collection_id === id);
+  }, [userFavorites, id]);
+
+  console.log('userFavorites', isFavorited, userFavorites);
+
+  const onFavoriteClick = useMemoizedFn(async (e?: React.MouseEvent<HTMLButtonElement>) => {
+    e?.stopPropagation();
+    e?.preventDefault();
+    if (!isFavorited)
+      return await addItemToFavorite({
+        asset_type: type,
+        id,
+        name
+      });
+    await removeItemFromFavorite(id);
+  });
+
+  return useMemo(
+    () => ({
+      isFavorited,
+      onFavoriteClick
+    }),
+    [isFavorited, onFavoriteClick]
+  );
+};

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx

@@ -34,9 +34,10 @@ import { StatusNotRequestedIcon } from '@/assets';
 import { useSaveToDashboardDropdownContent } from '@/components/features/dropdowns/SaveToDashboardDropdown';
 import { useMemoizedFn } from '@/hooks';
 import { useSaveToCollectionsDropdownContent } from '@/components/features/dropdowns/SaveToCollectionsDropdown';
-import { VerificationStatus } from '@/api/asset_interfaces/share';
+import { ShareAssetType, VerificationStatus } from '@/api/asset_interfaces/share';
 import { useStatusDropdownContent } from '@/components/features/metrics/StatusBadgeIndicator/StatusDropdownContent';
 import { StatusBadgeIndicator } from '@/components/features/metrics/StatusBadgeIndicator';
+import { useFavoriteStar } from '@/components/features/list/FavoriteStar';
 
 export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }) => {
   const { mutateAsync: deleteMetric, isPending: isDeletingMetric } = useDeleteMetric();
@@ -47,6 +48,7 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }
   const versionHistoryItems = useVersionHistorySelectMenu({ metricId });
   const collectionSelectMenu = useCollectionSelectMenu({ metricId });
   const statusSelectMenu = useStatusSelectMenu({ metricId });
+  const favoriteMetric = useFavoriteMetric({ metricId });
 
   const items: DropdownItems = useMemo(
     () => [
@@ -54,23 +56,13 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }
         label: 'Share',
         value: 'share',
         icon: <ShareRight />,
-        items: [],
+        items: []
-        onClick: () => {
-          console.log('share metric');
-        }
       },
       statusSelectMenu,
       { type: 'divider' },
       dashboardSelectMenu,
       collectionSelectMenu,
-      {
+      favoriteMetric,
-        label: 'Add to favorites',
-        value: 'add-to-favorites',
-        icon: <Star />,
-        onClick: () => {
-          console.log('add to favorites');
-        }
-      },
       { type: 'divider' },
       {
         label: 'Edit chart',
@@ -138,12 +130,14 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }
     ],
     [
       dashboardSelectMenu,
-      deleteMetric,
       isDeletingMetric,
       metricId,
       openSuccessMessage,
       onSetSelectedFile,
-      versionHistoryItems
+      versionHistoryItems,
+      favoriteMetric,
+      statusSelectMenu,
+      collectionSelectMenu
     ]
   );
 
@@ -210,10 +204,7 @@ const useVersionHistorySelectMenu = ({ metricId }: { metricId: string }) => {
       label: `Version ${x.version_number}`,
       secondaryLabel: timeFromNow(x.updated_at, false),
       value: x.version_number.toString(),
-      selected: x.version_number === version_number,
+      selected: x.version_number === version_number
-      onClick: () => {
-        console.log('version history', x.version_number);
-      }
     }));
   }, [versions, version_number]);
 
@@ -308,3 +299,24 @@ const useStatusSelectMenu = ({ metricId }: { metricId: string }) => {
 
   return statusDropdownItem;
 };
+
+const useFavoriteMetric = ({ metricId }: { metricId: string }) => {
+  const { data: title } = useGetMetric(metricId, (x) => x.title);
+  const { isFavorited, onFavoriteClick } = useFavoriteStar({
+    id: metricId,
+    type: ShareAssetType.METRIC,
+    name: title || ''
+  });
+
+  const item: DropdownItem = useMemo(
+    () => ({
+      label: isFavorited ? 'Remove from favorites' : 'Add to favorites',
+      value: 'add-to-favorites',
+      icon: isFavorited ? <StarFilled /> : <Star />,
+      onClick: onFavoriteClick
+    }),
+    [isFavorited, onFavoriteClick]
+  );
+
+  return item;
+};