From cc8a1702043cfbd783f4caa61ab9eb8aeb421072 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 21 Jul 2022 19:55:04 -0500 Subject: [PATCH] Add profile view --- package.json | 2 +- src/state/models/feed-view.ts | 8 +- src/state/models/post-thread-view.ts | 5 +- src/state/models/profile-view.ts | 105 ++++++++++++++++++++ src/view/com/feed/FeedItem.tsx | 19 +++- src/view/com/post-thread/PostThread.tsx | 7 +- src/view/com/post-thread/PostThreadItem.tsx | 19 +++- src/view/com/profile/ProfileHeader.tsx | 105 ++++++++++++++++++++ src/view/lib/styles.ts | 17 ++++ src/view/routes/index.tsx | 1 + src/view/screens/content/PostThread.tsx | 1 + src/view/screens/content/Profile.tsx | 43 ++++++-- todos.txt | 10 +- yarn.lock | 4 +- 14 files changed, 319 insertions(+), 27 deletions(-) create mode 100644 src/state/models/profile-view.ts create mode 100644 src/view/com/profile/ProfileHeader.tsx diff --git a/package.json b/package.json index ecc50984..e31d4544 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "dependencies": { "@adxp/auth": "*", "@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/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", diff --git a/src/state/models/feed-view.ts b/src/state/models/feed-view.ts index 51379b5c..cdad6783 100644 --- a/src/state/models/feed-view.ts +++ b/src/state/models/feed-view.ts @@ -3,7 +3,10 @@ import {bsky} from '@adxp/mock-api' import {RootStoreModel} from './root-store' export class FeedViewItemModel implements bsky.FeedView.FeedItem { + // ui state _reactKey: string = '' + + // data uri: string = '' author: bsky.FeedView.User = {did: '', name: '', displayName: ''} repostedBy?: bsky.FeedView.User @@ -25,14 +28,17 @@ export class FeedViewItemModel implements bsky.FeedView.FeedItem { } export class FeedViewModel implements bsky.FeedView.Response { + // state isLoading = false isRefreshing = false hasLoaded = false error = '' params: bsky.FeedView.Params - feed: FeedViewItemModel[] = [] _loadMorePromise: Promise | undefined + // data + feed: FeedViewItemModel[] = [] + constructor(public rootStore: RootStoreModel, params: bsky.FeedView.Params) { makeAutoObservable( this, diff --git a/src/state/models/post-thread-view.ts b/src/state/models/post-thread-view.ts index 2e545a2a..3c3b8d92 100644 --- a/src/state/models/post-thread-view.ts +++ b/src/state/models/post-thread-view.ts @@ -72,12 +72,15 @@ export class PostThreadViewPostModel implements bsky.PostThreadView.Post { const UNLOADED_THREAD = new PostThreadViewPostModel('') export class PostThreadViewModel implements bsky.PostThreadView.Response { + // state isLoading = false isRefreshing = false hasLoaded = false error = '' resolvedUri = '' params: bsky.PostThreadView.Params + + // data thread: PostThreadViewPostModel = UNLOADED_THREAD constructor( @@ -167,7 +170,7 @@ export class PostThreadViewModel implements bsky.PostThreadView.Response { private async _refresh() { this._xLoading(true) // TODO: refetch and update items - await new Promise(r => setTimeout(r, 1e3)) // DEBUG + await new Promise(r => setTimeout(r, 250)) // DEBUG this._xIdle() } diff --git a/src/state/models/profile-view.ts b/src/state/models/profile-view.ts new file mode 100644 index 00000000..836cb3f7 --- /dev/null +++ b/src/state/models/profile-view.ts @@ -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 + } +} diff --git a/src/view/com/feed/FeedItem.tsx b/src/view/com/feed/FeedItem.tsx index 9cf70578..5e5a82a7 100644 --- a/src/view/com/feed/FeedItem.tsx +++ b/src/view/com/feed/FeedItem.tsx @@ -17,6 +17,7 @@ export const FeedItem = observer(function FeedItem({ onNavigateContent: OnNavigateContent }) { const record = item.record as unknown as bsky.Post.Record + const onPressOuter = () => { const urip = new AdxUri(item.uri) onNavigateContent('PostThread', { @@ -24,6 +25,12 @@ export const FeedItem = observer(function FeedItem({ recordKey: urip.recordKey, }) } + const onPressAuthor = () => { + onNavigateContent('Profile', { + name: item.author.name, + }) + } + return ( {item.repostedBy && ( @@ -35,18 +42,22 @@ export const FeedItem = observer(function FeedItem({ )} - + - + - + {item.author.displayName} - + @{item.author.name} diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index 9622ceb4..3623abde 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -30,7 +30,8 @@ export const PostThread = observer(function PostThread({ newView.setup().catch(err => console.error('Failed to fetch thread', err)) }, [uri, view?.params.uri, store]) - // not yet setup + // loading + // = if ( !view || (view.isLoading && !view.isRefreshing) || @@ -44,6 +45,7 @@ export const PostThread = observer(function PostThread({ } // error + // = if (view.hasError) { return ( @@ -52,7 +54,8 @@ export const PostThread = observer(function PostThread({ ) } - // rendering + // loaded + // = const posts = Array.from(flattenThread(view.thread)) const renderItem = ({item}: {item: PostThreadViewPostModel}) => ( diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 5e01ac0a..8628f67c 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -27,6 +27,7 @@ export const PostThreadItem = observer(function PostThreadItem({ }) { const record = item.record as unknown as bsky.Post.Record const hasEngagement = item.likeCount || item.repostCount + const onPressOuter = () => { const urip = new AdxUri(item.uri) onNavigateContent('PostThread', { @@ -34,24 +35,34 @@ export const PostThreadItem = observer(function PostThreadItem({ recordKey: urip.recordKey, }) } + const onPressAuthor = () => { + onNavigateContent('Profile', { + name: item.author.name, + }) + } + return ( {iter(Math.abs(item._depth), (i: number) => ( ))} - + - + - + {item.author.displayName} - + @{item.author.name} diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx new file mode 100644 index 00000000..50bc2bd1 --- /dev/null +++ b/src/view/com/profile/ProfileHeader.tsx @@ -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() + + 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 ( + + + + ) + } + + // error + // = + if (view.hasError) { + return ( + + {view.error} + + ) + } + + // loaded + // = + return ( + + + + {view.displayName} + @{view.name} + + {view.description && ( + {view.description} + )} + + + {view.followersCount} + + {pluralize(view.followersCount, 'follower')} + + + + {view.followsCount} + following + + + {view.postsCount} + {pluralize(view.postsCount, 'post')} + + + + ) +}) + +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', + }, +}) diff --git a/src/view/lib/styles.ts b/src/view/lib/styles.ts index 44ee2dba..d80e2d03 100644 --- a/src/view/lib/styles.ts +++ b/src/view/lib/styles.ts @@ -34,4 +34,21 @@ export const s = StyleSheet.create({ // colors black: {color: 'black'}, 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'}, }) diff --git a/src/view/routes/index.tsx b/src/view/routes/index.tsx index 58aa0ad8..c44076a6 100644 --- a/src/view/routes/index.tsx +++ b/src/view/routes/index.tsx @@ -56,6 +56,7 @@ const tabBarScreenOptions = ({ route: RouteProp }) => ({ headerShown: false, + tabBarShowLabel: false, tabBarIcon: (state: {focused: boolean; color: string; size: number}) => { switch (route.name) { case 'HomeTab': diff --git a/src/view/screens/content/PostThread.tsx b/src/view/screens/content/PostThread.tsx index e990bcc1..fde74e77 100644 --- a/src/view/screens/content/PostThread.tsx +++ b/src/view/screens/content/PostThread.tsx @@ -34,6 +34,7 @@ export const PostThread = ({ // @ts-ignore it's up to the callers to supply correct params -prf navigation.push(screen, props) } + return ( diff --git a/src/view/screens/content/Profile.tsx b/src/view/screens/content/Profile.tsx index cfbf840f..ccdaed4a 100644 --- a/src/view/screens/content/Profile.tsx +++ b/src/view/screens/content/Profile.tsx @@ -1,16 +1,43 @@ -import React from 'react' +import React, {useState, useEffect} from 'react' import {Shell} from '../../shell' -import {View, Text} from 'react-native' 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() + + 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) => { + // @ts-ignore it's up to the callers to supply correct params -prf + navigation.push(screen, props) + } -export const Profile = ({route}: RootTabsScreenProps<'Profile'>) => { return ( - - - {route.params?.name}'s profile - - + + {feedView && ( + + )} ) } diff --git a/todos.txt b/todos.txt index a694a1f6..8d39ddfe 100644 --- a/todos.txt +++ b/todos.txt @@ -4,12 +4,14 @@ Paul's todo list - Like btn - Repost btn - Share btn - - Navigate to profile on avi or username click - Thread view - - Mock API support fetch on thread that's not root - View likes list - View reposts list - Reply control +- Profile view + - Follow / Unfollow + - Badges - Compose post control -- Navigation - - Stack behavior when navigating content \ No newline at end of file +- Linking + - Web linking + - App linking \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 6992305c..d4a0a936 100644 --- a/yarn.lock +++ b/yarn.lock @@ -55,9 +55,9 @@ ucans "0.9.0-alpha3" 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" - 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: ajv "^8.11.0" ajv-formats "^2.1.1"