Revert "adjust account urls"

This reverts commit c8e9f04b9b.

backend/src/accounts/getAccount.ts

@@ -6,7 +6,6 @@ import type { Handle } from 'wildebeest/backend/src/utils/parse'
 import { queryAcct } from 'wildebeest/backend/src/webfinger/index'
 import { loadExternalMastodonAccount, loadLocalMastodonAccount } from 'wildebeest/backend/src/mastodon/account'
 import { MastodonAccount } from '../types'
-import { adjustLocalHostDomain } from '../utils/adjustLocalHostDomain'
 
 export async function getAccount(domain: string, accountId: string, db: D1Database): Promise<MastodonAccount | null> {
 	const handle = parseHandle(accountId)
@@ -45,3 +44,16 @@ async function getLocalAccount(domain: string, db: D1Database, handle: Handle):
 
 	return await loadLocalMastodonAccount(db, actor)
 }
+
+/**
+ * checks if a domain is a localhost one ('localhost' or '127.x.x.x') and
+ * in that case replaces it with '0.0.0.0' (which is what we use for our local data)
+ *
+ * Note: only needed for local development
+ *
+ * @param domain the potentially localhost domain
+ * @returns the adjusted domain if it was a localhost one, the original domain otherwise
+ */
+function adjustLocalHostDomain(domain: string) {
+	return domain.replace(/^localhost$|^127(\.(?:\d){1,3}){3}$/, '0.0.0.0')
+}

backend/src/utils/adjustLocalHostDomain.ts

@@ -1,12 +0,0 @@
-/**
- * checks if a domain is a localhost one ('localhost' or '127.x.x.x') and
- * in that case replaces it with '0.0.0.0' (which is what we use for our local data)
- *
- * Note: only needed for local development
- *
- * @param domain the potentially localhost domain
- * @returns the adjusted domain if it was a localhost one, the original domain otherwise
- */
-export function adjustLocalHostDomain(domain: string) {
-	return domain.replace(/^localhost$|^127(\.(?:\d){1,3}){3}$/, '0.0.0.0')
-}

frontend/src/components/Status/index.tsx

@@ -5,7 +5,6 @@ import { Avatar } from '../avatar'
 import type { Account, MastodonStatus } from '~/types'
 import styles from '../../utils/innerHtmlContent.scss?inline'
 import { MediaGallery } from '../MediaGallery.tsx'
-import { useAccountUrl } from '~/utils/useAccountUrl'
 
 type Props = {
 	status: MastodonStatus
@@ -66,15 +65,13 @@ export default component$((props: Props) => {
 	)
 })
 
