From 3ee2e5ae9b30081a6bb0272cec6e8eb5802e2633 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 6 Dec 2022 11:03:43 +0100
Subject: [PATCH] fix: favorites column visibility (#2605)

Co-authored-by: sjaanus <sellinjaanus@gmail.com>
---
 .../FavoriteIconHeader/FavoriteIconHeader.tsx    | 16 +++++++++++-----
 .../ProjectFeatureToggles.tsx                    |  9 +--------
 frontend/src/hooks/usePinnedFavorites.ts         |  6 +++---
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx b/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
index 28668bce38..c8dc95bcb4 100644
--- a/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
+++ b/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { useState, VFC } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import {
     Star as StarIcon,
@@ -8,17 +8,23 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 
 interface IFavoriteIconHeaderProps {
     isActive: boolean;
-    onClick: () => void;
+    onClick: (isPinned: boolean) => void;
 }
 
 export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
     isActive = false,
     onClick,
 }) => {
+    const [internalState, setInternalState] = useState(isActive);
+    const onToggle = () => {
+        setInternalState(!internalState);
+        onClick(!internalState);
+    };
+
     return (
         <Tooltip
             title={
-                isActive
+                internalState
                     ? 'Unpin favorite features from the top'
                     : 'Pin favorite features to the top'
             }
@@ -31,11 +37,11 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}
-                onClick={onClick}
+                onClick={onToggle}
                 size="small"
             >
                 <ConditionallyRender
-                    condition={isActive}
+                    condition={internalState}
                     show={<StarIcon fontSize="small" />}
                     elseShow={<StarBorderIcon fontSize="small" />}
                 />
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index 0631db386e..704342fe1e 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -302,14 +302,7 @@ export const ProjectFeatureToggles = ({
                 disableSortBy: true,
             },
         ],
-        [
-            projectId,
-            environments,
-            loading,
-            onToggle,
-            isFavoritesPinned,
-            uiConfig?.flags?.favorites,
-        ]
+        [projectId, environments, loading, onToggle, uiConfig?.flags?.favorites]
     );
 
     const [searchValue, setSearchValue] = useState(
diff --git a/frontend/src/hooks/usePinnedFavorites.ts b/frontend/src/hooks/usePinnedFavorites.ts
index c964088159..ed2b8512ac 100644
--- a/frontend/src/hooks/usePinnedFavorites.ts
+++ b/frontend/src/hooks/usePinnedFavorites.ts
@@ -36,13 +36,13 @@ export const usePinnedFavorites = (initialState = false) => {
     const [isFavoritesPinned, setIsFavoritesPinned] = useState(initialState);
     const { trackEvent } = usePlausibleTracker();
 
-    const onChangeIsFavoritePinned = () => {
+    const onChangeIsFavoritePinned = (newState: boolean) => {
         trackEvent('favorite', {
             props: {
-                eventType: `features ${isFavoritesPinned ? 'un' : ''}pinned `,
+                eventType: `features ${!newState ? 'un' : ''}pinned `,
             },
         });
-        setIsFavoritesPinned(!isFavoritesPinned);
+        setIsFavoritesPinned(newState);
     };
 
     const enhancedSortTypes = useMemo(() => {