review

apps/meteor/client/hooks/useFeaturePreviewEnableQuery.ts

@@ -1,27 +1,28 @@
 import type { FeaturePreviewProps } from '@rocket.chat/ui-client';
+import { useMemo } from 'react';
 
-export const useFeaturePreviewEnableQuery = (features: FeaturePreviewProps[]) => {
-	return Object.entries(
-		features
-			.map((item) => {
-				if (!item.enableQuery) {
-					return item;
-				}
-
-				const expected = item.enableQuery.value;
-				const received = features.find((el) => el.name === item.enableQuery?.name)?.value;
-				if (expected !== received) {
-					item.disabled = true;
-					item.value = false;
-				} else {
-					item.disabled = false;
-				}
+const handleFeaturePreviewEnableQuery = (item: FeaturePreviewProps, _: any, features: FeaturePreviewProps[]) => {
+	if (item.enableQuery) {
+		const expected = item.enableQuery.value;
+		const received = features.find((el) => el.name === item.enableQuery?.name)?.value;
+		if (expected !== received) {
+			item.disabled = true;
+			item.value = false;
+		} else {
+			item.disabled = false;
+		}
+	}
+	return item;
+};
 
-				return item;
-			})
-			.reduce((result, currentValue) => {
-				(result[currentValue.group] = result[currentValue.group] || []).push(currentValue);
-				return result;
-			}, {} as Record<FeaturePreviewProps['group'], FeaturePreviewProps[]>),
+const groupFeaturePreview = (features: FeaturePreviewProps[]) =>
+	Object.entries(
+		features.reduce((result, currentValue) => {
+			(result[currentValue.group] = result[currentValue.group] || []).push(currentValue);
+			return result;
+		}, {} as Record<FeaturePreviewProps['group'], FeaturePreviewProps[]>),
 	);
+
+export const useFeaturePreviewEnableQuery = (features: FeaturePreviewProps[]) => {
+	return useMemo(() => groupFeaturePreview(features.map(handleFeaturePreviewEnableQuery)), [features]);
 };

packages/ui-client/src/components/FeaturePreview/FeaturePreviewBadge.tsx

@@ -1,7 +1,7 @@
 import { Badge } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 
-import { usePreferenceFeaturePreviewList } from '../../hooks/useFeaturePreviewList';
+import { usePreferenceFeaturePreviewList } from '../../hooks/usePreferenceFeaturePreviewList';
 
 const FeaturePreviewBadge = () => {
 	const t = useTranslation();

packages/ui-client/src/hooks/useDefaultSettingFeaturePreviewList.ts

@@ -0,0 +1,12 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import { parseSetting, useFeaturePreviewList } from './useFeaturePreviewList';
+
+export const useDefaultSettingFeaturePreviewList = () => {
+	const featurePreviewSettingJSON = useSetting<string>('Accounts_Default_User_Preferences_featuresPreview');
+
+	const settingFeaturePreview = useMemo(() => parseSetting(featurePreviewSettingJSON), [featurePreviewSettingJSON]);
+
+	return useFeaturePreviewList(settingFeaturePreview ?? []);
+};

packages/ui-client/src/hooks/useFeaturePreview.ts

@@ -1,4 +1,5 @@
-import { type FeaturesAvailable, usePreferenceFeaturePreviewList } from './useFeaturePreviewList';
+import { type FeaturesAvailable } from './useFeaturePreviewList';
+import { usePreferenceFeaturePreviewList } from './usePreferenceFeaturePreviewList';
 
 export const useFeaturePreview = (featureName: FeaturesAvailable) => {
 	const { features } = usePreferenceFeaturePreviewList();

packages/ui-client/src/hooks/useFeaturePreviewList.ts

@@ -1,6 +1,4 @@
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useUserPreference, useSetting } from '@rocket.chat/ui-contexts';
-import { useMemo } from 'react';
 
 export type FeaturesAvailable =
 	| 'quickReactions'
@@ -88,36 +86,17 @@ export const defaultFeaturesPreview: FeaturePreviewProps[] = [
 export const enabledDefaultFeatures = defaultFeaturesPreview.filter((feature) => feature.enabled);
 
 // TODO: Remove this logic after we have a way to store object settings.
-const parseSetting = (setting: FeaturePreviewProps[] | string) => {
+export const parseSetting = (setting?: FeaturePreviewProps[] | string) => {
 	if (typeof setting === 'string') {
-		return JSON.parse(setting);
+		try {
+			return JSON.parse(setting) as FeaturePreviewProps[];
+		} catch (_) {
+			return;
+		}
 	}
 	return setting;
 };
 
-export const usePreferenceFeaturePreviewList = () => {
-	const featurePreviewEnabled = useSetting<boolean>('Accounts_AllowFeaturePreview');
-	const userFeaturesPreviewPreference = useUserPreference<FeaturePreviewProps[]>('featuresPreview');
-	const userFeaturesPreview = useMemo<FeaturePreviewProps[]>(
-		() => parseSetting(userFeaturesPreviewPreference!),
-		[userFeaturesPreviewPreference],
-	);
-	const { unseenFeatures, features } = useFeaturePreviewList(userFeaturesPreview);
-
-	if (!featurePreviewEnabled) {
-		return { unseenFeatures: 0, features: [] as FeaturePreviewProps[], featurePreviewEnabled };
-	}
-	return { unseenFeatures, features, featurePreviewEnabled };
-};
-
-export const useDefaultSettingFeaturePreviewList = () => {
-	const featurePreviewSettingJSON = useSetting<string>('Accounts_Default_User_Preferences_featuresPreview');
-
-	const settingFeaturePreview = useMemo<FeaturePreviewProps[]>(() => parseSetting(featurePreviewSettingJSON!), [featurePreviewSettingJSON]);
-
-	return useFeaturePreviewList(settingFeaturePreview);
-};
-
 export const useFeaturePreviewList = (featuresList: Pick<FeaturePreviewProps, 'name' | 'value'>[]) => {
 	const unseenFeatures = enabledDefaultFeatures.filter(
 		(defaultFeature) => !featuresList?.find((feature) => feature.name === defaultFeature.name),

packages/ui-client/src/hooks/useFeaturePreviewList.spec.tsx → packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.spec.tsx

@@ -1,7 +1,8 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { renderHook } from '@testing-library/react';
 
-import { usePreferenceFeaturePreviewList, enabledDefaultFeatures } from './useFeaturePreviewList';
+import { enabledDefaultFeatures } from './useFeaturePreviewList';
+import { usePreferenceFeaturePreviewList } from './usePreferenceFeaturePreviewList';
 
 it('should return the number of unseen features and Accounts_AllowFeaturePreview enabled ', () => {
 	const { result } = renderHook(() => usePreferenceFeaturePreviewList(), {

packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.ts

@@ -0,0 +1,16 @@
+import { useSetting, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import { FeaturePreviewProps, parseSetting, useFeaturePreviewList } from './useFeaturePreviewList';
+
+export const usePreferenceFeaturePreviewList = () => {
+	const featurePreviewEnabled = useSetting<boolean>('Accounts_AllowFeaturePreview');
+	const userFeaturesPreviewPreference = useUserPreference<FeaturePreviewProps[]>('featuresPreview');
+	const userFeaturesPreview = useMemo(() => parseSetting(userFeaturesPreviewPreference), [userFeaturesPreviewPreference]);
+	const { unseenFeatures, features } = useFeaturePreviewList(userFeaturesPreview ?? []);
+
+	if (!featurePreviewEnabled) {
+		return { unseenFeatures: 0, features: [] as FeaturePreviewProps[], featurePreviewEnabled };
+	}
+	return { unseenFeatures, features, featurePreviewEnabled };
+};