From 44670c7ee27c81fd4c78e990c3afda68639a015d Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Tue, 4 Jun 2024 01:05:26 +0200 Subject: [PATCH] Unify profile tabs and lists screens placeholders (#4315) --- src/view/com/feeds/ProfileFeedgens.tsx | 18 +++++++----------- src/view/com/lists/MyLists.tsx | 19 +++++++++---------- src/view/com/lists/ProfileLists.tsx | 18 ++++++++---------- src/view/com/modals/UserAddRemoveLists.tsx | 8 ++------ src/view/com/util/EmptyState.tsx | 9 ++++++--- src/view/screens/Lists.tsx | 12 ++++++------ 6 files changed, 38 insertions(+), 46 deletions(-) diff --git a/src/view/com/feeds/ProfileFeedgens.tsx b/src/view/com/feeds/ProfileFeedgens.tsx index 670cd3e1..5977e6af 100644 --- a/src/view/com/feeds/ProfileFeedgens.tsx +++ b/src/view/com/feeds/ProfileFeedgens.tsx @@ -7,7 +7,7 @@ import { View, ViewStyle, } from 'react-native' -import {msg, Trans} from '@lingui/macro' +import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' @@ -18,12 +18,11 @@ import {isNative} from '#/platform/detection' import {hydrateFeedGenerator} from '#/state/queries/feed' import {usePreferencesQuery} from '#/state/queries/preferences' import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens' -import {usePalette} from 'lib/hooks/usePalette' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {EmptyState} from 'view/com/util/EmptyState' import {ErrorMessage} from '../util/error/ErrorMessage' import {List, ListRef} from '../util/List' import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {Text} from '../util/text/Text' import {FeedSourceCardLoaded} from './FeedSourceCard' const LOADING = {_reactKey: '__loading__'} @@ -52,7 +51,6 @@ export const ProfileFeedgens = React.forwardRef< {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag}, ref, ) { - const pal = usePalette('default') const {_} = useLingui() const theme = useTheme() const [isPTRing, setIsPTRing] = React.useState(false) @@ -138,13 +136,11 @@ export const ProfileFeedgens = React.forwardRef< ({item, index}: ListRenderItemInfo) => { if (item === EMPTY) { return ( - - - You have no feeds. - - + /> ) } else if (item === ERROR_ITEM) { return ( @@ -176,7 +172,7 @@ export const ProfileFeedgens = React.forwardRef< } return null }, - [error, refetch, onPressRetryLoadMore, pal, preferences, _], + [error, refetch, onPressRetryLoadMore, preferences, _], ) React.useEffect(() => { diff --git a/src/view/com/lists/MyLists.tsx b/src/view/com/lists/MyLists.tsx index 5ea95971..472d2688 100644 --- a/src/view/com/lists/MyLists.tsx +++ b/src/view/com/lists/MyLists.tsx @@ -9,7 +9,8 @@ import { ViewStyle, } from 'react-native' import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' -import {Trans} from '@lingui/macro' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' @@ -17,11 +18,10 @@ import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists' import {useAnalytics} from 'lib/analytics/analytics' import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' +import {EmptyState} from 'view/com/util/EmptyState' import {ErrorMessage} from '../util/error/ErrorMessage' import {List} from '../util/List' -import {Text} from '../util/text/Text' import {ListCard} from './ListCard' -import hairlineWidth = StyleSheet.hairlineWidth const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} @@ -42,6 +42,7 @@ export function MyLists({ }) { const pal = usePalette('default') const {track} = useAnalytics() + const {_} = useLingui() const [isPTRing, setIsPTRing] = React.useState(false) const {data, isFetching, isFetched, isError, error, refetch} = useMyListsQuery(filter) @@ -83,14 +84,12 @@ export function MyLists({ ({item, index}: {item: any; index: number}) => { if (item === EMPTY) { return ( - - - You have no lists. - - + /> ) } else if (item === ERROR_ITEM) { return ( @@ -118,7 +117,7 @@ export function MyLists({ /> ) }, - [error, onRefresh, renderItem, pal], + [error, onRefresh, renderItem, _], ) if (inline) { diff --git a/src/view/com/lists/ProfileLists.tsx b/src/view/com/lists/ProfileLists.tsx index d1ef05f1..8c3a151f 100644 --- a/src/view/com/lists/ProfileLists.tsx +++ b/src/view/com/lists/ProfileLists.tsx @@ -7,7 +7,7 @@ import { View, ViewStyle, } from 'react-native' -import {msg, Trans} from '@lingui/macro' +import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' @@ -17,12 +17,11 @@ import {logger} from '#/logger' import {isNative} from '#/platform/detection' import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists' import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {EmptyState} from 'view/com/util/EmptyState' import {ErrorMessage} from '../util/error/ErrorMessage' import {List, ListRef} from '../util/List' import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {Text} from '../util/text/Text' import {ListCard} from './ListCard' const LOADING = {_reactKey: '__loading__'} @@ -49,7 +48,6 @@ export const ProfileLists = React.forwardRef( {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag}, ref, ) { - const pal = usePalette('default') const theme = useTheme() const {track} = useAnalytics() const {_} = useLingui() @@ -142,11 +140,11 @@ export const ProfileLists = React.forwardRef( ({item, index}: ListRenderItemInfo) => { if (item === EMPTY) { return ( - - - You have no lists. - - + ) } else if (item === ERROR_ITEM) { return ( @@ -176,7 +174,7 @@ export const ProfileLists = React.forwardRef( /> ) }, - [error, refetch, onPressRetryLoadMore, pal, _], + [error, refetch, onPressRetryLoadMore, _], ) React.useEffect(() => { diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx index 8a61b1a7..995af7da 100644 --- a/src/view/com/modals/UserAddRemoveLists.tsx +++ b/src/view/com/modals/UserAddRemoveLists.tsx @@ -61,7 +61,7 @@ export function Component({ return [pal.border, {height: screenHeight / 1.5}] } - return [pal.border, {flex: 1}] + return [pal.border, {flex: 1, borderTopWidth: 1}] }, [pal.border, screenHeight]) return ( @@ -233,11 +233,7 @@ const styles = StyleSheet.create({ textAlign: 'center', fontWeight: 'bold', fontSize: 24, - marginBottom: 10, - }, - list: { - flex: 1, - borderTopWidth: 1, + marginBottom: 12, }, btns: { position: 'relative', diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx index 7486b212..150a16aa 100644 --- a/src/view/com/util/EmptyState.tsx +++ b/src/view/com/util/EmptyState.tsx @@ -8,6 +8,7 @@ import { import {Text} from './text/Text' import {UserGroupIcon} from 'lib/icons' import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' export function EmptyState({ testID, @@ -22,7 +23,9 @@ export function EmptyState({ }) { const pal = usePalette('default') return ( - + {icon === 'user-group' ? ( @@ -48,9 +51,9 @@ export function EmptyState({ const styles = StyleSheet.create({ container: { - paddingVertical: 20, + paddingVertical: 24, paddingHorizontal: 36, - borderTopWidth: 1, + borderTopWidth: isWeb ? 1 : undefined, }, iconContainer: { flexDirection: 'row', diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index 0dd2febc..12ea6f48 100644 --- a/src/view/screens/Lists.tsx +++ b/src/view/screens/Lists.tsx @@ -52,12 +52,12 @@ export function ListsScreen({}: Props) { + style={[ + pal.border, + isMobile + ? {borderBottomWidth: hairlineWidth} + : {borderLeftWidth: hairlineWidth, borderRightWidth: hairlineWidth}, + ]}> User Lists