Allow dragging widgets to reorder

[emibcn]

Add dragging capability to widgets.

Features:

• Consider unique line order (current) or multiple row/columns.
• Consider adding a resize function, to allow widgets with different sizes.
• On drag end: re-order widgets in URL hash and localStorage, or add a position property to each widget and handle it on add/remove/re-order.
• I have done something similar using Dragact. Might be useful here, or maybe we can use Material/UI own draggable, or something else.
• Drag handle: Use widget' title (like current app dialogs on non-small devices) or dedicated handle on it, like GitHub profile:
  

This should go into a new component (or multiple components wrapped up into just one), used in Widget/List to wrap the list of widgets.

[mblaul]

I think I can handle this one!
I'll see what Material-UI has to offer first and if it's not great I'll look for another package.

[emibcn]

@mblaul Assigned! If you need help or you think it's better to split the issue (for example: drag and resize), just ask for it ;)
Also, if in doubt about implementation design (for example, saving data, spliting components, renaming files, etc).

[mblaul]

@emibcn Thanks! I think I'm going to go with react-beautiful-dnd. I'll update as I work through it. 😁

[emibcn]

Looks good!

[mblaul]

Hey @emibcn! Just wanted to give an update so this issue doesn't go stale.

I haven't had a lot of time to work on this recently but I've got the basic drag-n-drop working for the cards.
I still need to work out the position tracking, URL updating, and the drag handle but I feel like I've made some decent progress:

I also went with react-sortable-hoc because it has the best support for grid layouts and touch devices.

I'll have some more free time soon so hopefully, I'll have this finished up by the end of the week.

[emibcn]

Nice! For the order stuff, look at the widgets UUID list, which needs to be reordered with something like:

onOrder = (id, newPosition) => { // <- I don't know the signature react-sortable-hoc will use
   // Find current position (I don't know if is needed)
   // Maybe you need to get the ID using the `from` position passed from react-hoc-sortable?
   const from = this.widgetsIds.findIndex(wId => wId === id);

   // Reorder ID
   this.widgetsIds.splice(from, 1);
   this.widgetsIds.splice(newPosition, 0, id);

   // Reorder data (keep props immutable)
   const widget = this.props.widgets[from];
   const widgets = this.props.widgets.filter(w => w.id !== id);
   widgets.splice(newPosition, 0, widget);

   // Save data
   return this.props.onChangeData({ widgets });
}

PS: File link: https://github.com/emibcn/covid/blob/master/app/src/Widget/List.jsx#L248

[emibcn]

Hello @mblaul ! Any news on that? Do you need any help?

[mblaul]

Hi @emibcn! I've made some good progress, sorry for the lack of updates. I ran into some bugs with the data playback after my changes.

I'm going to try finishing this by Wednesday night my time (US EST). If I'm not done by then I'll push up everything I have to my fork and we can figure out what to do from there.

Thanks for checking in!

[emibcn]

Great!! Thanks for the update!

[mblaul]

@emibcn PR open here: #45

[emibcn]

FYI:

Fixed issue caused by merging this without testing enough (my fault). The bug was: widgets are not shown properly after saving reorder (some props move, others don't).

The problem was IDs also needed to be reordered (this.widgetsIds in Widget/List component).

f6447a8

[mblaul]

Sorry about that! Hope it wasn't too difficult to debug. I'll keep that in mind if I pick up another issue.

Thank you for linking to the fix and explaining the cause and solution!