From 23fd43e30641104fb0dd3599df2e5753e0ee7814 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Mon, 14 Nov 2022 14:24:23 -0600
Subject: [PATCH] Fix empty states for scene members and memberships
---
src/state/models/members-view.ts | 2 +-
src/state/models/memberships-view.ts | 9 ++++--
src/view/screens/Profile.tsx | 41 ++++++++++++++++++++--------
3 files changed, 38 insertions(+), 14 deletions(-)
diff --git a/src/state/models/members-view.ts b/src/state/models/members-view.ts
index 19101afc..ed89f7f4 100644
--- a/src/state/models/members-view.ts
+++ b/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() {
diff --git a/src/state/models/memberships-view.ts b/src/state/models/memberships-view.ts
index 4dfe2ab1..b8186d32 100644
--- a/src/state/models/memberships-view.ts
+++ b/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() {
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index 5dbe2906..ca058722 100644
--- a/src/view/screens/Profile.tsx
+++ b/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'}}>
- <UserGroupIcon
- size="64"
- style={{
- marginLeft: 'auto',
- marginRight: 'auto',
- color: colors.gray3,
- }}
- />
+ <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
@@ -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,