Reactive components in CommentPost?

LiljebergXYZ

Hey there,

I'm trying to write a private extension for a new forum that I am working on where the first post of certain discussion threads will contain a calculator. I've added a new component Calculator into the CommentPosts "footerItems" and it shows up.

In the component I've created a Calculator class that keeps track of the m.props for the values inside the calculator. However when this prop is updated through the input field, my <Output> components that depend on the m.props are not updating or being redrawn.

Does anyone have any idea how that could be resolved?

luceos

LiljebergXYZ can you show some code of how that input triggers an update on the prop?

LiljebergXYZ

luceos
Thank you for the quick reply! The component looks as follows and utilizes the oninput event combined with mithrils m.withAttr to update the volume prop with the value from the input field.

{NumberInput.component({
  className: 'VolumeInput',
  value: calculator.properties.volume(),
  oninput: m.withAttr('value', calculator.properties.volume)
})}

The field that I want to update is setup as follows:

<OutputRow
  value={calculator.properties.volume()}
/>

clarkwinkelmann

Some components have a SubtreeRetainer system that dictates when they should redraw to improve performance. If you are placing your new component inside one of those, you'll need to add a condition to the SubtreeRetainer. An example of doing that can be found in the catch the fish extension https://github.com/clarkwinkelmann/catch-the-fish/blob/master/js/src/forum/addDropAreas.js#L115

This might require setting your calculator variables at the level of CommentPost component (so the retainer can read them, like in catch the fish), or make them global.

LiljebergXYZ

clarkwinkelmann aha so it actually doesn't know to redraw my component, because it's inside another component with custom redraw rules? That would explain it.

So in the example you posted what exactly happens in that line? Would returning true in that callback result in it invalidating and redrawing the component?

clarkwinkelmann

LiljebergXYZ aha so it actually doesn't know to redraw my component, because it's inside another component with custom redraw rules? That would explain it

That's it.

this.subtree.check(callback) registers a new anonymous function that should return one value. If that value changes, a redraw will be allowed to happen. So you should return your volume() value there. The subtree keeps in memory the last value returned and looks if it changes everytime the anonymous function is called.

UPDATE:

If it's too complex to integrate your component with the subtree retainer, maybe you might be able to move it somewhere else that isn't constrained by a subtree retainer.

LiljebergXYZ

clarkwinkelmann That did the trick, thank you! I just bound all my properties that may change inside the Calculator class to the subtree and that now it's working perfectly. I've been tackling this for 2 days, so this feels really satisfying. 😀