boring stuff

app/messages/components/conversations-list.tsx

@@ -1,4 +1,4 @@
-import { Link, useQuery } from "blitz";
+import { Link, useQuery, Routes } from "blitz";
 
 import getConversationsQuery from "../queries/get-conversations";
 
@@ -15,7 +15,11 @@ export default function ConversationsList() {
 				const lastMessage = messages[messages.length - 1]!;
 				return (
 					<li key={recipient} className="py-2">
-						<Link href={`/messages/${encodeURIComponent(recipient)}`}>
+						<Link
+							href={Routes.ConversationPage({
+								recipient: encodeURIComponent(recipient),
+							})}
+						>
 							<a className="flex flex-col">
 								<div className="flex flex-row justify-between">
 									<strong>{recipient}</strong>

app/messages/pages/messages.tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import type { BlitzPage } from "blitz";
+import { Routes } from "blitz";
 
 import Layout from "../../core/layouts/layout";
 import ConversationsList from "../components/conversations-list";
@@ -9,17 +10,19 @@ const Messages: BlitzPage = () => {
 	useRequireOnboarding();
 
 	return (
-		<Layout title="Messages">
+		<>
 			<div className="flex flex-col space-y-6 p-6">
 				<p>Messages page</p>
 			</div>
 			<Suspense fallback="Loading...">
 				<ConversationsList />
 			</Suspense>
-		</Layout>
+		</>
 	);
 };
 
-Messages.authenticate = true;
+Messages.getLayout = (page) => <Layout title="Messages">{page}</Layout>;
+
+Messages.authenticate = { redirectTo: Routes.SignIn() };
 
 export default Messages;

app/messages/pages/messages/[recipient].tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
-import { BlitzPage, useRouter } from "blitz";
+import type { BlitzPage } from "blitz";
+import { Routes, useRouter } from "blitz";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
 	faLongArrowLeft,
@@ -16,10 +17,9 @@ const ConversationPage: BlitzPage = () => {
 
 	const router = useRouter();
 	const recipient = router.params.recipient;
-	const pageTitle = `Messages with ${recipient}`;
 
 	return (
-		<Layout title={pageTitle} hideFooter>
+		<>
 			<header className="absolute top-0 w-screen h-12 backdrop-filter backdrop-blur-sm bg-white bg-opacity-75 border-b grid grid-cols-3 items-center">
 				<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
@@ -33,10 +33,22 @@ const ConversationPage: BlitzPage = () => {
 			<Suspense fallback={<div className="pt-12">Loading messages with {recipient}</div>}>
 				<Conversation />
 			</Suspense>
+		</>
+	);
+};
+
+ConversationPage.getLayout = function ConversationLayout(page) {
+	const router = useRouter();
+	const recipient = router.params.recipient;
+	const pageTitle = `Messages with ${recipient}`;
+
+	return (
+		<Layout title={pageTitle} hideFooter>
+			{page}
 		</Layout>
 	);
 };
 
-ConversationPage.authenticate = true;
+ConversationPage.authenticate = { redirectTo: Routes.SignIn() };
 
 export default ConversationPage;