Add creator to scene profile header

3 files changed, 38 insertions, 14 deletions

diff --git a/src/state/models/profile-view.ts b/src/state/models/profile-view.ts
index a2919e2e7..62a17a6fd 100644
--- a/src/state/models/profile-view.ts
+++ b/src/state/models/profile-view.ts
@@ -27,6 +27,7 @@ export class ProfileViewModel {
   did: string = ''
   handle: string = ''
   actorType = ACTOR_TYPE_USER
+  creator: string = ''
   displayName?: string
   description?: string
   followersCount: number = 0
@@ -145,6 +146,7 @@ export class ProfileViewModel {
     this.did = res.data.did
     this.handle = res.data.handle
     this.actorType = res.data.actorType
+    this.creator = res.data.creator
     this.displayName = res.data.displayName
     this.description = res.data.description
     this.followersCount = res.data.followersCount
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index d1dcd0525..61e18c2b6 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -18,6 +18,7 @@ import {getGradient} from '../../lib/asset-gen'
 import Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
 import {UserBanner} from '../util/UserBanner'
+import {UserInfoText} from '../util/UserInfoText'
 
 export const ProfileHeader = observer(function ProfileHeader({
   view,
@@ -194,19 +195,20 @@ export const ProfileHeader = observer(function ProfileHeader({
             </Text>
           </View>
         </View>
-        {view.description && (
+        {view.description ? (
           <Text style={[s.mb5, s.f16, s['lh16-1.3']]}>{view.description}</Text>
-        )}
-        {
-          undefined /*<View style={styles.badgesLine}>
-          <FontAwesomeIcon icon="shield" style={s.mr5} size={12} />
-          <Link href="/" title="Badge TODO">
-            <Text style={[s.f12, s.bold]}>
-              Employee <Text style={[s.blue3]}>@blueskyweb.xyz</Text>
-            </Text>
-          </Link>
-        </View>*/
-        }
+        ) : undefined}
+        {view.isScene && view.creator ? (
+          <View style={styles.relationshipsLine}>
+            <Text style={[s.mr2, s.gray5]}>Created by</Text>
+            <UserInfoText
+              style={[s.blue3]}
+              did={view.creator}
+              prefix="@"
+              asLink
+            />
+          </View>
+        ) : undefined}
       </View>
     </View>
   )
@@ -313,7 +315,7 @@ const styles = StyleSheet.create({
     fontSize: 15,
   },
 
-  badgesLine: {
+  relationshipsLine: {
     flexDirection: 'row',
     alignItems: 'center',
     marginBottom: 10,
diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx
index 77fb59886..755e6ef4f 100644
--- a/src/view/com/util/UserInfoText.tsx
+++ b/src/view/com/util/UserInfoText.tsx
@@ -1,6 +1,7 @@
 import React, {useState, useEffect} from 'react'
 import * as GetProfile from '../../../third-party/api/src/client/types/app/bsky/actor/getProfile'
 import {StyleProp, Text, TextStyle} from 'react-native'
+import {Link} from './Link'
 import {useStores} from '../../../state'
 
 export function UserInfoText({
@@ -10,6 +11,7 @@ export function UserInfoText({
   failed,
   prefix,
   style,
+  asLink,
 }: {
   did: string
   attr?: keyof GetProfile.OutputSchema
@@ -17,6 +19,7 @@ export function UserInfoText({
   failed?: string
   prefix?: string
   style?: StyleProp<TextStyle>
+  asLink?: boolean
 }) {
   attr = attr || 'handle'
   loading = loading || '...'
@@ -46,9 +49,26 @@ export function UserInfoText({
     }
   }, [did, store.api.app.bsky])
 
+  if (asLink) {
+    const title = profile?.displayName || profile?.handle || 'User'
+    return (
+      <Link
+        href={`/profile/${profile?.handle ? profile.handle : did}`}
+        title={title}>
+        <Text style={style}>
+          {didFail
+            ? failed
+            : profile
+            ? `${prefix || ''}${profile[attr]}`
+            : loading}
+        </Text>
+      </Link>
+    )
+  }
+
   return (
     <Text style={style}>
-      {didFail ? failed : profile ? `${prefix}${profile[attr]}` : loading}
+      {didFail ? failed : profile ? `${prefix || ''}${profile[attr]}` : loading}
     </Text>
   )
 }