[Question] Avoiding data collision

[zimt28]

I want to use Riot for building dynamic invoices which can have multiple pages.

My app consists of two components: app and page. app holds the state and just renders a list of pages and a page renders a list of items. Each page checks, if it can render the items it was given – if not, it asks to remove an item, until it can show all assigned items:

onMounted(props, state) {
  constContentFrame = this.$("[data-content-frame]")

  if (checkOverflow(contentFrame)) {
    props.removeItemFromPage(props.currentPage)
  }
},
onUpdated(props, state) {
  constContentFrame = this.$("[data-content-frame]")

  if (checkOverflow(contentFrame)) {
    props.removeItemFromPage(props.currentPage)
  }
}

The app component then takes the last item of the page and pushes it to the next page:

removeItemFromPage(pageNumber) {
  const nextPageNumber = pageNumber + 1
  const pages = [...this.state.pages]
  const lastItem = pages[pageNumber - 1].items.pop()

  if (nextPageNumber > this.state.pages.length) {
    pages.push({pageNumber: nextPageNumber, items: []})
  }

  pages[pageNumber].items.unshift(lastItem)

  var _this = this
  setTimeout(() => { _this.update({ pages: pages}) }, 0)
}

This works quite well, until the items need more than two pages: Some of the items will then disappear. This is probably caused by the removeItemFromPage function which reads the current state and sets a modified state, every additional page might call this function at the same time, so changes made between read and update are lost.

Question: Is there a way to make sure that the state cannot be changed between read & write?
The whole code can be found here: https://gist.github.com/zimt28/6b7886ee7fa42af5d7cc540a7e404b4c

Thanks!

[GianlucaGuarini]

I am on it. I will check it asap

[GianlucaGuarini]

Ok I have spotted a bug here. Attributes will not passed to children components in a each directive. I will fix the compiler output

[GianlucaGuarini]

This issue was solved in riot@4.0.0-rc.9 thanks for reporting it!

[zimt28]

I've just tried using riot@4.0.0-rc.9/riot+compiler.min.js but am still running into the issue of missing items. Is there anything else I can do to fix it?

-> https://gist.github.com/zimt28/6b7886ee7fa42af5d7cc540a7e404b4c reproduces it

[GianlucaGuarini]

Have you tried?
<script src="https://unpkg.com/riot@next/riot+compiler.min.js"></script> -> <script src="https://unpkg.com/riot@4.0.0-rc.9/riot+compiler.min.js"></script>

[zimt28]

Yes, I didn't update the Gist but riot@next also delivers the v4.0.0-rc.9 file

[GianlucaGuarini]

This works quite well, until the items need more than two pages: Some of the items will then disappear.

I see 3 pages and I am not sure I understand the problem:

I have found initially a riot@4 bug of communication between parent child but now it works everything fine. I can't help you any further here and I don't see any riot bug. Please try posting your issue on stackoverflow providing more info about your browser as well.
Good luck and thanks for this post

[zimt28]

Sorry - I think I failed to describe the actual issue. If you look at your screen video, you see three items on page three: 19, 24, 27. Items 20, 21, 22 ,23, 25, 26 are suddenly missing, even though they should be on page three. I assume this is an issue with riot or at least with the way riot works.

[zimt28]

@GianlucaGuarini Sorry to ping you again, but could you re-evaluate if it‘s a Riot issue or not? I think we weren‘t talking about the same problem before.

[GianlucaGuarini]

It's not a Riot.js issue you will have the same problem with any framework. It's an application issue. Please consider updating your code handling your data differently preparing your page chunks before they get passed to your components. I am sorry I can fix here only Riot.js issues but I am not available for consulting.