diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index 92e2375f6c3..c89f270b177 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx @@ -25,7 +25,7 @@ import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/FavoriteIconCell'; import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker'; +import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage'; export const featuresPlaceholder: FeatureSchema[] = Array(15).fill({ name: 'Name of the feature', @@ -43,7 +43,7 @@ const defaultSort: SortingRule = { id: 'createdAt' }; const { value: storedParams, setValue: setStoredParams } = createLocalStorage( 'FeatureToggleListTable:v1', - { ...defaultSort, favorites: false } + defaultSort ); export const FeatureToggleListTable: VFC = () => { @@ -64,11 +64,13 @@ export const FeatureToggleListTable: VFC = () => { hiddenColumns: ['description'], globalFilter: searchParams.get('search') || '', })); + const { value: globalStore, setValue: setGlobalStore } = + useGlobalLocalStorage(); const { isFavoritesPinned, sortTypes, onChangeIsFavoritePinned } = usePinnedFavorites( searchParams.has('favorites') ? searchParams.get('favorites') === 'true' - : storedParams.favorites + : globalStore.favorites ); const [searchValue, setSearchValue] = useState(initialState.globalFilter); const { favorite, unfavorite } = useFavoriteFeaturesApi(); @@ -244,8 +246,11 @@ export const FeatureToggleListTable: VFC = () => { setStoredParams({ id: sortBy[0].id, desc: sortBy[0].desc || false, - favorites: isFavoritesPinned || false, }); + setGlobalStore(params => ({ + ...params, + favorites: Boolean(isFavoritesPinned), + })); }, [sortBy, searchValue, setSearchParams, isFavoritesPinned]); return ( diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx index 7ea95be2475..580cb6bf9b1 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -44,6 +44,7 @@ import { useStyles } from './ProjectFeatureToggles.styles'; import { usePinnedFavorites } from 'hooks/usePinnedFavorites'; import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi'; import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell'; +import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage'; interface IProjectFeatureTogglesProps { features: IProject['features']; @@ -67,7 +68,6 @@ const staticColumns = ['Actions', 'name', 'favorite']; const defaultSort: SortingRule & { columns?: string[]; - favorites?: boolean; } = { id: 'createdAt' }; export const ProjectFeatureToggles = ({ @@ -97,6 +97,8 @@ export const ProjectFeatureToggles = ({ `${projectId}:FeatureToggleListTable:v1`, defaultSort ); + const { value: globalStore, setValue: setGlobalStore } = + useGlobalLocalStorage(); const navigate = useNavigate(); const [searchParams, setSearchParams] = useSearchParams(); const { uiConfig } = useUiConfig(); @@ -110,7 +112,7 @@ export const ProjectFeatureToggles = ({ usePinnedFavorites( searchParams.has('favorites') ? searchParams.get('favorites') === 'true' - : storedParams.favorites + : globalStore.favorites ); const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } = useFeatureApi(); @@ -469,7 +471,10 @@ export const ProjectFeatureToggles = ({ id: sortBy[0].id, desc: sortBy[0].desc || false, columns: tableState.columns.split(','), - favorites: isFavoritesPinned || false, + })); + setGlobalStore(params => ({ + ...params, + favorites: Boolean(isFavoritesPinned), })); // eslint-disable-next-line react-hooks/exhaustive-deps }, [ diff --git a/frontend/src/hooks/useGlobalLocalStorage.ts b/frontend/src/hooks/useGlobalLocalStorage.ts new file mode 100644 index 00000000000..590583e25a6 --- /dev/null +++ b/frontend/src/hooks/useGlobalLocalStorage.ts @@ -0,0 +1,17 @@ +import { createLocalStorage } from 'utils/createLocalStorage'; + +interface IGlobalStore { + favorites?: boolean; +} + +export const useGlobalLocalStorage = () => { + const { value, setValue } = createLocalStorage( + 'global:v1', + {} + ); + + return { + value, + setValue, + }; +};