Skip to content

Commit

Permalink
feat: <UserPostedAt /> (#223)
Browse files Browse the repository at this point in the history
* feat: `<UserPostedAt />`

* tweaks
iuioiua authored May 22, 2023
1 parent ca15b43 commit 0ad2513
Showing 5 changed files with 49 additions and 30 deletions.
21 changes: 2 additions & 19 deletions components/ItemSummary.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,7 @@
// Copyright 2023 the Deno authors. All rights reserved. MIT license.
import VoteButton from "@/islands/VoteButton.tsx";
import type { Item, User } from "@/utils/db.ts";

export function pluralize(unit: number, label: string) {
return unit === 1 ? `${unit} ${label}` : `${unit} ${label}s`;
}

/** @todo Replace with https://deno.land/std@0.184.0/datetime/mod.ts?s=difference */
export function timeAgo(time: number | Date) {
const between = (Date.now() - Number(time)) / 1000;
if (between < 3600) return pluralize(~~(between / 60), "minute");
else if (between < 86400) return pluralize(~~(between / 3600), "hour");
else return pluralize(~~(between / 86400), "day");
}
import UserPostedAt from "./UserPostedAt.tsx";

export interface ItemSummaryProps {
item: Item;
@@ -38,13 +27,7 @@ export default function ItemSummary(props: ItemSummaryProps) {
{new URL(props.item.url).host}
</a>
</span>
<p>
{props.user.login}{" "}
{props.user?.isSubscribed && (
<span title="Deno Hunt premium user">🦕{" "}</span>
)}
{timeAgo(new Date(props.item.createdAt))} ago
</p>
<UserPostedAt user={props.user} createdAt={props.item.createdAt} />
</div>
</div>
);
17 changes: 17 additions & 0 deletions components/UserPostedAt.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Copyright 2023 the Deno authors. All rights reserved. MIT license.
import type { User } from "@/utils/db.ts";
import { timeAgo } from "@/utils/display.ts";

export default function UserPostedAt(
props: { user: User; createdAt: Date },
) {
return (
<p class="text-gray-500">
{props.user.login}{" "}
{props.user.isSubscribed && (
<span title="Deno Hunt premium user">🦕{" "}</span>
)}
{timeAgo(new Date(props.createdAt))} ago
</p>
);
}
17 changes: 6 additions & 11 deletions routes/item/[id].tsx
Original file line number Diff line number Diff line change
@@ -9,7 +9,6 @@ import {
INPUT_STYLES,
SITE_WIDTH_STYLES,
} from "@/utils/constants.ts";
import { timeAgo } from "@/components/ItemSummary.tsx";
import {
type Comment,
createComment,
@@ -23,7 +22,8 @@ import {
type User,
} from "@/utils/db.ts";
import { redirect } from "@/utils/http.ts";
import { pluralize } from "@/components/ItemSummary.tsx";
import UserPostedAt from "@/components/UserPostedAt.tsx";
import { pluralize } from "@/utils/display.ts";

interface ItemPageData extends State {
user: User;
@@ -119,15 +119,10 @@ export default function ItemPage(props: PageProps<ItemPageData>) {
b.createdAt.getTime() - a.createdAt.getTime()
).map((comment, index) => (
<div class="py-4">
<p>
{props.data.commentsUsers[index].login}{" "}
{props.data.commentsUsers[index].isSubscribed && (
<span title="Deno Hunt premium user">🦕{" "}</span>
)}
</p>
<p class="text-gray-500">
{timeAgo(new Date(comment.createdAt))} ago
</p>
<UserPostedAt
user={props.data.commentsUsers[index]}
createdAt={comment.createdAt}
/>
<p>{comment.text}</p>
</div>
))}
15 changes: 15 additions & 0 deletions utils/display.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Copyright 2023 the Deno authors. All rights reserved. MIT license.
export function pluralize(unit: number, label: string) {
return unit === 1 ? `${unit} ${label}` : `${unit} ${label}s`;
}

/**
* @todo Replace with https://deno.land/std@0.184.0/datetime/mod.ts?s=difference
* @todo Tests
*/
export function timeAgo(time: number | Date) {
const between = (Date.now() - Number(time)) / 1000;
if (between < 3600) return pluralize(~~(between / 60), "minute");
else if (between < 86400) return pluralize(~~(between / 3600), "hour");
else return pluralize(~~(between / 86400), "day");
}
9 changes: 9 additions & 0 deletions utils/display_test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// Copyright 2023 the Deno authors. All rights reserved. MIT license.
import { pluralize } from "./display.ts";
import { assertEquals } from "std/testing/asserts.ts";

Deno.test("[display] pluralize()", () => {
assertEquals(pluralize(0, "item"), "0 items");
assertEquals(pluralize(1, "item"), "1 item");
assertEquals(pluralize(2, "item"), "2 items");
});

0 comments on commit 0ad2513

Please sign in to comment.