Replace TagPanel react-dnd with react-beautiful-dnd

This new library handles the simple case of an ordered vertical
(or horizontal) list of items that can be reordered.

It provides animations, handles positioning of items mid-drag
and exposes a much simpler API to react-dnd (with a slight loss
of potential function, but we don't need this flexibility here
anyway).

Apart from this, TagOrderStore had to be changed in a highly
coupled way, but arguably for the better. Instead of being
updated incrementally every time an item is dragged over
another and having a separate "commit" action, the
asyncronous action `moveTag` is used to reposition the tag in
the list and both dispatch an optimistic update and carry out
the request as before. (The MatrixActions.accountData is still
used to indicate a successful reordering of tags).

The view is updated instantly, in an animated way, and this
is handled at the layer "above" React by the DND library.
This commit is contained in:
lukebarnard 2018-01-15 18:12:27 +00:00
parent 952f2c6a21
commit 16c13fb079
6 changed files with 85 additions and 100 deletions

View file

@ -22,6 +22,9 @@ limitations under the License.
* suffix determining whether it is pending, successful or
* a failure.
* @param {function} fn a function that returns a Promise.
* @param {function?} pendingFn a function that returns an object to assign
* to the `request` key of the ${id}.pending
* payload.
* @returns {function} an action thunk - a function that uses its single
* argument as a dispatch function to dispatch the
* following actions:
@ -29,9 +32,13 @@ limitations under the License.
* `${id}.success` or
* `${id}.failure`.
*/
export function asyncAction(id, fn) {
export function asyncAction(id, fn, pendingFn) {
return (dispatch) => {
dispatch({action: id + '.pending'});
dispatch({
action: id + '.pending',
request:
typeof pendingFn === 'function' ? pendingFn() : undefined,
});
fn().then((result) => {
dispatch({action: id + '.success', result});
}).catch((err) => {