Fun with binding event handlers

dom-listening.js

const setAttr = _.curry((attrName, el, val) => { el.setAttribute(val)); return el; });

const listen = _.curry((evtName, el, f) => { el.addEventListener(evtName, f); return el; })

const bindCreateResultButton = (createResultButton, postTextarea, getPostData, preTextarea) =>
    _.compose(
        listen('click', createResultButton),
        _.compose(x => () => setAttr('value', postTextArea, x), getPostData),
    )(preTextArea);

const setAttr = _.curry((attrName, el, val) => { el.setAttribute(val)); return el; });

should be

const setAttr = _.curry((attrName, el, val) => { el.setAttribute(attrName, val)); return el; });

Right @jrsinclair ? :)

Yes. Correct.

It seems el.setAttribute(attrName, val)); will correctly set the attribute 'value' to val, but it seems textarea does not use this attribute to display the text. I changed it to el[attrName] = val; that seems to work. Although it's a bit dangerous because that could be any property, not just an attribute. I also had to manipulate the bindCreateResultButton slightly.

I'm curious, which implementation do you like the best (I'm not sure which one is the most fp)?

const bindCreateResultButton = (createResultButton, getPostData, postTextarea, preTextarea) => _.compose(
  impure.listen('click', createResultButton),
  x => () => _.compose(
    impure.setAttr('value', postTextarea),
    getPostData
  )(preTextarea)
)()
bindCreateResultButton(createResultButton, getPostData, postTextarea, preTextarea)

or

const bindCreateResultButton = (createResultButton, setPostTextareaFunc, preTextarea) => _.compose(
  impure.listen('click', createResultButton),
  x => () => setPostTextareaFunc(preTextarea)
)()
const setPostTextarea = x =>  postTextarea.value = getPostData(x)
bindCreateResultButton(createResultButton, setPostTextarea, preTextarea)

For posterity, here's a link to the pen: https://codepen.io/rosefalk/pen/QWLpZEY?editors=0011