From 91f8150bf77fa72a259a337f7be56049f1331b43 Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Sun, 7 Feb 2021 13:52:54 +0100 Subject: [PATCH] Reorder files --- package.json | 1 + src/back/html.ts | 4 +- src/back/index.ts | 98 ++----------------------------------- src/back/routes/homepage.ts | 20 ++++++++ src/back/routes/tasks.ts | 31 ++++++++++++ src/back/views/tasks.ts | 58 ++++++++++++++++++++++ 6 files changed, 118 insertions(+), 94 deletions(-) create mode 100644 src/back/routes/homepage.ts create mode 100644 src/back/routes/tasks.ts create mode 100644 src/back/views/tasks.ts diff --git a/package.json b/package.json index 19a907b..1a78306 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dependencies": { "@babel/core": "^7.12.10", "@hotwired/turbo": "^7.0.0-beta.3", + "@koa/router": "^10.0.0", "nodemon": "^2.0.7", "sealious": "^0.13.4", "stimulus": "^2.0.0" diff --git a/src/back/html.ts b/src/back/html.ts index 69c66a5..3f8f40d 100644 --- a/src/back/html.ts +++ b/src/back/html.ts @@ -1,8 +1,10 @@ export default function html(body: string): string { return /* HTML */ ` + + + ${body} - `; } diff --git a/src/back/index.ts b/src/back/index.ts index bdc2b4a..111d86f 100644 --- a/src/back/index.ts +++ b/src/back/index.ts @@ -1,8 +1,8 @@ import _locreq from "locreq"; -import Sealious, { CollectionItem, Context, Middlewares } from "sealious"; +import Sealious from "sealious"; import TheApp from "./app"; -import frame from "./frame"; -import html from "./html"; +import homepage from "./routes/homepage"; +import tasks from "./routes/tasks"; const locreq = _locreq(__dirname); declare module "koa" { @@ -17,95 +17,7 @@ const app = new TheApp(); app.start(); const router = app.HTTPServer.router; - -function Task(task: CollectionItem) { - return frame( - `task-${task.id}`, - /* HTML */ `
  • - - ${task.get("title")} -
    - -
    -
    • ` - ); -} - -async function TaskList(context: Context) { - const { items: tasks } = await app.collections.tasks.list(context).fetch(); - return frame( - "task-list", - /* HTML */ ` - - ` - ); -} - -function NewTask() { - return frame( - "new-task", - /* HTML */ `
    - - -
    ` - ); -} - -async function MainView(context: Context) { - return html(/* HTML */ `My ToDo App - -

    My ToDo App

    - ${await TaskList(context)} ${NewTask()} - `); -} - -router.get("/", Middlewares.extractContext(), async (ctx) => { - ctx.body = await MainView(ctx.$context); -}); - -router.post( - "/new-task", - Middlewares.extractContext(), - Middlewares.parseBody(), - async (ctx) => { - await app.collections.tasks - .make({ - title: ctx.$body.title as string, - done: false, - }) - .save(ctx.$context); - ctx.body = await MainView(ctx.$context); - } -); - -router.delete("/task/:task_id", Middlewares.extractContext(), async (ctx) => { - const task = await app.collections.tasks.getByID( - ctx.$context, - ctx.params.task_id - ); - await task.remove(ctx.$context); - ctx.body = await MainView(ctx.$context); -}); +router.use("/", homepage.routes()); +router.use("/tasks", tasks.routes()); app.HTTPServer.addStaticRoute("/", locreq.resolve("public")); diff --git a/src/back/routes/homepage.ts b/src/back/routes/homepage.ts new file mode 100644 index 0000000..bf15c37 --- /dev/null +++ b/src/back/routes/homepage.ts @@ -0,0 +1,20 @@ +import Router from "@koa/router"; +import { Context, Middlewares } from "sealious"; +import html from "../html"; +import { NewTask, TaskList } from "../views/tasks"; + +const router = new Router(); + +export async function MainView(context: Context) { + return html(/* HTML */ `My ToDo App + +

    My ToDo App

    + ${await TaskList(context)} ${NewTask()} + `); +} + +router.get("/", Middlewares.extractContext(), async (ctx) => { + ctx.body = await MainView(ctx.$context); +}); + +export default router; diff --git a/src/back/routes/tasks.ts b/src/back/routes/tasks.ts new file mode 100644 index 0000000..eb4b250 --- /dev/null +++ b/src/back/routes/tasks.ts @@ -0,0 +1,31 @@ +import Router from "@koa/router"; +import { Middlewares } from "sealious"; +import { MainView } from "./homepage"; + +const router = new Router(); + +router.post( + "/", + Middlewares.extractContext(), + Middlewares.parseBody(), + async (ctx) => { + await ctx.$app.collections.tasks + .make({ + title: ctx.$body.title as string, + done: false, + }) + .save(ctx.$context); + ctx.body = await MainView(ctx.$context); + } +); + +router.delete("/:task_id", Middlewares.extractContext(), async (ctx) => { + const task = await ctx.$app.collections.tasks.getByID( + ctx.$context, + ctx.params.task_id + ); + await task.remove(ctx.$context); + ctx.body = await MainView(ctx.$context); +}); + +export default router; diff --git a/src/back/views/tasks.ts b/src/back/views/tasks.ts new file mode 100644 index 0000000..468c3bc --- /dev/null +++ b/src/back/views/tasks.ts @@ -0,0 +1,58 @@ +import { CollectionItem, Context } from "sealious"; +import frame from "../frame"; + +export function Task(task: CollectionItem) { + return frame( + `task-${task.id}`, + /* HTML */ `
  • + + ${task.get("title")} +
    + +
    +
    • ` + ); +} + +export async function TaskList(context: Context) { + const { items: tasks } = await context.app.collections.tasks + .list(context) + .fetch(); + return frame( + "task-list", + /* HTML */ ` +
      + ${tasks.map(Task).join("\n")} +
    + ` + ); +} + +export function NewTask() { + return frame( + "new-task", + /* HTML */ `
    + + +
    ` + ); +}