From 62eb9f3c937028b6a6a8a3af40a03978fda5fef4 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 26 Jul 2022 12:02:34 -0500 Subject: Add followers and follows list --- src/state/models/liked-by-view.ts | 17 ++-- src/state/models/reposted-by-view.ts | 10 +- src/state/models/user-followers-view.ts | 111 +++++++++++++++++++++ src/state/models/user-follows-view.ts | 112 +++++++++++++++++++++ src/view/com/profile/ProfileFollowers.tsx | 141 +++++++++++++++++++++++++++ src/view/com/profile/ProfileFollows.tsx | 141 +++++++++++++++++++++++++++ src/view/com/profile/ProfileHeader.tsx | 21 ++-- src/view/routes/index.tsx | 22 +++++ src/view/routes/types.ts | 2 + src/view/screens/stacks/ProfileFollowers.tsx | 39 ++++++++ src/view/screens/stacks/ProfileFollows.tsx | 39 ++++++++ 11 files changed, 636 insertions(+), 19 deletions(-) create mode 100644 src/state/models/user-followers-view.ts create mode 100644 src/state/models/user-follows-view.ts create mode 100644 src/view/com/profile/ProfileFollowers.tsx create mode 100644 src/view/com/profile/ProfileFollows.tsx create mode 100644 src/view/screens/stacks/ProfileFollowers.tsx create mode 100644 src/view/screens/stacks/ProfileFollows.tsx (limited to 'src') diff --git a/src/state/models/liked-by-view.ts b/src/state/models/liked-by-view.ts index e9548f27b..91c94093d 100644 --- a/src/state/models/liked-by-view.ts +++ b/src/state/models/liked-by-view.ts @@ -73,7 +73,11 @@ export class LikedByViewModel implements bsky.LikedByView.Response { } async refresh() { - await this._refresh() + await this._fetch(true) + } + + async loadMore() { + // TODO } // state transitions @@ -105,8 +109,8 @@ export class LikedByViewModel implements bsky.LikedByView.Response { }) } - private async _fetch() { - this._xLoading() + private async _fetch(isRefreshing = false) { + this._xLoading(isRefreshing) await new Promise(r => setTimeout(r, 250)) // DEBUG try { const res = (await this.rootStore.api.mainPds.view( @@ -120,13 +124,6 @@ export class LikedByViewModel implements bsky.LikedByView.Response { } } - private async _refresh() { - this._xLoading(true) - // TODO: refetch and update items - await new Promise(r => setTimeout(r, 250)) // DEBUG - this._xIdle() - } - private _replaceAll(res: bsky.LikedByView.Response) { this.likedBy.length = 0 let counter = 0 diff --git a/src/state/models/reposted-by-view.ts b/src/state/models/reposted-by-view.ts index a5f6cce25..74698767e 100644 --- a/src/state/models/reposted-by-view.ts +++ b/src/state/models/reposted-by-view.ts @@ -73,7 +73,11 @@ export class RepostedByViewModel implements bsky.RepostedByView.Response { } async refresh() { - await this._refresh() + await this._fetch(true) + } + + async loadMore() { + // TODO } // state transitions @@ -105,8 +109,8 @@ export class RepostedByViewModel implements bsky.RepostedByView.Response { }) } - private async _fetch() { - this._xLoading() + private async _fetch(isRefreshing = false) { + this._xLoading(isRefreshing) await new Promise(r => setTimeout(r, 250)) // DEBUG try { const res = (await this.rootStore.api.mainPds.view( diff --git a/src/state/models/user-followers-view.ts b/src/state/models/user-followers-view.ts new file mode 100644 index 000000000..af10e57d5 --- /dev/null +++ b/src/state/models/user-followers-view.ts @@ -0,0 +1,111 @@ +import {makeAutoObservable} from 'mobx' +import {bsky} from '@adxp/mock-api' +import {RootStoreModel} from './root-store' + +type Subject = bsky.UserFollowersView.Response['subject'] +export type FollowerItem = + bsky.UserFollowersView.Response['followers'][number] & {_reactKey: string} + +export class UserFollowersViewModel implements bsky.UserFollowersView.Response { + // state + isLoading = false + isRefreshing = false + hasLoaded = false + error = '' + params: bsky.UserFollowersView.Params + + // data + subject: Subject = {did: '', name: '', displayName: ''} + followers: FollowerItem[] = [] + + constructor( + public rootStore: RootStoreModel, + params: bsky.UserFollowersView.Params, + ) { + 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) + await new Promise(r => setTimeout(r, 250)) // DEBUG + try { + const res = (await this.rootStore.api.mainPds.view( + 'blueskyweb.xyz:UserFollowersView', + this.params, + )) as bsky.UserFollowersView.Response + this._replaceAll(res) + this._xIdle() + } catch (e: any) { + this._xIdle(`Failed to load feed: ${e.toString()}`) + } + } + + private _replaceAll(res: bsky.UserFollowersView.Response) { + this.subject.did = res.subject.did + this.subject.name = res.subject.name + this.subject.displayName = res.subject.displayName + this.followers.length = 0 + let counter = 0 + for (const item of res.followers) { + this._append({_reactKey: `item-${counter++}`, ...item}) + } + } + + private _append(item: FollowerItem) { + this.followers.push(item) + } +} diff --git a/src/state/models/user-follows-view.ts b/src/state/models/user-follows-view.ts new file mode 100644 index 000000000..fd890a662 --- /dev/null +++ b/src/state/models/user-follows-view.ts @@ -0,0 +1,112 @@ +import {makeAutoObservable} from 'mobx' +import {bsky} from '@adxp/mock-api' +import {RootStoreModel} from './root-store' + +type Subject = bsky.UserFollowsView.Response['subject'] +export type FollowItem = bsky.UserFollowsView.Response['follows'][number] & { + _reactKey: string +} + +export class UserFollowsViewModel implements bsky.UserFollowsView.Response { + // state + isLoading = false + isRefreshing = false + hasLoaded = false + error = '' + params: bsky.UserFollowsView.Params + + // data + subject: Subject = {did: '', name: '', displayName: ''} + follows: FollowItem[] = [] + + constructor( + public rootStore: RootStoreModel, + params: bsky.UserFollowsView.Params, + ) { + 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) + await new Promise(r => setTimeout(r, 250)) // DEBUG + try { + const res = (await this.rootStore.api.mainPds.view( + 'blueskyweb.xyz:UserFollowsView', + this.params, + )) as bsky.UserFollowsView.Response + this._replaceAll(res) + this._xIdle() + } catch (e: any) { + this._xIdle(`Failed to load feed: ${e.toString()}`) + } + } + + private _replaceAll(res: bsky.UserFollowsView.Response) { + this.subject.did = res.subject.did + this.subject.name = res.subject.name + this.subject.displayName = res.subject.displayName + this.follows.length = 0 + let counter = 0 + for (const item of res.follows) { + this._append({_reactKey: `item-${counter++}`, ...item}) + } + } + + private _append(item: FollowItem) { + this.follows.push(item) + } +} diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx new file mode 100644 index 000000000..06cc0c14d --- /dev/null +++ b/src/view/com/profile/ProfileFollowers.tsx @@ -0,0 +1,141 @@ +import React, {useState, useEffect} from 'react' +import {observer} from 'mobx-react-lite' +import { + ActivityIndicator, + FlatList, + Image, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native' +import {OnNavigateContent} from '../../routes/types' +import { + UserFollowersViewModel, + FollowerItem, +} from '../../../state/models/user-followers-view' +import {useStores} from '../../../state' +import {s} from '../../lib/styles' +import {AVIS} from '../../lib/assets' + +export const ProfileFollowers = observer(function ProfileFollowers({ + name, + onNavigateContent, +}: { + name: string + onNavigateContent: OnNavigateContent +}) { + const store = useStores() + const [view, setView] = useState() + + useEffect(() => { + if (view?.params.user === name) { + console.log('User followers doing nothing') + return // no change needed? or trigger refresh? + } + console.log('Fetching user followers', name) + const newView = new UserFollowersViewModel(store, {user: name}) + setView(newView) + newView + .setup() + .catch(err => console.error('Failed to fetch user followers', err)) + }, [name, view?.params.user, store]) + + // loading + // = + if ( + !view || + (view.isLoading && !view.isRefreshing) || + view.params.user !== name + ) { + return ( + + + + ) + } + + // error + // = + if (view.hasError) { + return ( + + {view.error} + + ) + } + + // loaded + // = + const renderItem = ({item}: {item: FollowerItem}) => ( + + ) + return ( + + item._reactKey} + renderItem={renderItem} + /> + + ) +}) + +const User = ({ + item, + onNavigateContent, +}: { + item: FollowerItem + onNavigateContent: OnNavigateContent +}) => { + const onPressOuter = () => { + onNavigateContent('Profile', { + name: item.name, + }) + } + return ( + + + + + + + {item.displayName} + @{item.name} + + + + ) +} + +const styles = StyleSheet.create({ + outer: { + borderTopWidth: 1, + borderTopColor: '#e8e8e8', + backgroundColor: '#fff', + }, + layout: { + flexDirection: 'row', + }, + layoutAvi: { + width: 60, + paddingLeft: 10, + paddingTop: 10, + paddingBottom: 10, + }, + avi: { + width: 40, + height: 40, + borderRadius: 30, + resizeMode: 'cover', + }, + layoutContent: { + flex: 1, + paddingRight: 10, + paddingTop: 10, + paddingBottom: 10, + }, +}) diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx new file mode 100644 index 000000000..bb5859852 --- /dev/null +++ b/src/view/com/profile/ProfileFollows.tsx @@ -0,0 +1,141 @@ +import React, {useState, useEffect} from 'react' +import {observer} from 'mobx-react-lite' +import { + ActivityIndicator, + FlatList, + Image, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native' +import {OnNavigateContent} from '../../routes/types' +import { + UserFollowsViewModel, + FollowItem, +} from '../../../state/models/user-follows-view' +import {useStores} from '../../../state' +import {s} from '../../lib/styles' +import {AVIS} from '../../lib/assets' + +export const ProfileFollows = observer(function ProfileFollows({ + name, + onNavigateContent, +}: { + name: string + onNavigateContent: OnNavigateContent +}) { + const store = useStores() + const [view, setView] = useState() + + useEffect(() => { + if (view?.params.user === name) { + console.log('User follows doing nothing') + return // no change needed? or trigger refresh? + } + console.log('Fetching user follows', name) + const newView = new UserFollowsViewModel(store, {user: name}) + setView(newView) + newView + .setup() + .catch(err => console.error('Failed to fetch user follows', err)) + }, [name, view?.params.user, store]) + + // loading + // = + if ( + !view || + (view.isLoading && !view.isRefreshing) || + view.params.user !== name + ) { + return ( + + + + ) + } + + // error + // = + if (view.hasError) { + return ( + + {view.error} + + ) + } + + // loaded + // = + const renderItem = ({item}: {item: FollowItem}) => ( + + ) + return ( + + item._reactKey} + renderItem={renderItem} + /> + + ) +}) + +const User = ({ + item, + onNavigateContent, +}: { + item: FollowItem + onNavigateContent: OnNavigateContent +}) => { + const onPressOuter = () => { + onNavigateContent('Profile', { + name: item.name, + }) + } + return ( + + + + + + + {item.displayName} + @{item.name} + + + + ) +} + +const styles = StyleSheet.create({ + outer: { + borderTopWidth: 1, + borderTopColor: '#e8e8e8', + backgroundColor: '#fff', + }, + layout: { + flexDirection: 'row', + }, + layoutAvi: { + width: 60, + paddingLeft: 10, + paddingTop: 10, + paddingBottom: 10, + }, + avi: { + width: 40, + height: 40, + borderRadius: 30, + resizeMode: 'cover', + }, + layoutContent: { + flex: 1, + paddingRight: 10, + paddingTop: 10, + paddingBottom: 10, + }, +}) diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 1eace94aa..6a6d04140 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -6,6 +6,7 @@ import { Image, StyleSheet, Text, + TouchableOpacity, View, } from 'react-native' import {OnNavigateContent} from '../../routes/types' @@ -18,8 +19,8 @@ import Toast from '../util/Toast' export const ProfileHeader = observer(function ProfileHeader({ user, -}: // onNavigateContent, -{ + onNavigateContent, +}: { user: string onNavigateContent: OnNavigateContent }) { @@ -53,6 +54,12 @@ export const ProfileHeader = observer(function ProfileHeader({ err => console.error('Failed to toggle follow', err), ) } + const onPressFollowers = () => { + onNavigateContent('ProfileFollowers', {name: user}) + } + const onPressFollows = () => { + onNavigateContent('ProfileFollows', {name: user}) + } // loading // = @@ -91,16 +98,18 @@ export const ProfileHeader = observer(function ProfileHeader({ {view.description} )} - + {view.followersCount} {pluralize(view.followersCount, 'follower')} - - + + {view.followsCount} following - + {view.postsCount} {pluralize(view.postsCount, 'post')} diff --git a/src/view/routes/index.tsx b/src/view/routes/index.tsx index 23340a7fe..675edb3e8 100644 --- a/src/view/routes/index.tsx +++ b/src/view/routes/index.tsx @@ -25,6 +25,8 @@ import {PostThread} from '../screens/stacks/PostThread' import {PostLikedBy} from '../screens/stacks/PostLikedBy' import {PostRepostedBy} from '../screens/stacks/PostRepostedBy' import {Profile} from '../screens/stacks/Profile' +import {ProfileFollowers} from '../screens/stacks/ProfileFollowers' +import {ProfileFollows} from '../screens/stacks/ProfileFollows' const linking: LinkingOptions = { prefixes: [ @@ -40,6 +42,8 @@ const linking: LinkingOptions = { NotificationsTab: 'notifications', MenuTab: 'menu', Profile: 'profile/:name', + ProfileFollowers: 'profile/:name/followers', + ProfileFollows: 'profile/:name/follows', PostThread: 'profile/:name/post/:recordKey', PostLikedBy: 'profile/:name/post/:recordKey/liked-by', PostRepostedBy: 'profile/:name/post/:recordKey/reposted-by', @@ -93,6 +97,11 @@ function HomeStackCom() { + + @@ -109,6 +118,11 @@ function SearchStackCom() { options={HIDE_HEADER} /> + + @@ -124,6 +138,14 @@ function NotificationsStackCom() { component={Notifications} /> + + ) => { + const {name} = route.params + + useLayoutEffect(() => { + navigation.setOptions({ + headerShown: true, + headerTitle: 'Followers', + headerLeft: () => ( + navigation.goBack()}> + + + ), + }) + }, [navigation]) + + const onNavigateContent = (screen: string, props: Record) => { + // @ts-ignore it's up to the callers to supply correct params -prf + navigation.push(screen, props) + } + + return ( + + + + ) +} diff --git a/src/view/screens/stacks/ProfileFollows.tsx b/src/view/screens/stacks/ProfileFollows.tsx new file mode 100644 index 000000000..6fce3d798 --- /dev/null +++ b/src/view/screens/stacks/ProfileFollows.tsx @@ -0,0 +1,39 @@ +import React, {useLayoutEffect} from 'react' +import {TouchableOpacity} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Shell} from '../../shell' +import type {RootTabsScreenProps} from '../../routes/types' +import {ProfileFollows as ProfileFollowsComponent} from '../../com/profile/ProfileFollows' + +export const ProfileFollows = ({ + navigation, + route, +}: RootTabsScreenProps<'ProfileFollows'>) => { + const {name} = route.params + + useLayoutEffect(() => { + navigation.setOptions({ + headerShown: true, + headerTitle: 'Following', + headerLeft: () => ( + navigation.goBack()}> + + + ), + }) + }, [navigation]) + + const onNavigateContent = (screen: string, props: Record) => { + // @ts-ignore it's up to the callers to supply correct params -prf + navigation.push(screen, props) + } + + return ( + + + + ) +} -- cgit 1.4.1