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.
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)
then i have a component that fetches the todos from the server
all good so far.
then, the Todo component
but for some reason is not working .. and i'm not sure if this is the right approach.
thank you.