I continue (struggling) building my understanding of Mantra building blocks (komposer and DI) and Mantra philosophy.
Tried to build simple todo (not completely in Mantra style because want to switch to Mantra more consciously)
Dump component:
import React from 'react'
const App = ({resolutions, onSubmitResolution, onChangeInput, value}) => {
const listOfResolutions = resolutions.map((resolution) => {
return (
<h1>{resolution.text}</h1>
)
})
return (
<div>
<h1>My Resolutions</h1>
<form
className="new-resolution"
onSubmit={onSubmitResolution}
>
<input
type="text"
onChange={onChangeInput}
value={value}
name="input"
/>
</form>
{listOfResolutions}
</div>
)
}
export default App
Container:
import {composeAll, composeWithTracker, compose} from 'react-komposer'
import App from '../components/app'
import { Resolutions } from '../../lib/collections'
import {useDeps} from 'react-simple-di'
let context = {
value: ""
}
const onSubmitResolution = (event) => {
event.preventDefault()
console.log(event)
console.log("onSubmit = " + context.value)
Resolutions.insert({
text: context.value,
complete: false,
createdAt: new Date()
})
context.value = ""
}
const onChangeInput = (event) => {
context.value = event.target.value
console.log(context.value + " ON Change Input")
}
const composer = (props, onData) => {
const resolutions = Resolutions.find().fetch()
onData( null, { resolutions})
}
// TODO do smth with this 1
const anotherComposer = (props, onData) => {
const handle = setInterval(() => {
const value = context.value;
onData(null, {value});
}, 100);
const cleanup = () => clearInterval(handle)
return cleanup
}
const depsToPropsMapper = (context, actions) => ({
onSubmitResolution: onSubmitResolution,
onChangeInput: onChangeInput
});
const ComposedApp = composeAll(
composeWithTracker( composer ),
// TODO do smth with this 2
compose(anotherComposer),
useDeps(depsToPropsMapper)
)(App)
export default ComposedApp
Could you help to find more elegant way to clear input field onSubmit event?
(Sorry for terrible code)