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,
- },
})