feat: user display names

components/ItemSummary.tsx

@@ -1,5 +1,5 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import type { Item } from "@/utils/db.ts";
+import type { Item, User } from "@/utils/db.ts";
 
 export function pluralize(unit: number, label: string) {
   return unit === 1 ? `${unit} ${label}` : `${unit} ${label}s`;
@@ -15,6 +15,7 @@ export function timeAgo(time: number | Date) {
 
 export interface ItemSummaryProps {
   item: Item;
+  user: User;
   commentsCount: number;
 }
 
@@ -31,7 +32,8 @@ export default function ItemSummary(props: ItemSummaryProps) {
         </span>
       </div>
       <div class="text-gray-500">
-        {pluralize(props.item.score, "point")} by {props.item.userId}{" "}
+        {pluralize(props.item.score, "point")} by{" "}
+        {props.user.displayName || props.item.userId}{" "}
         {timeAgo(new Date(props.item.createdAt))} ago •{" "}
         <a href={`/item/${props.item.id}`}>
           {pluralize(props.commentsCount, "comment")}

routes/account/index.tsx

@@ -40,6 +40,14 @@ export default function AccountPage(props: PageProps<AccountPageData>) {
             </div>
           )}
           <ul class="divide-y">
+            <li class="py-4">
+              <p>
+                <strong>Display name</strong>
+              </p>
+              <p>
+                {props.data.user.displayName}
+              </p>
+            </li>
             <li class="py-4">
               <p>
                 <strong>Email</strong>

routes/index.tsx

@@ -5,20 +5,28 @@ import Layout from "@/components/Layout.tsx";
 import Head from "@/components/Head.tsx";
 import type { State } from "./_middleware.ts";
 import ItemSummary from "@/components/ItemSummary.tsx";
-import { getAllItems, getItemCommentsCount, type Item } from "@/utils/db.ts";
+import {
+  getAllItems,
+  getItemCommentsCount,
+  getUsersByIds,
+  type Item,
+  type User,
+} from "@/utils/db.ts";
 
 interface HomePageData extends State {
+  users: User[];
   items: Item[];
   commentsCounts: number[];
 }
 
 export const handler: Handlers<HomePageData, State> = {
   async GET(_req, ctx) {
     const items = await getAllItems();
+    const users = await getUsersByIds(items.map((item) => item.userId));
     const commentsCounts = await Promise.all(
       items.map((item) => getItemCommentsCount(item.id)),
     );
-    return ctx.render({ ...ctx.state, items, commentsCounts });
+    return ctx.render({ ...ctx.state, items, commentsCounts, users });
   },
 };
 
@@ -32,6 +40,7 @@ export default function HomePage(props: PageProps<HomePageData>) {
             <ItemSummary
               item={item}
               commentsCount={props.data.commentsCounts[index]}
+              user={props.data.users[index]}
             />
           ))}
         </div>

routes/item/[id].tsx

