refactor: rework session logic for submission and voting functionality (

denoland#609) Summary: * The user is no longer required to be signed in to view the submit page. * The user still must be signed in to submit (post to `POST /submit`). * Moved session assertion for `POST /api/items/[id]/vote` and `DELETE /api/items/[id]/vote` to the session plugin.
dreamcatcher-tech · Sep 25, 2023 · 0f830bf · 0f830bf
1 parent eae9e2b
commit 0f830bf
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/e2e_test.ts b/e2e_test.ts
@@ -202,7 +202,8 @@ Deno.test("[e2e] GET /submit", async () => {
     new Request("http://localhost/submit"),
   );
 
-  assertRedirect(resp, "/signin");
+  assertEquals(resp.status, Status.OK);
+  assertHtml(resp);
 });
 
 Deno.test("[e2e] GET /feed", async () => {

diff --git a/plugins/session.ts b/plugins/session.ts
@@ -78,11 +78,11 @@ export default {
       middleware: { handler: ensureSignedIn },
     },
     {
-      path: "/submit",
+      path: "/api/me",
       middleware: { handler: ensureSignedIn },
     },
     {
-      path: "/api/me",
+      path: "/api/items/[id]/vote",
       middleware: { handler: ensureSignedIn },
     },
   ],

diff --git a/routes/api/items/[id]/vote.ts b/routes/api/items/[id]/vote.ts
@@ -1,13 +1,11 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import { type Handlers, Status } from "$fresh/server.ts";
-import { assertSignedIn, type State } from "@/plugins/session.ts";
+import type { SignedInState } from "@/plugins/session.ts";
 import { createVote, deleteVote, getItem } from "@/utils/db.ts";
 import { createHttpError } from "std/http/http_errors.ts";
 
-export const handler: Handlers<undefined, State> = {
+export const handler: Handlers<undefined, SignedInState> = {
   async POST(_req, ctx) {
-    assertSignedIn(ctx);
-
     const itemId = ctx.params.id;
     const item = await getItem(itemId);
     if (item === null) throw createHttpError(Status.NotFound, "Item not found");
@@ -21,8 +19,6 @@ export const handler: Handlers<undefined, State> = {
     return new Response(null, { status: Status.Created });
   },
   async DELETE(_req, ctx) {
-    assertSignedIn(ctx);
-
     const itemId = ctx.params.id;
     const item = await getItem(itemId);
     if (item === null) throw createHttpError(Status.NotFound, "Item not found");

diff --git a/routes/submit.tsx b/routes/submit.tsx
@@ -6,12 +6,21 @@ import IconCircleX from "tabler_icons_tsx/circle-x.tsx";
 import { defineRoute, Handlers } from "$fresh/server.ts";
 import { createItem } from "@/utils/db.ts";
 import { redirect } from "@/utils/http.ts";
-import type { SignedInState } from "@/plugins/session.ts";
+import {
+  assertSignedIn,
+  type SignedInState,
+  State,
+} from "@/plugins/session.ts";
 import { ulid } from "std/ulid/mod.ts";
 import IconInfo from "tabler_icons_tsx/info-circle.tsx";
 
+const SUBMIT_STYLES =
+  "w-full text-white text-center rounded-[7px] transition duration-300 px-4 py-2 block hover:(bg-white text-black dark:(bg-gray-900 !text-white))";
+
 export const handler: Handlers<undefined, SignedInState> = {
   async POST(req, ctx) {
+    assertSignedIn(ctx);
+
     const form = await req.formData();
     const title = form.get("title");
     const url = form.get("url");
@@ -34,7 +43,7 @@ export const handler: Handlers<undefined, SignedInState> = {
   },
 };
 
-export default defineRoute((_req, ctx) => {
+export default defineRoute<State>((_req, ctx) => {
   return (
     <>
       <Head title="Submit" href={ctx.url.href} />
@@ -87,6 +96,7 @@ export default defineRoute((_req, ctx) => {
                 name="title"
                 required
                 placeholder="Deno Hunt: the best place to share your Deno project"
+                disabled={!ctx.state.sessionUser}
               />
             </div>
 
@@ -103,6 +113,7 @@ export default defineRoute((_req, ctx) => {
                 name="url"
                 required
                 placeholder="https://my-awesome-project.com"
+                disabled={!ctx.state.sessionUser}
               />
             </div>
             {ctx.url.searchParams.has("error") && (
@@ -112,9 +123,17 @@ export default defineRoute((_req, ctx) => {
               </div>
             )}
             <div class="w-full rounded-lg bg-gradient-to-tr from-secondary to-primary p-px mt-8">
-              <button class="w-full text-white text-center rounded-[7px] transition duration-300 px-4 py-2 block hover:(bg-white text-black dark:(bg-gray-900 !text-white))">
-                Submit
-              </button>
+              {!ctx.state.sessionUser
+                ? (
+                  <a href="/signin" class={SUBMIT_STYLES}>
+                    Sign in to submit &#8250;
+                  </a>
+                )
+                : (
+                  <button class={SUBMIT_STYLES}>
+                    Submit
+                  </button>
+                )}
             </div>
           </form>
         </div>