Add profile view
parent
29ed3d2ecf
commit
cc8a170204
|
@ -15,7 +15,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@adxp/auth": "*",
|
"@adxp/auth": "*",
|
||||||
"@adxp/common": "*",
|
"@adxp/common": "*",
|
||||||
"@adxp/mock-api": "git+ssh://git@github.com:bluesky-social/adx-mock-api.git#464712517e8f42b307622aa625bf2b2e11ad763e",
|
"@adxp/mock-api": "git+ssh://git@github.com:bluesky-social/adx-mock-api.git#19dc93e569fa71ae3de85876b3707afd47a6fe8c",
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.1.1",
|
"@fortawesome/free-regular-svg-icons": "^6.1.1",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||||
|
|
|
@ -3,7 +3,10 @@ import {bsky} from '@adxp/mock-api'
|
||||||
import {RootStoreModel} from './root-store'
|
import {RootStoreModel} from './root-store'
|
||||||
|
|
||||||
export class FeedViewItemModel implements bsky.FeedView.FeedItem {
|
export class FeedViewItemModel implements bsky.FeedView.FeedItem {
|
||||||
|
// ui state
|
||||||
_reactKey: string = ''
|
_reactKey: string = ''
|
||||||
|
|
||||||
|
// data
|
||||||
uri: string = ''
|
uri: string = ''
|
||||||
author: bsky.FeedView.User = {did: '', name: '', displayName: ''}
|
author: bsky.FeedView.User = {did: '', name: '', displayName: ''}
|
||||||
repostedBy?: bsky.FeedView.User
|
repostedBy?: bsky.FeedView.User
|
||||||
|
@ -25,14 +28,17 @@ export class FeedViewItemModel implements bsky.FeedView.FeedItem {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class FeedViewModel implements bsky.FeedView.Response {
|
export class FeedViewModel implements bsky.FeedView.Response {
|
||||||
|
// state
|
||||||
isLoading = false
|
isLoading = false
|
||||||
isRefreshing = false
|
isRefreshing = false
|
||||||
hasLoaded = false
|
hasLoaded = false
|
||||||
error = ''
|
error = ''
|
||||||
params: bsky.FeedView.Params
|
params: bsky.FeedView.Params
|
||||||
feed: FeedViewItemModel[] = []
|
|
||||||
_loadMorePromise: Promise<void> | undefined
|
_loadMorePromise: Promise<void> | undefined
|
||||||
|
|
||||||
|
// data
|
||||||
|
feed: FeedViewItemModel[] = []
|
||||||
|
|
||||||
constructor(public rootStore: RootStoreModel, params: bsky.FeedView.Params) {
|
constructor(public rootStore: RootStoreModel, params: bsky.FeedView.Params) {
|
||||||
makeAutoObservable(
|
makeAutoObservable(
|
||||||
this,
|
this,
|
||||||
|
|
|
@ -72,12 +72,15 @@ export class PostThreadViewPostModel implements bsky.PostThreadView.Post {
|
||||||
const UNLOADED_THREAD = new PostThreadViewPostModel('')
|
const UNLOADED_THREAD = new PostThreadViewPostModel('')
|
||||||
|
|
||||||
export class PostThreadViewModel implements bsky.PostThreadView.Response {
|
export class PostThreadViewModel implements bsky.PostThreadView.Response {
|
||||||
|
// state
|
||||||
isLoading = false
|
isLoading = false
|
||||||
isRefreshing = false
|
isRefreshing = false
|
||||||
hasLoaded = false
|
hasLoaded = false
|
||||||
error = ''
|
error = ''
|
||||||
resolvedUri = ''
|
resolvedUri = ''
|
||||||
params: bsky.PostThreadView.Params
|
params: bsky.PostThreadView.Params
|
||||||
|
|
||||||
|
// data
|
||||||
thread: PostThreadViewPostModel = UNLOADED_THREAD
|
thread: PostThreadViewPostModel = UNLOADED_THREAD
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
@ -167,7 +170,7 @@ export class PostThreadViewModel implements bsky.PostThreadView.Response {
|
||||||
private async _refresh() {
|
private async _refresh() {
|
||||||
this._xLoading(true)
|
this._xLoading(true)
|
||||||
// TODO: refetch and update items
|
// TODO: refetch and update items
|
||||||
await new Promise(r => setTimeout(r, 1e3)) // DEBUG
|
await new Promise(r => setTimeout(r, 250)) // DEBUG
|
||||||
this._xIdle()
|
this._xIdle()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,105 @@
|
||||||
|
import {makeAutoObservable} from 'mobx'
|
||||||
|
import {bsky} from '@adxp/mock-api'
|
||||||
|
import {RootStoreModel} from './root-store'
|
||||||
|
|
||||||
|
export class ProfileViewModel implements bsky.ProfileView.Response {
|
||||||
|
// state
|
||||||
|
isLoading = false
|
||||||
|
isRefreshing = false
|
||||||
|
hasLoaded = false
|
||||||
|
error = ''
|
||||||
|
params: bsky.ProfileView.Params
|
||||||
|
|
||||||
|
// data
|
||||||
|
did: string = ''
|
||||||
|
name: string = ''
|
||||||
|
displayName: string = ''
|
||||||
|
description: string = ''
|
||||||
|
followersCount: number = 0
|
||||||
|
followsCount: number = 0
|
||||||
|
postsCount: number = 0
|
||||||
|
badges: bsky.ProfileView.Badge[] = []
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public rootStore: RootStoreModel,
|
||||||
|
params: bsky.ProfileView.Params,
|
||||||
|
) {
|
||||||
|
makeAutoObservable(
|
||||||
|
this,
|
||||||
|
{
|
||||||
|
rootStore: false,
|
||||||
|
params: false,
|
||||||
|
},
|
||||||
|
{autoBind: true},
|
||||||
|
)
|
||||||
|
this.params = params
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasContent() {
|
||||||
|
return this.did !== ''
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasError() {
|
||||||
|
return this.error !== ''
|
||||||
|
}
|
||||||
|
|
||||||
|
get isEmpty() {
|
||||||
|
return this.hasLoaded && !this.hasContent
|
||||||
|
}
|
||||||
|
|
||||||
|
// public api
|
||||||
|
// =
|
||||||
|
|
||||||
|
async setup() {
|
||||||
|
await this._load()
|
||||||
|
}
|
||||||
|
|
||||||
|
async refresh() {
|
||||||
|
await this._load()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 _load() {
|
||||||
|
this._xLoading()
|
||||||
|
await new Promise(r => setTimeout(r, 250)) // DEBUG
|
||||||
|
try {
|
||||||
|
const res = (await this.rootStore.api.mainPds.view(
|
||||||
|
'blueskyweb.xyz:ProfileView',
|
||||||
|
this.params,
|
||||||
|
)) as bsky.ProfileView.Response
|
||||||
|
this._replaceAll(res)
|
||||||
|
this._xIdle()
|
||||||
|
} catch (e: any) {
|
||||||
|
this._xIdle(`Failed to load feed: ${e.toString()}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _replaceAll(res: bsky.ProfileView.Response) {
|
||||||
|
this.did = res.did
|
||||||
|
this.name = res.name
|
||||||
|
this.displayName = res.displayName
|
||||||
|
this.description = res.description
|
||||||
|
this.followersCount = res.followersCount
|
||||||
|
this.followsCount = res.followsCount
|
||||||
|
this.postsCount = res.postsCount
|
||||||
|
this.badges = res.badges
|
||||||
|
}
|
||||||
|
}
|
|
@ -17,6 +17,7 @@ export const FeedItem = observer(function FeedItem({
|
||||||
onNavigateContent: OnNavigateContent
|
onNavigateContent: OnNavigateContent
|
||||||
}) {
|
}) {
|
||||||
const record = item.record as unknown as bsky.Post.Record
|
const record = item.record as unknown as bsky.Post.Record
|
||||||
|
|
||||||
const onPressOuter = () => {
|
const onPressOuter = () => {
|
||||||
const urip = new AdxUri(item.uri)
|
const urip = new AdxUri(item.uri)
|
||||||
onNavigateContent('PostThread', {
|
onNavigateContent('PostThread', {
|
||||||
|
@ -24,6 +25,12 @@ export const FeedItem = observer(function FeedItem({
|
||||||
recordKey: urip.recordKey,
|
recordKey: urip.recordKey,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const onPressAuthor = () => {
|
||||||
|
onNavigateContent('Profile', {
|
||||||
|
name: item.author.name,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
|
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
|
||||||
{item.repostedBy && (
|
{item.repostedBy && (
|
||||||
|
@ -35,18 +42,22 @@ export const FeedItem = observer(function FeedItem({
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
<View style={styles.layoutAvi}>
|
<TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
|
||||||
<Image
|
<Image
|
||||||
style={styles.avi}
|
style={styles.avi}
|
||||||
source={AVIS[item.author.name] || AVIS['alice.com']}
|
source={AVIS[item.author.name] || AVIS['alice.com']}
|
||||||
/>
|
/>
|
||||||
</View>
|
</TouchableOpacity>
|
||||||
<View style={styles.layoutContent}>
|
<View style={styles.layoutContent}>
|
||||||
<View style={styles.meta}>
|
<View style={styles.meta}>
|
||||||
<Text style={[styles.metaItem, s.f15, s.bold]}>
|
<Text
|
||||||
|
style={[styles.metaItem, s.f15, s.bold]}
|
||||||
|
onPress={onPressAuthor}>
|
||||||
{item.author.displayName}
|
{item.author.displayName}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={[styles.metaItem, s.f14, s.gray]}>
|
<Text
|
||||||
|
style={[styles.metaItem, s.f14, s.gray]}
|
||||||
|
onPress={onPressAuthor}>
|
||||||
@{item.author.name}
|
@{item.author.name}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={[styles.metaItem, s.f14, s.gray]}>
|
<Text style={[styles.metaItem, s.f14, s.gray]}>
|
||||||
|
|
|
@ -30,7 +30,8 @@ export const PostThread = observer(function PostThread({
|
||||||
newView.setup().catch(err => console.error('Failed to fetch thread', err))
|
newView.setup().catch(err => console.error('Failed to fetch thread', err))
|
||||||
}, [uri, view?.params.uri, store])
|
}, [uri, view?.params.uri, store])
|
||||||
|
|
||||||
// not yet setup
|
// loading
|
||||||
|
// =
|
||||||
if (
|
if (
|
||||||
!view ||
|
!view ||
|
||||||
(view.isLoading && !view.isRefreshing) ||
|
(view.isLoading && !view.isRefreshing) ||
|
||||||
|
@ -44,6 +45,7 @@ export const PostThread = observer(function PostThread({
|
||||||
}
|
}
|
||||||
|
|
||||||
// error
|
// error
|
||||||
|
// =
|
||||||
if (view.hasError) {
|
if (view.hasError) {
|
||||||
return (
|
return (
|
||||||
<View>
|
<View>
|
||||||
|
@ -52,7 +54,8 @@ export const PostThread = observer(function PostThread({
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// rendering
|
// loaded
|
||||||
|
// =
|
||||||
const posts = Array.from(flattenThread(view.thread))
|
const posts = Array.from(flattenThread(view.thread))
|
||||||
const renderItem = ({item}: {item: PostThreadViewPostModel}) => (
|
const renderItem = ({item}: {item: PostThreadViewPostModel}) => (
|
||||||
<PostThreadItem item={item} onNavigateContent={onNavigateContent} />
|
<PostThreadItem item={item} onNavigateContent={onNavigateContent} />
|
||||||
|
|
|
@ -27,6 +27,7 @@ export const PostThreadItem = observer(function PostThreadItem({
|
||||||
}) {
|
}) {
|
||||||
const record = item.record as unknown as bsky.Post.Record
|
const record = item.record as unknown as bsky.Post.Record
|
||||||
const hasEngagement = item.likeCount || item.repostCount
|
const hasEngagement = item.likeCount || item.repostCount
|
||||||
|
|
||||||
const onPressOuter = () => {
|
const onPressOuter = () => {
|
||||||
const urip = new AdxUri(item.uri)
|
const urip = new AdxUri(item.uri)
|
||||||
onNavigateContent('PostThread', {
|
onNavigateContent('PostThread', {
|
||||||
|
@ -34,24 +35,34 @@ export const PostThreadItem = observer(function PostThreadItem({
|
||||||
recordKey: urip.recordKey,
|
recordKey: urip.recordKey,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const onPressAuthor = () => {
|
||||||
|
onNavigateContent('Profile', {
|
||||||
|
name: item.author.name,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
|
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
|
||||||
<View style={styles.layout}>
|
<View style={styles.layout}>
|
||||||
{iter(Math.abs(item._depth), (i: number) => (
|
{iter(Math.abs(item._depth), (i: number) => (
|
||||||
<View key={i} style={styles.replyBar} />
|
<View key={i} style={styles.replyBar} />
|
||||||
))}
|
))}
|
||||||
<View style={styles.layoutAvi}>
|
<TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
|
||||||
<Image
|
<Image
|
||||||
style={styles.avi}
|
style={styles.avi}
|
||||||
source={AVIS[item.author.name] || AVIS['alice.com']}
|
source={AVIS[item.author.name] || AVIS['alice.com']}
|
||||||
/>
|
/>
|
||||||
</View>
|
</TouchableOpacity>
|
||||||
<View style={styles.layoutContent}>
|
<View style={styles.layoutContent}>
|
||||||
<View style={styles.meta}>
|
<View style={styles.meta}>
|
||||||
<Text style={[styles.metaItem, s.f15, s.bold]}>
|
<Text
|
||||||
|
style={[styles.metaItem, s.f15, s.bold]}
|
||||||
|
onPress={onPressAuthor}>
|
||||||
{item.author.displayName}
|
{item.author.displayName}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={[styles.metaItem, s.f14, s.gray]}>
|
<Text
|
||||||
|
style={[styles.metaItem, s.f14, s.gray]}
|
||||||
|
onPress={onPressAuthor}>
|
||||||
@{item.author.name}
|
@{item.author.name}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={[styles.metaItem, s.f14, s.gray]}>
|
<Text style={[styles.metaItem, s.f14, s.gray]}>
|
||||||
|
|
|
@ -0,0 +1,105 @@
|
||||||
|
import React, {useState, useEffect} from 'react'
|
||||||
|
import {observer} from 'mobx-react-lite'
|
||||||
|
import {ActivityIndicator, Image, StyleSheet, Text, View} from 'react-native'
|
||||||
|
import {OnNavigateContent} from '../../routes/types'
|
||||||
|
import {ProfileViewModel} from '../../../state/models/profile-view'
|
||||||
|
import {useStores} from '../../../state'
|
||||||
|
import {pluralize} from '../../lib/strings'
|
||||||
|
import {s} from '../../lib/styles'
|
||||||
|
import {AVIS} from '../../lib/assets'
|
||||||
|
|
||||||
|
export const ProfileHeader = observer(function ProfileHeader({
|
||||||
|
user,
|
||||||
|
}: // onNavigateContent,
|
||||||
|
{
|
||||||
|
user: string
|
||||||
|
onNavigateContent: OnNavigateContent
|
||||||
|
}) {
|
||||||
|
const store = useStores()
|
||||||
|
const [view, setView] = useState<ProfileViewModel | undefined>()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (view?.params.user === user) {
|
||||||
|
console.log('Profile header doing nothing')
|
||||||
|
return // no change needed? or trigger refresh?
|
||||||
|
}
|
||||||
|
console.log('Fetching profile', user)
|
||||||
|
const newView = new ProfileViewModel(store, {user: user})
|
||||||
|
setView(newView)
|
||||||
|
newView.setup().catch(err => console.error('Failed to fetch profile', err))
|
||||||
|
}, [user, view?.params.user, store])
|
||||||
|
|
||||||
|
// loading
|
||||||
|
// =
|
||||||
|
if (
|
||||||
|
!view ||
|
||||||
|
(view.isLoading && !view.isRefreshing) ||
|
||||||
|
view.params.user !== user
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<ActivityIndicator />
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// error
|
||||||
|
// =
|
||||||
|
if (view.hasError) {
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<Text>{view.error}</Text>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// loaded
|
||||||
|
// =
|
||||||
|
return (
|
||||||
|
<View style={styles.outer}>
|
||||||
|
<Image style={styles.avi} source={AVIS[view.name] || AVIS['alice.com']} />
|
||||||
|
<View style={[styles.nameLine, s.mb2]}>
|
||||||
|
<Text style={[s.bold, s.f18, s.mr2]}>{view.displayName}</Text>
|
||||||
|
<Text style={[s.gray]}>@{view.name}</Text>
|
||||||
|
</View>
|
||||||
|
{view.description && (
|
||||||
|
<Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text>
|
||||||
|
)}
|
||||||
|
<View style={s.flexRow}>
|
||||||
|
<View style={[s.flexRow, s.mr10]}>
|
||||||
|
<Text style={[s.bold, s.mr2]}>{view.followersCount}</Text>
|
||||||
|
<Text style={s.gray}>
|
||||||
|
{pluralize(view.followersCount, 'follower')}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View style={[s.flexRow, s.mr10]}>
|
||||||
|
<Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
|
||||||
|
<Text style={s.gray}>following</Text>
|
||||||
|
</View>
|
||||||
|
<View style={[s.flexRow, s.mr10]}>
|
||||||
|
<Text style={[s.bold, s.mr2]}>{view.postsCount}</Text>
|
||||||
|
<Text style={s.gray}>{pluralize(view.postsCount, 'post')}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
outer: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
padding: 10,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderColor: '#eee',
|
||||||
|
},
|
||||||
|
avi: {
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
borderRadius: 30,
|
||||||
|
resizeMode: 'cover',
|
||||||
|
},
|
||||||
|
nameLine: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
},
|
||||||
|
})
|
|
@ -34,4 +34,21 @@ export const s = StyleSheet.create({
|
||||||
// colors
|
// colors
|
||||||
black: {color: 'black'},
|
black: {color: 'black'},
|
||||||
gray: {color: 'gray'},
|
gray: {color: 'gray'},
|
||||||
|
|
||||||
|
// margins
|
||||||
|
mr2: {marginRight: 2},
|
||||||
|
mr5: {marginRight: 5},
|
||||||
|
mr10: {marginRight: 10},
|
||||||
|
ml2: {marginLeft: 2},
|
||||||
|
ml5: {marginLeft: 5},
|
||||||
|
ml10: {marginLeft: 10},
|
||||||
|
mt2: {marginTop: 2},
|
||||||
|
mt5: {marginTop: 5},
|
||||||
|
mt10: {marginTop: 10},
|
||||||
|
mb2: {marginBottom: 2},
|
||||||
|
mb5: {marginBottom: 5},
|
||||||
|
mb10: {marginBottom: 10},
|
||||||
|
|
||||||
|
// flex
|
||||||
|
flexRow: {flexDirection: 'row'},
|
||||||
})
|
})
|
||||||
|
|
|
@ -56,6 +56,7 @@ const tabBarScreenOptions = ({
|
||||||
route: RouteProp<ParamListBase, string>
|
route: RouteProp<ParamListBase, string>
|
||||||
}) => ({
|
}) => ({
|
||||||
headerShown: false,
|
headerShown: false,
|
||||||
|
tabBarShowLabel: false,
|
||||||
tabBarIcon: (state: {focused: boolean; color: string; size: number}) => {
|
tabBarIcon: (state: {focused: boolean; color: string; size: number}) => {
|
||||||
switch (route.name) {
|
switch (route.name) {
|
||||||
case 'HomeTab':
|
case 'HomeTab':
|
||||||
|
|
|
@ -34,6 +34,7 @@ export const PostThread = ({
|
||||||
// @ts-ignore it's up to the callers to supply correct params -prf
|
// @ts-ignore it's up to the callers to supply correct params -prf
|
||||||
navigation.push(screen, props)
|
navigation.push(screen, props)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Shell>
|
<Shell>
|
||||||
<PostThreadComponent uri={uri} onNavigateContent={onNavigateContent} />
|
<PostThreadComponent uri={uri} onNavigateContent={onNavigateContent} />
|
||||||
|
|
|
@ -1,16 +1,43 @@
|
||||||
import React from 'react'
|
import React, {useState, useEffect} from 'react'
|
||||||
import {Shell} from '../../shell'
|
import {Shell} from '../../shell'
|
||||||
import {View, Text} from 'react-native'
|
|
||||||
import type {RootTabsScreenProps} from '../../routes/types'
|
import type {RootTabsScreenProps} from '../../routes/types'
|
||||||
|
import {FeedViewModel} from '../../../state/models/feed-view'
|
||||||
|
import {useStores} from '../../../state'
|
||||||
|
import {ProfileHeader} from '../../com/profile/ProfileHeader'
|
||||||
|
import {Feed} from '../../com/feed/Feed'
|
||||||
|
|
||||||
|
export const Profile = ({
|
||||||
|
navigation,
|
||||||
|
route,
|
||||||
|
}: RootTabsScreenProps<'Profile'>) => {
|
||||||
|
const store = useStores()
|
||||||
|
const [feedView, setFeedView] = useState<FeedViewModel | undefined>()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (feedView?.params.author === route.params.name) {
|
||||||
|
console.log('Profile feed view')
|
||||||
|
return // no change needed? or trigger refresh?
|
||||||
|
}
|
||||||
|
console.log('Fetching profile feed view', route.params.name)
|
||||||
|
const newFeedView = new FeedViewModel(store, {author: route.params.name})
|
||||||
|
setFeedView(newFeedView)
|
||||||
|
newFeedView.setup().catch(err => console.error('Failed to fetch feed', err))
|
||||||
|
}, [route.params.name, feedView?.params.author, store])
|
||||||
|
|
||||||
|
const onNavigateContent = (screen: string, props: Record<string, string>) => {
|
||||||
|
// @ts-ignore it's up to the callers to supply correct params -prf
|
||||||
|
navigation.push(screen, props)
|
||||||
|
}
|
||||||
|
|
||||||
export const Profile = ({route}: RootTabsScreenProps<'Profile'>) => {
|
|
||||||
return (
|
return (
|
||||||
<Shell>
|
<Shell>
|
||||||
<View style={{justifyContent: 'center', alignItems: 'center'}}>
|
<ProfileHeader
|
||||||
<Text style={{fontSize: 20, fontWeight: 'bold'}}>
|
user={route.params.name}
|
||||||
{route.params?.name}'s profile
|
onNavigateContent={onNavigateContent}
|
||||||
</Text>
|
/>
|
||||||
</View>
|
{feedView && (
|
||||||
|
<Feed feed={feedView} onNavigateContent={onNavigateContent} />
|
||||||
|
)}
|
||||||
</Shell>
|
</Shell>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
10
todos.txt
10
todos.txt
|
@ -4,12 +4,14 @@ Paul's todo list
|
||||||
- Like btn
|
- Like btn
|
||||||
- Repost btn
|
- Repost btn
|
||||||
- Share btn
|
- Share btn
|
||||||
- Navigate to profile on avi or username click
|
|
||||||
- Thread view
|
- Thread view
|
||||||
- Mock API support fetch on thread that's not root
|
|
||||||
- View likes list
|
- View likes list
|
||||||
- View reposts list
|
- View reposts list
|
||||||
- Reply control
|
- Reply control
|
||||||
|
- Profile view
|
||||||
|
- Follow / Unfollow
|
||||||
|
- Badges
|
||||||
- Compose post control
|
- Compose post control
|
||||||
- Navigation
|
- Linking
|
||||||
- Stack behavior when navigating content
|
- Web linking
|
||||||
|
- App linking
|
|
@ -55,9 +55,9 @@
|
||||||
ucans "0.9.0-alpha3"
|
ucans "0.9.0-alpha3"
|
||||||
uint8arrays "^3.0.0"
|
uint8arrays "^3.0.0"
|
||||||
|
|
||||||
"@adxp/mock-api@git+ssh://git@github.com:bluesky-social/adx-mock-api.git#464712517e8f42b307622aa625bf2b2e11ad763e":
|
"@adxp/mock-api@git+ssh://git@github.com:bluesky-social/adx-mock-api.git#19dc93e569fa71ae3de85876b3707afd47a6fe8c":
|
||||||
version "0.0.1"
|
version "0.0.1"
|
||||||
resolved "git+ssh://git@github.com:bluesky-social/adx-mock-api.git#464712517e8f42b307622aa625bf2b2e11ad763e"
|
resolved "git+ssh://git@github.com:bluesky-social/adx-mock-api.git#19dc93e569fa71ae3de85876b3707afd47a6fe8c"
|
||||||
dependencies:
|
dependencies:
|
||||||
ajv "^8.11.0"
|
ajv "^8.11.0"
|
||||||
ajv-formats "^2.1.1"
|
ajv-formats "^2.1.1"
|
||||||
|
|
Loading…
Reference in New Issue