From 5d6734e35b468b163876d316f1b8186d41ebab4c Mon Sep 17 00:00:00 2001 From: capJavert Date: Fri, 20 Dec 2024 16:11:36 +0100 Subject: [PATCH] feat: add option to remove articles from custom feed --- .../shared/src/components/MainFeedLayout.tsx | 4 ++- .../shared/src/components/PostOptionsMenu.tsx | 15 +++++++++-- .../FeedSettingsContentPreferencesSection.tsx | 27 ++++++++++++++++--- .../shared/src/components/filters/helpers.ts | 7 +++++ .../src/hooks/feed/useAdvancedSettings.ts | 20 +++++++------- 5 files changed, 58 insertions(+), 15 deletions(-) diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx index 286d05937e..55642ded00 100644 --- a/packages/shared/src/components/MainFeedLayout.tsx +++ b/packages/shared/src/components/MainFeedLayout.tsx @@ -234,7 +234,9 @@ export default function MainFeedLayout({ }, }, [SharedFeedPage.CustomForm]: { - queryIfLogged: FEED_QUERY, + // when editing main feed load feed query + queryIfLogged: + router.query?.slugOrId === user?.id ? FEED_QUERY : CUSTOM_FEED_QUERY, variables: { feedId: (router.query?.slugOrId as string) || user?.id, }, diff --git a/packages/shared/src/components/PostOptionsMenu.tsx b/packages/shared/src/components/PostOptionsMenu.tsx index 2364549526..fefa670401 100644 --- a/packages/shared/src/components/PostOptionsMenu.tsx +++ b/packages/shared/src/components/PostOptionsMenu.tsx @@ -283,11 +283,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 0073277760..2936da8595 100644 --- a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentPreferencesSection.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentPreferencesSection.tsx @@ -3,6 +3,7 @@ import { FeedSettingsEditContext } from '../FeedSettingsEditContext'; import useFeedSettings from '../../../../hooks/useFeedSettings'; import { useAdvancedSettings } from '../../../../hooks/feed/useAdvancedSettings'; import { + getArticleSettings, getContentCurationList, getContentSourceList, getVideoSetting, @@ -13,6 +14,7 @@ import { TypographyType, } from '../../../typography/Typography'; import { FilterCheckbox } from '../../../fields/FilterCheckbox'; +import { FeedType } from '../../../../graphql/feed'; const ADVANCED_SETTINGS_KEY = 'advancedSettings'; @@ -20,11 +22,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( @@ -69,9 +73,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 d82ed1d35b..121841fde4 100644 --- a/packages/shared/src/components/filters/helpers.ts +++ b/packages/shared/src/components/filters/helpers.ts @@ -40,3 +40,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 2b64f982e2..03ddf00d4a 100644 --- a/packages/shared/src/hooks/feed/useAdvancedSettings.ts +++ b/packages/shared/src/hooks/feed/useAdvancedSettings.ts @@ -12,7 +12,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; } @@ -36,16 +36,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], @@ -61,7 +63,7 @@ export const useAdvancedSettings = ( const enabled = !(selectedSettings[id] ?? defaultEnabledState); - return onUpdateSettings(id, enabled); + return onUpdateSettings([{ id, enabled }]); }, [alerts?.filter, selectedSettings, onUpdateSettings, updateAlerts, user], );