setDataAtCell inside useEffect

Tags: #<Tag:0x00007efc71a0fbd0> #<Tag:0x00007efc71a0fa90>
#1

I am trying to get handsontable to work with websockets to allow multi-user editing.

I have a listener for changes to the selection and that works great, and I can set the border etc. as expected. But trying to update the cell using hot.setDataAtCell(e.row, e.column, 'test test', 'websocket') does not update the table. I can only see it calling afterChange() which I find odd. I have even tried calling hot.render() after the change but that still does nothing

I have even tried simplifying it as much as this, but it does not update the cell at all. I assume I somehow need to add something to the dependencies array, but I am unsure what

    useEffect(() => {
        const hot = hotRef.current.hotInstance
        hot.setDataAtCell(1, 1, 'test test', 'websocket')
    }, [])
#2

I tried moving it to afterInit() (and afterLoadData()) instead and it gets a bit further. It now updates the value to the correct one, for a split second, and then reverts it to the old value again.

afterLoadData={() => {
                    channel.listenForWhisper('dataChange', (change) => {
                        const hot = hotRef.current.hotInstance
                        hot.setDataAtCell(change, 'websocket')
                    })
                }}
#3

Ok it seems that setting data calls the afterSelection() hook, which then triggers the other webhook to be sent, which triggers the borders to be set, thereby rolling back the changes to the cell :confused:

The only way I have found to work around this, is to call the update webhook in a setInterval, which seems quite brittle

#4

So I finally got it working. Simply moved all logic into afterInit() and stopped using useState in any way at all. Just plain js objects and arrays, set inside that the init function.

handontable

1 Like
#5

Thank you for sharing the updates @rene.sinnbeck

We do not have any examples on how to set up collaboration so I’m more than glad that you’ve mentioned the subject and you’ve made it work.

1 Like
#6

Yeah I saw an article about Aaron Francis and figured I could make the same as him for a project.

But I will be back if I run into other issues. I am currently trying to get all events synced up. Working on Undo currently :slight_smile: But thanks @aleksandra_budnik

1 Like
#7

would be great if you share sandbox example or make tutorial for it.

#8

@jamshaidbutt055 I might look into that when I got something worth sharing :slight_smile:

I am using Laravel Echo for the websockets along with soketi as the server.

But if you have any specific questions feel free to tag me in a question

2 Likes
#9

I might need it in future. but right now, I am just interested to keep myself informed about live editing feature.

#10