diff --git a/components/ItemSummary.tsx b/components/ItemSummary.tsx index 2af2f73b8..803325089 100644 --- a/components/ItemSummary.tsx +++ b/components/ItemSummary.tsx @@ -17,7 +17,6 @@ export function timeAgo(time: number | Date) { export interface ItemSummaryProps { item: Item; user: User; - commentsCount: number; isVoted: boolean; } @@ -29,19 +28,22 @@ export default function ItemSummary(props: ItemSummaryProps) { isVoted={props.isVoted} /> <div> - <span class="mr-2 text-black"> - <a href={props.item.url}>{props.item.title}</a> + <span class="mr-2"> + <a class="text-black hover:underline" href={`/item/${props.item.id}`}> + {props.item.title} + </a> + </span> + <span> + <a class="hover:underline" href={props.item.url} target="_blank"> + {new URL(props.item.url).host} ↗ + </a> </span> - {new URL(props.item.url).host} <p> {getUserDisplayName(props.user)}{" "} {props.user.isSubscribed && ( <span title="Deno Hunt premium user">🦕{" "}</span> )} - {timeAgo(new Date(props.item.createdAt))} ago •{" "} - <a href={`/item/${props.item.id}`}> - {pluralize(props.commentsCount, "comment")} - </a> + {timeAgo(new Date(props.item.createdAt))} ago </p> </div> </div> diff --git a/routes/index.tsx b/routes/index.tsx index 44d916c4b..9a1dbf11d 100644 --- a/routes/index.tsx +++ b/routes/index.tsx @@ -7,7 +7,6 @@ import type { State } from "./_middleware.ts"; import ItemSummary from "@/components/ItemSummary.tsx"; import { getAllItems, - getItemCommentsCount, getUsersByIds, getVotedItemIdsByUser, type Item, @@ -17,7 +16,6 @@ import { interface HomePageData extends State { users: User[]; items: Item[]; - commentsCounts: number[]; areVoted: boolean[]; } @@ -38,15 +36,12 @@ export const handler: Handlers<HomePageData, State> = { /** @todo Add pagination functionality */ const items = (await getAllItems({ limit: 10 })).sort(compareScore); const users = await getUsersByIds(items.map((item) => item.userId)); - const commentsCounts = await Promise.all( - items.map((item) => getItemCommentsCount(item.id)), - ); const votedItemIds = ctx.state.session ? await getVotedItemIdsByUser(ctx.state.session?.user.id) : []; /** @todo Optimise */ const areVoted = items.map((item) => votedItemIds.includes(item.id)); - return ctx.render({ ...ctx.state, items, commentsCounts, users, areVoted }); + return ctx.render({ ...ctx.state, items, users, areVoted }); }, }; @@ -59,7 +54,6 @@ export default function HomePage(props: PageProps<HomePageData>) { {props.data.items.map((item, index) => ( <ItemSummary item={item} - commentsCount={props.data.commentsCounts[index]} isVoted={props.data.areVoted[index]} user={props.data.users[index]} /> diff --git a/routes/item/[id].tsx b/routes/item/[id].tsx index dbcae68d3..d4bfb83dd 100644 --- a/routes/item/[id].tsx +++ b/routes/item/[id].tsx @@ -23,6 +23,7 @@ import { type User, } from "@/utils/db.ts"; import { redirect } from "@/utils/http.ts"; +import { pluralize } from "@/components/ItemSummary.tsx"; interface ItemPageData extends State { user: User; @@ -89,14 +90,18 @@ export default function ItemPage(props: PageProps<ItemPageData>) { <> <Head title={props.data.item.title} href={props.url.href} /> <Layout session={props.data.session}> - <div class={`${SITE_WIDTH_STYLES} flex-1 px-8 space-y-4`}> + <div class={`${SITE_WIDTH_STYLES} flex-1 px-8 space-y-8`}> <ItemSummary item={props.data.item} - commentsCount={props.data.comments.length} isVoted={props.data.isVoted} user={props.data.user} /> <div> + <h2> + <strong> + {pluralize(props.data.comments.length, "comment")} + </strong> + </h2> {props.data.comments.map((comment, index) => ( <div class="py-4"> <p> diff --git a/utils/db.ts b/utils/db.ts index afb27191e..4d006dd80 100644 --- a/utils/db.ts +++ b/utils/db.ts @@ -98,13 +98,6 @@ export async function getCommentsByItem( return comments; } -export async function getItemCommentsCount(itemId: string) { - const iter = kv.list<Comment>({ prefix: ["comments_by_item", itemId] }); - let count = 0; - for await (const _ of iter) count++; - return count; -} - interface InitVote { userId: string; itemId: string;