zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Improve empty states

zio/stable
Paul Frazee 2022-11-15 10:54:43 -06:00
parent fb3a43c216
commit e470e3933b
4 changed files with 69 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/view/com/notifications/Feed.tsx
View File

@ -7,6 +7,7 @@ import {
} from '../../../state/models/notifications-view'
import {FeedItem} from './FeedItem'
import {ErrorMessage} from '../util/ErrorMessage'
import {EmptyState} from '../util/EmptyState'
export const Feed = observer(function Feed({
view,
@ -51,7 +52,9 @@ export const Feed = observer(function Feed({
onEndReached={onEndReached}
/>
)}
{view.isEmpty && <Text>This feed is empty!</Text>}
{view.isEmpty && (
<EmptyState icon="bell" message="No notifications yet!" />
)}
</View>
)
})

7
src/view/com/posts/Feed.tsx
View File

@ -1,6 +1,7 @@
import React, {MutableRefObject} from 'react'
import {observer} from 'mobx-react-lite'
import {Text, View, FlatList, StyleProp, ViewStyle} from 'react-native'
import {EmptyState} from '../util/EmptyState'
import {ErrorMessage} from '../util/ErrorMessage'
import {FeedModel, FeedItemModel} from '../../../state/models/feed-view'
import {FeedItem} from './FeedItem'
@ -51,11 +52,7 @@ export const Feed = observer(function Feed({
onEndReached={onEndReached}
/>
)}
{feed.isEmpty && !feed.hasError && (
<View>
<Text>This feed is empty!</Text>
</View>
)}
{feed.isEmpty && <EmptyState icon="bars" message="This feed is empty!" />}
</View>
)
})

50
src/view/com/util/EmptyState.tsx 100644
View File

@ -0,0 +1,50 @@
import React from 'react'
import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
import {IconProp} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {UserGroupIcon} from '../../lib/icons'
import {colors} from '../../lib/styles'
export function EmptyState({
icon,
message,
style,
}: {
icon: IconProp | 'user-group'
message: string
style?: StyleProp<ViewStyle>
}) {
return (
<View style={[styles.container, style]}>
<View style={styles.iconContainer}>
{icon === 'user-group' ? (
<UserGroupIcon size="64" style={styles.icon} />
) : (
<FontAwesomeIcon icon={icon} size={64} style={styles.icon} />
)}
</View>
<Text style={styles.text}>{message}</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
paddingVertical: 20,
paddingHorizontal: 36,
},
iconContainer: {
flexDirection: 'row',
},
icon: {
marginLeft: 'auto',
marginRight: 'auto',
color: colors.gray3,
},
text: {
textAlign: 'center',
color: colors.gray5,
paddingTop: 16,
fontSize: 16,
},
})

57
src/view/screens/Profile.tsx
View File

@ -13,9 +13,9 @@ import {FeedItem} from '../com/posts/FeedItem'
import {ProfileCard} from '../com/profile/ProfileCard'
import {ErrorScreen} from '../com/util/ErrorScreen'
import {ErrorMessage} from '../com/util/ErrorMessage'
import {EmptyState} from '../com/util/EmptyState'
import Toast from '../com/util/Toast'
import {s, colors} from '../lib/styles'
import {UserGroupIcon} from '../lib/icons'
const LOADING_ITEM = {_reactKey: '__loading__'}
const END_ITEM = {_reactKey: '__end__'}
@ -136,15 +136,10 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
items.push(EMPTY_ITEM)
if (uiState.profile.isScene) {
renderItem = () => (
<View style={styles.emptyContainer}>
<View style={styles.emptyIconContainer}>
<UserGroupIcon size="64" style={styles.emptyIcon} />
</View>
<Text style={styles.emptyText}>
As members upvote posts, they will trend here. Follow the
scene to see its trending posts in your timeline.
</Text>
</View>
<EmptyState
icon="user-group"
message="As members upvote posts, they will trend here. Follow the scene to see its trending posts in your timeline."
/>
)
} else {
renderItem = () => <Text style={styles.loading}>No posts yet!</Text>
@ -165,14 +160,10 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
} else if (uiState.memberships.isEmpty) {
items.push(EMPTY_ITEM)
renderItem = () => (
<View style={styles.emptyContainer}>
<View style={styles.emptyIconContainer}>
<UserGroupIcon size="64" style={styles.emptyIcon} />
</View>
<Text style={styles.emptyText}>
This user hasn't joined any scenes.
</Text>
</View>
<EmptyState
icon="user-group"
message="This user hasn't joined any scenes."
/>
)
}
} else if (uiState.selectedView === Sections.Members) {
@ -205,14 +196,10 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
} else if (uiState.members.isEmpty) {
items.push(EMPTY_ITEM)
renderItem = () => (
<View style={styles.emptyContainer}>
<View style={styles.emptyIconContainer}>
<UserGroupIcon size="64" style={styles.emptyIcon} />
</View>
<Text style={styles.emptyText}>
This scene doesn't have any members.
</Text>
</View>
<EmptyState
icon="user-group"
message="This scene doesn't have any members."
/>
)
}
} else {
@ -267,22 +254,4 @@ const styles = StyleSheet.create({
color: colors.gray5,
textAlign: 'center',
},
emptyContainer: {
paddingVertical: 20,
paddingHorizontal: 36,
},
emptyIconContainer: {
flexDirection: 'row',
},
emptyIcon: {
marginLeft: 'auto',
marginRight: 'auto',
color: colors.gray3,
},
emptyText: {
textAlign: 'center',
color: colors.gray5,
paddingTop: 16,
fontSize: 16,
},
})