diff --git a/packages/shared/src/components/PostOptionsMenu.tsx b/packages/shared/src/components/PostOptionsMenu.tsx index f3c1e845bd..30e1fd882d 100644 --- a/packages/shared/src/components/PostOptionsMenu.tsx +++ b/packages/shared/src/components/PostOptionsMenu.tsx @@ -286,11 +286,22 @@ export default function PostOptionsMenu({ const isEnabled = checkSettingsEnabledState(video?.id); const icon = isEnabled ? '⛔️' : '✅'; const label = isEnabled ? 'blocked' : 'unblocked'; - await onUpdateSettings(video.id, !isEnabled); + await onUpdateSettings([ + { + id: video.id, + enabled: !isEnabled, + }, + ]); await showMessageAndRemovePost( `${icon} Video content ${label}`, postIndex, - () => onUpdateSettings(video.id, isEnabled), + () => + onUpdateSettings([ + { + id: video.id, + enabled: !isEnabled, + }, + ]), ); }; diff --git a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentPreferencesSection.tsx b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentPreferencesSection.tsx index 39453f08db..c1706f3578 100644 --- a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentPreferencesSection.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentPreferencesSection.tsx @@ -4,6 +4,7 @@ import { FeedSettingsEditContext } from '../FeedSettingsEditContext'; import useFeedSettings from '../../../../hooks/useFeedSettings'; import { useAdvancedSettings } from '../../../../hooks/feed/useAdvancedSettings'; import { + getArticleSettings, getContentCurationList, getContentSourceList, getVideoSetting, @@ -14,6 +15,7 @@ import { TypographyType, } from '../../../typography/Typography'; import { FilterCheckbox } from '../../../fields/FilterCheckbox'; +import { FeedType } from '../../../../graphql/feed'; const ADVANCED_SETTINGS_KEY = 'advancedSettings'; @@ -21,11 +23,13 @@ export const FeedSettingsContentPreferencesSection = (): ReactElement => { const { feed } = useContext(FeedSettingsEditContext); const { advancedSettings } = useFeedSettings({ feedId: feed?.id }); const videoSetting = getVideoSetting(advancedSettings); + const articleSetting = getArticleSettings(advancedSettings); const { selectedSettings, onToggleSettings, checkSourceBlocked, onToggleSource, + onUpdateSettings, } = useAdvancedSettings({ feedId: feed?.id }); const contentSourceList = useMemo( @@ -70,9 +74,26 @@ export const FeedSettingsContentPreferencesSection = (): ReactElement => { {videoSetting.title} )} - - Articles - + {articleSetting.length && feed?.type === FeedType.Custom ? ( + selectedSettings[id] ?? true) + .length > 0 + } + onToggleCallback={(enabled) => { + onUpdateSettings( + articleSetting.map(({ id }) => ({ id, enabled })), + ); + }} + > + Articles + + ) : ( + + Articles + + )}
diff --git a/packages/shared/src/components/filters/helpers.ts b/packages/shared/src/components/filters/helpers.ts index df7d0162c2..718ba2674e 100644 --- a/packages/shared/src/components/filters/helpers.ts +++ b/packages/shared/src/components/filters/helpers.ts @@ -38,3 +38,10 @@ export const getVideoSetting = ( advancedSettings: AdvancedSettings[], ): AdvancedSettings => advancedSettings?.find(({ title }) => title === 'Videos'); + +export const getArticleSettings = ( + advancedSettings: AdvancedSettings[], +): AdvancedSettings[] => + advancedSettings?.filter(({ title }) => + ['Article', 'Share', 'Freeform', 'Welcome', 'Collection'].includes(title), + ) || []; diff --git a/packages/shared/src/hooks/feed/useAdvancedSettings.ts b/packages/shared/src/hooks/feed/useAdvancedSettings.ts index 95403bf6a1..8c4e1d4a70 100644 --- a/packages/shared/src/hooks/feed/useAdvancedSettings.ts +++ b/packages/shared/src/hooks/feed/useAdvancedSettings.ts @@ -13,7 +13,7 @@ interface UseAdvancedSettings { selectedSettings: Record; onToggleSettings(id: number, state: boolean): void; onToggleSource(source: Source): void; - onUpdateSettings(id: number, state: boolean): void; + onUpdateSettings(updatedSettings: { id: number; enabled: boolean }[]): void; checkSourceBlocked(source: Source): boolean; } @@ -37,16 +37,18 @@ export const useAdvancedSettings = ( ); const onUpdateSettings = useCallback( - (id: number, enabled: boolean) => { - logEvent({ - event_name: `toggle ${enabled ? 'on' : 'off'}`, - target_type: 'advanced setting', - target_id: id.toString(), - extra: JSON.stringify({ origin: 'advanced settings filter' }), + (updatedSettings: { id: number; enabled: boolean }[]) => { + updatedSettings.forEach(({ id, enabled }) => { + logEvent({ + event_name: `toggle ${enabled ? 'on' : 'off'}`, + target_type: 'advanced setting', + target_id: id.toString(), + extra: JSON.stringify({ origin: 'advanced settings filter' }), + }); }); return updateAdvancedSettings({ - advancedSettings: [{ id, enabled }], + advancedSettings: updatedSettings, }); }, [logEvent, updateAdvancedSettings], @@ -62,7 +64,7 @@ export const useAdvancedSettings = ( const enabled = !(selectedSettings[id] ?? defaultEnabledState); - return onUpdateSettings(id, enabled); + return onUpdateSettings([{ id, enabled }]); }, [alerts?.filter, selectedSettings, onUpdateSettings, updateAlerts, user], );