7e31645e9a
* Add theming system * Add standard Button control and update RadioButtons * Unify radiobutton with design system * Update debug screen to have multiple views * Add ToggleButton * Update error controls to use design system * Add typography to <Text> element * Move DropdownButton into the design system * Clean out old code * Move Text into design system * Add 'inverted' color palette * Move LoadingPlaceholder into the design system
80 lines
1.7 KiB
TypeScript
80 lines
1.7 KiB
TypeScript
import React, {useState, useEffect} from 'react'
|
|
import {AppBskyActorGetProfile as GetProfile} from '@atproto/api'
|
|
import {StyleProp, TextStyle} from 'react-native'
|
|
import {Link} from './Link'
|
|
import {Text} from './text/Text'
|
|
import {LoadingPlaceholder} from './LoadingPlaceholder'
|
|
import {useStores} from '../../../state'
|
|
|
|
export function UserInfoText({
|
|
did,
|
|
attr,
|
|
loading,
|
|
failed,
|
|
prefix,
|
|
style,
|
|
asLink,
|
|
}: {
|
|
did: string
|
|
attr?: keyof GetProfile.OutputSchema
|
|
loading?: string
|
|
failed?: string
|
|
prefix?: string
|
|
style?: StyleProp<TextStyle>
|
|
asLink?: boolean
|
|
}) {
|
|
attr = attr || 'handle'
|
|
loading = loading || '...'
|
|
failed = failed || 'user'
|
|
|
|
const store = useStores()
|
|
const [profile, setProfile] = useState<undefined | GetProfile.OutputSchema>(
|
|
undefined,
|
|
)
|
|
const [didFail, setFailed] = useState<boolean>(false)
|
|
|
|
useEffect(() => {
|
|
let aborted = false
|
|
store.profiles.getProfile(did).then(
|
|
v => {
|
|
if (aborted) return
|
|
setProfile(v.data)
|
|
},
|
|
_err => {
|
|
if (aborted) return
|
|
setFailed(true)
|
|
},
|
|
)
|
|
return () => {
|
|
aborted = true
|
|
}
|
|
}, [did, store.api.app.bsky])
|
|
|
|
let inner
|
|
if (didFail) {
|
|
inner = <Text style={style}>{failed}</Text>
|
|
} else if (profile) {
|
|
inner = <Text style={style}>{`${prefix || ''}${profile[attr]}`}</Text>
|
|
} else {
|
|
inner = (
|
|
<LoadingPlaceholder
|
|
width={80}
|
|
height={8}
|
|
style={{position: 'relative', top: 1, left: 2}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (asLink) {
|
|
const title = profile?.displayName || profile?.handle || 'User'
|
|
return (
|
|
<Link
|
|
href={`/profile/${profile?.handle ? profile.handle : did}`}
|
|
title={title}>
|
|
{inner}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
return inner
|
|
}
|