pyrox.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Allow users to dismiss sidebar LEF banner (#9753)
authored by
Eric Bailey
and committed by
GitHub
f82bc98d
3b780696
+86
-9
+86
-9
src/features/liveEvents/components/SidebarLiveEventFeedsBanner.tsx
+86
-9
src/features/liveEvents/components/SidebarLiveEventFeedsBanner.tsx
···
1
+
import {View} from 'react-native'
2
+
import {msg, Trans} from '@lingui/macro'
3
+
import {useLingui} from '@lingui/react'
4
+
5
+
import {atoms as a} from '#/alf'
6
+
import {Button} from '#/components/Button'
7
+
import {TimesLarge_Stroke2_Corner0_Rounded as CloseIcon} from '#/components/icons/Times'
8
+
import * as Toast from '#/components/Toast'
1
9
import {LiveEventFeedCardCompact} from '#/features/liveEvents/components/LiveEventFeedCardCompact'
2
-
import {useLiveEvents} from '#/features/liveEvents/context'
10
+
import {useUserPreferencedLiveEvents} from '#/features/liveEvents/context'
11
+
import {useUpdateLiveEventPreferences} from '#/features/liveEvents/preferences'
12
+
import {type LiveEventFeed} from '#/features/liveEvents/types'
3
13
4
14
export function SidebarLiveEventFeedsBanner() {
5
-
const events = useLiveEvents()
6
-
return events.feeds.map(feed => (
7
-
<LiveEventFeedCardCompact
8
-
key={feed.id}
9
-
feed={feed}
10
-
metricContext="sidebar"
11
-
/>
12
-
))
15
+
const events = useUserPreferencedLiveEvents()
16
+
return events.feeds.map(feed => <Inner key={feed.id} feed={feed} />)
17
+
}
18
+
19
+
function Inner({feed}: {feed: LiveEventFeed}) {
20
+
const {_} = useLingui()
21
+
const layout = feed.layouts.wide
22
+
23
+
const {mutate: update, variables} = useUpdateLiveEventPreferences({
24
+
feed,
25
+
metricContext: 'sidebar',
26
+
onUpdateSuccess({undoAction}) {
27
+
Toast.show(
28
+
<Toast.Outer>
29
+
<Toast.Icon />
30
+
<Toast.Text>
31
+
{undoAction ? (
32
+
<Trans>Live event hidden</Trans>
33
+
) : (
34
+
<Trans>Live event unhidden</Trans>
35
+
)}
36
+
</Toast.Text>
37
+
{undoAction && (
38
+
<Toast.Action
39
+
label={_(msg`Undo`)}
40
+
onPress={() => {
41
+
if (undoAction) {
42
+
update(undoAction)
43
+
}
44
+
}}>
45
+
<Trans>Undo</Trans>
46
+
</Toast.Action>
47
+
)}
48
+
</Toast.Outer>,
49
+
{type: 'success'},
50
+
)
51
+
},
52
+
})
53
+
54
+
if (variables) return null
55
+
56
+
return (
57
+
<View style={[a.relative]}>
58
+
<LiveEventFeedCardCompact feed={feed} metricContext="sidebar" />
59
+
60
+
<View
61
+
style={[a.justify_center, a.absolute, {top: 0, right: 6, bottom: 0}]}>
62
+
<Button
63
+
label={_(msg`Dismiss live event banner`)}
64
+
size="tiny"
65
+
shape="round"
66
+
style={[a.z_10]}
67
+
onPress={() => {
68
+
update({type: 'hideFeed', id: feed.id})
69
+
}}>
70
+
{({hovered, pressed}) => (
71
+
<>
72
+
<View
73
+
style={[
74
+
a.absolute,
75
+
a.inset_0,
76
+
a.rounded_full,
77
+
{
78
+
backgroundColor: layout.overlayColor,
79
+
opacity: hovered || pressed ? 0.8 : 0.6,
80
+
},
81
+
]}
82
+
/>
83
+
<CloseIcon size="xs" fill={layout.textColor} style={[a.z_20]} />
84
+
</>
85
+
)}
86
+
</Button>
87
+
</View>
88
+
</View>
89
+
)
13
90
}