forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Unify profile tabs and lists screens placeholders (#4315)
authored by
Bartosz Kaszubowski
and committed by
GitHub
44670c7e
8d832342
+38
-46
+7
-11
src/view/com/feeds/ProfileFeedgens.tsx
+7
-11
src/view/com/feeds/ProfileFeedgens.tsx
···
7
7
View,
8
8
ViewStyle,
9
9
} from 'react-native'
10
-
import {msg, Trans} from '@lingui/macro'
10
+
import {msg} from '@lingui/macro'
11
11
import {useLingui} from '@lingui/react'
12
12
import {useQueryClient} from '@tanstack/react-query'
13
13
···
18
18
import {hydrateFeedGenerator} from '#/state/queries/feed'
19
19
import {usePreferencesQuery} from '#/state/queries/preferences'
20
20
import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
21
-
import {usePalette} from 'lib/hooks/usePalette'
22
21
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
22
+
import {EmptyState} from 'view/com/util/EmptyState'
23
23
import {ErrorMessage} from '../util/error/ErrorMessage'
24
24
import {List, ListRef} from '../util/List'
25
25
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
26
-
import {Text} from '../util/text/Text'
27
26
import {FeedSourceCardLoaded} from './FeedSourceCard'
28
27
29
28
const LOADING = {_reactKey: '__loading__'}
···
52
51
{did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
53
52
ref,
54
53
) {
55
-
const pal = usePalette('default')
56
54
const {_} = useLingui()
57
55
const theme = useTheme()
58
56
const [isPTRing, setIsPTRing] = React.useState(false)
···
138
136
({item, index}: ListRenderItemInfo<any>) => {
139
137
if (item === EMPTY) {
140
138
return (
141
-
<View
139
+
<EmptyState
140
+
icon="hashtag"
141
+
message={_(msg`You have no feeds.`)}
142
142
testID="listsEmpty"
143
-
style={[{padding: 18, borderTopWidth: 1}, pal.border]}>
144
-
<Text style={pal.textLight}>
145
-
<Trans>You have no feeds.</Trans>
146
-
</Text>
147
-
</View>
143
+
/>
148
144
)
149
145
} else if (item === ERROR_ITEM) {
150
146
return (
···
176
172
}
177
173
return null
178
174
},
179
-
[error, refetch, onPressRetryLoadMore, pal, preferences, _],
175
+
[error, refetch, onPressRetryLoadMore, preferences, _],
180
176
)
181
177
182
178
React.useEffect(() => {
+9
-10
src/view/com/lists/MyLists.tsx
+9
-10
src/view/com/lists/MyLists.tsx
···
9
9
ViewStyle,
10
10
} from 'react-native'
11
11
import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
12
-
import {Trans} from '@lingui/macro'
12
+
import {msg} from '@lingui/macro'
13
+
import {useLingui} from '@lingui/react'
13
14
14
15
import {cleanError} from '#/lib/strings/errors'
15
16
import {logger} from '#/logger'
···
17
18
import {useAnalytics} from 'lib/analytics/analytics'
18
19
import {usePalette} from 'lib/hooks/usePalette'
19
20
import {s} from 'lib/styles'
21
+
import {EmptyState} from 'view/com/util/EmptyState'
20
22
import {ErrorMessage} from '../util/error/ErrorMessage'
21
23
import {List} from '../util/List'
22
-
import {Text} from '../util/text/Text'
23
24
import {ListCard} from './ListCard'
24
-
import hairlineWidth = StyleSheet.hairlineWidth
25
25
26
26
const LOADING = {_reactKey: '__loading__'}
27
27
const EMPTY = {_reactKey: '__empty__'}
···
42
42
}) {
43
43
const pal = usePalette('default')
44
44
const {track} = useAnalytics()
45
+
const {_} = useLingui()
45
46
const [isPTRing, setIsPTRing] = React.useState(false)
46
47
const {data, isFetching, isFetched, isError, error, refetch} =
47
48
useMyListsQuery(filter)
···
83
84
({item, index}: {item: any; index: number}) => {
84
85
if (item === EMPTY) {
85
86
return (
86
-
<View
87
+
<EmptyState
87
88
key={item._reactKey}
89
+
icon="list-ul"
90
+
message={_(msg`You have no lists.`)}
88
91
testID="listsEmpty"
89
-
style={[{padding: 18, borderTopWidth: hairlineWidth}, pal.border]}>
90
-
<Text style={pal.textLight}>
91
-
<Trans>You have no lists.</Trans>
92
-
</Text>
93
-
</View>
92
+
/>
94
93
)
95
94
} else if (item === ERROR_ITEM) {
96
95
return (
···
118
117
/>
119
118
)
120
119
},
121
-
[error, onRefresh, renderItem, pal],
120
+
[error, onRefresh, renderItem, _],
122
121
)
123
122
124
123
if (inline) {
+8
-10
src/view/com/lists/ProfileLists.tsx
+8
-10
src/view/com/lists/ProfileLists.tsx
···
7
7
View,
8
8
ViewStyle,
9
9
} from 'react-native'
10
-
import {msg, Trans} from '@lingui/macro'
10
+
import {msg} from '@lingui/macro'
11
11
import {useLingui} from '@lingui/react'
12
12
import {useQueryClient} from '@tanstack/react-query'
13
13
···
17
17
import {isNative} from '#/platform/detection'
18
18
import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists'
19
19
import {useAnalytics} from 'lib/analytics/analytics'
20
-
import {usePalette} from 'lib/hooks/usePalette'
21
20
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
21
+
import {EmptyState} from 'view/com/util/EmptyState'
22
22
import {ErrorMessage} from '../util/error/ErrorMessage'
23
23
import {List, ListRef} from '../util/List'
24
24
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
25
-
import {Text} from '../util/text/Text'
26
25
import {ListCard} from './ListCard'
27
26
28
27
const LOADING = {_reactKey: '__loading__'}
···
49
48
{did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
50
49
ref,
51
50
) {
52
-
const pal = usePalette('default')
53
51
const theme = useTheme()
54
52
const {track} = useAnalytics()
55
53
const {_} = useLingui()
···
142
140
({item, index}: ListRenderItemInfo<any>) => {
143
141
if (item === EMPTY) {
144
142
return (
145
-
<View testID="listsEmpty" style={[{padding: 18}, pal.border]}>
146
-
<Text style={pal.textLight}>
147
-
<Trans>You have no lists.</Trans>
148
-
</Text>
149
-
</View>
143
+
<EmptyState
144
+
icon="list-ul"
145
+
message={_(msg`You have no lists.`)}
146
+
testID="listsEmpty"
147
+
/>
150
148
)
151
149
} else if (item === ERROR_ITEM) {
152
150
return (
···
176
174
/>
177
175
)
178
176
},
179
-
[error, refetch, onPressRetryLoadMore, pal, _],
177
+
[error, refetch, onPressRetryLoadMore, _],
180
178
)
181
179
182
180
React.useEffect(() => {
+2
-6
src/view/com/modals/UserAddRemoveLists.tsx
+2
-6
src/view/com/modals/UserAddRemoveLists.tsx
···
61
61
return [pal.border, {height: screenHeight / 1.5}]
62
62
}
63
63
64
-
return [pal.border, {flex: 1}]
64
+
return [pal.border, {flex: 1, borderTopWidth: 1}]
65
65
}, [pal.border, screenHeight])
66
66
67
67
return (
···
233
233
textAlign: 'center',
234
234
fontWeight: 'bold',
235
235
fontSize: 24,
236
-
marginBottom: 10,
237
-
},
238
-
list: {
239
-
flex: 1,
240
-
borderTopWidth: 1,
236
+
marginBottom: 12,
241
237
},
242
238
btns: {
243
239
position: 'relative',
+6
-3
src/view/com/util/EmptyState.tsx
+6
-3
src/view/com/util/EmptyState.tsx
···
8
8
import {Text} from './text/Text'
9
9
import {UserGroupIcon} from 'lib/icons'
10
10
import {usePalette} from 'lib/hooks/usePalette'
11
+
import {isWeb} from 'platform/detection'
11
12
12
13
export function EmptyState({
13
14
testID,
···
22
23
}) {
23
24
const pal = usePalette('default')
24
25
return (
25
-
<View testID={testID} style={[styles.container, pal.border, style]}>
26
+
<View
27
+
testID={testID}
28
+
style={[styles.container, isWeb && pal.border, style]}>
26
29
<View style={styles.iconContainer}>
27
30
{icon === 'user-group' ? (
28
31
<UserGroupIcon size="64" style={styles.icon} />
···
48
51
49
52
const styles = StyleSheet.create({
50
53
container: {
51
-
paddingVertical: 20,
54
+
paddingVertical: 24,
52
55
paddingHorizontal: 36,
53
-
borderTopWidth: 1,
56
+
borderTopWidth: isWeb ? 1 : undefined,
54
57
},
55
58
iconContainer: {
56
59
flexDirection: 'row',
+6
-6
src/view/screens/Lists.tsx
+6
-6
src/view/screens/Lists.tsx
···
52
52
<View style={s.hContentRegion} testID="listsScreen">
53
53
<SimpleViewHeader
54
54
showBackButton={isMobile}
55
-
style={
56
-
!isMobile && [
57
-
pal.border,
58
-
{borderLeftWidth: hairlineWidth, borderRightWidth: hairlineWidth},
59
-
]
60
-
}>
55
+
style={[
56
+
pal.border,
57
+
isMobile
58
+
? {borderBottomWidth: hairlineWidth}
59
+
: {borderLeftWidth: hairlineWidth, borderRightWidth: hairlineWidth},
60
+
]}>
61
61
<View style={{flex: 1}}>
62
62
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
63
63
<Trans>User Lists</Trans>