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

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

Browse source 
* 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
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

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 Normal file
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>
)
}