Improve empty states

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 && <Text>This feed is empty!</Text>}
+      {view.isEmpty && (
+        <EmptyState icon="bell" message="No notifications yet!" />
+      )}
     </View>
   )
 })

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 && (
+      {feed.isEmpty && <EmptyState icon="bars" message="This feed is empty!" />}
-        <View>
-          <Text>This feed is empty!</Text>
-        </View>
-      )}
     </View>
   )
 })

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

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 = () => (
-              <View style={styles.emptyContainer}>
+              <EmptyState
-                <View style={styles.emptyIconContainer}>
+                icon="user-group"
-                  <UserGroupIcon size="64" style={styles.emptyIcon} />
+                message="As members upvote posts, they will trend here. Follow the scene to see its trending posts in your timeline."
-                </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>
             )
           } 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}>
+            <EmptyState
-              <View style={styles.emptyIconContainer}>
+              icon="user-group"
-                <UserGroupIcon size="64" style={styles.emptyIcon} />
+              message="This user hasn't joined any scenes."
-              </View>
+            />
-              <Text style={styles.emptyText}>
-                This user hasn't joined any scenes.
-              </Text>
-            </View>
           )
         }
       } 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}>
+            <EmptyState
-              <View style={styles.emptyIconContainer}>
+              icon="user-group"
-                <UserGroupIcon size="64" style={styles.emptyIcon} />
+              message="This scene doesn't have any members."
-              </View>
+            />
-              <Text style={styles.emptyText}>
-                This scene doesn't have any members.
-              </Text>
-            </View>
           )
         }
       } 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,
-  },
 })