Dataflow

Eidos has an elegant system to interact with data we call the datahooks. They provide the interface between a React component and a REST API. The data is preprocessed, cached and and dynamically rerenderd.

The type of the API is determined by a special type Eidos. This type should be present in the eidos.ts file. Let's create a simple eidos.ts file:

import { integer, Ref, BaseObject, List } from "@bronscode/eidos/dist/eidos_std";

declare global {
	interface Eidos {
		tasks: List<Task>;
		persons: List<Person>;
	}

	interface Task extends BaseObject {
		title: string;
		description: text;
		difficulty: "easy" | "hard";
		assignees?: List<Ref<Person>>;
	}

	interface Person extends BaseObject {
		name: string;
		age: integer;
	}
}

Here the Eidos type describes two list endpoints: one for tasks and one for persons. This means that Eidos expects the following endpoints to exist:

GET       /tasks/
GET       /tasks/{:taskId}
PUT       /tasks/{:taskId}
POST      /tasks/
DELETE    /tasks/{:taskId}

GET       /persons/
GET       /persons/{:taskId}
PUT       /persons/{:taskId}
POST      /persons/
DELETE    /persons/{:taskId}

You can then use the datahooks to interact with these endpoints as shown in the example below:

function PersonComponent() {
	const [persons, controller] = useResource(endpoints.persons);
	useAwait(persons);

	return (
		<EditableTable
			title="Persons"
			values={persons}
			emptyText="No persons available"
			EditComponent={PersonField}
			emptyValue={{}}
			controller={controller}
		/>
	);
}

The persons value contains a List of persons. The controller is used to control this list. If you use the standard Eidos tables, these functionalities work out of the box.