zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[APP-782] Support invalid handles correctly (#1049) 

* Update profile link construction to support handle.invalid

* Update list links  to support using handles

* Use did for isMe check to ensure invalid handles dont distort the check

* Shift the red (error) colors away from the pink spectrum

* Add ThemedText helper component

* Add sanitizedHandle() helper to render invalid handles well

* Fix regression: only show avatar in PostMeta when needed

* Restore the color of likes

* Remove users with invalid handles from default autosuggests
zio/stable
Paul Frazee 2023-07-27 10:50:12 -05:00 committed by GitHub
parent 5a0899b989
commit 49356700c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 291 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/link-meta/bsky.ts
View File

@ -122,11 +122,7 @@ export async function getPostAsQuote(
cid: threadView.thread.post.cid,
text: threadView.thread.postRecord?.text || '',
indexedAt: threadView.thread.post.indexedAt,
author: {
handle: threadView.thread.post.author.handle,
displayName: threadView.thread.post.author.displayName,
avatar: threadView.thread.post.author.avatar,
},
author: threadView.thread.post.author,
}
}

15
src/lib/routes/links.ts 100644
View File

@ -0,0 +1,15 @@
import {isInvalidHandle} from 'lib/strings/handles'
export function makeProfileLink(
info: {
did: string
handle: string
},
...segments: string[]
) {
return [
`/profile`,
`${isInvalidHandle(info.handle) ? info.did : info.handle}`,
...segments,
].join('/')
}

8
src/lib/strings/handles.ts
View File

@ -11,3 +11,11 @@ export function createFullHandle(name: string, domain: string): string {
domain = (domain || '').replace(/^[.]+/, '')
return `${name}.${domain}`
}
export function isInvalidHandle(handle: string): boolean {
return handle === 'handle.invalid'
}
export function sanitizeHandle(handle: string, prefix = ''): string {
return isInvalidHandle(handle) ? '⚠Invalid Handle' : `${prefix}${handle}`
}

16
src/lib/styles.ts
View File

