Prefix username URLs with @

This commit is contained in:
Austin Chen 2021-12-15 18:26:38 -08:00
parent 87010c1924
commit 743616449f
3 changed files with 5 additions and 3 deletions

View File

@ -11,10 +11,11 @@ import clsx from 'clsx'
export function UserLink(props: { displayName: string; className?: string }) { export function UserLink(props: { displayName: string; className?: string }) {
const { displayName, className } = props const { displayName, className } = props
// Fix this when users can change their own names
const username = displayName.replace(/\s+/g, '') const username = displayName.replace(/\s+/g, '')
return ( return (
<Link href={`/${username}`}> <Link href={`/@${username}`}>
<a <a
className={clsx( className={clsx(
'hover:underline hover:decoration-indigo-400 hover:decoration-2', 'hover:underline hover:decoration-indigo-400 hover:decoration-2',

View File

@ -41,7 +41,7 @@ export function path(contract: Contract) {
// For now, derive username from creatorName // For now, derive username from creatorName
// Fix this when users can change their own names // Fix this when users can change their own names
const username = contract.creatorName.replace(/\s+/g, '') const username = contract.creatorName.replace(/\s+/g, '')
return `/${username}/${contract.id}` return `/@${username}/${contract.id}`
} }
export function compute(contract: Contract) { export function compute(contract: Contract) {

View File

@ -7,7 +7,8 @@ import Error from 'next/error'
export default function UserProfile() { export default function UserProfile() {
const router = useRouter() const router = useRouter()
const [user, setUser] = useState<User | null>(null) const [user, setUser] = useState<User | null>(null)
const { username } = router.query as { username: string } const atUsername = router.query.username as string | undefined
const username = atUsername?.substring(1) || '' // Remove the initial @
useEffect(() => { useEffect(() => {
if (username) { if (username) {
getUserByUsername(username).then(setUser) getUserByUsername(username).then(setUser)