1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import React from 'react'
import {View} from 'react-native'
import {TID} from '@atproto/common-web'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants'
import {isNative} from '#/platform/detection'
import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences'
import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
import {NavigationProp} from 'lib/routes/types'
import {CenteredView} from '#/view/com/util/Views'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {useHeaderOffset} from '#/components/hooks/useHeaderOffset'
import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
import {Link} from '#/components/Link'
import {Text} from '#/components/Typography'
export function NoFeedsPinned({
preferences,
}: {
preferences: UsePreferencesQueryResponse
}) {
const {_} = useLingui()
const headerOffset = useHeaderOffset()
const navigation = useNavigation<NavigationProp>()
const {isPending, mutateAsync: overwriteSavedFeeds} =
useOverwriteSavedFeedsMutation()
const addRecommendedFeeds = React.useCallback(async () => {
let skippedTimeline = false
let skippedDiscover = false
let remainingSavedFeeds = []
// remove first instance of both timeline and discover, since we're going to overwrite them
for (const savedFeed of preferences.savedFeeds) {
if (savedFeed.type === 'timeline' && !skippedTimeline) {
skippedTimeline = true
} else if (
savedFeed.value === DISCOVER_SAVED_FEED.value &&
!skippedDiscover
) {
skippedDiscover = true
} else {
remainingSavedFeeds.push(savedFeed)
}
}
const toSave = [
{
...DISCOVER_SAVED_FEED,
pinned: true,
id: TID.nextStr(),
},
{
...TIMELINE_SAVED_FEED,
pinned: true,
id: TID.nextStr(),
},
...remainingSavedFeeds,
]
await overwriteSavedFeeds(toSave)
}, [overwriteSavedFeeds, preferences.savedFeeds])
const onPressFeedsLink = React.useCallback(() => {
if (isNative) {
// Hack that's necessary due to how our navigators are set up.
navigation.navigate('FeedsTab')
navigation.popToTop()
return false
}
}, [navigation])
return (
<CenteredView sideBorders style={[a.h_full_vh]}>
<View
style={[
a.align_center,
a.h_full_vh,
a.py_3xl,
a.px_xl,
{
paddingTop: headerOffset + a.py_3xl.paddingTop,
},
]}>
<View style={[a.align_center, a.gap_sm, a.pb_xl]}>
<Text style={[a.text_xl, a.font_bold]}>
<Trans>Whoops!</Trans>
</Text>
<Text
style={[a.text_md, a.text_center, a.leading_snug, {maxWidth: 340}]}>
<Trans>
Looks like you unpinned all your feeds. But don't worry, you can
add some below 😄
</Trans>
</Text>
</View>
<View style={[a.flex_row, a.gap_md, a.justify_center, a.flex_wrap]}>
<Button
disabled={isPending}
label={_(msg`Apply default recommended feeds`)}
size="medium"
variant="solid"
color="primary"
onPress={addRecommendedFeeds}>
<ButtonIcon icon={Plus} position="left" />
<ButtonText>{_(msg`Add recommended feeds`)}</ButtonText>
</Button>
<Link
label={_(msg`Browse other feeds`)}
to="/feeds"
onPress={onPressFeedsLink}
size="medium"
variant="solid"
color="secondary">
<ButtonIcon icon={ListSparkle} position="left" />
<ButtonText>{_(msg`Browse other feeds`)}</ButtonText>
</Link>
</View>
</View>
</CenteredView>
)
}
|
