Fix empty states for scene members and memberships

src/state/models/members-view.ts

@@ -42,7 +42,7 @@ export class MembersViewModel {
   }
 
   get hasContent() {
-    return this.subject.did !== ''
+    return this.members.length !== 0
   }
 
   get hasError() {

src/state/models/memberships-view.ts

@@ -17,7 +17,12 @@ export class MembershipsViewModel {
   params: GetMemberships.QueryParams
 
   // data
-  subject: Subject = {did: '', handle: '', displayName: ''}
+  subject: Subject = {
+    did: '',
+    handle: '',
+    displayName: '',
+    declaration: {cid: '', actorType: ''},
+  }
   memberships: MembershipItem[] = []
 
   constructor(
@@ -36,7 +41,7 @@ export class MembershipsViewModel {
   }
 
   get hasContent() {
-    return this.subject.did !== ''
+    return this.memberships.length !== 0
   }
 
   get hasError() {

src/view/screens/Profile.tsx

@@ -137,15 +137,8 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
           if (uiState.profile.isScene) {
             renderItem = () => (
               <View style={styles.emptyContainer}>
-                <View style={{flexDirection: 'row'}}>
+                <View style={styles.emptyIconContainer}>
-                  <UserGroupIcon
+                  <UserGroupIcon size="64" style={styles.emptyIcon} />
-                    size="64"
-                    style={{
-                      marginLeft: 'auto',
-                      marginRight: 'auto',
-                      color: colors.gray3,
-                    }}
-                  />
                 </View>
                 <Text style={styles.emptyText}>
                   As members upvote posts, they will trend here. Follow the
@@ -171,7 +164,16 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
           }
         } else if (uiState.memberships.isEmpty) {
           items.push(EMPTY_ITEM)
-          renderItem = () => <Text style={styles.loading}>No scenes yet!</Text>
+          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>
+          )
         }
       } else if (uiState.selectedView === Sections.Members) {
         if (uiState.members.hasContent) {
@@ -202,7 +204,16 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
           }
         } else if (uiState.members.isEmpty) {
           items.push(EMPTY_ITEM)
-          renderItem = () => <Text style={styles.loading}>No members yet!</Text>
+          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>
+          )
         }
       } else {
         items.push(EMPTY_ITEM)
@@ -260,6 +271,14 @@ const styles = StyleSheet.create({
     paddingVertical: 20,
     paddingHorizontal: 36,
   },
+  emptyIconContainer: {
+    flexDirection: 'row',
+  },
+  emptyIcon: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    color: colors.gray3,
+  },
   emptyText: {
     textAlign: 'center',
     color: colors.gray5,