feat: add option to remove articles from custom feed (#4013)

dailydotdev · Jan 10, 2025 · e5f1c7f · e5f1c7f
1 parent d4e78a7
commit e5f1c7f
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 14 deletions.
diff --git 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/...ared/src/components/feeds/FeedSettings/sections/FeedSettingsContentPreferencesSection.tsx b/...ared/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,18 +15,21 @@ import {
   TypographyType,
 } from '../../../typography/Typography';
 import { FilterCheckbox } from '../../../fields/FilterCheckbox';
+import { FeedType } from '../../../../graphql/feed';
 
 const ADVANCED_SETTINGS_KEY = 'advancedSettings';
 
 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}
             </FilterCheckbox>
           )}
-          <FilterCheckbox name="Articles" disabled checked>
-            Articles
-          </FilterCheckbox>
+          {articleSetting.length && feed?.type === FeedType.Custom ? (
+            <FilterCheckbox
+              name="Articles"
+              checked={
+                articleSetting.filter(({ id }) => selectedSettings[id] ?? true)
+                  .length > 0
+              }
+              onToggleCallback={(enabled) => {
+                onUpdateSettings(
+                  articleSetting.map(({ id }) => ({ id, enabled })),
+                );
+              }}
+            >
+              Articles
+            </FilterCheckbox>
+          ) : (
+            <FilterCheckbox name="Articles" disabled checked>
+              Articles
+            </FilterCheckbox>
+          )}
         </div>
       </div>
       <div className="flex flex-col gap-4">

diff --git 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
@@ -13,7 +13,7 @@ interface UseAdvancedSettings {
   selectedSettings: Record<string, boolean>;
   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],
   );