denoland · iuioiua · May 24, 2023 · May 21, 2023 · May 21, 2023 · May 21, 2023
diff --git a/components/ItemSummary.tsx b/components/ItemSummary.tsx
@@ -5,7 +5,7 @@ import UserPostedAt from "./UserPostedAt.tsx";
 
 export interface ItemSummaryProps {
   item: Item;
-  user: User;
+  user?: User;
   isVoted: boolean;
 }
 

diff --git a/components/UserPostedAt.tsx b/components/UserPostedAt.tsx
@@ -3,12 +3,12 @@ import type { User } from "@/utils/db.ts";
 import { timeAgo } from "@/utils/display.ts";
 
 export default function UserPostedAt(
-  props: { user: User; createdAt: Date },
+  props: { user?: User; createdAt: Date },
 ) {
   return (
     <p class="text-gray-500">
-      {props.user.login}{" "}
-      {props.user.isSubscribed && (
+      {props.user?.login || "[deleted]"}{" "}
+      {props.user?.isSubscribed && (
         <span title="Deno Hunt premium user">🦕{" "}</span>
       )}
       {timeAgo(new Date(props.createdAt))} ago

diff --git a/deno.json b/deno.json
@@ -1,7 +1,9 @@
 {
   "lock": false,
   "tasks": {
-    "init:stripe": "deno run --allow-read --allow-env --allow-net tools/init_stripe.ts ",
+    "init:stripe": "deno run --allow-read --allow-env --allow-net tools/init_stripe.ts",
+    "db:seed": "deno run --allow-read --allow-env --allow-net --unstable tools/seed_submissions.ts",
+    "db:reset": "deno run --allow-read --allow-env --unstable tools/reset_kv.ts",
     "start": "deno run --unstable -A --watch=static/,routes/ dev.ts",
     "test": "deno test -A --unstable",
     "check:license": "deno run --allow-read --allow-write tools/check_license.ts",

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -17,6 +17,7 @@ import {
 interface HomePageData extends State {
   users: User[];
   items: Item[];
+  cursor?: string;
   areVoted: boolean[];
 }
 
@@ -33,23 +34,28 @@ export function compareScore(a: Item, b: Item) {
 }
 
 export const handler: Handlers<HomePageData, State> = {
-  async GET(_req, ctx) {
+  async GET(req, ctx) {
     /** @todo Add pagination functionality */
-    const items = (await getAllItems({ limit: 10 })).sort(compareScore);
+    const start = new URL(req.url).searchParams.get("page") || undefined;
+    const { items, cursor } = await getAllItems({ limit: 10, cursor: start });
+    items.sort(compareScore);
     const users = await getUsersByIds(items.map((item) => item.userId));
     let votedItemIds: string[] = [];
     if (ctx.state.sessionId) {
       const sessionUser = await getUserBySessionId(ctx.state.sessionId!);
-      votedItemIds = await getVotedItemIdsByUser(sessionUser!.id);
+      if (sessionUser) {
+        votedItemIds = await getVotedItemIdsByUser(sessionUser!.id);
+      }
     }
-
     /** @todo Optimise */
     const areVoted = items.map((item) => votedItemIds.includes(item.id));
-    return ctx.render({ ...ctx.state, items, users, areVoted });
+    return ctx.render({ ...ctx.state, items, cursor, users, areVoted });
   },
 };
 
 export default function HomePage(props: PageProps<HomePageData>) {
+  const nextPageUrl = new URL(props.url);
+  nextPageUrl.searchParams.set("page", props.data.cursor || "");
   return (
     <>
       <Head href={props.url.href} />
@@ -62,6 +68,11 @@ export default function HomePage(props: PageProps<HomePageData>) {
               user={props.data.users[index]}
             />
           ))}
+          {props.data?.cursor && (
+            <div class="mt-4 text-gray-500">
+              <a href={nextPageUrl.toString()}>More</a>
+            </div>
+          )}
         </div>
       </Layout>
     </>

diff --git a/tools/seed_submissions.ts b/tools/seed_submissions.ts
@@ -0,0 +1,83 @@
+// Copyright 2023 the Deno authors. All rights reserved. MIT license.
+
+import { createItem } from "@/utils/db.ts";
+
+// Reference: https://github.com/HackerNews/API
+const API_BASE_URL = `https://hacker-news.firebaseio.com/v0`;
+
+interface Story {
+  id: number;
+  score: number;
+  time: number;
+  by: string;
+  title: string;
+  url: string;
+}
+
+function* batchify<T>(arr: T[], n = 5): Generator<T[], void> {
+  for (let i = 0; i < arr.length; i += n) {
+    yield arr.slice(i, i + n);
+  }
+}
+
+// Fetch the top 500 HN stories to seed the db
+async function fetchTopStoryIds() {
+  const resp = await fetch(`${API_BASE_URL}/topstories.json`);
+  if (!resp.ok) {
+    console.error(`Failed to fetchTopStoryIds - status: ${resp.status}`);
+    return;
+  }
+  return await resp.json();
+}
+
+async function fetchStory(id: number | string) {
+  const resp = await fetch(`${API_BASE_URL}/item/${id}.json`);
+  if (!resp.ok) {
+    console.error(`Failed to fetchStory (${id}) - status: ${resp.status}`);
+    return;
+  }
+  return await resp.json();
+}
+
+async function fetchTopStories(limit = 10) {
+  const ids = await fetchTopStoryIds();
+  if (!(ids && ids.length)) {
+    console.error(`No ids to fetch!`);
+    return;
+  }
+  const filtered: [number] = ids.slice(0, limit);
+  const stories: Story[] = [];
+  for (const batch of batchify(filtered)) {
+    stories.push(...(await Promise.all(batch.map((id) => fetchStory(id))))
+      .filter((v) => Boolean(v)) as Story[]);
+  }
+  return stories;
+}
+
+async function seedSubmissions(stories: Story[]) {
+  const items = stories.map(({ by: userId, title, url }) => {
+    return { userId, title, url };
+  }).filter(({ url }) => {
+    try {
+      return Boolean(new URL(url).host);
+    } catch {
+      return;
+    }
+  });
+  for (const batch of batchify(items)) {
+    await Promise.all(batch.map((item) => createItem(item)));
+  }
+}
+
+async function main(limit = 20) {
+  const stories = await fetchTopStories(limit);
+  if (!(stories && stories.length)) {
+    console.error(`No stories to seed!`);
+    return;
+  }
+  await seedSubmissions(stories);
+}
+
+if (import.meta.main) {
+  await main();
+}
diff --git a/utils/db.ts b/utils/db.ts
@@ -43,7 +43,10 @@ export async function getAllItems(options?: Deno.KvListOptions) {
   const iter = await kv.list<Item>({ prefix: ["items"] }, options);
   const items = [];
   for await (const res of iter) items.push(res.value);
-  return items;
+  return {
+    items,
+    cursor: iter.cursor,
+  };
 }
 
 export async function getItemById(id: string) {