Alice in Userland

import TodoService from "../services/TodoService.ts";
import type { Filter, Order } from "../types.ts";

export default class CliController {
  constructor(private readonly todos: TodoService) {}

  async add(title: string, needs: string[]) {
    const added = await this.todos.add(title, needs);

    console.log(`added ${added.id}  ${added.title}`);
  }

  async list(filter: Filter, order: Order, limit?: number) {
    const shown = await this.todos.list(filter, order, limit);

    if (shown.length === 0) {
      console.log("nothing to do");
      return;
    }

    const rows = [["id", "status", "title", "needs"]];

    for (const item of shown) {
      const waiting = await this.todos.waitingFor(item);

      rows.push([item.id, TodoService.statusOf(item, waiting), item.title, waiting.map((o) => o.id).join(" ")]);
    }

    CliController.table(rows);
  }

  async done(id: string) {
    const finished = await this.todos.done(id);

    console.log(`done ${finished.id}  ${finished.title}`);
  }

  async remove(id: string) {
    const removed = await this.todos.remove(id);

    console.log(`removed ${removed.id}`);
  }

  static listening(address: string) {
    console.log(`listening on ${address}`);
  }

  private static table(rows: string[][]) {
    const widths = rows[0].map((_, column) => Math.max(...rows.map((row) => row[column].length)));

    for (const row of rows) {
      console.log(
        row
          .map((cell, column) => cell.padEnd(widths[column]))
          .join("  ")
          .trimEnd(),
      );
    }
  }
}

import type { Request, Response } from "express";
import Handlebars from "handlebars";
import TodoService from "../services/TodoService.ts";
import type { Filter, Order, Status, Todo } from "../types.ts";
import { filters, orders } from "../types.ts";
import source from "../views/page.hbs" with { type: "text" };

export default class HttpController {
  private static readonly page = Handlebars.compile(source);

  private static readonly marks: Record<Status, string> = { done: "✓", ready: "●", waiting: "◌" };

  constructor(private readonly todos: TodoService) {}

  async index(request: Request, response: Response) {
    const filter = HttpController.filterOf(request);
    const order = HttpController.orderOf(request);

    response.send(await this.render(filter, order));
  }

  async add(request: Request, response: Response) {
    const title = String(request.body.title ?? "");
    const needs = String(request.body.needs ?? "")
      .split(",")
      .map((id) => id.trim())
      .filter((id) => id !== "");

    await this.act(request, response, () => this.todos.add(title, needs));
  }

  async done(request: Request, response: Response) {
    await this.act(request, response, () => this.todos.done(String(request.params.id)));
  }

  async remove(request: Request, response: Response) {
    await this.act(request, response, () => this.todos.remove(String(request.params.id)));
  }

  private async act(request: Request, response: Response, change: () => Promise<unknown>) {
    const filter = HttpController.filterOf(request);
    const order = HttpController.orderOf(request);

    try {
      await change();
      response.redirect(303, `/${HttpController.query(filter, order)}`);
    } catch (error) {
      response.status(400).send(await this.render(filter, order, (error as Error).message));
    }
  }

  private async render(filter: Filter, order: Order, problem?: string): Promise<string> {
    const query = HttpController.query;
    const todos = [];

    for (const item of await this.todos.list(filter, order)) todos.push(await this.shown(item));

    return HttpController.page({
      problem,
      todos,
      query: query(filter, order),
      filters: filters.map((name) => ({ name, chosen: name === filter, href: query(name, order) })),
      orders: orders.map((name) => ({ name, chosen: name === order, href: query(filter, name) })),
    });
  }

  private async shown(item: Todo) {
    const waiting = await this.todos.waitingFor(item);
    const status = TodoService.statusOf(item, waiting);

    return {
      id: item.id,
      title: item.title,
      done: item.done,
      status,
      mark: HttpController.marks[status],
      needs: waiting.map((other) => other.id).join(" "),
    };
  }

  private static filterOf(request: Request): Filter {
    return HttpController.choose(filters, request.query.filter, "all");
  }

  private static orderOf(request: Request): Order {
    return HttpController.choose(orders, request.query.sort, "created");
  }

  private static choose<Choice extends string>(allowed: Choice[], asked: unknown, fallback: Choice): Choice {
    return allowed.find((candidate) => candidate === String(asked)) ?? fallback;
  }

