Build with Effect

import { Schema } from "effect";

export const TaskStatus = Schema.Literal("todo", "doing", "done");

export type TaskStatus = typeof TaskStatus.Type;

export const TaskProps = Schema.Struct({ id: Schema.String, title: Schema.String });

export const Task = Schema.Struct({ ...TaskProps.fields, status: TaskStatus });

export type Task = typeof Task.Type;

export const TaskState = Schema.Struct({ status: TaskStatus });

export const MoveTask = Schema.Struct({ id: Schema.String, status: TaskStatus });

import { Array, Effect, Ref } from "effect";
import type { Task, TaskStatus } from "./schemas";

export class Tasks extends Effect.Service<Tasks>()("Tasks", {
  effect: Effect.gen(function* () {
    const tasks = yield* Ref.make<ReadonlyArray<Task>>([
      { id: "TASK-1", title: "Write the launch announcement", status: "doing" },
      { id: "TASK-2", title: "Review the pricing page", status: "todo" },
    ]);

    return {
      find: (id: string) => Effect.map(Ref.get(tasks), Array.findFirst((task) => task.id === id)),
      updateStatus: (id: string, status: TaskStatus) =>
        Ref.update(tasks, Array.map((task) => (task.id === id ? { ...task, status } : task))),
    };
  }),
}) {}

import { Actions, Block, Button, Header, Status } from "@reintersect/sdk/components";
import { defineAction, defineBlock } from "@reintersect/sdk/effect/app";
import { MoveTask, TaskProps, TaskState } from "./schemas";
import { Tasks } from "./tasks";

const STATUS_STATES = { todo: "neutral", doing: "running", done: "success" } as const;

export const moveTask = defineAction(
  "move",
  { args: MoveTask, state: TaskState, description: "Move the task to another status" },
  function* ({ args }) {
    const tasks = yield* Tasks;

    yield* tasks.updateStatus(args.id, args.status);

    return { state: { status: args.status }, notice: `Moved to ${args.status}` };
  },
);

export const TaskBlock = defineBlock({
  type: "task",
  title: "Task",
  insertable: true,
  props: TaskProps,
  state: TaskState,
  initialState: { status: "todo" },
  actions: { move: moveTask },
}).render((props, { actions, state }) => (
  <Block summary={`${props.id} ${props.title}: ${state.status}`}>
    <Header trailing={<Status state={STATUS_STATES[state.status]} label={state.status} />}>
      {props.title}
    </Header>
    <Actions>
      <Button label="Start" action={actions.move.with({ id: props.id, status: "doing" })} />
    </Actions>
  </Block>
));

import { createReintersectApp, provide } from "@reintersect/sdk/effect/app";
import { TaskBlock } from "./taskBlock";
import { Tasks } from "./tasks";

export const app = provide(
  createReintersectApp({
    name: "Tasks",
    slug: "tasks",
    hosting: "self",
    endpoint: "https://tasks.example.com/api/reintersect",
  }).addBlock(TaskBlock),
  Tasks.Default,
);

import { HttpLayerRouter } from "@effect/platform";
import { NodeHttpServer, NodeRuntime } from "@effect/platform-node";
import { ReintersectApp } from "@reintersect/sdk/effect/app";
import { Config, Layer } from "effect";
import { createServer } from "node:http";
import { app } from "./app";

const HttpServerLive = NodeHttpServer.layerConfig(createServer, {
  port: Config.port("PORT").pipe(Config.withDefault(3000)),
});

HttpLayerRouter.serve(ReintersectApp.layer(app, { path: "/api/reintersect" })).pipe(
  Layer.provide(HttpServerLive),
  Layer.launch,
  NodeRuntime.runMain,
);