@ -25,13 +25,13 @@ export const colors = {
blue6: '#012561',
blue7: '#001040',
red1: '#ffe6f2',
red2: '#fba2ce',
red3: '#ec4899',
red4: '#d1106f',
red5: '#97074e',
red6: '#690436',
red7: '#4F0328',
red1: '#ffe6eb',
red2: '#fba2b2',
red3: '#ec4868',
red4: '#d11043',
red5: '#970721',
red6: '#690419',
red7: '#4F0314',
pink1: '#f8ccff',
pink2: '#e966ff',
@ -53,6 +53,7 @@ export const colors = {
unreadNotifBg: '#ebf6ff',
brandBlue: '#0066FF',
like: '#ec4899',
}
export const gradients = {
@ -224,6 +225,7 @@ export const s = StyleSheet.create({
green5: {color: colors.green5},
brandBlue: {color: colors.brandBlue},
likeColor: {color: colors.like},
})
export function lh(

23
src/state/models/content/list.ts
View File

@ -1,4 +1,4 @@
import {makeAutoObservable} from 'mobx'
import {makeAutoObservable, runInAction} from 'mobx'
import {
AtUri,
AppBskyGraphGetList as GetList,
@ -115,6 +115,7 @@ export class ListModel {
}
this._xLoading(replace)
try {
await this._resolveUri()
const res = await this.rootStore.agent.app.bsky.graph.getList({
list: this.uri,
limit: PAGE_SIZE,
@ -146,6 +147,7 @@ export class ListModel {
if (!this.isOwner) {
throw new Error('Cannot edit this list')
}
await this._resolveUri()
// get the current record
const {rkey} = new AtUri(this.uri)
@ -179,6 +181,7 @@ export class ListModel {
if (!this.list) {
return
}
await this._resolveUri()
// fetch all the listitem records that belong to this list
let cursor
@ -220,6 +223,7 @@ export class ListModel {
if (!this.list) {
return
}
await this._resolveUri()
await this.rootStore.agent.app.bsky.graph.muteActorList({
list: this.list.uri,
})
@ -231,6 +235,7 @@ export class ListModel {
if (!this.list) {
return
}
await this._resolveUri()
await this.rootStore.agent.app.bsky.graph.unmuteActorList({
list: this.list.uri,
})
@ -273,6 +278,22 @@ export class ListModel {
// helper functions
// =
async _resolveUri() {
const urip = new AtUri(this.uri)
if (!urip.host.startsWith('did:')) {
try {
urip.host = await apilib.resolveName(this.rootStore, urip.host)
} catch (e: any) {
runInAction(() => {
this.error = e.toString()
})
}
}
runInAction(() => {
this.uri = urip.toString()
})
}
_replaceAll(res: GetList.Response) {
this.items = []
this._appendAll(res)

3
src/state/models/discovery/user-autocomplete.ts
View File

@ -2,6 +2,7 @@ import {makeAutoObservable, runInAction} from 'mobx'
import {AppBskyActorDefs} from '@atproto/api'
import AwaitLock from 'await-lock'
import {RootStoreModel} from '../root-store'
import {isInvalidHandle} from 'lib/strings/handles'
export class UserAutocompleteModel {
// state
@ -81,7 +82,7 @@ export class UserAutocompleteModel {
actor: this.rootStore.me.did || '',
})
runInAction(() => {
this.follows = res.data.follows
this.follows = res.data.follows.filter(f => !isInvalidHandle(f.handle))
for (const f of this.follows) {
this.knownHandles.add(f.handle)
}

3
src/state/models/feeds/custom-feed.ts
View File

@ -2,6 +2,7 @@ import {AppBskyFeedDefs} from '@atproto/api'
import {makeAutoObservable, runInAction} from 'mobx'
import {RootStoreModel} from 'state/models/root-store'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {updateDataOptimistically} from 'lib/async/revertible'
import {track} from 'lib/analytics/analytics'
@ -42,7 +43,7 @@ export class CustomFeedModel {
if (this.data.displayName) {
return sanitizeDisplayName(this.data.displayName)
}
return `Feed by @${this.data.creator.handle}`
return `Feed by ${sanitizeHandle(this.data.creator.handle, '@')}`
}
get isSaved() {

3
src/state/models/feeds/multi-feed.ts
View File

@ -5,6 +5,7 @@ import {RootStoreModel} from '../root-store'
import {CustomFeedModel} from './custom-feed'
import {PostsFeedModel} from './posts'
import {PostsFeedSliceModel} from './posts-slice'
import {makeProfileLink} from 'lib/routes/links'
const FEED_PAGE_SIZE = 10
const FEEDS_PAGE_SIZE = 3
@ -107,7 +108,7 @@ export class PostsMultiFeedModel {
_reactKey: `__feed_footer_${i}__`,
type: 'feed-footer',
title: feedInfo.displayName,
uri: `/profile/${feedInfo.data.creator.did}/feed/${urip.rkey}`,
uri: makeProfileLink(feedInfo.data.creator, 'feed', urip.rkey),
})
}
if (!this.hasMore) {

1
src/state/models/ui/shell.ts
View File

@ -208,6 +208,7 @@ export interface ComposerOptsQuote {
text: string
indexedAt: string
author: {
did: string
handle: string
displayName?: string
avatar?: string

4
src/view/com/composer/Composer.tsx
View File

@ -30,6 +30,7 @@ import * as apilib from 'lib/api/index'
import {ComposerOpts} from 'state/models/ui/shell'
import {s, colors, gradients} from 'lib/styles'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {cleanError} from 'lib/strings/errors'
import {SelectPhotoBtn} from './photos/SelectPhotoBtn'
import {OpenCameraBtn} from './photos/OpenCameraBtn'
@ -319,7 +320,8 @@ export const ComposePost = observer(function ComposePost({
<View style={styles.replyToPost}>
<Text type="xl-medium" style={[pal.text]}>
{sanitizeDisplayName(
replyTo.author.displayName || replyTo.author.handle,
replyTo.author.displayName ||
sanitizeHandle(replyTo.author.handle),
)}
</Text>
<Text type="post-text" style={pal.text} numberOfLines={6}>

3
src/view/com/feeds/CustomFeed.tsx
View File

@ -20,6 +20,7 @@ import {useStores} from 'state/index'
import {pluralize} from 'lib/strings/helpers'
import {AtUri} from '@atproto/api'
import * as Toast from 'view/com/util/Toast'
import {sanitizeHandle} from 'lib/strings/handles'
export const CustomFeed = observer(
({
@ -86,7 +87,7 @@ export const CustomFeed = observer(
{item.displayName}
</Text>
<Text style={[pal.textLight]} numberOfLines={3}>
by @{item.data.creator.handle}
by {sanitizeHandle(item.data.creator.handle, '@')}
</Text>
</View>
{showSaveBtn && (

6
src/view/com/lists/ListCard.tsx
View File

@ -9,6 +9,8 @@ import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from 'state/index'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {makeProfileLink} from 'lib/routes/links'
export const ListCard = ({
testID,
@ -57,7 +59,7 @@ export const ListCard = ({
!noBg && pal.view,
style,
]}
href={`/profile/${list.creator.did}/lists/${rkey}`}
href={makeProfileLink(list.creator, 'lists', rkey)}
title={list.name}
asAnchor
anchorNoUnderline>
@ -77,7 +79,7 @@ export const ListCard = ({
{list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list'} by{' '}
{list.creator.did === store.me.did
? 'you'
: `@${list.creator.handle}`}
: sanitizeHandle(list.creator.handle, '@')}
</Text>
{!!list.viewer?.muted && (
<View style={s.flexRow}>

6
src/view/com/lists/ListItems.tsx
View File

@ -26,6 +26,8 @@ import {useStores} from 'state/index'
import {s} from 'lib/styles'
import {isDesktopWeb} from 'platform/detection'
import {ListActions} from './ListActions'
import {makeProfileLink} from 'lib/routes/links'
import {sanitizeHandle} from 'lib/strings/handles'
const LOADING_ITEM = {_reactKey: '__loading__'}
const HEADER_ITEM = {_reactKey: '__header__'}
@ -296,8 +298,8 @@ const ListHeader = observer(
'you'
) : (
<TextLink
text={`@${list.creator.handle}`}
href={`/profile/${list.creator.did}`}
text={sanitizeHandle(list.creator.handle, '@')}
href={makeProfileLink(list.creator)}
/>
)}
</Text>

3
src/view/com/modals/ListAddRemoveUser.tsx
View File

@ -16,6 +16,7 @@ import {Button} from '../util/forms/Button'
import * as Toast from '../util/Toast'
import {useStores} from 'state/index'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {isDesktopWeb, isAndroid} from 'platform/detection'
@ -122,7 +123,7 @@ export const Component = observer(
by{' '}
{list.creator.did === store.me.did
? 'you'
: `@${list.creator.handle}`}
: sanitizeHandle(list.creator.handle, '@')}
</Text>
</View>
<View

12
src/view/com/notifications/FeedItem.tsx
View File

@ -19,6 +19,7 @@ import {PostThreadModel} from 'state/models/content/post-thread'
import {s, colors} from 'lib/styles'
import {ago} from 'lib/strings/time'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {pluralize} from 'lib/strings/helpers'
import {HeartIconSolid} from 'lib/icons'
import {Text} from '../util/text/Text'
@ -36,6 +37,7 @@ import {
} from 'lib/labeling/helpers'
import {ProfileModeration} from 'lib/labeling/types'
import {formatCount} from '../util/numeric/format'
import {makeProfileLink} from 'lib/routes/links'
const MAX_AUTHORS = 5
@ -63,7 +65,7 @@ export const FeedItem = observer(function ({
const urip = new AtUri(item.subjectUri)
return `/profile/${urip.host}/post/${urip.rkey}`
} else if (item.isFollow) {
return `/profile/${item.author.handle}`
return makeProfileLink(item.author)
} else if (item.isReply) {
const urip = new AtUri(item.uri)
return `/profile/${urip.host}/post/${urip.rkey}`
@ -92,7 +94,7 @@ export const FeedItem = observer(function ({
const authors: Author[] = useMemo(() => {
return [
{
href: `/profile/${item.author.handle}`,
href: makeProfileLink(item.author),
did: item.author.did,
handle: item.author.handle,
displayName: item.author.displayName,
@ -104,7 +106,7 @@ export const FeedItem = observer(function ({
},
...(item.additional?.map(({author}) => {
return {
href: `/profile/${author.handle}`,
href: makeProfileLink(author),
did: author.did,
handle: author.handle,
displayName: author.displayName,
@ -158,7 +160,7 @@ export const FeedItem = observer(function ({
action = 'liked your post'
icon = 'HeartIconSolid'
iconStyle = [
s.red3 as FontAwesomeIconStyle,
s.likeColor as FontAwesomeIconStyle,
{position: 'relative', top: -4},
]
} else if (item.isRepost) {
@ -377,7 +379,7 @@ function ExpandedAuthorsList({
{sanitizeDisplayName(author.displayName || author.handle)}
&nbsp;
<Text style={[pal.textLight]} lineHeight={1.2}>
{author.handle}
{sanitizeHandle(author.handle)}
</Text>
</Text>
</View>

5
src/view/com/notifications/InvitedUsers.tsx
View File

@ -16,6 +16,7 @@ import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {makeProfileLink} from 'lib/routes/links'
export const InvitedUsers = observer(() => {
const store = useStores()
@ -58,14 +59,14 @@ function InvitedUser({
/>
</View>
<View style={s.flex1}>
<Link href={`/profile/${profile.handle}`}>
<Link href={makeProfileLink(profile)}>
<UserAvatar avatar={profile.avatar} size={35} />
</Link>
<Text style={[styles.desc, pal.text]}>
<TextLink
type="md-bold"
style={pal.text}
href={`/profile/${profile.handle}`}
href={makeProfileLink(profile)}
text={sanitizeDisplayName(profile.displayName || profile.handle)}
/>{' '}
joined using your invite code!

36
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -17,6 +17,7 @@ import {PreviewableUserAvatar} from '../util/UserAvatar'
import {s} from 'lib/styles'
import {niceDate} from 'lib/strings/time'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {pluralize} from 'lib/strings/helpers'
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
import {useStores} from 'state/index'
@ -31,6 +32,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
import {usePalette} from 'lib/hooks/usePalette'
import {formatCount} from '../util/numeric/format'
import {TimeElapsed} from 'view/com/util/TimeElapsed'
import {makeProfileLink} from 'lib/routes/links'
const PARENT_REPLY_LINE_LENGTH = 8
@ -51,20 +53,20 @@ export const PostThreadItem = observer(function PostThreadItem({
const itemCid = item.post.cid
const itemHref = React.useMemo(() => {
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}`
}, [item.post.uri, item.post.author.handle])
return makeProfileLink(item.post.author, 'post', urip.rkey)
}, [item.post.uri, item.post.author])
const itemTitle = `Post by ${item.post.author.handle}`
const authorHref = `/profile/${item.post.author.handle}`
const authorHref = makeProfileLink(item.post.author)
const authorTitle = item.post.author.handle
const likesHref = React.useMemo(() => {
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}/liked-by`
}, [item.post.uri, item.post.author.handle])
return makeProfileLink(item.post.author, 'post', urip.rkey, 'liked-by')
}, [item.post.uri, item.post.author])
const likesTitle = 'Likes on this post'
const repostsHref = React.useMemo(() => {
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}/reposted-by`
}, [item.post.uri, item.post.author.handle])
return makeProfileLink(item.post.author, 'post', urip.rkey, 'reposted-by')
}, [item.post.uri, item.post.author])
const repostsTitle = 'Reposts of this post'
const primaryLanguage = store.preferences.contentLanguages[0] || 'en'
@ -185,7 +187,8 @@ export const PostThreadItem = observer(function PostThreadItem({
numberOfLines={1}
lineHeight={1.2}>
{sanitizeDisplayName(
item.post.author.displayName || item.post.author.handle,
item.post.author.displayName ||
sanitizeHandle(item.post.author.handle),
)}
</Text>
</Link>
@ -223,7 +226,7 @@ export const PostThreadItem = observer(function PostThreadItem({
href={authorHref}
title={authorTitle}>
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
@{item.post.author.handle}
{sanitizeHandle(item.post.author.handle, '@')}
</Text>
</Link>
</View>
@ -297,11 +300,7 @@ export const PostThreadItem = observer(function PostThreadItem({
itemCid={itemCid}
itemHref={itemHref}
itemTitle={itemTitle}
author={{
avatar: item.post.author.avatar!,
handle: item.post.author.handle,
displayName: item.post.author.displayName!,
}}
author={item.post.author}
text={item.richText?.text || record.text}
indexedAt={item.post.indexedAt}
isAuthor={item.post.author.did === store.me.did}
@ -362,8 +361,7 @@ export const PostThreadItem = observer(function PostThreadItem({
</View>
<View style={styles.layoutContent}>
<PostMeta
authorHandle={item.post.author.handle}
authorDisplayName={item.post.author.displayName}
author={item.post.author}
authorHasWarning={!!item.post.author.labels?.length}
timestamp={item.post.indexedAt}
postHref={itemHref}
@ -399,11 +397,7 @@ export const PostThreadItem = observer(function PostThreadItem({
itemCid={itemCid}
itemHref={itemHref}
itemTitle={itemTitle}
author={{
avatar: item.post.author.avatar!,
handle: item.post.author.handle,
displayName: item.post.author.displayName!,
}}
author={item.post.author}
text={item.richText?.text || record.text}
indexedAt={item.post.indexedAt}
isAuthor={item.post.author.did === store.me.did}

12
src/view/com/post/Post.tsx
View File

@ -30,6 +30,7 @@ import {useStores} from 'state/index'
import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
import {makeProfileLink} from 'lib/routes/links'
export const Post = observer(function Post({
uri,
@ -125,7 +126,7 @@ const PostLoaded = observer(
const itemUri = item.post.uri
const itemCid = item.post.cid
const itemUrip = new AtUri(item.post.uri)
const itemHref = `/profile/${item.post.author.handle}/post/${itemUrip.rkey}`
const itemHref = makeProfileLink(item.post.author, 'post', itemUrip.rkey)
const itemTitle = `Post by ${item.post.author.handle}`
let replyAuthorDid = ''
if (record.reply) {
@ -222,8 +223,7 @@ const PostLoaded = observer(
</View>
<View style={styles.layoutContent}>
<PostMeta
authorHandle={item.post.author.handle}
authorDisplayName={item.post.author.displayName}
author={item.post.author}
authorHasWarning={!!item.post.author.labels?.length}
timestamp={item.post.indexedAt}
postHref={itemHref}
@ -282,11 +282,7 @@ const PostLoaded = observer(
itemCid={itemCid}
itemHref={itemHref}
itemTitle={itemTitle}
author={{
avatar: item.post.author.avatar!,
handle: item.post.author.handle,
displayName: item.post.author.displayName!,
}}
author={item.post.author}
indexedAt={item.post.indexedAt}
text={item.richText?.text || record.text}
isAuthor={item.post.author.did === store.me.did}

22
src/view/com/posts/FeedItem.tsx
View File

@ -27,7 +27,9 @@ import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnalytics} from 'lib/analytics/analytics'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
import {makeProfileLink} from 'lib/routes/links'
export const FeedItem = observer(function ({
item,
@ -50,8 +52,8 @@ export const FeedItem = observer(function ({
const itemCid = item.post.cid
const itemHref = useMemo(() => {
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}`
}, [item.post.uri, item.post.author.handle])
return makeProfileLink(item.post.author, 'post', urip.rkey)
}, [item.post.uri, item.post.author])
const itemTitle = `Post by ${item.post.author.handle}`
const replyAuthorDid = useMemo(() => {
if (!record?.reply) {
@ -178,7 +180,7 @@ export const FeedItem = observer(function ({
{item.reasonRepost && (
<Link
style={styles.includeReason}
href={`/profile/${item.reasonRepost.by.handle}`}
href={makeProfileLink(item.reasonRepost.by)}
title={sanitizeDisplayName(
item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
)}>
@ -201,9 +203,10 @@ export const FeedItem = observer(function ({
lineHeight={1.2}
numberOfLines={1}
text={sanitizeDisplayName(
item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
item.reasonRepost.by.displayName ||
sanitizeHandle(item.reasonRepost.by.handle),
)}
href={`/profile/${item.reasonRepost.by.handle}`}
href={makeProfileLink(item.reasonRepost.by)}
/>
</Text>
</Link>
@ -221,8 +224,7 @@ export const FeedItem = observer(function ({
</View>
<View style={styles.layoutContent}>
<PostMeta
authorHandle={item.post.author.handle}
authorDisplayName={item.post.author.displayName}
author={item.post.author}
authorHasWarning={!!item.post.author.labels?.length}
timestamp={item.post.indexedAt}
postHref={itemHref}
@ -284,11 +286,7 @@ export const FeedItem = observer(function ({
itemCid={itemCid}
itemHref={itemHref}
itemTitle={itemTitle}
author={{
avatar: item.post.author.avatar!,
handle: item.post.author.handle,
displayName: item.post.author.displayName!,
}}
author={item.post.author}
text={item.richText?.text || record.text}
indexedAt={item.post.indexedAt}
isAuthor={item.post.author.did === store.me.did}

5
src/view/com/posts/FeedSlice.tsx
View File

@ -8,6 +8,7 @@ import Svg, {Circle, Line} from 'react-native-svg'
import {FeedItem} from './FeedItem'
import {usePalette} from 'lib/hooks/usePalette'
import {ModerationBehaviorCode} from 'lib/labeling/types'
import {makeProfileLink} from 'lib/routes/links'
export function FeedSlice({
slice,
@ -70,8 +71,8 @@ function ViewFullThread({slice}: {slice: PostsFeedSliceModel}) {
const pal = usePalette('default')
const itemHref = React.useMemo(() => {
const urip = new AtUri(slice.rootItem.post.uri)
return `/profile/${slice.rootItem.post.author.handle}/post/${urip.rkey}`
}, [slice.rootItem.post.uri, slice.rootItem.post.author.handle])
return makeProfileLink(slice.rootItem.post.author, 'post', urip.rkey)
}, [slice.rootItem.post.uri, slice.rootItem.post.author])
return (
<Link style={[pal.view, styles.viewFullThread]} href={itemHref} noFeedback>

12
src/view/com/profile/ProfileCard.tsx
View File

@ -10,11 +10,13 @@ import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from 'state/index'
import {FollowButton} from './FollowButton'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {
getProfileViewBasicLabelInfo,
getProfileModeration,
} from 'lib/labeling/helpers'
import {ModerationBehaviorCode} from 'lib/labeling/types'
import {makeProfileLink} from 'lib/routes/links'
export const ProfileCard = observer(
({
@ -60,7 +62,7 @@ export const ProfileCard = observer(
noBorder && styles.outerNoBorder,
!noBg && pal.view,
]}
href={`/profile/${profile.handle}`}
href={makeProfileLink(profile)}
title={profile.handle}
asAnchor
anchorNoUnderline>
@ -78,10 +80,12 @@ export const ProfileCard = observer(
style={[s.bold, pal.text]}
numberOfLines={1}
lineHeight={1.2}>
{sanitizeDisplayName(profile.displayName || profile.handle)}
{sanitizeDisplayName(
profile.displayName || sanitizeHandle(profile.handle),
)}
</Text>
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
@{profile.handle}
{sanitizeHandle(profile.handle, '@')}
</Text>
{!!profile.viewer?.followedBy && (
<View style={s.flexRow}>
@ -160,7 +164,7 @@ export const ProfileCardWithFollowBtn = observer(
followers?: AppBskyActorDefs.ProfileView[] | undefined
}) => {
const store = useStores()
const isMe = store.me.handle === profile.handle
const isMe = store.me.did === profile.did
return (
<ProfileCard

43
src/view/com/profile/ProfileHeader.tsx
View File

@ -15,11 +15,13 @@ import {ProfileImageLightbox} from 'state/models/ui/shell'
import {pluralize} from 'lib/strings/helpers'
import {toShareUrl} from 'lib/strings/url-helpers'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {s, colors} from 'lib/styles'
import {DropdownButton, DropdownItem} from '../util/forms/DropdownButton'
import * as Toast from '../util/Toast'
import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
import {Text} from '../util/text/Text'
import {ThemedText} from '../util/text/ThemedText'
import {TextLink} from '../util/Link'
import {RichText} from '../util/text/RichText'
import {UserAvatar} from '../util/UserAvatar'
@ -34,6 +36,8 @@ import {FollowState} from 'state/models/cache/my-follows'
import {shareUrl} from 'lib/sharing'
import {formatCount} from '../util/numeric/format'
import {navigate} from '../../../Navigation'
import {isInvalidHandle} from 'lib/strings/handles'
import {makeProfileLink} from 'lib/routes/links'
const BACK_HITSLOP = {left: 30, top: 30, right: 30, bottom: 30}
@ -67,7 +71,9 @@ export const ProfileHeader = observer(
</View>
<View>
<Text type="title-2xl" style={[pal.text, styles.title]}>
{sanitizeDisplayName(view.displayName || view.handle)}
{sanitizeDisplayName(
view.displayName || sanitizeHandle(view.handle),
)}
</Text>
</View>
</View>
@ -104,6 +110,7 @@ const ProfileHeaderLoaded = observer(
const store = useStores()
const navigation = useNavigation<NavigationProp>()
const {track} = useAnalytics()
const invalidHandle = isInvalidHandle(view.handle)
const onPressBack = React.useCallback(() => {
navigation.goBack()
@ -144,19 +151,23 @@ const ProfileHeaderLoaded = observer(
const onPressFollowers = React.useCallback(() => {
track('ProfileHeader:FollowersButtonClicked')
navigate('ProfileFollowers', {name: view.handle})
navigate('ProfileFollowers', {
name: isInvalidHandle(view.handle) ? view.did : view.handle,
})
store.shell.closeAllActiveElements() // for when used in the profile preview modal
}, [track, view, store.shell])
const onPressFollows = React.useCallback(() => {
track('ProfileHeader:FollowsButtonClicked')
navigate('ProfileFollows', {name: view.handle})
navigate('ProfileFollows', {
name: isInvalidHandle(view.handle) ? view.did : view.handle,
})
store.shell.closeAllActiveElements() // for when used in the profile preview modal
}, [track, view, store.shell])
const onPressShare = React.useCallback(() => {
track('ProfileHeader:ShareButtonClicked')
const url = toShareUrl(`/profile/${view.handle}`)
const url = toShareUrl(makeProfileLink(view))
shareUrl(url)
}, [track, view])
@ -338,7 +349,7 @@ const ProfileHeaderLoaded = observer(
style={[styles.btn, styles.mainBtn, pal.btn]}
accessibilityRole="button"
accessibilityLabel={`Unfollow ${view.handle}`}
accessibilityHint={`Hides direct posts from ${view.handle} in your feed`}>
accessibilityHint={`Hides posts from ${view.handle} in your feed`}>
<FontAwesomeIcon
icon="check"
style={[pal.text, s.mr5]}
@ -355,7 +366,7 @@ const ProfileHeaderLoaded = observer(
style={[styles.btn, styles.mainBtn, palInverted.view]}
accessibilityRole="button"
accessibilityLabel={`Follow ${view.handle}`}
accessibilityHint={`Shows direct posts from ${view.handle} in your feed`}>
accessibilityHint={`Shows posts from ${view.handle} in your feed`}>
<FontAwesomeIcon
icon="plus"
style={[palInverted.text, s.mr5]}
@ -382,7 +393,9 @@ const ProfileHeaderLoaded = observer(
testID="profileHeaderDisplayName"
type="title-2xl"
style={[pal.text, styles.title]}>
{sanitizeDisplayName(view.displayName || view.handle)}
{sanitizeDisplayName(
view.displayName || sanitizeHandle(view.handle),
)}
</Text>
</View>
<View style={styles.handleLine}>
@ -393,7 +406,16 @@ const ProfileHeaderLoaded = observer(
</Text>
</View>
) : undefined}
<Text style={[pal.textLight, styles.handle]}>@{view.handle}</Text>
<ThemedText
type={invalidHandle ? 'xs' : 'md'}
fg={invalidHandle ? 'error' : 'light'}
border={invalidHandle ? 'error' : undefined}
style={[
invalidHandle ? styles.invalidHandle : undefined,
styles.handle,
]}>
{invalidHandle ? '⚠Invalid Handle' : `@${view.handle}`}
</ThemedText>
</View>
{!blockHide && (
<>
@ -600,6 +622,11 @@ const styles = StyleSheet.create({
// @ts-ignore web only -prf
wordBreak: 'break-all',
},
invalidHandle: {
borderWidth: 1,
borderRadius: 4,
paddingHorizontal: 4,
},
handleLine: {
flexDirection: 'row',

3
src/view/com/search/Suggestions.tsx
View File

@ -12,6 +12,7 @@ import {Text} from '../util/text/Text'
import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {RefWithInfoAndFollowers} from 'state/models/discovery/foafs'
import {usePalette} from 'lib/hooks/usePalette'
@ -99,7 +100,7 @@ export const Suggestions = observer(
_reactKey: `__${item.did}_heading__`,
type: 'heading',
title: `Followed by ${sanitizeDisplayName(
item.displayName || item.handle,
item.displayName || sanitizeHandle(item.handle),
)}`,
},
])

31
src/view/com/util/PostMeta.tsx
View File

@ -7,13 +7,19 @@ import {usePalette} from 'lib/hooks/usePalette'
import {UserAvatar} from './UserAvatar'
import {observer} from 'mobx-react-lite'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {isAndroid} from 'platform/detection'
import {TimeElapsed} from './TimeElapsed'
import {makeProfileLink} from 'lib/routes/links'
interface PostMetaOpts {
authorAvatar?: string
authorHandle: string
authorDisplayName: string | undefined
author: {
avatar?: string
did: string
handle: string
displayName?: string | undefined
}
showAvatar?: boolean
authorHasWarning: boolean
postHref: string
timestamp: string
@ -21,15 +27,15 @@ interface PostMetaOpts {
export const PostMeta = observer(function (opts: PostMetaOpts) {
const pal = usePalette('default')
const displayName = opts.authorDisplayName || opts.authorHandle
const handle = opts.authorHandle
const displayName = opts.author.displayName || opts.author.handle
const handle = opts.author.handle
return (
<View style={styles.metaOneLine}>
{typeof opts.authorAvatar !== 'undefined' && (
{opts.showAvatar && typeof opts.author.avatar !== 'undefined' && (
<View style={styles.avatar}>
<UserAvatar
avatar={opts.authorAvatar}
avatar={opts.author.avatar}
size={16}
// TODO moderation
/>
@ -43,17 +49,17 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
lineHeight={1.2}
text={
<>
{sanitizeDisplayName(displayName)}
{sanitizeDisplayName(displayName)}&nbsp;
<Text
type="md"
style={[pal.textLight]}
numberOfLines={1}
lineHeight={1.2}>
&nbsp;@{handle}
lineHeight={1.2}
style={pal.textLight}>
{sanitizeHandle(handle, '@')}
</Text>
</>
}
href={`/profile/${opts.authorHandle}`}
href={makeProfileLink(opts.author)}
/>
</View>
{!isAndroid && (
@ -85,6 +91,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
const styles = StyleSheet.create({
metaOneLine: {
flexDirection: 'row',
alignItems: 'baseline',
paddingBottom: 2,
gap: 4,
},

6
src/view/com/util/UserInfoText.tsx
View File

@ -7,6 +7,8 @@ import {LoadingPlaceholder} from './LoadingPlaceholder'
import {useStores} from 'state/index'
import {TypographyVariant} from 'lib/ThemeContext'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {makeProfileLink} from 'lib/routes/links'
export function UserInfoText({
type = 'md',
@ -68,11 +70,11 @@ export function UserInfoText({
style={style}
lineHeight={1.2}
numberOfLines={1}
href={`/profile/${profile.handle}`}
href={makeProfileLink(profile)}
text={`${prefix || ''}${sanitizeDisplayName(
typeof profile[attr] === 'string' && profile[attr]
? (profile[attr] as string)
: profile.handle,
: sanitizeHandle(profile.handle),
)}`}
/>
)

3
src/view/com/util/UserPreviewLink.tsx
View File

@ -3,6 +3,7 @@ import {Pressable, StyleProp, ViewStyle} from 'react-native'
import {useStores} from 'state/index'
import {Link} from './Link'
import {isDesktopWeb} from 'platform/detection'
import {makeProfileLink} from 'lib/routes/links'
interface UserPreviewLinkProps {
did: string
@ -17,7 +18,7 @@ export function UserPreviewLink(
if (isDesktopWeb) {
return (
<Link
href={`/profile/${props.handle}`}
href={makeProfileLink(props)}
title={props.handle}
asAnchor
style={props.style}>

7
src/view/com/util/post-ctrls/PostCtrls.tsx
View File

@ -32,9 +32,10 @@ interface PostCtrlsOpts {
itemTitle: string
isAuthor: boolean
author: {
did: string
handle: string
displayName: string
avatar: string
displayName?: string | undefined
avatar?: string | undefined
}
text: string
indexedAt: string
@ -269,7 +270,7 @@ const styles = StyleSheet.create({
margin: -5,
},
ctrlIconLiked: {
color: colors.red3,
color: colors.like,
},
mt1: {
marginTop: 1,

8
src/view/com/util/post-embeds/QuoteEmbed.tsx
View File

@ -8,6 +8,7 @@ import {Text} from '../text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {ComposerOptsQuote} from 'state/models/ui/shell'
import {PostEmbeds} from '.'
import {makeProfileLink} from 'lib/routes/links'
export function QuoteEmbed({
quote,
@ -18,7 +19,7 @@ export function QuoteEmbed({
}) {
const pal = usePalette('default')
const itemUrip = new AtUri(quote.uri)
const itemHref = `/profile/${quote.author.handle}/post/${itemUrip.rkey}`
const itemHref = makeProfileLink(quote.author, 'post', itemUrip.rkey)
const itemTitle = `Post by ${quote.author.handle}`
const isEmpty = React.useMemo(
() => quote.text.trim().length === 0,
@ -39,9 +40,8 @@ export function QuoteEmbed({
href={itemHref}
title={itemTitle}>
<PostMeta
authorAvatar={quote.author.avatar}
authorHandle={quote.author.handle}
authorDisplayName={quote.author.displayName}
author={quote.author}
showAvatar
authorHasWarning={false}
postHref={itemHref}
timestamp={quote.indexedAt}

80
src/view/com/util/text/ThemedText.tsx 100644
View File

@ -0,0 +1,80 @@
import React from 'react'
import {CustomTextProps, Text} from './Text'
import {usePalette} from 'lib/hooks/usePalette'
import {addStyle} from 'lib/styles'
export type ThemedTextProps = CustomTextProps & {
fg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light'
bg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light'
border?: 'default' | 'dark' | 'error' | 'inverted' | 'inverted-dark'
lineHeight?: number
}
export function ThemedText({
fg,
bg,
border,
style,
children,
...props
}: React.PropsWithChildren<ThemedTextProps>) {
const pal = usePalette('default')
const palInverted = usePalette('inverted')
const palError = usePalette('error')
switch (fg) {
case 'default':
style = addStyle(style, pal.text)
break
case 'light':
style = addStyle(style, pal.textLight)
break
case 'error':
style = addStyle(style, {color: palError.colors.background})
break
case 'inverted':
style = addStyle(style, palInverted.text)
break
case 'inverted-light':
style = addStyle(style, palInverted.textLight)
break
}
switch (bg) {
case 'default':
style = addStyle(style, pal.view)
break
case 'light':
style = addStyle(style, pal.viewLight)
break
case 'error':
style = addStyle(style, palError.view)
break
case 'inverted':
style = addStyle(style, palInverted.view)
break
case 'inverted-light':
style = addStyle(style, palInverted.viewLight)
break
}
switch (border) {
case 'default':
style = addStyle(style, pal.border)
break
case 'dark':
style = addStyle(style, pal.borderDark)
break
case 'error':
style = addStyle(style, palError.border)
break
case 'inverted':
style = addStyle(style, palInverted.border)
break
case 'inverted-dark':
style = addStyle(style, palInverted.borderDark)
break
}
return (
<Text style={style} {...props}>
{children}
</Text>
)
}

9
src/view/screens/CustomFeed.tsx
View File

@ -14,6 +14,7 @@ import {useCustomFeed} from 'lib/hooks/useCustomFeed'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {Feed} from 'view/com/posts/Feed'
import {pluralize} from 'lib/strings/helpers'
import {sanitizeHandle} from 'lib/strings/handles'
import {TextLink} from 'view/com/util/Link'
import {UserAvatar} from 'view/com/util/UserAvatar'
import {ViewHeader} from 'view/com/util/ViewHeader'
@ -32,6 +33,7 @@ import {DropdownButton, DropdownItem} from 'view/com/util/forms/DropdownButton'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {EmptyState} from 'view/com/util/EmptyState'
import {useAnalytics} from 'lib/analytics/analytics'
import {makeProfileLink} from 'lib/routes/links'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
export const CustomFeedScreen = withAuthRequired(
@ -216,8 +218,11 @@ export const CustomFeedScreen = withAuthRequired(
'you'
) : (
<TextLink
text={`@${currentFeed.data.creator.handle}`}
href={`/profile/${currentFeed.data.creator.did}`}
text={sanitizeHandle(
currentFeed.data.creator.handle,
'@',
)}
href={makeProfileLink(currentFeed.data.creator)}
style={[pal.textLight]}
/>
)}

3
src/view/screens/Settings.tsx
View File

@ -43,6 +43,7 @@ import {pluralize} from 'lib/strings/helpers'
import {formatCount} from 'view/com/util/numeric/format'
import Clipboard from '@react-native-clipboard/clipboard'
import {reset as resetNavigation} from '../../Navigation'
import {makeProfileLink} from 'lib/routes/links'
// TEMPORARY (APP-700)
// remove after backend testing finishes
@ -229,7 +230,7 @@ export const SettingsScreen = withAuthRequired(
</View>
) : (
<Link
href={`/profile/${store.me.handle}`}
href={makeProfileLink(store.me)}
title="Your profile"
noFeedback>
<View style={[pal.view, styles.linkCard]}>

3
src/view/shell/bottom-bar/BottomBarWeb.tsx
View File

@ -21,6 +21,7 @@ import {
} from 'lib/icons'
import {Link} from 'view/com/util/Link'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {makeProfileLink} from 'lib/routes/links'
export const BottomBarWeb = observer(() => {
const store = useStores()
@ -87,7 +88,7 @@ export const BottomBarWeb = observer(() => {
)
}}
</NavItem>
<NavItem routeName="Profile" href={`/profile/${store.me.handle}`}>
<NavItem routeName="Profile" href={makeProfileLink(store.me)}>
{() => (
<UserIcon
size={28}

8
src/view/shell/desktop/LeftNav.tsx
View File

@ -36,14 +36,12 @@ import {
import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
import {router} from '../../../routes'
import {makeProfileLink} from 'lib/routes/links'
const ProfileCard = observer(() => {
const store = useStores()
return (
<Link
href={`/profile/${store.me.handle}`}
style={styles.profileCard}
asAnchor>
<Link href={makeProfileLink(store.me)} style={styles.profileCard} asAnchor>
<UserAvatar avatar={store.me.avatar} size={64} />
</Link>
)
@ -252,7 +250,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
/>
{store.session.hasSession && (
<NavItem
href={`/profile/${store.me.handle}`}
href={makeProfileLink(store.me)}
icon={<UserIcon strokeWidth={1.75} size={28} style={pal.text} />}
iconFilled={
<UserIconSolid strokeWidth={1.75} size={28} style={pal.text} />