  private static query(filter: Filter, order: Order): string {
    return `?filter=${filter}&sort=${order}`;
  }
}

import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync, rmSync } from "node:fs";
import { join } from "node:path";
import type { Filter, Order, Todo, TodoRepository } from "../types.ts";

export default class FolderTodoRepository implements TodoRepository {
  constructor(private readonly dir: string) {}

  async list(filter: Filter, order: Order, limit?: number): Promise<Todo[]> {
    const todos = readdirSync(this.folder())
      .filter((name) => name.endsWith(".json"))
      .map((name) => FolderTodoRepository.read(join(this.dir, name)));

    const shown = todos.filter((todo) => {
      if (filter === "open") return !todo.done;
      if (filter === "done") return todo.done;
      if (filter === "ready") return !todo.done && !FolderTodoRepository.blocked(todo, todos);
      return true;
    });

    if (order === "title") shown.sort((a, b) => a.title.localeCompare(b.title));
    else shown.sort((a, b) => a.createdAt.localeCompare(b.createdAt));

    return limit === undefined ? shown : shown.slice(0, limit);
  }

  async find(id: string): Promise<Todo | undefined> {
    const file = this.fileOf(id);

    return existsSync(file) ? FolderTodoRepository.read(file) : undefined;
  }

  async save(todo: Todo): Promise<void> {
    writeFileSync(this.fileOf(todo.id), JSON.stringify(todo, null, 2) + "\n");
  }

  async remove(id: string): Promise<void> {
    rmSync(this.fileOf(id));
  }

  private fileOf(id: string): string {
    return join(this.folder(), `${id}.json`);
  }

  private folder(): string {
    if (!existsSync(this.dir)) mkdirSync(this.dir);

    return this.dir;
  }

  private static read(file: string): Todo {
    const todo = JSON.parse(readFileSync(file, "utf8"));

    return { ...todo, needs: todo.needs ?? [] };
  }

  private static blocked(todo: Todo, todos: Todo[]): boolean {
    for (const id of todo.needs) {
      const other = todos.find((candidate) => candidate.id === id);
      if (other !== undefined && !other.done) return true;
    }

    return false;
  }
}

import { SQL } from "bun";
import type { Filter, Order, Todo, TodoRepository } from "../types.ts";

type Row = { id: string; title: string; done: number; createdAt: string };

export default class MysqlTodoRepository implements TodoRepository {
  private static readonly wheres: Record<Filter, string> = {
    all: "",
    open: "where done = 0",
    done: "where done = 1",
    ready:
      "where done = 0 and id not in (select n.todo from needs n join todos t on t.id = n.waitsFor where t.done = 0)",
  };

  private readonly sql: SQL;

  private tables: Promise<void> | undefined;

  constructor(url: string) {
    this.sql = new SQL(url);
  }

  async list(filter: Filter, order: Order, limit?: number): Promise<Todo[]> {
    await this.prepare();

    const where = MysqlTodoRepository.wheres[filter];
    const by = order === "title" ? "title" : "createdAt";
    const query = `select * from todos ${where} order by ${by}`;
    const rows = await this.ask(limit === undefined ? query : `${query} limit ?`, limit === undefined ? [] : [limit]);

    const todos: Todo[] = [];
    for (const row of rows) todos.push(await this.rebuild(row));

    return todos;
  }

  async find(id: string): Promise<Todo | undefined> {
    await this.prepare();

    const rows = await this.ask("select * from todos where id = ?", [id]);

    return rows.length === 0 ? undefined : this.rebuild(rows[0]);
  }

  async save(todo: Todo): Promise<void> {
    await this.prepare();

    await this.sql.unsafe(
      `insert into todos (id, title, done, createdAt) values (?, ?, ?, ?)
       on duplicate key update title = values(title), done = values(done)`,
      [todo.id, todo.title, todo.done ? 1 : 0, todo.createdAt],
    );

    await this.sql.unsafe("delete from needs where todo = ?", [todo.id]);

    for (const id of todo.needs)
      await this.sql.unsafe("insert into needs (todo, waitsFor) values (?, ?)", [todo.id, id]);
  }

  async remove(id: string): Promise<void> {
    await this.prepare();

    await this.sql.unsafe("delete from todos where id = ?", [id]);
    await this.sql.unsafe("delete from needs where todo = ?", [id]);
  }