@@ -11,16 +11,21 @@ import {
 } from "@/utils/constants.ts";
 import { timeAgo } from "@/components/ItemSummary.tsx";
 import {
-  Comment,
+  type Comment,
   createComment,
   getCommentsByItem,
   getItemById,
-  Item,
+  getUserById,
+  getUsersByIds,
+  type Item,
+  type User,
 } from "@/utils/db.ts";
 
 interface ItemPageData extends State {
+  user: User;
   item: Item;
   comments: Comment[];
+  commentsUsers: User[];
 }
 
 export const handler: Handlers<ItemPageData, State> = {
@@ -33,8 +38,18 @@ export const handler: Handlers<ItemPageData, State> = {
     }
 
     const comments = await getCommentsByItem(id);
+    const commentsUsers = await getUsersByIds(
+      comments.map((comment) => comment.userId),
+    );
+    const user = await getUserById(item.userId);
 
-    return ctx.render({ ...ctx.state, item, comments });
+    return ctx.render({
+      ...ctx.state,
+      item,
+      comments,
+      user: user!,
+      commentsUsers,
+    });
   },
   async POST(req, ctx) {
     if (!ctx.state.session) {
@@ -76,11 +91,15 @@ export default function ItemPage(props: PageProps<ItemPageData>) {
           <ItemSummary
             item={props.data.item}
             commentsCount={props.data.comments.length}
+            user={props.data.user}
           />
           <div class="divide-y">
-            {props.data.comments.map((comment) => (
+            {props.data.comments.map((comment, index) => (
               <div class="py-4">
-                <p>{comment.userId}</p>
+                <p>
+                  {props.data.commentsUsers[index].displayName ||
+                    comment.userId}
+                </p>
                 <p class="text-gray-500">
                   {timeAgo(new Date(comment.createdAt))} ago
                 </p>

routes/login/index.tsx

@@ -2,11 +2,11 @@
 import type { Handlers, PageProps } from "$fresh/server.ts";
 import Logo from "@/components/Logo.tsx";
 import Head from "@/components/Head.tsx";
-import AuthForm from "@/components/AuthForm.tsx";
 import OAuthLoginButton from "@/components/OAuthLoginButton.tsx";
 import { NOTICE_STYLES } from "@/utils/constants.ts";
 import { REDIRECT_PATH_AFTER_LOGIN } from "@/utils/constants.ts";
 import type { State } from "@/routes/_middleware.ts";
+import { BUTTON_STYLES, INPUT_STYLES } from "@/utils/constants.ts";
 
 // deno-lint-ignore no-explicit-any
 export const handler: Handlers<any, State> = {
@@ -74,7 +74,25 @@ export default function LoginPage(props: PageProps) {
           {errorMessage && POSSIBLE_ERROR_MESSAGES.has(errorMessage) && (
             <div class={NOTICE_STYLES}>{errorMessage}</div>
           )}
-          <AuthForm type="Login" />
+          <form method="POST" class="space-y-4">
+            <input
+              placeholder="Email"
+              name="email"
+              type="email"
+              required
+              class={INPUT_STYLES}
+            />
+            <input
+              placeholder="Password"
+              name="password"
+              type="password"
+              required
+              class={INPUT_STYLES}
+            />
+            <button type="submit" class={`${BUTTON_STYLES} w-full`}>
+              Login
+            </button>
+          </form>
           <hr class="my-4" />
           <OAuthLoginButton
             provider="github"

routes/signup.tsx

@@ -1,7 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { PageProps } from "$fresh/server.ts";
 import Head from "@/components/Head.tsx";
-import AuthForm from "@/components/AuthForm.tsx";
 import Logo from "@/components/Logo.tsx";
 import OAuthLoginButton from "@/components/OAuthLoginButton.tsx";
 import { NOTICE_STYLES } from "@/utils/constants.ts";
@@ -10,11 +9,13 @@ import { REDIRECT_PATH_AFTER_LOGIN } from "@/utils/constants.ts";
 import type { State } from "./_middleware.ts";
 import { stripe } from "@/utils/payments.ts";
 import { createUser } from "@/utils/db.ts";
+import { BUTTON_STYLES, INPUT_STYLES } from "@/utils/constants.ts";
 
 // deno-lint-ignore no-explicit-any
 export const handler: Handlers<any, State> = {
   async POST(req, ctx) {
     const form = await req.formData();
+    const displayName = form.get("display_name") as string;
     const email = form.get("email") as string;
     const password = form.get("password") as string;
 
@@ -32,6 +33,7 @@ export const handler: Handlers<any, State> = {
 
     const { id } = await stripe.customers.create({ email });
     await createUser({
+      displayName,
       id: data.user!.id,
       stripeCustomerId: id,
     });
@@ -71,7 +73,35 @@ export default function SignupPage(props: PageProps) {
           {errorMessage && POSSIBLE_ERROR_MESSAGES.has(errorMessage) && (
             <div class={NOTICE_STYLES}>{errorMessage}</div>
           )}
-          <AuthForm type="Signup" />
+          <form
+            method="POST"
+            class="space-y-4"
+          >
+            <input
+              placeholder="Display name"
+              name="display_name"
+              type="text"
+              required
+              class={INPUT_STYLES}
+            />
+            <input
+              placeholder="Email"
+              name="email"
+              type="email"
+              required
+              class={INPUT_STYLES}
+            />
+            <input
+              placeholder="Password"
+              name="password"
+              type="password"
+              required
+              class={INPUT_STYLES}
+            />
+            <button type="submit" class={`${BUTTON_STYLES} w-full`}>
+              Signup
+            </button>
+          </form>
           <hr class="my-4" />
           <OAuthLoginButton
             provider="github"

utils/db.ts

@@ -103,6 +103,7 @@ export async function getItemCommentsCount(itemId: string) {
 interface InitUser {
   id: string;
   stripeCustomerId: string;
+  displayName: string;
 }
 
 export interface User extends InitUser {
@@ -164,10 +165,20 @@ export async function setUserSubscription(
   }
 }
 
+export async function getUsersByIds(ids: string[]) {
+  const keys = ids.map((id) => ["users", id]);
+  const res = await kv.getMany<User[]>(keys);
+  return res.map((entry) => entry.value!);
+}
+
 export async function getOrCreateUser(id: string, email: string) {
   const user = await getUserById(id);
   if (user) return user;
 
   const customer = await stripe.customers.create({ email });
-  return await createUser({ id, stripeCustomerId: customer.id });
+  return await createUser({
+    id,
+    stripeCustomerId: customer.id,
+    displayName: "",
+  });
 }