todo example / server mutation example. #45
Description
Howdy! I simply love what you have done. I had a bad time with all meta frameworks out there.
I'm trying to put together a minimal todo list example, but i'm not sure how i can trigger a network request (the mutation request),
when the signal changed.
I've tried this
Home component (page)
async function Home() {
return (
<>
<h1>bknd on mono-jxs</h1>
<component is={Todos} placeholder={<p>Loading...</p>} />
</>
);
}then i have a component that fetches the todos from the server
async function Todos() {
const { api } = this.context;
// -- simulate a network delay
await new Promise((resolve) => setTimeout(resolve, 500));
const { data } = await api.data.readMany("todos");
return data.map(({ id, title, completed }) => {
return <Todo id={id} title={title} completed={completed} />;
});
}all good so far.
then, the Todo component
async function Todo(
this: FC<{ id: string; title: string; api: any; completed: boolean }>,
props: { id: string; title: string; completed: boolean },
) {
// -- api
const { api } = this.context;
// Initialize the signals
this.completed = props.completed ?? false;
this.title = props.title;
this.id = props.id;
this.api = api;
// -- do the update ..
this.effect(async () => {
const { data } = await this.api.data.readMany("todos");
this.api.data.updateOne("todos", this.id, {
completed: this.completed,
});
});
return (
<li>
<label>
{this.title} -
<input type="checkbox" $checked={this.completed} />
{this.computed(() => (this.completed ? "Completed" : "In Progress"))}
</label>
</li>
);
}but for some reason is not working .. and i'm not sure if this is the right approach.
thank you.