  private prepare(): Promise<void> {
    if (this.tables === undefined) {
      this.tables = (async () => {
        await this.sql.unsafe(`create table if not exists todos (id varchar(32) primary key, title text,
                               done tinyint, createdAt varchar(32))`);
        await this.sql.unsafe("create table if not exists needs (todo varchar(32), waitsFor varchar(32))");
      })();
    }

    return this.tables;
  }

  private async ask(query: string, values: unknown[]): Promise<Row[]> {
    return (await this.sql.unsafe(query, values)) as unknown as Row[];
  }

  private async rebuild(row: Row): Promise<Todo> {
    const rows = await this.sql.unsafe("select waitsFor from needs where todo = ?", [row.id]);
    const needs = rows as unknown as { waitsFor: string }[];

    return {
      id: row.id,
      title: row.title,
      done: row.done === 1,
      needs: needs.map((need) => need.waitsFor),
      createdAt: row.createdAt,
    };
  }
}

import { Database } from "bun:sqlite";
import type { Filter, Order, Todo, TodoRepository } from "../types.ts";

type Row = { id: string; title: string; done: number; createdAt: string };

export default class SqliteTodoRepository implements TodoRepository {
  private static readonly wheres: Record<Filter, string> = {
    all: "",
    open: "where done = 0",
    done: "where done = 1",
    ready:
      "where done = 0 and id not in (select n.todo from needs n join todos t on t.id = n.waitsFor where t.done = 0)",
  };

  private readonly db: Database;

  constructor(path: string) {
    this.db = new Database(path);
    this.db.run("create table if not exists todos (id text primary key, title text, done integer, createdAt text)");
    this.db.run("create table if not exists needs (todo text, waitsFor text)");
  }

  async list(filter: Filter, order: Order, limit?: number): Promise<Todo[]> {
    const where = SqliteTodoRepository.wheres[filter];
    const by = order === "title" ? "title collate nocase" : "createdAt";
    const rows = this.db.query(`select * from todos ${where} order by ${by} limit ?`).all(limit ?? -1) as Row[];

    return rows.map((row) => this.rebuild(row));
  }

  async find(id: string): Promise<Todo | undefined> {
    const row = this.db.query("select * from todos where id = ?").get(id) as Row | null;

    return row === null ? undefined : this.rebuild(row);
  }

  async save(todo: Todo): Promise<void> {
    this.db.run(
      `insert into todos (id, title, done, createdAt) values (?, ?, ?, ?)
       on conflict (id) do update set title = excluded.title, done = excluded.done`,
      [todo.id, todo.title, todo.done ? 1 : 0, todo.createdAt],
    );

    this.db.run("delete from needs where todo = ?", [todo.id]);

    for (const id of todo.needs) this.db.run("insert into needs (todo, waitsFor) values (?, ?)", [todo.id, id]);
  }

  async remove(id: string): Promise<void> {
    this.db.run("delete from todos where id = ?", [id]);
    this.db.run("delete from needs where todo = ?", [id]);
  }

  private rebuild(row: Row): Todo {
    const needs = this.db.query("select waitsFor from needs where todo = ?").all(row.id) as { waitsFor: string }[];

    return {
      id: row.id,
      title: row.title,
      done: row.done === 1,
      needs: needs.map((need) => need.waitsFor),
      createdAt: row.createdAt,
    };
  }
}

import type { Filter, Order, Status, Todo, TodoRepository } from "../types.ts";

export default class TodoService {
  constructor(private readonly todos: TodoRepository) {}

  async add(title: string, needs: string[]): Promise<Todo> {
    if (title.trim() === "") throw new Error("a todo needs a title");

    for (const id of needs) await this.get(id);

    const todo: Todo = {
      id: Date.now().toString(36),
      title: title.trim(),
      done: false,
      needs,
      createdAt: new Date().toISOString(),
    };

    await this.todos.save(todo);

    return todo;
  }

  async done(id: string): Promise<Todo> {
    const todo = await this.get(id);
    const waiting = await this.waitingFor(todo);

    if (waiting.length > 0) {
      throw new Error(`${todo.id} still waits for ${waiting.map((other) => other.id).join(" ")}`);
    }

    todo.done = true;

    await this.todos.save(todo);

    return todo;
  }