-export const RebloggerLink = component$(({ account }: { account: Account | null }) => {
-	const accountUrl = useAccountUrl(account)
-
+export const RebloggerLink = ({ account }: { account: Account | null }) => {
 	return (
 		account && (
 			<div class="flex text-wildebeest-500 py-3">
 				<p>
 					<i class="fa fa-retweet mr-3 w-4 inline-block" />
-					<a class="no-underline" href={accountUrl}>
+					<a class="no-underline" href={account.url}>
 						{account.display_name}
 					</a>
 					&nbsp;boosted
@@ -82,4 +79,4 @@ export const RebloggerLink = component$(({ account }: { account: Account | null
 			</div>
 		)
 	)
-})
+}

frontend/src/components/avatar/index.tsx

@@ -1,8 +1,7 @@
 import { component$ } from '@builder.io/qwik'
 import type { Account } from '~/types'
-import { useAccountUrl } from '~/utils/useAccountUrl'
 
-type AvatarDetails = Pick<Account, 'id' | 'display_name' | 'avatar' | 'url'>
+type AvatarDetails = Pick<Account, 'display_name' | 'avatar' | 'url'>
 
 type Props = {
 	primary: AvatarDetails
@@ -10,16 +9,13 @@ type Props = {
 }
 
 export const Avatar = component$<Props>(({ primary, secondary }) => {
-	const primaryUrl = useAccountUrl(primary)
-	const secondaryUrl = useAccountUrl(secondary)
-
 	return (
 		<div class={`relative ${secondary && 'pr-2 pb-2'}`}>
-			<a href={primaryUrl}>
+			<a href={primary.url}>
 				<img class="rounded h-12 w-12" src={primary.avatar} alt={`Avatar of ${primary.display_name}`} />
 			</a>
 			{secondary && (
-				<a href={secondaryUrl}>
+				<a href={secondary.url}>
 					<img
 						class="absolute right-0 bottom-0 rounded h-6 w-6"
 						src={secondary.avatar}

frontend/src/routes/(admin)/oauth/authorize/index.tsx

@@ -25,7 +25,7 @@ export const clientLoader = loader$<{ DATABASE: D1Database }, Promise<Client>>(a
 
 export const userLoader = loader$<
 	{ DATABASE: D1Database; domain: string },
-	Promise<{ email: string; avatar: URL; name: string; url: URL; accountId: string }>
+	Promise<{ email: string; avatar: URL; name: string; url: URL }>
 >(async ({ cookie, platform, html, request, redirect, text }) => {
 	const jwt = cookie.get('CF_Authorization')
 	if (jwt === null) {
@@ -59,18 +59,17 @@ export const userLoader = loader$<
 	const name = person.name
 	const avatar = person.icon?.url
 	const url = person.url
-	const accountId = person.id.toString()
 
 	if (!name || !avatar) {
 		throw html(500, getErrorHtml("The person associated with the Access JWT doesn't include a name or avatar"))
 	}
 
-	return { email: payload.email, avatar, name, url, accountId }
+	return { email: payload.email, avatar, name, url }
 })
 
 export default component$(() => {
 	const client = clientLoader.use().value
-	const { email, avatar, name: display_name, url, accountId } = userLoader.use().value
+	const { email, avatar, name: display_name, url } = userLoader.use().value
 	return (
 		<div class="flex flex-col p-4 items-center">
 			<h1 class="text-center mt-3 mb-5 flex items-center">
@@ -83,7 +82,6 @@ export default component$(() => {
 						<div class="row-span-2 mr-4">
 							<Avatar
 								primary={{
-									id: accountId,
 									avatar: avatar.toString(),
 									display_name,
 									url: url.toString(),

frontend/src/routes/(frontend)/[accountId]/[statusId]/index.tsx

@@ -12,7 +12,6 @@ import { MediaGallery } from '~/components/MediaGallery.tsx'
 import { getNotFoundHtml } from '~/utils/getNotFoundHtml/getNotFoundHtml'
 import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
 import styles from '../../../../utils/innerHtmlContent.scss?inline'
-import { useAccountUrl } from '~/utils/useAccountUrl'
 
 export const statusLoader = loader$<
 	{ DATABASE: D1Database },
@@ -68,7 +67,7 @@ export default component$(() => {
 })
 
 export const AccountCard = component$<{ status: MastodonStatus }>(({ status }) => {
-	const accountUrl = useAccountUrl(status.account)
+	const accountUrl = `/@${status.account.username}`
 
 	return (
 		<div class="flex">

frontend/src/utils/useAccountUrl.ts

@@ -1,40 +0,0 @@
-import { useSignal, useTask$ } from '@builder.io/qwik'
-import { parseHandle } from 'wildebeest/backend/src/utils/parse'
-import { Account } from '~/types'
-import { useDomain } from './useDomain'
-
-/**
- * Hook to get a url to use for links for the provided account.
- *
- * Note: using account.url is not sufficient since we want to distinguish
- *       between local and remote accounts and change the url accordingly
- *
- * @param account the target account or null
- * @returns url to be used for the target account (or undefined if)
- */
-export function useAccountUrl(account: Pick<Account, 'id' | 'url'> | null) {
-	const isLocal = useAccountIsLocal(account?.id)
-
-	if (account && isLocal.value) {
-		const url = new URL(account.url)
-		return url.pathname
-	}
-
-	return account?.url
-}
-
-function useAccountIsLocal(accountId: string | undefined) {
-	const domain = useDomain()
-	const isLocal = useSignal(false)
-
-	useTask$(({ track }) => {
-		track(() => accountId)
-
-		if (accountId) {
-			const handle = parseHandle(accountId)
-			isLocal.value = handle.domain === null || (handle.domain !== null && handle.domain === domain)
-		}
-	})
-
-	return isLocal
-}

frontend/src/utils/useDomain.ts

@@ -1,10 +1,8 @@
 import { useLocation } from '@builder.io/qwik-city'
-import { adjustLocalHostDomain } from 'wildebeest/backend/src/utils/adjustLocalHostDomain'
 
 export const useDomain = () => {
 	const location = useLocation()
 	const url = new URL(location.href)
 	const domain = url.hostname
-	const adjustedDomain = adjustLocalHostDomain(domain)
-	return adjustedDomain
+	return domain
 }

ui-e2e-tests/account-page.spec.ts

@@ -1,22 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-const navigationsVia = ['name link', 'avatar'] as const
-
-navigationsVia.forEach((via) =>
-	test(`Navigation to and view of an account (via ${via})`, async ({ page }) => {
-		await page.goto('http://127.0.0.1:8788/explore')
-		await page.getByRole('article').getByRole('link', { name: 'Ben Rosengart', exact: true }).click()
-		await page.getByRole('link', { name: 'Ben Rosengart', exact: true }).click()
-		await page.waitForLoadState('networkidle')
-		if (via === 'name link') {
-			await page.getByRole('link', { name: 'Ben Rosengart', exact: true }).click()
-		} else {
-			await page.getByRole('link', { name: 'Avatar of Ben Rosengart' }).click()
-		}
-		await expect(page.getByRole('img', { name: 'Header of Ben Rosengart' })).toBeVisible()
-		await expect(page.getByRole('img', { name: 'Avatar of Ben Rosengart' })).toBeVisible()
-		await expect(page.getByRole('heading', { name: 'Ben Rosengart' })).toBeVisible()
-		await expect(page.getByText('Joined')).toBeVisible()
-		await expect(page.getByTestId('stats')).toHaveText('1Posts0Following0Followers')
-	})
-)
+test('Navigation to and view of an account', async ({ page }) => {
+	await page.goto('http://127.0.0.1:8788/explore')
+	await page.getByRole('article').getByRole('link', { name: 'Ben Rosengart', exact: true }).click()
+	await page.getByRole('link', { name: 'Ben Rosengart', exact: true }).click()
+	await page.waitForLoadState('networkidle')
+	await page.getByRole('link', { name: 'Ben Rosengart', exact: true }).click()
+	await expect(page.getByRole('img', { name: 'Header of Ben Rosengart' })).toBeVisible()
+	await expect(page.getByRole('img', { name: 'Avatar of Ben Rosengart' })).toBeVisible()
+	await expect(page.getByRole('heading', { name: 'Ben Rosengart' })).toBeVisible()
+	await expect(page.getByText('Joined')).toBeVisible()
+	await expect(page.getByTestId('stats')).toHaveText('1Posts0Following0Followers')
+})