Quickstart

import { defineAction, defineBlock } from "@reintersect/sdk/app";
import { Actions, Block, Button, Fact, Facts, Header, Status } from "@reintersect/sdk/components";
import { env, InstallConfig, MoveTask, TaskProps, TaskState, type TaskStatus } from "./schemas";
import { taskUrl, updateTaskStatus } from "./tasks";

const STATUS_LABELS = { todo: "To do", doing: "In progress", done: "Done" } as const satisfies Record<TaskStatus, string>;

const STATUS_STATES = { todo: "neutral", doing: "running", done: "success" } as const satisfies Record<TaskStatus, string>;

const NEXT_MOVES = {
  todo: { status: "doing", label: "Start" },
  doing: { status: "done", label: "Mark done" },
  done: { status: "todo", label: "Reopen" },
} as const satisfies Record<TaskStatus, { status: TaskStatus; label: string }>;

export const moveTask = defineAction(
  "move",
  { args: MoveTask, state: TaskState, description: "Move the task to another status" },
  async ({ args }) => {
    await updateTaskStatus(args.id, args.status);

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

export const TaskBlock = defineBlock({
  type: "task",
  title: "Task",
  description: "A task from your tracker, with its status and a button to move it along.",
  icon: "list-todo",
  insertable: true,
  props: TaskProps,
  state: TaskState,
  initialState: { status: "todo" },
  actions: { move: moveTask },
  env,
  config: InstallConfig,
}).render((props, { actions, config, env: blockEnv, state }) => {
  const next = NEXT_MOVES[state.status];

  return (
    <Block summary={`${props.id} ${props.title}: ${STATUS_LABELS[state.status]}`}>
      <Header
        href={taskUrl(blockEnv.TASKS_URL, props.id)}
        trailing={<Status state={STATUS_STATES[state.status]} label={STATUS_LABELS[state.status]} />}
      >
        {props.title}
      </Header>
      <Facts>
        <Fact label="Project">{config.project}</Fact>
        <Fact label="Assignee">{props.assignee ?? "Unassigned"}</Fact>
      </Facts>
      <Actions>
        <Button label={next.label} action={actions.move.with({ id: props.id, status: next.status })} />
      </Actions>
    </Block>
  );
});