  async remove(id: string): Promise<Todo> {
    const todo = await this.get(id);

    await this.todos.remove(id);

    return todo;
  }

  list(filter: Filter, order: Order, limit?: number): Promise<Todo[]> {
    return this.todos.list(filter, order, limit);
  }

  async waitingFor(todo: Todo): Promise<Todo[]> {
    const waiting: Todo[] = [];

    for (const id of todo.needs) {
      const other = await this.todos.find(id);
      if (other !== undefined && !other.done) waiting.push(other);
    }

    return waiting;
  }

  static statusOf(todo: Todo, waiting: Todo[]): Status {
    if (todo.done) return "done";
    if (waiting.length === 0) return "ready";

    return "waiting";
  }

  private async get(id: string): Promise<Todo> {
    const todo = await this.todos.find(id);

    if (todo === undefined) throw new Error(`there is no todo with id ${id}`);

    return todo;
  }
}

declare module "*.hbs" {
  const source: string;
  export default source;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>todo</title>
    <style>
      * { box-sizing: border-box; }
      body { font: 15px/1.55 ui-sans-serif, system-ui, sans-serif; color: #1f2328;
             max-width: 46rem; margin: 3rem auto; padding: 0 1.25rem; }
      h1 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; margin: 0 0 1.25rem; }
      form.add { display: flex; gap: 0.5rem; margin: 0 0 1.25rem; }
      input { height: 2.4rem; padding: 0 0.7rem; border: 1px solid #d8dce1; border-radius: 8px; font: inherit; }
      input.title { flex: 3 1 11rem; }
      input.needs { flex: 2 1 11rem; }
      button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d8dce1;
               border-radius: 8px; background: #fff; font: inherit; color: #57606a; cursor: pointer; }
      button:hover { background: #f2f4f7; color: #1f2328; }
      form.add button { flex: none; width: 2.4rem; height: 2.4rem; }
      nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; margin: 0 0 1.5rem; font-size: 0.875rem; }
      nav span { display: flex; gap: 0.5rem; }
      nav b { color: #8a9099; font-weight: 500; }
      nav a { color: #0969da; text-decoration: none; }
      nav a:hover { text-decoration: underline; }
      table { width: 100%; border-collapse: collapse; table-layout: fixed; }
      th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: #8a9099; }
      th, td { text-align: left; vertical-align: middle; padding: 0.5rem 0.75rem 0.5rem 0;
               border-bottom: 1px solid #eceef1; }
      .id { width: 8rem; } .status { width: 7rem; } .needs { width: 8rem; } .actions { width: 5rem; }
      td.id, td.needs { font-family: ui-monospace, monospace; font-size: 0.8rem; color: #6b7280; }
      td.actions { text-align: right; white-space: nowrap; padding-right: 0; }
      td.actions form { display: inline-block; margin-left: 0.35rem; }
      td.actions button { width: 1.9rem; height: 1.9rem; }
      .pill { display: inline-flex; gap: 0.3rem; font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 999px; }
      .done { background: #eaf6ec; color: #1a7f37; }
      .ready { background: #e8f0fe; color: #0969da; }
      .waiting { background: #fdf3e3; color: #9a6700; }
      .error { margin: 0 0 1.25rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: #fdecea; color: #b3261e; }
      .empty { color: #8a9099; }
    </style>
  </head>
  <body>
    <h1>☑ todo</h1>
    {{#if problem}}<p class="error">{{problem}}</p>{{/if}}
    <form class="add" method="post" action="/add{{query}}">
      <input class="title" name="title" placeholder="what do you have to do?" autofocus />
      <input class="needs" name="needs" placeholder="waits for, ids with commas" />
      <button title="add" aria-label="add">+</button>
    </form>
    <nav>
      <span><b>show</b>
        {{#each filters}}
          {{#if chosen}}<strong>{{name}}</strong>{{else}}<a href="{{href}}">{{name}}</a>{{/if}}
        {{/each}}
      </span>
      <span><b>sort</b>
        {{#each orders}}
          {{#if chosen}}<strong>{{name}}</strong>{{else}}<a href="{{href}}">{{name}}</a>{{/if}}
        {{/each}}
      </span>
    </nav>
    {{#if todos.length}}
      <table>
        <tr>
          <th class="id">id</th><th class="status">status</th><th>title</th>
          <th class="needs">waits for</th><th class="actions"></th>
        </tr>
        {{#each todos}}
          <tr>
            <td class="id">{{id}}</td>
            <td class="status"><span class="pill {{status}}">{{mark}} {{status}}</span></td>
            <td>{{title}}</td>
            <td class="needs">{{needs}}</td>
            <td class="actions">
              {{#unless done}}
                <form method="post" action="/done/{{id}}{{../query}}">
                  <button title="finish" aria-label="finish">✓</button>
                </form>
              {{/unless}}
              <form method="post" action="/remove/{{id}}{{../query}}">
                <button title="throw away" aria-label="throw away">✕</button>
              </form>
            </td>
          </tr>
        {{/each}}
      </table>
    {{else}}
      <p class="empty">nothing to do</p>
    {{/if}}
  </body>
</html>

import { Argument, Command, InvalidArgumentError, Option } from "commander";
import express from "express";
import { homedir } from "node:os";
import { join } from "node:path";
import { version } from "../package.json";
import CliController from "./controllers/CliController.ts";
import HttpController from "./controllers/HttpController.ts";
import FolderTodoRepository from "./repositories/FolderTodoRepository.ts";
import MysqlTodoRepository from "./repositories/MysqlTodoRepository.ts";
import SqliteTodoRepository from "./repositories/SqliteTodoRepository.ts";
import TodoService from "./services/TodoService.ts";
import { filters, orders, type Filter, type Order, type TodoRepository } from "./types.ts";

const host = "127.0.0.1";

const port = 8080;

const todos = new TodoService(repository());

const cli = new CliController(todos);

const http = new HttpController(todos);

const program = new Command();

program.name("todo").description("a small todo list of your own").version(version);

program.addHelpText(
  "after",
  "\nTODO_STORAGE picks where the todos live: folder, sqlite or mysql." +
    "\nWith mysql, TODO_MYSQL is the address of the server.",
);

program
  .command("add")
  .description("write down a new todo")
  .argument("<title...>", "what you have to do")
  .option(
    "--needs <ids>",
    "ids of the todos this one waits for, separated by commas",
    (value: string, gathered: string[] = []) => gathered.concat(value.split(",").filter((id) => id !== "")),
  )
  .action((title: string[], options: { needs?: string[] }) => cli.add(title.join(" "), options.needs ?? []));

program
  .command("list")
  .description("show the todos")
  .addArgument(new Argument("[filter]", "which todos to show").choices(filters).default("all"))
  .addOption(new Option("--sort <order>", "the order to show them in").choices(orders).default("created"))
  .option("--limit <number>", "show at most this many", (value: string) => {
    const limit = Number(value);

    if (Number.isInteger(limit) && limit >= 1) return limit;

    throw new InvalidArgumentError("it has to be a whole number, 1 or more.");
  })
  .action((filter: Filter, options: { sort: Order; limit?: number }) => cli.list(filter, options.sort, options.limit));

program
  .command("done")
  .description("mark a todo as finished")
  .argument("<id>", "the todo you have finished")
  .action((id: string) => cli.done(id));

program
  .command("remove")
  .description("throw a todo away")
  .argument("<id>", "the todo you do not want any more")
  .action((id: string) => cli.remove(id));

program.command("serve").description("show the todos in a browser").action(serve);

try {
  await program.parseAsync();
} catch (error) {
  console.error((error as Error).message);
  process.exitCode = 1;
}

function repository(): TodoRepository {
  const storage = process.env.TODO_STORAGE ?? "folder";

  if (storage === "sqlite") return new SqliteTodoRepository(join(homedir(), ".todos.db"));
  if (storage === "mysql") return new MysqlTodoRepository(process.env.TODO_MYSQL ?? "mysql://localhost/todos");

  return new FolderTodoRepository(join(homedir(), ".todos"));
}

function serve() {
  const app = express();

  app.use(express.urlencoded({ extended: false }));

  app.get("/", (request, response) => http.index(request, response));
  app.post("/add", (request, response) => http.add(request, response));
  app.post("/done/:id", (request, response) => http.done(request, response));
  app.post("/remove/:id", (request, response) => http.remove(request, response));

  app.listen(port, host, () => CliController.listening(`http://${host}:${port}`));
}