From 49356700c31a1cb34c252e3aecf18561114916b9 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 27 Jul 2023 10:50:12 -0500 Subject: [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 --- src/view/com/post-thread/PostThreadItem.tsx | 36 ++++++++++++----------------- 1 file changed, 15 insertions(+), 21 deletions(-) (limited to 'src/view/com/post-thread/PostThreadItem.tsx') diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index efc9fe694..0680bbc06 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -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), )} @@ -223,7 +226,7 @@ export const PostThreadItem = observer(function PostThreadItem({ href={authorHref} title={authorTitle}> - @{item.post.author.handle} + {sanitizeHandle(item.post.author.handle, '@')} @@ -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({