Add actor types to the profiles and clean up the UI

src/state/models/profile-ui.ts

@@ -3,19 +3,21 @@ import {RootStoreModel} from './root-store'
 import {ProfileViewModel} from './profile-view'
 import {FeedModel} from './feed-view'
 
-export const SECTION_IDS = {
+export enum Sections {
-  POSTS: 0,
+  Posts = 'Posts',
-  BADGES: 1,
+  Scenes = 'Scenes',
+  Trending = 'Trending',
+  Members = 'Members',
 }
 
+const USER_SELECTOR_ITEMS = [Sections.Posts, Sections.Scenes]
+const SCENE_SELECTOR_ITEMS = [Sections.Trending, Sections.Members]
+
 export interface ProfileUiParams {
   user: string
 }
 
 export class ProfileUiModel {
-  // constants
-  static SELECTOR_ITEMS = ['Posts', 'Scenes']
-
   // data
   profile: ProfileViewModel
   feed: FeedModel
@@ -43,7 +45,10 @@ export class ProfileUiModel {
   }
 
   get currentView(): FeedModel {
-    if (this.selectedViewIndex === SECTION_IDS.POSTS) {
+    if (
+      this.selectedView === Sections.Posts ||
+      this.selectedView === Sections.Trending
+    ) {
       return this.feed
     }
     throw new Error(`Invalid selector value: ${this.selectedViewIndex}`)
@@ -58,6 +63,28 @@ export class ProfileUiModel {
     return this.profile.isRefreshing || this.currentView.isRefreshing
   }
 
+  get isUser() {
+    return this.profile.isUser
+  }
+
+  get isScene() {
+    return this.profile.isScene
+  }
+
+  get selectorItems() {
+    if (this.isUser) {
+      return USER_SELECTOR_ITEMS
+    } else if (this.isScene) {
+      return SCENE_SELECTOR_ITEMS
+    } else {
+      return USER_SELECTOR_ITEMS
+    }
+  }
+
+  get selectedView() {
+    return this.selectorItems[this.selectedViewIndex]
+  }
+
   // public api
   // =
 

src/state/models/profile-view.ts

@@ -4,6 +4,9 @@ import * as Profile from '../../third-party/api/src/client/types/app/bsky/actor/
 import {RootStoreModel} from './root-store'
 import * as apilib from '../lib/api'
 
+export const ACTOR_TYPE_USER = 'app.bsky.system.actorUser'
+export const ACTOR_TYPE_SCENE = 'app.bsky.system.actorScene'
+
 export class ProfileViewMyStateModel {
   follow?: string
 
@@ -23,6 +26,7 @@ export class ProfileViewModel {
   // data
   did: string = ''
   handle: string = ''
+  actorType = ACTOR_TYPE_USER
   displayName?: string
   description?: string
   followersCount: number = 0
@@ -57,6 +61,14 @@ export class ProfileViewModel {
     return this.hasLoaded && !this.hasContent
   }
 
+  get isUser() {
+    return this.actorType === ACTOR_TYPE_USER
+  }
+
+  get isScene() {
+    return this.actorType === ACTOR_TYPE_SCENE
+  }
+
   // public api
   // =
 

src/view/com/profile/ProfileHeader.tsx

@@ -102,9 +102,88 @@ export const ProfileHeader = observer(function ProfileHeader({
         />
       </View>
       <View style={styles.content}>
-        <View style={[styles.displayNameLine]}>
+        <View style={[styles.buttonsLine]}>
+          {isMe ? (
+            <TouchableOpacity
+              onPress={onPressEditProfile}
+              style={[styles.btn, styles.mainBtn]}>
+              <Text style={[s.fw400, s.f14]}>Edit Profile</Text>
+            </TouchableOpacity>
+          ) : (
+            <>
+              {view.myState.follow ? (
+                <TouchableOpacity
+                  onPress={onPressToggleFollow}
+                  style={[styles.btn, styles.mainBtn]}>
+                  <FontAwesomeIcon icon="check" style={[s.mr5]} size={14} />
+                  <Text style={[s.fw400, s.f14]}>Following</Text>
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity onPress={onPressToggleFollow}>
+                  <LinearGradient
+                    colors={[gradients.primary.start, gradients.primary.end]}
+                    start={{x: 0, y: 0}}
+                    end={{x: 1, y: 1}}
+                    style={[styles.btn, styles.gradientBtn]}>
+                    <FontAwesomeIcon icon="plus" style={[s.white, s.mr5]} />
+                    <Text style={[s.white, s.fw600, s.f16]}>Follow</Text>
+                  </LinearGradient>
+                </TouchableOpacity>
+              )}
+            </>
+          )}
+          <TouchableOpacity
+            onPress={onPressMenu}
+            style={[styles.btn, styles.secondaryBtn]}>
+            <FontAwesomeIcon icon="ellipsis" style={[s.gray5]} />
+          </TouchableOpacity>
+        </View>
+        <View style={styles.displayNameLine}>
           <Text style={styles.displayName}>{view.displayName}</Text>
         </View>
+        <View style={styles.handleLine}>
+          {view.isScene ? (
+            <View style={styles.typeLabelWrapper}>
+              <Text style={styles.typeLabel}>Scene</Text>
+            </View>
+          ) : undefined}
+          <Text style={styles.handle}>@{view.handle}</Text>
+        </View>
+        <View style={styles.metricsLine}>
+          <TouchableOpacity
+            style={[s.flexRow, s.mr10]}
+            onPress={onPressFollowers}>
+            <Text style={[s.bold, s.mr2]}>{view.followersCount}</Text>
+            <Text style={s.gray5}>
+              {pluralize(view.followersCount, 'follower')}
+            </Text>
+          </TouchableOpacity>
+          {view.isUser ? (
+            <TouchableOpacity
+              style={[s.flexRow, s.mr10]}
+              onPress={onPressFollows}>
+              <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
+              <Text style={s.gray5}>following</Text>
+            </TouchableOpacity>
+          ) : undefined}
+          {view.isScene ? (
+            <TouchableOpacity
+              style={[s.flexRow, s.mr10]}
+              onPress={onPressFollows}>
+              <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
+              <Text style={s.gray5}>
+                {pluralize(view.followsCount, 'member')}
+              </Text>
+            </TouchableOpacity>
+          ) : undefined}
+          <View style={[s.flexRow, s.mr10]}>
+            <Text style={[s.bold, s.mr2]}>{view.postsCount}</Text>
+            <Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text>
+          </View>
+        </View>
+        {view.description && (
+          <Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text>
+        )}
         {
           undefined /*<View style={styles.badgesLine}>
           <FontAwesomeIcon icon="shield" style={s.mr5} size={12} />
@@ -115,71 +194,6 @@ export const ProfileHeader = observer(function ProfileHeader({
           </Link>
         </View>*/
         }
-        <View style={[styles.buttonsLine]}>
-          {isMe ? (
-            <TouchableOpacity
-              onPress={onPressEditProfile}
-              style={[styles.mainBtn, styles.btn]}>
-              <Text style={[s.fw400, s.f14]}>Edit Profile</Text>
-            </TouchableOpacity>
-          ) : (
-            <>
-              {view.myState.follow ? (
-                <TouchableOpacity
-                  onPress={onPressToggleFollow}
-                  style={[styles.mainBtn, styles.btn]}>
-                  <FontAwesomeIcon icon="check" style={[s.mr5]} size={14} />
-                  <Text style={[s.fw400, s.f14]}>Following</Text>
-                </TouchableOpacity>
-              ) : (
-                <TouchableOpacity
-                  onPress={onPressToggleFollow}
-                  style={[styles.mainBtn, styles.btn]}>
-                  <FontAwesomeIcon icon="rss" style={[s.mr5]} size={13} />
-                  <Text style={[s.fw400, s.f14]}>Follow</Text>
-                </TouchableOpacity>
-              )}
-              <TouchableOpacity
-                onPress={onPressMenu}
-                style={[styles.btn, styles.secondaryBtn, s.mr5]}>
-                <FontAwesomeIcon icon="user-plus" style={[s.gray5]} />
-              </TouchableOpacity>
-              <TouchableOpacity
-                onPress={onPressMenu}
-                style={[styles.btn, styles.secondaryBtn, s.mr5]}>
-                <FontAwesomeIcon icon="note-sticky" style={[s.gray5]} />
-              </TouchableOpacity>
-            </>
-          )}
-          <TouchableOpacity
-            onPress={onPressMenu}
-            style={[styles.btn, styles.secondaryBtn]}>
-            <FontAwesomeIcon icon="ellipsis" style={[s.gray5]} />
-          </TouchableOpacity>
-        </View>
-        <View style={[s.flexRow]}>
-          <TouchableOpacity
-            style={[s.flexRow, s.mr10]}
-            onPress={onPressFollowers}>
-            <Text style={[s.bold, s.mr2]}>{view.followersCount}</Text>
-            <Text style={s.gray5}>
-              {pluralize(view.followersCount, 'follower')}
-            </Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[s.flexRow, s.mr10]}
-            onPress={onPressFollows}>
-            <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
-            <Text style={s.gray5}>following</Text>
-          </TouchableOpacity>
-          <View style={[s.flexRow, s.mr10]}>
-            <Text style={[s.bold, s.mr2]}>{view.postsCount}</Text>
-            <Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text>
-          </View>
-        </View>
-        {view.description && (
-          <Text style={[s.mt10, s.f15, s['lh15-1.3']]}>{view.description}</Text>
-        )}
       </View>
     </View>
   )
@@ -222,46 +236,70 @@ const styles = StyleSheet.create({
     paddingHorizontal: 14,
     paddingBottom: 4,
   },
+
+  buttonsLine: {
+    flexDirection: 'row',
+    marginLeft: 'auto',
+    marginBottom: 12,
+  },
+  gradientBtn: {
+    paddingHorizontal: 24,
+    paddingVertical: 6,
+  },
+  mainBtn: {
+    paddingHorizontal: 24,
+  },
+  secondaryBtn: {
+    paddingHorizontal: 14,
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 7,
+    borderRadius: 50,
+    backgroundColor: colors.gray1,
+    marginLeft: 6,
+  },
+
   displayNameLine: {
-    paddingLeft: 86,
+    // paddingLeft: 86,
-    marginBottom: 14,
+    // marginBottom: 14,
   },
   displayName: {
     fontSize: 24,
     fontWeight: 'bold',
   },
+
+  handleLine: {
+    flexDirection: 'row',
+    marginBottom: 8,
+  },
+  handle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: colors.gray5,
+  },
+  typeLabelWrapper: {
+    backgroundColor: colors.gray1,
+    paddingHorizontal: 4,
+    borderRadius: 4,
+    marginRight: 5,
+  },
+  typeLabel: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: colors.gray5,
+  },
+
+  metricsLine: {
+    flexDirection: 'row',
+    marginBottom: 8,
+  },
+
   badgesLine: {
     flexDirection: 'row',
     alignItems: 'center',
     marginBottom: 10,
   },
-  buttonsLine: {
-    flexDirection: 'row',
-    marginBottom: 12,
-  },
-  followBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 6,
-    borderRadius: 6,
-    marginRight: 6,
-  },
-  btn: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 7,
-    borderRadius: 4,
-    backgroundColor: colors.gray1,
-    marginRight: 6,
-  },
-  mainBtn: {
-    flexDirection: 'row',
-  },
-  secondaryBtn: {
-    flex: 0,
-    paddingHorizontal: 14,
-    marginRight: 0,
-  },
 })

src/view/screens/Profile.tsx

@@ -1,9 +1,9 @@
-import React, {useEffect, useState} from 'react'
+import React, {useEffect, useState, useMemo} from 'react'
 import {StyleSheet, Text, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {ViewSelector} from '../com/util/ViewSelector'
 import {ScreenParams} from '../routes'
-import {ProfileUiModel, SECTION_IDS} from '../../state/models/profile-ui'
+import {ProfileUiModel, Sections} from '../../state/models/profile-ui'
 import {useStores} from '../../state'
 import {ProfileHeader} from '../com/profile/ProfileHeader'
 import {FeedItem} from '../com/posts/FeedItem'
@@ -18,25 +18,23 @@ const EMPTY_ITEM = {_reactKey: '__empty__'}
 export const Profile = observer(({visible, params}: ScreenParams) => {
   const store = useStores()
   const [hasSetup, setHasSetup] = useState<boolean>(false)
-  const [profileUiState, setProfileUiState] = useState<
+  const uiState = useMemo(
-    ProfileUiModel | undefined
+    () => new ProfileUiModel(store, {user: params.name}),
-  >()
+    [params.user],
+  )
 
   useEffect(() => {
     let aborted = false
     if (!visible) {
       return
     }
-    const user = params.name
     if (hasSetup) {
-      console.log('Updating profile for', user)
+      console.log('Updating profile for', params.name)
-      profileUiState?.update()
+      uiState.update()
     } else {
-      console.log('Fetching profile for', user)
+      console.log('Fetching profile for', params.name)
-      store.nav.setTitle(user)
+      store.nav.setTitle(params.name)
-      const newProfileUiState = new ProfileUiModel(store, {user})
+      uiState.setup().then(() => {
-      setProfileUiState(newProfileUiState)
-      newProfileUiState.setup().then(() => {
         if (aborted) return
         setHasSetup(true)
       })
@@ -50,42 +48,45 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
   // =
 
   const onSelectView = (index: number) => {
-    profileUiState?.setSelectedViewIndex(index)
+    uiState.setSelectedViewIndex(index)
   }
   const onRefresh = () => {
-    profileUiState
+    uiState
-      ?.refresh()
+      .refresh()
       .catch((err: any) => console.error('Failed to refresh', err))
   }
   const onEndReached = () => {
-    profileUiState
+    uiState
-      ?.loadMore()
+      .loadMore()
       .catch((err: any) => console.error('Failed to load more', err))
   }
   const onPressTryAgain = () => {
-    profileUiState?.setup()
+    uiState.setup()
   }
 
   // rendering
   // =
 
   const renderHeader = () => {
-    if (!profileUiState) {
+    if (!uiState) {
       return <View />
     }
-    return <ProfileHeader view={profileUiState.profile} />
+    return <ProfileHeader view={uiState.profile} />
   }
   let renderItem
   let items: any[] = []
-  if (profileUiState) {
+  if (uiState) {
-    if (profileUiState.selectedViewIndex === SECTION_IDS.POSTS) {
+    if (
-      if (profileUiState.isInitialLoading) {
+      uiState.selectedView === Sections.Posts ||
+      uiState.selectedView === Sections.Trending
+    ) {
+      if (uiState.isInitialLoading) {
         items.push(LOADING_ITEM)
         renderItem = () => <Text style={styles.loading}>Loading...</Text>
-      } else if (profileUiState.feed.hasError) {
+      } else if (uiState.feed.hasError) {
         items.push({
           _reactKey: '__error__',
-          error: profileUiState.feed.error,
+          error: uiState.feed.error,
         })
         renderItem = (item: any) => (
           <View style={s.p5}>
@@ -95,9 +96,9 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
             />
           </View>
         )
-      } else if (profileUiState.currentView.hasContent) {
+      } else if (uiState.currentView.hasContent) {
-        items = profileUiState.feed.feed.slice()
+        items = uiState.feed.feed.slice()
-        if (profileUiState.feed.hasReachedEnd) {
+        if (uiState.feed.hasReachedEnd) {
           items.push(END_ITEM)
         }
         renderItem = (item: any) => {
@@ -106,12 +107,11 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
           }
           return <FeedItem item={item} />
         }
-      } else if (profileUiState.currentView.isEmpty) {
+      } else if (uiState.currentView.isEmpty) {
         items.push(EMPTY_ITEM)
         renderItem = () => <Text style={styles.loading}>No posts yet!</Text>
       }
-    }
+    } else {
-    if (profileUiState.selectedViewIndex === SECTION_IDS.BADGES) {
       items.push(EMPTY_ITEM)
       renderItem = () => <Text>TODO</Text>
     }
@@ -122,20 +122,20 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
 
   return (
     <View style={styles.container}>
-      {profileUiState?.profile.hasError ? (
+      {uiState.profile.hasError ? (
         <ErrorScreen
           title="Failed to load profile"
           message={`There was an issue when attempting to load ${params.name}`}
-          details={profileUiState.profile.error}
+          details={uiState.profile.error}
           onPressTryAgain={onPressTryAgain}
         />
       ) : (
         <ViewSelector
-          sections={ProfileUiModel.SELECTOR_ITEMS}
+          sections={uiState.selectorItems}
           items={items}
           renderHeader={renderHeader}
           renderItem={renderItem}
-          refreshing={profileUiState?.isRefreshing || false}
+          refreshing={uiState.isRefreshing || false}
           onSelectView={onSelectView}
           onRefresh={onRefresh}
           onEndReached={onEndReached}