chore: disable comments unless user is signed in (denoland#507)

closes denoland#501
dreamcatcher-tech · Sep 5, 2023 · b7af728 · b7af728
1 parent b290ffa
commit b7af728
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/routes/items/[id].tsx b/routes/items/[id].tsx
@@ -7,17 +7,20 @@ import Head from "@/components/Head.tsx";
 import type { State } from "@/middleware/session.ts";
 import CommentsList from "@/islands/CommentsList.tsx";
 
-function CommentInput(props: { itemId: string }) {
+function CommentInput(props: { isSignedIn: boolean; itemId: string }) {
   return (
     <form method="post" action="/api/comments">
       <input type="hidden" name="item_id" value={props.itemId} />
       <textarea
         class={`${INPUT_STYLES} w-full`}
+        disabled={!props.isSignedIn}
         type="text"
         name="text"
         required
       />
-      <button type="submit" class={BUTTON_STYLES}>Comment</button>
+      <button class={BUTTON_STYLES} disabled={!props.isSignedIn} type="submit">
+        {props.isSignedIn ? "Comment" : "Sign in to comment"}
+      </button>
     </form>
   );
 }
@@ -30,11 +33,13 @@ export default async function ItemsItemPage(
   const item = await getItem(itemId);
   if (item === null) return await ctx.renderNotFound();
 
+  const isSignedIn = ctx.state.sessionUser !== undefined;
   let isVoted = false;
-  if (ctx.state.sessionUser !== undefined) {
+
+  if (isSignedIn) {
     const areVoted = await getAreVotedByUser(
       [item],
-      ctx.state.sessionUser.login,
+      ctx.state.sessionUser!.login,
     );
     isVoted = areVoted[0];
   }
@@ -47,7 +52,7 @@ export default async function ItemsItemPage(
           item={item}
           isVoted={isVoted}
         />
-        <CommentInput itemId={ctx.params.id} />
+        <CommentInput isSignedIn={isSignedIn} itemId={ctx.params.id} />
         <CommentsList itemId={ctx.params.id} />
       </main>
     </>

diff --git a/utils/constants.ts b/utils/constants.ts
@@ -8,7 +8,7 @@ export const SITE_DESCRIPTION = "Discover new Deno projects. Share your own.";
  * 2. Writing custom components which offer no additional functionality beyond styling
  */
 export const BUTTON_STYLES =
-  "px-4 py-2 bg-primary text-white rounded-lg border-1 border-primary transition duration-300 disabled:(opacity-50 cursor-not-allowed) hover:(bg-transparent text-primary)";
+  "px-4 py-2 bg-primary text-white rounded-lg border-1 border-primary transition duration-300 disabled:(opacity-50 cursor-not-allowed) hover:enabled:(bg-transparent text-primary)";
 export const INPUT_STYLES =
   "px-4 py-2 bg-transparent rounded rounded-lg outline-none border-1 border-gray-300 hover:border-black transition duration-300 disabled:(opacity-50 cursor-not-allowed) dark:(hover:border-white)";
 export const SITE_BAR_STYLES = "flex justify-between p-4 gap-4";