List Order Challenge - (i.e. Trello in React Studio)

Hey everyone,

Taylor here, and I have a challenge for you. I’m trying to build a site which has an ordered list, based off a firebase “order” value in a collection. (Imagine a Firebase collections query like this: orderBy("order","asc")) which is then re-orderable with some ‘up’ and ‘down’ arrows on each list item.

I’ve put together a simple mockup here:

It’s based on the chatroom demo. If you look at the list of chatrooms, you will see they are named “one” through “six” and their order is in a field to the left of some arrows that should move them up one or down one. If the order gets messed up, you can click on the order number and reset it manually using the disk icon to save.

Right now it just increments or decrements the order number by one. What I would like it to do is to then modify the list item above or below it and decrement or increment it accordingly so the values swap and the list reorders nicely.

If you would like to see the project file I’ve started with, it’s available here.

I would love to see if anyone can solve this before I can. I would also love to know alternate methods for something similar, and ideally, a solution that can allow for more than just single moves up or down, as I would like to implement a Trello-like drag and drop reordering solution if possible, like this:

Additional points if you just build a Trello clone entirely with React Studio… :wink:

Anyone interested? Please share your solutions, including screenshots, scripts, or even a working project file.

Thanks much!


Would this help when thinking the firebase db structure:

Hey Antti,

Thanks for chiming in. I’ve looked at that post in the past and the answers all make sense. What I would love help with is more on the React Studio side. For example, I’m not sure just how I would do a linked list with RS. Im not sure the best way to update the value for the ‘next’ item on the list. I’ve tried creating a single row data sheet based on value from an active list item, but it’s not yet working. I also am not sure how to get RS to do a mapping from an array to a list…

This is why I figured I would pose this as a challenge, so some of the RS super stars could help me to figure out how to do it. :slight_smile:

I’d guess that updating the row values should take place in Cloud function (in case you use Firebase db), it’s not UI related thing.

It could work something like this:

  1. Update item order field value for document with save data interaction.

  2. Updating the row will then trigger cloud function which changes the values for other documents.