From ce030e5683871ebcb07aea64a964a005439b1981 Mon Sep 17 00:00:00 2001
From: sjaanus <sellinjaanus@gmail.com>
Date: Thu, 1 Dec 2022 12:03:26 +0200
Subject: [PATCH] Favorite features

---
 .../FeatureToggleList/FeatureToggleListTable.tsx     |  3 ++-
 .../useFavoriteFeaturesApi/useFavoriteFeaturesApi.ts | 12 ++++++++++++
 frontend/src/hooks/usePinnedFavorites.ts             |  7 +++++++
 frontend/src/hooks/usePlausibleTracker.ts            |  6 +++++-
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index ed066d15c6c..5e32adab16d 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -25,6 +25,7 @@ import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi
 import { FavoriteIconCell } from './FavoriteIconCell/FavoriteIconCell';
 import { FavoriteIconHeader } from './FavoriteIconHeader/FavoriteIconHeader';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker';
 
 export const featuresPlaceholder: FeatureSchema[] = Array(15).fill({
     name: 'Name of the feature',
@@ -172,7 +173,7 @@ export const FeatureToggleListTable: VFC = () => {
                 accessor: 'description',
             },
         ],
-        [isFavoritesPinned]
+        [isFavoritesPinned, uiConfig?.flags?.favorites]
     );
 
     const {
diff --git a/frontend/src/hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi.ts b/frontend/src/hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi.ts
index d4b399fb8ef..130b3016d20 100644
--- a/frontend/src/hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi.ts
+++ b/frontend/src/hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi.ts
@@ -3,6 +3,7 @@ import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useFeatures } from 'hooks/api/getters/useFeatures/useFeatures';
 import useAPI from '../useApi/useApi';
+import { usePlausibleTracker } from '../../../usePlausibleTracker';
 
 export const useFavoriteFeaturesApi = () => {
     const { makeRequest, createRequest, errors, loading } = useAPI({
@@ -10,6 +11,7 @@ export const useFavoriteFeaturesApi = () => {
     });
     const { setToastData, setToastApiError } = useToast();
     const { refetchFeatures } = useFeatures();
+    const { trackEvent } = usePlausibleTracker();
 
     const favorite = useCallback(
         async (projectId: string, featureName: string) => {
@@ -27,6 +29,11 @@ export const useFavoriteFeaturesApi = () => {
                     title: 'Toggle added to favorites',
                     type: 'success',
                 });
+                trackEvent('favorite', {
+                    props: {
+                        eventType: `feature favorited`,
+                    },
+                });
                 refetchFeatures();
             } catch (error) {
                 setToastApiError(formatUnknownError(error));
@@ -51,6 +58,11 @@ export const useFavoriteFeaturesApi = () => {
                     title: 'Toggle removed from favorites',
                     type: 'success',
                 });
+                trackEvent('favorite', {
+                    props: {
+                        eventType: `feature unfavorited`,
+                    },
+                });
                 refetchFeatures();
             } catch (error) {
                 setToastApiError(formatUnknownError(error));
diff --git a/frontend/src/hooks/usePinnedFavorites.ts b/frontend/src/hooks/usePinnedFavorites.ts
index 9b28355055f..0d877d75f3c 100644
--- a/frontend/src/hooks/usePinnedFavorites.ts
+++ b/frontend/src/hooks/usePinnedFavorites.ts
@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { sortTypes } from 'utils/sortTypes';
 import type { Row, SortByFn } from 'react-table';
+import { usePlausibleTracker } from './usePlausibleTracker';
 
 type WithFavorite = {
     favorite: boolean;
@@ -33,8 +34,14 @@ export const sortTypesWithFavorites: Record<
  */
 export const usePinnedFavorites = (initialState = false) => {
     const [isFavoritesPinned, setIsFavoritesPinned] = useState(initialState);
+    const { trackEvent } = usePlausibleTracker();
 
     const onChangeIsFavoritePinned = () => {
+        trackEvent('favorite', {
+            props: {
+                eventType: `features ${isFavoritesPinned ? 'un' : ''}pinned `,
+            },
+        });
         setIsFavoritesPinned(!isFavoritesPinned);
     };
 
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index adda401e841..7d5832e3c6c 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -8,7 +8,11 @@ import { EventOptions, PlausibleOptions } from 'plausible-tracker';
  * @see https://plausible.io/docs/custom-event-goals#2-create-a-custom-event-goal-in-your-plausible-analytics-account
  * @example `'download | 'invite' | 'signup'`
  **/
-type CustomEvents = 'invite' | 'upgrade_plan_clicked' | 'change_request';
+type CustomEvents =
+    | 'invite'
+    | 'upgrade_plan_clicked'
+    | 'change_request'
+    | 'favorite';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);