Exploring Composable Effect.Services for Component Requirements in TypeScript

export class TaskListViewProps extends Effect.Service<TaskListViewProps>()("TaskListViewProps", {
  effect: Effect.gen(function* () {
    const tasksAtom = Atom.make(yield* TaskModel.allTasks);
    const selectedTaskAtom = Atom.make({ id: 1, name: "New Task", status: "pending" })
    return { tasksAtom, selectedTaskAtom };
  })
}) { }

export function TaskListView(props: TaskListViewProps & { abc?: number; }) {
  const tasksResult = useAtomSuspense(props.tasksAtom);
  const setSelectedTask = useAtomSet(props.selectedTaskAtom);
  return <>
    <ol>
      {tasksResult.value?.map((task) =>
        <li key={task.id}>
          <button onClick={() => startTransition(() => setSelectedTask(task))}>Select</button>
          <TaskView {...TaskViewProps.makeStatic(task)} />
        </li>
      )}
    </ol>
    <TaskView {...TaskViewProps.make({ taskAtom: props.selectedTaskAtom })} />
  </>
}