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 */ `
-
- ${tasks.map(Task).join("\n")}
-
- `
- );
-}
-
-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 */ ``
+ );
+}