Add profile view

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",

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<void> | undefined
 
+  // data
+  feed: FeedViewItemModel[] = []
+
   constructor(public rootStore: RootStoreModel, params: bsky.FeedView.Params) {
     makeAutoObservable(
       this,

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

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

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 (
     <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
       {item.repostedBy && (
@@ -35,18 +42,22 @@ export const FeedItem = observer(function FeedItem({
         </View>
       )}
       <View style={styles.layout}>
-        <View style={styles.layoutAvi}>
+        <TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
           <Image
             style={styles.avi}
             source={AVIS[item.author.name] || AVIS['alice.com']}
           />
-        </View>
+        </TouchableOpacity>
         <View style={styles.layoutContent}>
           <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}
             </Text>
-            <Text style={[styles.metaItem, s.f14, s.gray]}>
+            <Text
+              style={[styles.metaItem, s.f14, s.gray]}
+              onPress={onPressAuthor}>
               @{item.author.name}
             </Text>
             <Text style={[styles.metaItem, s.f14, s.gray]}>

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 (
       <View>
@@ -52,7 +54,8 @@ export const PostThread = observer(function PostThread({
     )
   }
 
-  // rendering
+  // loaded
+  // =
   const posts = Array.from(flattenThread(view.thread))
   const renderItem = ({item}: {item: PostThreadViewPostModel}) => (
     <PostThreadItem item={item} onNavigateContent={onNavigateContent} />

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 (
     <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
       <View style={styles.layout}>
         {iter(Math.abs(item._depth), (i: number) => (
           <View key={i} style={styles.replyBar} />
         ))}
-        <View style={styles.layoutAvi}>
+        <TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
           <Image
             style={styles.avi}
             source={AVIS[item.author.name] || AVIS['alice.com']}
           />
-        </View>
+        </TouchableOpacity>
         <View style={styles.layoutContent}>
           <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}
             </Text>
-            <Text style={[styles.metaItem, s.f14, s.gray]}>
+            <Text
+              style={[styles.metaItem, s.f14, s.gray]}
+              onPress={onPressAuthor}>
               @{item.author.name}
             </Text>
             <Text style={[styles.metaItem, s.f14, s.gray]}>

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<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',
+  },
+})

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

src/view/routes/index.tsx

@@ -56,6 +56,7 @@ const tabBarScreenOptions = ({
   route: RouteProp<ParamListBase, string>
 }) => ({
   headerShown: false,
+  tabBarShowLabel: false,
   tabBarIcon: (state: {focused: boolean; color: string; size: number}) => {
     switch (route.name) {
       case 'HomeTab':

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 (
     <Shell>
       <PostThreadComponent uri={uri} onNavigateContent={onNavigateContent} />

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

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
+- Linking
-  - Stack behavior when navigating content
+  - Web linking
+  - App linking

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"