Struggling to develop a basic test app that captures user input from a text field, displays it, and stores it using cycle-idb. Unfortunately, I've been stuck in an endless loop no matter what steps I take.
Below is the complete main function:
function intent(domSources) {
return domSources.select('.name')
.events('input')
.map(ev => ev.target.value);
};
function model(input$, db$) {
const log$ = db$;
return xs.combine(input$, log$)
.map(([input, logs]) => {
return {
id: 1,
name: input,
}
}).startWith({id: 1, name: ""});
};
function view(state$) {
return state$.map(log => {
return (
<div>
<label for='name'>Name:</label>
<input
className='name'
type='text'
value={log.name}
placeholder="Enter a log name"
/>
<p>{log.name}</p>
</div>
)
});
};
function persist(state$) {
return state$.map(log => {
return $put('logs', log)
});
};
export function main (sources) {
const db$ = sources.IDB.store('logs').getAll();
const input$ = intent(sources.DOM);
const state$ = model(input$, db$);
const vtree$ = view(state$);
const updateDb$ = persist(state$);
return {
DOM: vtree$,
IDB: updateDb$,
};
}
Attempting to implement the MVI pattern similar to TodoMVC, however, struggling with managing circular dependencies and avoiding the infinite loop. Any guidance or suggestions on additional resources would be greatly appreciated.