Update dismissal handling

src/features/liveEvents/components/DiscoverFeedLiveEventFeedsAndTrendingBanner.tsx

@@ -1,18 +1,16 @@
 import {View} from 'react-native'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useTrendingSettings} from '#/state/preferences/trending'
 import {atoms as a, useLayoutBreakpoints} from '#/alf'
 import {Button} from '#/components/Button'
-import {DotGrid_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
+import {TimesLarge_Stroke2_Corner0_Rounded as CloseIcon} from '#/components/icons/Times'
 import {TrendingInterstitial} from '#/components/interstitials/Trending'
+import * as Toast from '#/components/Toast'
 import {LiveEventFeedCardWide} from '#/features/liveEvents/components/LiveEventFeedCardWide'
-import {
-  LiveEventFeedOptionsMenu,
-  useDialogControl,
-} from '#/features/liveEvents/components/LiveEventFeedOptionsMenu'
 import {useUserPreferencedLiveEvents} from '#/features/liveEvents/context'
+import {useUpdateLiveEventPreferences} from '#/features/liveEvents/preferences'
 import {type LiveEventFeed} from '#/features/liveEvents/types'
 
 export function DiscoverFeedLiveEventFeedsAndTrendingBanner() {
@@ -38,9 +36,37 @@ export function DiscoverFeedLiveEventFeedsAndTrendingBanner() {
 
 function Inner({feed}: {feed: LiveEventFeed}) {
   const {_} = useLingui()
-  const optionsMenuControl = useDialogControl()
   const layout = feed.layouts.wide
 
+  const {mutate: update, variables} = useUpdateLiveEventPreferences({
+    feed,
+    metricContext: 'discover',
+    onUpdateSuccess({undoAction}) {
+      Toast.show(
+        <Toast.Outer>
+          <Toast.Icon />
+          <Toast.Text>
+            <Trans>You got it ;)</Trans>
+          </Toast.Text>
+          {undoAction && (
+            <Toast.Action
+              label={_(msg`Undo`)}
+              onPress={() => {
+                if (undoAction) {
+                  update(undoAction)
+                }
+              }}>
+              <Trans>Undo</Trans>
+            </Toast.Action>
+          )}
+        </Toast.Outer>,
+        {type: 'success'},
+      )
+    },
+  })
+
+  if (variables) return null
+
   return (
     <>
       <View style={[a.px_lg, a.pt_md, a.pb_xs]}>
@@ -48,12 +74,12 @@ function Inner({feed}: {feed: LiveEventFeed}) {
           <LiveEventFeedCardWide feed={feed} metricContext="discover" />
 
           <Button
-            label={_(msg`Configure live event banner`)}
+            label={_(msg`Dismiss live event banner`)}
             size="tiny"
             shape="round"
             style={[a.absolute, a.z_10, {top: 6, right: 6}]}
             onPress={() => {
-              optionsMenuControl.open()
+              update({type: 'hideFeed', id: feed.id})
             }}>
             {({hovered, pressed}) => (
               <>
@@ -68,22 +94,12 @@ function Inner({feed}: {feed: LiveEventFeed}) {
                     },
                   ]}
                 />
-                <EllipsisIcon
-                  size="sm"
-                  fill={layout.textColor}
-                  style={[a.z_20]}
-                />
+                <CloseIcon size="xs" fill={layout.textColor} style={[a.z_20]} />
               </>
             )}
           </Button>
         </View>
       </View>
-
-      <LiveEventFeedOptionsMenu
-        feed={feed}
-        control={optionsMenuControl}
-        metricContext="discover"
-      />
     </>
   )
 }

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -26,7 +26,6 @@ import {Window_Stroke2_Corner2_Rounded as WindowIcon} from '#/components/icons/W
 import * as Layout from '#/components/Layout'
 import {useAnalytics} from '#/analytics'
 import {IS_NATIVE} from '#/env'
-import {LiveEventFeedsSettingsToggle} from '#/features/liveEvents/components/LiveEventFeedsSettingsToggle'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -150,7 +149,6 @@ 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`)}
@@ -173,12 +171,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
                 </SettingsList.Item>
               </Toggle.Item>
             </>
-          ) : (
-            <>
-              <SettingsList.Divider />
-              <LiveEventFeedsSettingsToggle />
-            </>
-          )}
+          ) : null}
         </SettingsList.Container>
       </Layout.Content>
     </Layout.Screen>