From 694a24c791011dea686a177efb96c0c2fed8949a Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 5 Aug 2026 10:42:23 +0200
Subject: [PATCH] fix(news): resolve null destructuring type errors in article
 page

.catch(() => null) unioned the query result with null, so destructuring
the first row failed typecheck (TS2488). Return an empty array on failure
instead and drop unused connection/desc imports.
---
 src/app/(site)/news/[...slug]/page.tsx | 34 ++++++++++++--------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/app/(site)/news/[...slug]/page.tsx b/src/app/(site)/news/[...slug]/page.tsx
index 148f4f4c..9ea18a8a 100644
--- a/src/app/(site)/news/[...slug]/page.tsx
+++ b/src/app/(site)/news/[...slug]/page.tsx
@@ -1,5 +1,4 @@
-import { connection } from "next/server";
-import { and, asc, desc, eq, inArray } from "drizzle-orm";
+import { and, asc, eq, inArray } from "drizzle-orm";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
@@ -26,7 +25,6 @@ import { sanitize } from "@/lib/sanitize";
 // See: https://nextjs.org/docs/app/guides/migrating-to-cache-components
 export const instant = false;
 
-
 type SearchParams = Promise<{
 	comment?: string;
 	reaction?: string;
@@ -64,7 +62,7 @@ export async function generateMetadata({
 		.from(WebsiteArticles)
 		.where(eq(WebsiteArticles.slug, slug))
 		.limit(1)
-		.catch(() => null);
+		.catch(() => []);
 	if (!article) return { title: "Article" };
 	return {
 		title: article.title,
@@ -116,7 +114,7 @@ export default async function ArticlePage({
 				.from(WebsiteArticles)
 				.where(eq(WebsiteArticles.slug, slug))
 				.limit(1)
-				.catch(() => null);
+				.catch(() => []);
 			return row ?? null;
 		},
 		60,
@@ -200,24 +198,24 @@ export default async function ArticlePage({
 								: null;
 
 	return (
-        <main style={{ display: "grid", gap: "1.5rem" }}>
-            {comment === "posted" ? (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			{comment === "posted" ? (
 				<div role="status" style={feedbackStyle("success")}>
 					{t("success.posted")}
 				</div>
 			) : null}
-            {reaction === "1" ? (
+			{reaction === "1" ? (
 				<div role="status" style={feedbackStyle("success")}>
 					{t("success.reaction")}
 				</div>
 			) : null}
-            {errorMessage ? (
+			{errorMessage ? (
 				<div role="alert" style={feedbackStyle("error")}>
 					{errorMessage}
 				</div>
 			) : null}
 
-            <ContentCard
+			<ContentCard
 				icon="📰"
 				title={article.title}
 				subtitle={
@@ -231,11 +229,11 @@ export default async function ArticlePage({
 			>
 				{article.image ? (
 					// eslint-disable-next-line @next/next/no-img-element
-					(<img
+					<img
 						src={article.image}
 						alt=""
 						style={{ width: "100%", borderRadius: 10, margin: "0 0 1rem" }}
-					/>)
+					/>
 				) : null}
 				{/* Article body is rich HTML (atom uses TinyMCE) — sanitised server-side. */}
 				<SanitizedHtml
@@ -244,8 +242,8 @@ export default async function ArticlePage({
 				/>
 			</ContentCard>
 
-            {/* ── Reactions ─────────────────────────────────────────── */}
-            <ContentCard
+			{/* ── Reactions ─────────────────────────────────────────── */}
+			<ContentCard
 				icon="💬"
 				title={t("reactionsTitle")}
 				subtitle={t("reactionsSubtitle")}
@@ -319,8 +317,8 @@ export default async function ArticlePage({
 				)}
 			</ContentCard>
 
-            {/* ── Comments ──────────────────────────────────────────── */}
-            <ContentCard
+			{/* ── Comments ──────────────────────────────────────────── */}
+			<ContentCard
 				icon="🗨️"
 				title={t("commentsTitle")}
 				subtitle={
@@ -394,6 +392,6 @@ export default async function ArticlePage({
 					</p>
 				)}
 			</ContentCard>
-        </main>
-    );
+		</main>
+	);
 }