Merge pull request #4 from nyaomaru/deno-study-2

study: deno define routes and forms

routes/about.tsx

@@ -1,4 +1,4 @@
-import { Handlers, PageProps } from "$fresh/server.ts";
+import { Handlers, PageProps, RouteContext } from "$fresh/server.ts";
 
 const loadFooValue = async () => {
     return "nyaomaru";
@@ -12,9 +12,22 @@ export const handler: Handlers = {
     },
 };
 
-export default async function AboutPage(props: PageProps) {
+export default async function AboutPage(props: PageProps, ctx: RouteContext) {
     const value = await loadFooValue();
 
+    if (value === null) {
+        return ctx.renderNotFound();
+    }
+
+    if (value === "redirect") {
+        const headers = new Headers();
+        headers.set("location", "/search");
+        return new Response(null, {
+            status: 302,
+            headers,
+        });
+    }
+
     return (
         <main>
             <h1>About</h1>

routes/countdown.tsx

@@ -1,6 +1,7 @@
+import { defineRoute } from "$fresh/server.ts";
 import Countdown from "../islands/Countdown.tsx";
 
-export default function Page() {
+export default defineRoute(async (req, ctx) => {
     const date = new Date();
     date.setHours(date.getHours() + 1);
     return (
@@ -11,4 +12,4 @@ export default function Page() {
             </p>
         </article>
     );
-}
+});

routes/greet/[name].tsx

@@ -6,6 +6,7 @@ export const config: RouteConfig = {
 
 export default function GreetPage(props: PageProps) {
   const { name } = props.params;
+
   return (
     <main>
       <p>Greetings to you, {name}!</p>

routes/subscribe.tsx

@@ -0,0 +1,45 @@
+import { Handlers, type PageProps } from "$fresh/server.ts";
+
+interface Props {
+    message: string | null;
+}
+
+export const handler: Handlers<Props> = {
+    async GET(req, ctx) {
+        return await ctx.render({
+            message: null,
+        });
+    },
+    async POST(req, ctx) {
+        const form = await req.formData();
+        const file = form.get("my-file") as File;
+
+        if (!file) {
+            return ctx.render({
+                message: `Please try again`,
+            });
+        }
+
+        const name = file.name;
+        const contents = await file.text();
+
+        console.log(contents);
+
+        return ctx.render({
+            message: `${name} uploaded!`,
+        });
+    },
+};
+
+export default function Upload(props: PageProps<Props>) {
+    const { message } = props.data;
+    return (
+        <>
+            <form method="post" encType="multipart/form-data">
+                <input type="file" name="my-file" />
+                <button type="submit">Upload</button>
+            </form>
+            {message ? <p>{message}</p> : null}
+        </>
+    );
+}