From b16b2a884f608fc0328bfc2c8a873c8eee7a064d Mon Sep 17 00:00:00 2001
From: Nick Gartmann <nick@rokkincat.com>
Date: Mon, 11 Apr 2022 17:02:17 -0500
Subject: [PATCH 1/2] Have a drag end event that actually saves the list

---
 src/components/OrderDocuments.jsx             | 10 +++++-----
 src/components/molecules/Card.jsx             |  5 ++++-
 src/components/organisms/DraggableSection.jsx |  3 ++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/OrderDocuments.jsx b/src/components/OrderDocuments.jsx
index 08c8628..9fff418 100644
--- a/src/components/OrderDocuments.jsx
+++ b/src/components/OrderDocuments.jsx
@@ -182,13 +182,12 @@ Override existing data? This is a one-time operation and cannot be reversed.`
         ],
       }),
     });
-
-    await Promise.all([
-      setOrder(card1._id, afterIndex, this.state.field.value),
-      setOrder(card2._id, beforeIndex, this.state.field.value),
-    ]);
   };
 
+  onDragEnd = async () => {
+    await setListOrder(this.state.documents, this.state.field.value);
+  }
+
   render() {
     return (
       <DndProvider backend={HTML5Backend}>
@@ -206,6 +205,7 @@ Override existing data? This is a one-time operation and cannot be reversed.`
                 count={this.state.count}
                 type={this.state.type}
                 moveCard={this.moveCard}
+                onDragEnd={this.onDragEnd}
                 refreshDocuments={this.refreshDocuments}
                 loadMore={this.loadMore}
               />
diff --git a/src/components/molecules/Card.jsx b/src/components/molecules/Card.jsx
index f478af0..1e643a8 100644
--- a/src/components/molecules/Card.jsx
+++ b/src/components/molecules/Card.jsx
@@ -14,7 +14,7 @@ const style = {
   alignItems: "center",
 };
 
-export const Card = ({ id, index, moveCard, jsx }) => {
+export const Card = ({ id, index, moveCard, onDragEnd, jsx }) => {
   const ref = useRef(null);
 
   const [{ handlerId }, drop] = useDrop({
@@ -81,6 +81,9 @@ export const Card = ({ id, index, moveCard, jsx }) => {
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
+    end: () => {
+      onDragEnd()
+    }
   });
 
   const opacity = isDragging ? 0 : 1;
diff --git a/src/components/organisms/DraggableSection.jsx b/src/components/organisms/DraggableSection.jsx
index 993d452..a6f5948 100644
--- a/src/components/organisms/DraggableSection.jsx
+++ b/src/components/organisms/DraggableSection.jsx
@@ -8,7 +8,7 @@ import RefreshIcon from "../atoms/RefreshIcon";
 
 class DraggableSection extends React.Component {
   render() {
-    const { documents, count, type, moveCard, refreshDocuments, loadMore } = this.props;
+    const { documents, count, type, moveCard, onDragEnd, refreshDocuments, loadMore } = this.props;
 
     if (!(type && type.value) && !documents.length) {
       return null;
@@ -44,6 +44,7 @@ class DraggableSection extends React.Component {
                 id={document._id}
                 text={document.title}
                 moveCard={moveCard}
+                onDragEnd={onDragEnd}
                 jsx={<Preview value={document} type={schema.get(document._type)} />}
               />
             </li>

From ec073a5a32bcf9d7318358dcc546feadb21b982b Mon Sep 17 00:00:00 2001
From: Nick Gartmann <nick@rokkincat.com>
Date: Thu, 14 Apr 2022 12:36:19 -0500
Subject: [PATCH 2/2] Try using a transaction to patch all

---
 src/functions/setOrder.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/functions/setOrder.js b/src/functions/setOrder.js
index e2fd587..d6e9dbd 100644
--- a/src/functions/setOrder.js
+++ b/src/functions/setOrder.js
@@ -12,9 +12,9 @@ export const setOrder = async (_id, index, field = DEFAULT_FIELD_VALUE) => {
 };
 
 export const setListOrder = async (list, field = DEFAULT_FIELD_VALUE, start = 0) => {
-  return Promise.all(
-    list.map(({ _id }, index) => {
-      return setOrder(_id, index + start, field);
-    })
-  );
+  const transaction = list.reduce((trx, {_id}, index) => {
+    return trx.patch(client.patch(_id).set({ [field]: index + start }));
+  }, client.transaction())
+
+  return transaction.commit();
 };