Implement scene member/memberships listings
parent
e6429182a1
commit
0cdfd089f5
|
@ -0,0 +1,110 @@
|
||||||
|
import {makeAutoObservable} from 'mobx'
|
||||||
|
import * as GetMembers from '../../third-party/api/src/client/types/app/bsky/graph/getMembers'
|
||||||
|
import {RootStoreModel} from './root-store'
|
||||||
|
|
||||||
|
type Subject = GetMembers.OutputSchema['subject']
|
||||||
|
export type MemberItem = GetMembers.OutputSchema['members'][number] & {
|
||||||
|
_reactKey: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MembersViewModel {
|
||||||
|
// state
|
||||||
|
isLoading = false
|
||||||
|
isRefreshing = false
|
||||||
|
hasLoaded = false
|
||||||
|
error = ''
|
||||||
|
params: GetMembers.QueryParams
|
||||||
|
|
||||||
|
// data
|
||||||
|
subject: Subject = {did: '', handle: '', displayName: ''}
|
||||||
|
members: MemberItem[] = []
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public rootStore: RootStoreModel,
|
||||||
|
params: GetMembers.QueryParams,
|
||||||
|
) {
|
||||||
|
makeAutoObservable(
|
||||||
|
this,
|
||||||
|
{
|
||||||
|
rootStore: false,
|
||||||
|
params: false,
|
||||||
|
},
|
||||||
|
{autoBind: true},
|
||||||
|
)
|
||||||
|
this.params = params
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasContent() {
|
||||||
|
return this.subject.did !== ''
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasError() {
|
||||||
|
return this.error !== ''
|
||||||
|
}
|
||||||
|
|
||||||
|
get isEmpty() {
|
||||||
|
return this.hasLoaded && !this.hasContent
|
||||||
|
}
|
||||||
|
|
||||||
|
// public api
|
||||||
|
// =
|
||||||
|
|
||||||
|
async setup() {
|
||||||
|
await this._fetch()
|
||||||
|
}
|
||||||
|
|
||||||
|
async refresh() {
|
||||||
|
await this._fetch(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadMore() {
|
||||||
|
// TODO
|
||||||
|
}
|
||||||
|
|
||||||
|
// state transitions
|
||||||
|
// =
|
||||||
|
|
||||||
|
private _xLoading(isRefreshing = false) {
|
||||||
|
this.isLoading = true
|
||||||
|
this.isRefreshing = isRefreshing
|
||||||
|
this.error = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
private _xIdle(err: string = '') {
|
||||||
|
this.isLoading = false
|
||||||
|
this.isRefreshing = false
|
||||||
|
this.hasLoaded = true
|
||||||
|
this.error = err
|
||||||
|
}
|
||||||
|
|
||||||
|
// loader functions
|
||||||
|
// =
|
||||||
|
|
||||||
|
private async _fetch(isRefreshing = false) {
|
||||||
|
this._xLoading(isRefreshing)
|
||||||
|
try {
|
||||||
|
const res = await this.rootStore.api.app.bsky.graph.getMembers(
|
||||||
|
this.params,
|
||||||
|
)
|
||||||
|
this._replaceAll(res)
|
||||||
|
this._xIdle()
|
||||||
|
} catch (e: any) {
|
||||||
|
this._xIdle(`Failed to load feed: ${e.toString()}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _replaceAll(res: GetMembers.Response) {
|
||||||
|
this.subject.did = res.data.subject.did
|
||||||
|
this.subject.handle = res.data.subject.handle
|
||||||
|
this.subject.displayName = res.data.subject.displayName
|
||||||
|
this.members.length = 0
|
||||||
|
let counter = 0
|
||||||
|
for (const item of res.data.members) {
|
||||||
|
this._append({_reactKey: `item-${counter++}`, ...item})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _append(item: MemberItem) {
|
||||||
|
this.members.push(item)
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,6 +1,8 @@
|
||||||
import {makeAutoObservable} from 'mobx'
|
import {makeAutoObservable} from 'mobx'
|
||||||
import {RootStoreModel} from './root-store'
|
import {RootStoreModel} from './root-store'
|
||||||
import {ProfileViewModel} from './profile-view'
|
import {ProfileViewModel} from './profile-view'
|
||||||
|
import {MembersViewModel} from './members-view'
|
||||||
|
import {MembershipsViewModel} from './memberships-view'
|
||||||
import {FeedModel} from './feed-view'
|
import {FeedModel} from './feed-view'
|
||||||
|
|
||||||
export enum Sections {
|
export enum Sections {
|
||||||
|
@ -21,6 +23,8 @@ export class ProfileUiModel {
|
||||||
// data
|
// data
|
||||||
profile: ProfileViewModel
|
profile: ProfileViewModel
|
||||||
feed: FeedModel
|
feed: FeedModel
|
||||||
|
memberships: MembershipsViewModel
|
||||||
|
members: MembersViewModel
|
||||||
|
|
||||||
// ui state
|
// ui state
|
||||||
selectedViewIndex = 0
|
selectedViewIndex = 0
|
||||||
|
@ -42,15 +46,23 @@ export class ProfileUiModel {
|
||||||
author: params.user,
|
author: params.user,
|
||||||
limit: 10,
|
limit: 10,
|
||||||
})
|
})
|
||||||
|
this.memberships = new MembershipsViewModel(rootStore, {actor: params.user})
|
||||||
|
this.members = new MembersViewModel(rootStore, {actor: params.user})
|
||||||
}
|
}
|
||||||
|
|
||||||
get currentView(): FeedModel {
|
get currentView(): FeedModel | MembershipsViewModel | MembersViewModel {
|
||||||
if (
|
if (
|
||||||
this.selectedView === Sections.Posts ||
|
this.selectedView === Sections.Posts ||
|
||||||
this.selectedView === Sections.Trending
|
this.selectedView === Sections.Trending
|
||||||
) {
|
) {
|
||||||
return this.feed
|
return this.feed
|
||||||
}
|
}
|
||||||
|
if (this.selectedView === Sections.Scenes) {
|
||||||
|
return this.memberships
|
||||||
|
}
|
||||||
|
if (this.selectedView === Sections.Members) {
|
||||||
|
return this.members
|
||||||
|
}
|
||||||
throw new Error(`Invalid selector value: ${this.selectedViewIndex}`)
|
throw new Error(`Invalid selector value: ${this.selectedViewIndex}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -101,10 +113,25 @@ export class ProfileUiModel {
|
||||||
.setup()
|
.setup()
|
||||||
.catch(err => console.error('Failed to fetch feed', err)),
|
.catch(err => console.error('Failed to fetch feed', err)),
|
||||||
])
|
])
|
||||||
|
if (this.isUser) {
|
||||||
|
await this.memberships
|
||||||
|
.setup()
|
||||||
|
.catch(err => console.error('Failed to fetch members', err))
|
||||||
|
}
|
||||||
|
if (this.isScene) {
|
||||||
|
await this.members
|
||||||
|
.setup()
|
||||||
|
.catch(err => console.error('Failed to fetch members', err))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async update() {
|
async update() {
|
||||||
await this.currentView.update()
|
const view = this.currentView
|
||||||
|
if (view instanceof FeedModel) {
|
||||||
|
await view.update()
|
||||||
|
} else {
|
||||||
|
await view.refresh()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async refresh() {
|
async refresh() {
|
||||||
|
|
|
@ -31,6 +31,7 @@ export class ProfileViewModel {
|
||||||
description?: string
|
description?: string
|
||||||
followersCount: number = 0
|
followersCount: number = 0
|
||||||
followsCount: number = 0
|
followsCount: number = 0
|
||||||
|
membersCount: number = 0
|
||||||
postsCount: number = 0
|
postsCount: number = 0
|
||||||
myState = new ProfileViewMyStateModel()
|
myState = new ProfileViewMyStateModel()
|
||||||
|
|
||||||
|
@ -140,12 +141,15 @@ export class ProfileViewModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
private _replaceAll(res: GetProfile.Response) {
|
private _replaceAll(res: GetProfile.Response) {
|
||||||
|
console.log(res.data)
|
||||||
this.did = res.data.did
|
this.did = res.data.did
|
||||||
this.handle = res.data.handle
|
this.handle = res.data.handle
|
||||||
|
this.actorType = res.data.actorType
|
||||||
this.displayName = res.data.displayName
|
this.displayName = res.data.displayName
|
||||||
this.description = res.data.description
|
this.description = res.data.description
|
||||||
this.followersCount = res.data.followersCount
|
this.followersCount = res.data.followersCount
|
||||||
this.followsCount = res.data.followsCount
|
this.followsCount = res.data.followsCount
|
||||||
|
this.membersCount = res.data.membersCount
|
||||||
this.postsCount = res.data.postsCount
|
this.postsCount = res.data.postsCount
|
||||||
if (res.data.myState) {
|
if (res.data.myState) {
|
||||||
Object.assign(this.myState, res.data.myState)
|
Object.assign(this.myState, res.data.myState)
|
||||||
|
|
|
@ -0,0 +1,59 @@
|
||||||
|
import React from 'react'
|
||||||
|
import {StyleSheet, Text, View} from 'react-native'
|
||||||
|
import {Link} from '../util/Link'
|
||||||
|
import {UserAvatar} from '../util/UserAvatar'
|
||||||
|
import {s, colors} from '../../lib/styles'
|
||||||
|
|
||||||
|
export function ProfileCard({
|
||||||
|
did,
|
||||||
|
handle,
|
||||||
|
displayName,
|
||||||
|
description,
|
||||||
|
}: {
|
||||||
|
did: string
|
||||||
|
handle: string
|
||||||
|
displayName?: string
|
||||||
|
description?: string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Link style={styles.outer} href={`/profile/${handle}`} title={handle}>
|
||||||
|
<View style={styles.layout}>
|
||||||
|
<View style={styles.layoutAvi}>
|
||||||
|
<UserAvatar size={40} displayName={displayName} handle={handle} />
|
||||||
|
</View>
|
||||||
|
<View style={styles.layoutContent}>
|
||||||
|
<Text style={[s.f16, s.bold]}>{displayName || handle}</Text>
|
||||||
|
<Text style={[s.f15, s.gray5]}>@{handle}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
outer: {
|
||||||
|
marginTop: 1,
|
||||||
|
backgroundColor: colors.white,
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
},
|
||||||
|
layoutAvi: {
|
||||||
|
width: 60,
|
||||||
|
paddingLeft: 10,
|
||||||
|
paddingTop: 10,
|
||||||
|
paddingBottom: 10,
|
||||||
|
},
|
||||||
|
avi: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 20,
|
||||||
|
resizeMode: 'cover',
|
||||||
|
},
|
||||||
|
layoutContent: {
|
||||||
|
flex: 1,
|
||||||
|
paddingRight: 10,
|
||||||
|
paddingTop: 12,
|
||||||
|
paddingBottom: 10,
|
||||||
|
},
|
||||||
|
})
|
|
@ -57,6 +57,9 @@ export const ProfileHeader = observer(function ProfileHeader({
|
||||||
const onPressFollows = () => {
|
const onPressFollows = () => {
|
||||||
store.nav.navigate(`/profile/${view.handle}/follows`)
|
store.nav.navigate(`/profile/${view.handle}/follows`)
|
||||||
}
|
}
|
||||||
|
const onPressMembers = () => {
|
||||||
|
store.nav.navigate(`/profile/${view.handle}/members`)
|
||||||
|
}
|
||||||
|
|
||||||
// loading
|
// loading
|
||||||
// =
|
// =
|
||||||
|
@ -173,12 +176,12 @@ export const ProfileHeader = observer(function ProfileHeader({
|
||||||
{view.isScene ? (
|
{view.isScene ? (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[s.flexRow, s.mr10]}
|
style={[s.flexRow, s.mr10]}
|
||||||
onPress={onPressFollows}>
|
onPress={onPressMembers}>
|
||||||
<Text style={[s.bold, s.mr2, styles.metricsText]}>
|
<Text style={[s.bold, s.mr2, styles.metricsText]}>
|
||||||
{view.followsCount}
|
{view.membersCount}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={[s.gray5, styles.metricsText]}>
|
<Text style={[s.gray5, styles.metricsText]}>
|
||||||
{pluralize(view.followsCount, 'member')}
|
{pluralize(view.membersCount, 'member')}
|
||||||
</Text>
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
|
|
|
@ -0,0 +1,69 @@
|
||||||
|
import React, {useState, useEffect} from 'react'
|
||||||
|
import {observer} from 'mobx-react-lite'
|
||||||
|
import {ActivityIndicator, FlatList, Text, View} from 'react-native'
|
||||||
|
import {MembersViewModel, MemberItem} from '../../../state/models/members-view'
|
||||||
|
import {ProfileCard} from './ProfileCard'
|
||||||
|
import {useStores} from '../../../state'
|
||||||
|
|
||||||
|
export const ProfileMembers = observer(function ProfileMembers({
|
||||||
|
name,
|
||||||
|
}: {
|
||||||
|
name: string
|
||||||
|
}) {
|
||||||
|
const store = useStores()
|
||||||
|
const [view, setView] = useState<MembersViewModel | undefined>()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (view?.params.actor === name) {
|
||||||
|
console.log('Members doing nothing')
|
||||||
|
return // no change needed? or trigger refresh?
|
||||||
|
}
|
||||||
|
console.log('Fetching members', name)
|
||||||
|
const newView = new MembersViewModel(store, {actor: name})
|
||||||
|
setView(newView)
|
||||||
|
newView.setup().catch(err => console.error('Failed to fetch members', err))
|
||||||
|
}, [name, view?.params.actor, store])
|
||||||
|
|
||||||
|
// loading
|
||||||
|
// =
|
||||||
|
if (
|
||||||
|
!view ||
|
||||||
|
(view.isLoading && !view.isRefreshing) ||
|
||||||
|
view.params.actor !== name
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<ActivityIndicator />
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// error
|
||||||
|
// =
|
||||||
|
if (view.hasError) {
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<Text>{view.error}</Text>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// loaded
|
||||||
|
// =
|
||||||
|
const renderItem = ({item}: {item: MemberItem}) => (
|
||||||
|
<ProfileCard
|
||||||
|
did={item.did}
|
||||||
|
handle={item.handle}
|
||||||
|
displayName={item.displayName}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<FlatList
|
||||||
|
data={view.members}
|
||||||
|
keyExtractor={item => item._reactKey}
|
||||||
|
renderItem={renderItem}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})
|
|
@ -41,7 +41,7 @@ export function Selector({
|
||||||
width: middle.width,
|
width: middle.width,
|
||||||
}
|
}
|
||||||
return [left, middle, right]
|
return [left, middle, right]
|
||||||
}, [selectedIndex, itemLayouts])
|
}, [selectedIndex, items, itemLayouts])
|
||||||
|
|
||||||
const interp = swipeGestureInterp || DEFAULT_SWIPE_GESTURE_INTERP
|
const interp = swipeGestureInterp || DEFAULT_SWIPE_GESTURE_INTERP
|
||||||
const underlinePos = useAnimatedStyle(() => {
|
const underlinePos = useAnimatedStyle(() => {
|
||||||
|
|
|
@ -13,6 +13,7 @@ import {PostRepostedBy} from './screens/PostRepostedBy'
|
||||||
import {Profile} from './screens/Profile'
|
import {Profile} from './screens/Profile'
|
||||||
import {ProfileFollowers} from './screens/ProfileFollowers'
|
import {ProfileFollowers} from './screens/ProfileFollowers'
|
||||||
import {ProfileFollows} from './screens/ProfileFollows'
|
import {ProfileFollows} from './screens/ProfileFollows'
|
||||||
|
import {ProfileMembers} from './screens/ProfileMembers'
|
||||||
import {Settings} from './screens/Settings'
|
import {Settings} from './screens/Settings'
|
||||||
|
|
||||||
export type ScreenParams = {
|
export type ScreenParams = {
|
||||||
|
@ -37,6 +38,7 @@ export const routes: Route[] = [
|
||||||
[Profile, ['far', 'user'], r('/profile/(?<name>[^/]+)')],
|
[Profile, ['far', 'user'], r('/profile/(?<name>[^/]+)')],
|
||||||
[ProfileFollowers, 'users', r('/profile/(?<name>[^/]+)/followers')],
|
[ProfileFollowers, 'users', r('/profile/(?<name>[^/]+)/followers')],
|
||||||
[ProfileFollows, 'users', r('/profile/(?<name>[^/]+)/follows')],
|
[ProfileFollows, 'users', r('/profile/(?<name>[^/]+)/follows')],
|
||||||
|
[ProfileMembers, 'users', r('/profile/(?<name>[^/]+)/members')],
|
||||||
[
|
[
|
||||||
PostThread,
|
PostThread,
|
||||||
['far', 'message'],
|
['far', 'message'],
|
||||||
|
|
|
@ -7,6 +7,7 @@ import {ProfileUiModel, Sections} from '../../state/models/profile-ui'
|
||||||
import {useStores} from '../../state'
|
import {useStores} from '../../state'
|
||||||
import {ProfileHeader} from '../com/profile/ProfileHeader'
|
import {ProfileHeader} from '../com/profile/ProfileHeader'
|
||||||
import {FeedItem} from '../com/posts/FeedItem'
|
import {FeedItem} from '../com/posts/FeedItem'
|
||||||
|
import {ProfileCard} from '../com/profile/ProfileCard'
|
||||||
import {ErrorScreen} from '../com/util/ErrorScreen'
|
import {ErrorScreen} from '../com/util/ErrorScreen'
|
||||||
import {ErrorMessage} from '../com/util/ErrorMessage'
|
import {ErrorMessage} from '../com/util/ErrorMessage'
|
||||||
import {s, colors} from '../lib/styles'
|
import {s, colors} from '../lib/styles'
|
||||||
|
@ -76,44 +77,78 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
|
||||||
let renderItem
|
let renderItem
|
||||||
let items: any[] = []
|
let items: any[] = []
|
||||||
if (uiState) {
|
if (uiState) {
|
||||||
if (
|
if (uiState.isInitialLoading) {
|
||||||
uiState.selectedView === Sections.Posts ||
|
items.push(LOADING_ITEM)
|
||||||
uiState.selectedView === Sections.Trending
|
renderItem = () => <Text style={styles.loading}>Loading...</Text>
|
||||||
) {
|
} else if (uiState.currentView.hasError) {
|
||||||
if (uiState.isInitialLoading) {
|
items.push({
|
||||||
items.push(LOADING_ITEM)
|
_reactKey: '__error__',
|
||||||
renderItem = () => <Text style={styles.loading}>Loading...</Text>
|
error: uiState.currentView.error,
|
||||||
} else if (uiState.feed.hasError) {
|
})
|
||||||
items.push({
|
renderItem = (item: any) => (
|
||||||
_reactKey: '__error__',
|
<View style={s.p5}>
|
||||||
error: uiState.feed.error,
|
<ErrorMessage
|
||||||
})
|
message={item.error}
|
||||||
renderItem = (item: any) => (
|
onPressTryAgain={onPressTryAgain}
|
||||||
<View style={s.p5}>
|
/>
|
||||||
<ErrorMessage
|
</View>
|
||||||
message={item.error}
|
)
|
||||||
onPressTryAgain={onPressTryAgain}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
} else if (uiState.currentView.hasContent) {
|
|
||||||
items = uiState.feed.feed.slice()
|
|
||||||
if (uiState.feed.hasReachedEnd) {
|
|
||||||
items.push(END_ITEM)
|
|
||||||
}
|
|
||||||
renderItem = (item: any) => {
|
|
||||||
if (item === END_ITEM) {
|
|
||||||
return <Text style={styles.endItem}>- end of feed -</Text>
|
|
||||||
}
|
|
||||||
return <FeedItem item={item} />
|
|
||||||
}
|
|
||||||
} else if (uiState.currentView.isEmpty) {
|
|
||||||
items.push(EMPTY_ITEM)
|
|
||||||
renderItem = () => <Text style={styles.loading}>No posts yet!</Text>
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
items.push(EMPTY_ITEM)
|
if (
|
||||||
renderItem = () => <Text>TODO</Text>
|
uiState.selectedView === Sections.Posts ||
|
||||||
|
uiState.selectedView === Sections.Trending
|
||||||
|
) {
|
||||||
|
if (uiState.feed.hasContent) {
|
||||||
|
items = uiState.feed.feed.slice()
|
||||||
|
if (uiState.feed.hasReachedEnd) {
|
||||||
|
items.push(END_ITEM)
|
||||||
|
}
|
||||||
|
renderItem = (item: any) => {
|
||||||
|
if (item === END_ITEM) {
|
||||||
|
return <Text style={styles.endItem}>- end of feed -</Text>
|
||||||
|
}
|
||||||
|
return <FeedItem item={item} />
|
||||||
|
}
|
||||||
|
} else if (uiState.feed.isEmpty) {
|
||||||
|
items.push(EMPTY_ITEM)
|
||||||
|
renderItem = () => <Text style={styles.loading}>No posts yet!</Text>
|
||||||
|
}
|
||||||
|
} else if (uiState.selectedView === Sections.Scenes) {
|
||||||
|
if (uiState.memberships.hasContent) {
|
||||||
|
items = uiState.memberships.memberships.slice()
|
||||||
|
renderItem = (item: any) => {
|
||||||
|
return (
|
||||||
|
<ProfileCard
|
||||||
|
did={item.did}
|
||||||
|
handle={item.handle}
|
||||||
|
displayName={item.displayName}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
} else if (uiState.memberships.isEmpty) {
|
||||||
|
items.push(EMPTY_ITEM)
|
||||||
|
renderItem = () => <Text style={styles.loading}>No scenes yet!</Text>
|
||||||
|
}
|
||||||
|
} else if (uiState.selectedView === Sections.Members) {
|
||||||
|
if (uiState.members.hasContent) {
|
||||||
|
items = uiState.members.members.slice()
|
||||||
|
renderItem = (item: any) => {
|
||||||
|
return (
|
||||||
|
<ProfileCard
|
||||||
|
did={item.did}
|
||||||
|
handle={item.handle}
|
||||||
|
displayName={item.displayName}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
} else if (uiState.members.isEmpty) {
|
||||||
|
items.push(EMPTY_ITEM)
|
||||||
|
renderItem = () => <Text style={styles.loading}>No members yet!</Text>
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
items.push(EMPTY_ITEM)
|
||||||
|
renderItem = () => <Text>TODO</Text>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!renderItem) {
|
if (!renderItem) {
|
||||||
|
@ -129,7 +164,7 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
|
||||||
details={uiState.profile.error}
|
details={uiState.profile.error}
|
||||||
onPressTryAgain={onPressTryAgain}
|
onPressTryAgain={onPressTryAgain}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : uiState.profile.hasLoaded ? (
|
||||||
<ViewSelector
|
<ViewSelector
|
||||||
sections={uiState.selectorItems}
|
sections={uiState.selectorItems}
|
||||||
items={items}
|
items={items}
|
||||||
|
@ -140,6 +175,8 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
|
||||||
onRefresh={onRefresh}
|
onRefresh={onRefresh}
|
||||||
onEndReached={onEndReached}
|
onEndReached={onEndReached}
|
||||||
/>
|
/>
|
||||||
|
) : (
|
||||||
|
renderHeader()
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React, {useEffect} from 'react'
|
||||||
|
import {View} from 'react-native'
|
||||||
|
import {ViewHeader} from '../com/util/ViewHeader'
|
||||||
|
import {ProfileMembers as ProfileMembersComponent} from '../com/profile/ProfileMembers'
|
||||||
|
import {ScreenParams} from '../routes'
|
||||||
|
import {useStores} from '../../state'
|
||||||
|
|
||||||
|
export const ProfileMembers = ({visible, params}: ScreenParams) => {
|
||||||
|
const store = useStores()
|
||||||
|
const {name} = params
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (visible) {
|
||||||
|
store.nav.setTitle(`Members of ${name}`)
|
||||||
|
}
|
||||||
|
}, [store, visible, name])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<ViewHeader title="Members" subtitle={`of ${name}`} />
|
||||||
|
<ProfileMembersComponent name={name} />
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue