Implement scene member/memberships listings

zio/stable
Paul Frazee 2022-11-08 16:37:21 -06:00
parent e6429182a1
commit 0cdfd089f5
10 changed files with 379 additions and 44 deletions

View File

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

View File

@ -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() {

View File

@ -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)

View File

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

View File

@ -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}

View File

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

View File

@ -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(() => {

View File

@ -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'],

View File

@ -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>
) )

View File

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