fix(canned responses): handle canned response moving up in the list (#…

…1646)
politics-rewired · Aug 1, 2023 · 0b9d2de · 0b9d2de
1 parent 7d53908
commit 0b9d2de
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/src/containers/AdminCampaignEdit/sections/CampaignCannedResponsesForm/index.tsx b/src/containers/AdminCampaignEdit/sections/CampaignCannedResponsesForm/index.tsx
@@ -165,7 +165,7 @@ class CampaignCannedResponsesForm extends React.Component<InnerProps, State> {
     let newCannedResponse = {
       ...response,
       id: newId,
-      displayOrder: cannedResponses.length + 1
+      displayOrder: cannedResponses.length
     };
 
     if (
@@ -280,8 +280,8 @@ class CampaignCannedResponsesForm extends React.Component<InnerProps, State> {
   onDragEnd = (result: DropResult) => {
     if (!result.destination) return;
 
-    const sourceDisplayOrder = result.source.index + 1;
-    const destinationDisplayOrder = result.destination.index + 1;
+    const sourceDisplayOrder = result.source.index;
+    const destinationDisplayOrder = result.destination.index;
     const cannedResponseId = result.draggableId;
 
     const { cannedResponses } = this.pendingCannedResponses();
@@ -298,26 +298,39 @@ class CampaignCannedResponsesForm extends React.Component<InnerProps, State> {
     );
 
     // Get all items that were moved, except item that was moved
-    const movedItems = allCannedResponses.filter(
+    const cannedResponsesToMoveDown = allCannedResponses.filter(
       ({ displayOrder }) =>
         displayOrder >= destinationDisplayOrder &&
-        displayOrder <= sourceDisplayOrder &&
-        displayOrder !== sourceDisplayOrder
+        displayOrder < sourceDisplayOrder
+    );
+    const cannedResponsesToMoveUp = allCannedResponses.filter(
+      ({ displayOrder }) =>
+        displayOrder <= destinationDisplayOrder &&
+        displayOrder > sourceDisplayOrder
     );
 
     updatedCannedResponses.push({
       ...sourceItem,
       displayOrder: destinationDisplayOrder
     });
 
-    updatedCannedResponses = updatedCannedResponses.concat(
-      movedItems.map((cannedResponse) => {
-        return {
-          ...cannedResponse,
-          displayOrder: cannedResponse.displayOrder + 1
-        };
-      })
-    );
+    updatedCannedResponses = updatedCannedResponses
+      .concat(
+        cannedResponsesToMoveUp.map((cannedResponse) => {
+          return {
+            ...cannedResponse,
+            displayOrder: cannedResponse.displayOrder - 1
+          };
+        })
+      )
+      .concat(
+        cannedResponsesToMoveDown.map((cannedResponse) => {
+          return {
+            ...cannedResponse,
+            displayOrder: cannedResponse.displayOrder + 1
+          };
+        })
+      );
 
     this.setState({
       editedCannedResponses: unionBy(

diff --git a/...minCampaignEdit/sections/CampaignContactsForm/components/ConfigureColumnMappingDialog.tsx b/...minCampaignEdit/sections/CampaignContactsForm/components/ConfigureColumnMappingDialog.tsx
@@ -152,7 +152,7 @@ const ConfigureColumnMappingDialog: React.FC<ConfigureColumnMappingDialogProps>
     onSave(remappedColumns);
   };
 
-  // Eslint disable required here to prevent enter from submitting form
+  // Eslint disable is required here to prevent enter from submitting form
   // Enter key is used to lock in the freesolo option in autocomplete
   // https://github.com/react-hook-form/react-hook-form/discussions/2549
   /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */