From 66b4319bb3156f4c59457e906dfdddade8769a23 Mon Sep 17 00:00:00 2001
From: Dario Piotrowicz <dario@cloudflare.com>
Date: Tue, 7 Feb 2023 14:37:59 +0000
Subject: [PATCH] add back button to stickyHeader

resolves #192
---
 .../components/StickyHeader/StickyHeader.tsx  | 27 ++++++++++++++++---
 .../[accountId]/[statusId]/index.tsx          |  9 +------
 .../routes/(frontend)/[accountId]/index.tsx   | 22 +++------------
 .../src/routes/(frontend)/explore/layout.tsx  |  2 +-
 ui-e2e-tests/invidivual-toot.spec.ts          | 19 +++++++++++--
 5 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/StickyHeader/StickyHeader.tsx b/frontend/src/components/StickyHeader/StickyHeader.tsx
index 2a7869e..8266ffc 100644
--- a/frontend/src/components/StickyHeader/StickyHeader.tsx
+++ b/frontend/src/components/StickyHeader/StickyHeader.tsx
@@ -1,9 +1,30 @@
-import { component$, Slot } from '@builder.io/qwik'
+import { $, component$, Slot } from '@builder.io/qwik'
+import { useNavigate } from '@builder.io/qwik-city'
+
+export default component$<{ withBackButton?: boolean }>(({ withBackButton }) => {
+	const nav = useNavigate()
+
+	const goBack = $(() => {
+		if (window.history.length > 1) {
+			window.history.back()
+		} else {
+			nav('/explore')
+		}
+	})
 
-export default component$(() => {
 	return (
 		<header class="bg-wildebeest-900 sticky top-[3.9rem] xl:top-0 xl:pt-2.5 z-10">
-			<Slot />
+			<div class="flex bg-wildebeest-700 xl:rounded-t overflow-hidden">
+				{!!withBackButton && (
+					<div class="flex justify-between items-center bg-wildebeest-700">
+						<button class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" onClick$={goBack}>
+							<i class="fa fa-chevron-left mr-2 w-3 inline-block" />
+							<span class="hover:underline">Back</span>
+						</button>
+					</div>
+				)}
+				<Slot />
+			</div>
 		</header>
 	)
 })
diff --git a/frontend/src/routes/(frontend)/[accountId]/[statusId]/index.tsx b/frontend/src/routes/(frontend)/[accountId]/[statusId]/index.tsx
index e7b1d47..5f3d9e2 100644
--- a/frontend/src/routes/(frontend)/[accountId]/[statusId]/index.tsx
+++ b/frontend/src/routes/(frontend)/[accountId]/[statusId]/index.tsx
@@ -48,14 +48,7 @@ export default component$(() => {
 
 	return (
 		<>
-			<StickyHeader>
-				<div class="flex justify-between items-center xl:rounded-t header bg-wildebeest-700">
-					<Link class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" href="/explore">
-						<i class="fa fa-chevron-left mr-2 w-3 inline-block" />
-						<span class="hover:underline">Back</span>
-					</Link>
-				</div>
-			</StickyHeader>
+			<StickyHeader withBackButton />
 			<div class="bg-wildebeest-700 p-4">
 				<AccountCard status={loaderData.status} />
 				<div class="leading-normal inner-html-content text-lg" dangerouslySetInnerHTML={loaderData.status.content} />
diff --git a/frontend/src/routes/(frontend)/[accountId]/index.tsx b/frontend/src/routes/(frontend)/[accountId]/index.tsx
index 3366ce1..24ae978 100644
--- a/frontend/src/routes/(frontend)/[accountId]/index.tsx
+++ b/frontend/src/routes/(frontend)/[accountId]/index.tsx
@@ -1,5 +1,5 @@
-import { $, component$, useStyles$ } from '@builder.io/qwik'
-import { loader$, useNavigate } from '@builder.io/qwik-city'
+import { component$, useStyles$ } from '@builder.io/qwik'
+import { loader$ } from '@builder.io/qwik-city'
 import { MastodonAccount } from 'wildebeest/backend/src/types'
 import StickyHeader from '~/components/StickyHeader/StickyHeader'
 import { formatDateTime } from '~/utils/dateTime'
@@ -34,18 +34,9 @@ export const accountLoader = loader$<{ DATABASE: D1Database }, Promise<MastodonA
 
 export default component$(() => {
 	useStyles$(styles)
-	const nav = useNavigate()
 
 	const accountDetails = accountLoader.use().value
 
-	const goBack = $(() => {
-		if (window.history.length > 1) {
-			window.history.back()
-		} else {
-			nav('/explore')
-		}
-	})
-
 	const fields = [
 		{
 			name: 'Joined',
@@ -73,14 +64,7 @@ export default component$(() => {
 
 	return (
 		<div>
-			<StickyHeader>
-				<div class="flex justify-between items-center xl:rounded-t header bg-wildebeest-700">
-					<button class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" onClick$={goBack}>
-						<i class="fa fa-chevron-left mr-2 w-3 inline-block" />
-						<span class="hover:underline">Back</span>
-					</button>
-				</div>
-			</StickyHeader>
+			<StickyHeader withBackButton />
 			<div class="relative mb-16">
 				<img
 					src={accountDetails.header}
diff --git a/frontend/src/routes/(frontend)/explore/layout.tsx b/frontend/src/routes/(frontend)/explore/layout.tsx
index 4aacf94..725d69d 100644
--- a/frontend/src/routes/(frontend)/explore/layout.tsx
+++ b/frontend/src/routes/(frontend)/explore/layout.tsx
@@ -42,7 +42,7 @@ export default component$(() => {
 	return (
 		<div class="flex flex-col flex-1">
 			<StickyHeader>
-				<h2 class="text-reg text-md m-0 p-4 flex bg-wildebeest-700 xl:rounded-t">
+				<h2 class="text-reg text-md m-0 p-4 flex bg-wildebeest-700">
 					<i class="fa fa-hashtag fa-fw mr-3 w-5 leading-tight inline-block" />
 					<span>Explore</span>
 				</h2>
diff --git a/ui-e2e-tests/invidivual-toot.spec.ts b/ui-e2e-tests/invidivual-toot.spec.ts
index 69cbed2..b5d2e9e 100644
--- a/ui-e2e-tests/invidivual-toot.spec.ts
+++ b/ui-e2e-tests/invidivual-toot.spec.ts
@@ -4,7 +4,7 @@ test('Navigation to and view of an individual toot', async ({ page }) => {
 	await page.goto('http://127.0.0.1:8788/explore')
 	await page.locator('article').filter({ hasText: 'Ken White' }).locator('i.fa-globe + span').click()
 
-	const backButtonLocator = page.locator('a', { hasText: 'Back' })
+	const backButtonLocator = page.getByRole('button', { name: 'Back' })
 	await expect(backButtonLocator).toBeVisible()
 
 	const avatarLocator = page.locator('img[alt="Avatar of Ken White"]')
@@ -19,7 +19,7 @@ test('Navigation to and view of an individual toot', async ({ page }) => {
 	await expect(tootContentLocator).toBeVisible()
 })
 
-test('Navigation to and view of a reply toot', async ({ page }) => {
+test("Navigation to and view of a toot's replies", async ({ page }) => {
 	await page.goto('http://127.0.0.1:8788/explore')
 
 	await page
@@ -43,4 +43,19 @@ test('Navigation to and view of a reply toot', async ({ page }) => {
 	await expect(page.getByRole('link', { name: 'Avatar of Zach Weinersmith' })).toBeVisible()
 	await expect(page.getByRole('link', { name: 'Zach Weinersmith', exact: true })).toBeVisible()
 	await expect(page.getByText('Yes we did!')).toBeVisible()
+
+	await page.getByRole('button', { name: 'Back' }).click()
+
+	await page
+		.locator('article')
+		.filter({ hasText: 'nixCraft' })
+		.filter({
+			hasText: 'Yes you guys did it!',
+		})
+		.locator('i.fa-globe + span')
+		.click()
+
+	await expect(page.getByRole('link', { name: 'Avatar of nixCraft' })).toBeVisible()
+	await expect(page.getByRole('link', { name: 'nixCraft 🐧', exact: true })).toBeVisible()
+	await expect(page.getByText('Yes you guys did it!')).toBeVisible()
 })