diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index 2b7bb878..ac56823f 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -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 && This feed is empty!} + {view.isEmpty && ( + + )} ) }) diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index 75b48fad..c2aabd7b 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -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 && ( - - This feed is empty! - - )} + {feed.isEmpty && } ) }) diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx new file mode 100644 index 00000000..adae9e31 --- /dev/null +++ b/src/view/com/util/EmptyState.tsx @@ -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 +}) { + return ( + + + {icon === 'user-group' ? ( + + ) : ( + + )} + + {message} + + ) +} + +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, + }, +}) diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 7d72715b..4d792df6 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -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 = () => ( - - - - - - As members upvote posts, they will trend here. Follow the - scene to see its trending posts in your timeline. - - + ) } else { renderItem = () => No posts yet! @@ -165,14 +160,10 @@ export const Profile = observer(({visible, params}: ScreenParams) => { } else if (uiState.memberships.isEmpty) { items.push(EMPTY_ITEM) renderItem = () => ( - - - - - - 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 = () => ( - - - - - - 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, - }, })