Add settings toggle

src/features/liveEvents/components/LiveEventFeedsSettingsToggle.tsx

@@ -0,0 +1,41 @@
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import * as Toggle from '#/components/forms/Toggle'
+import {Live_Stroke2_Corner0_Rounded as LiveIcon} from '#/components/icons/Live'
+import {
+  useLiveEventPreferences,
+  useUpdateLiveEventPreferences,
+} from '#/features/liveEvents/preferences'
+
+export function LiveEventFeedsSettingsToggle() {
+  const {_} = useLingui()
+  const {data: prefs} = useLiveEventPreferences()
+  const {
+    isPending,
+    data: updatedPrefs,
+    mutate: update,
+  } = useUpdateLiveEventPreferences()
+  const hideAllFeeds = !!(updatedPrefs || prefs)?.hideAllFeeds
+
+  return (
+    <Toggle.Item
+      name="enable_live_event_banner"
+      label={_(msg`Enable live event banner in your Discover feed`)}
+      value={!hideAllFeeds}
+      onChange={() => {
+        if (!isPending) {
+          update({type: 'toggleHideAllFeeds'})
+        }
+      }}>
+      <SettingsList.Item>
+        <SettingsList.ItemIcon icon={LiveIcon} />
+        <SettingsList.ItemText>
+          <Trans>Enable live event banner</Trans>
+        </SettingsList.ItemText>
+        <Toggle.Platform />
+      </SettingsList.Item>
+    </Toggle.Item>
+  )
+}

src/features/liveEvents/preferences.ts

@@ -1,5 +1,5 @@
 import {useEffect} from 'react'
-import {type Agent} from '@atproto/api'
+import {type Agent, type AppBskyActorDefs} from '@atproto/api'
 import {useMutation, useQueryClient} from '@tanstack/react-query'
 
 import {logger} from '#/logger'
@@ -53,7 +53,11 @@ export function useUpdateLiveEventPreferences(props?: {
   const queryClient = useQueryClient()
   const agent = useAgent()
 
-  return useMutation<void, Error, LiveEventPreferencesAction>({
+  return useMutation<
+    AppBskyActorDefs.LiveEventPreferences,
+    Error,
+    LiveEventPreferencesAction
+  >({
     onError: props?.onError,
     onSuccess: props?.onSuccess,
     mutationFn: async action => {
@@ -69,7 +73,7 @@ export function useUpdateLiveEventPreferences(props?: {
           break
         }
         case 'toggleHideAllFeeds': {
-          if (updated?.hideAllFeeds) {
+          if (updated!.hideAllFeeds) {
             logger.metric('liveEventFeed:hideAllFeeds', {})
           } else {
             logger.metric('liveEventFeed:unhideAllFeeds', {})
@@ -79,9 +83,11 @@ export function useUpdateLiveEventPreferences(props?: {
       }
 
       // triggers a refetch
-      await queryClient.invalidateQueries({
+      queryClient.invalidateQueries({
         queryKey: preferencesQueryKey,
       })
+
+      return updated!
     },
   })
 }

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -26,6 +26,7 @@ import {Play_Stroke2_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
 import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
 import {Window_Stroke2_Corner2_Rounded as WindowIcon} from '#/components/icons/Window'
 import * as Layout from '#/components/Layout'
+import {LiveEventFeedsSettingsToggle} from '#/features/liveEvents/components/LiveEventFeedsSettingsToggle'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -124,7 +125,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
               <Toggle.Platform />
             </SettingsList.Item>
           </Toggle.Item>
-          {trendingEnabled && (
+          {trendingEnabled ? (
             <>
               <SettingsList.Divider />
               <Toggle.Item
@@ -148,6 +149,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
                   <Toggle.Platform />
                 </SettingsList.Item>
               </Toggle.Item>
+              <LiveEventFeedsSettingsToggle />
               <Toggle.Item
                 name="show_trending_videos"
                 label={_(msg`Enable trending videos in your Discover feed`)}
@@ -170,6 +172,11 @@ export function ContentAndMediaSettingsScreen({}: Props) {
                 </SettingsList.Item>
               </Toggle.Item>
             </>
+          ) : (
+            <>
+              <SettingsList.Divider />
+              <LiveEventFeedsSettingsToggle />
+            </>
           )}
         </SettingsList.Container>
       </Layout.Content>