Front-end for reordering macro buttons

src/containers/FlightDirector/MacroButtons/macroConfig.js

@@ -19,6 +19,7 @@ import {capitalCase} from "change-case";
 import {FaBan} from "react-icons/fa";
 import {ActionConfig} from "../Macros/macroConfig";
 import SortableActionList from "./sortableActionList";
+import SortableButtonList from "./sortableMacroButtonList";
 
 const colors = [
   "primary",
@@ -201,6 +202,7 @@ const MacroConfig = ({macros}) => {
               </ListGroupItem>
             ))}
           </ListGroup>
+
           <Mutation
             mutation={gql`
               mutation AddMacro($name: String!) {
@@ -294,6 +296,48 @@ const MacroConfig = ({macros}) => {
           {macro && (
             <>
               <h3>Buttons</h3>
+              {/* SORTABLE BUTTON LIST */}
+              <Mutation
+                mutation={gql`
+                  mutation ReorderButtons(
+                    $configId: ID!
+                    $oldIndex: Int!
+                    $newIndex: Int!
+                  ) {
+                    reorderMacroButton(
+                      configId: $configId
+                      oldIndex: $oldIndex
+                      newIndex: $newIndex
+                    )
+                  }
+                `}
+              >
+                {action => (
+                  <SortableButtonList
+                    css={css`
+                      flex: 1;
+                      overflow-y: auto;
+                    `}
+                    distance={20}
+                    buttons={macro.buttons}
+                    selectedButton={selectedButton}
+                    setSelectedButton={setSelectedButton}
+                    onSortEnd={({oldIndex, newIndex}) => {
+                      let configId = macro.id;
+                      action({
+                        variables: {
+                          configId,
+                          selectedButton,
+                          oldIndex,
+                          newIndex,
+                        },
+                      });
+                    }}
+                  />
+                )}
+              </Mutation>
+
+              {/* OLD MACRO BUTTON LIST
               <ListGroup style={{maxHeight: "60vh", overflowY: "auto"}}>
                 {macro.buttons.map(m => (
                   <ListGroupItem
@@ -309,7 +353,7 @@ const MacroConfig = ({macros}) => {
                     <small>{m.category}</small>
                   </ListGroupItem>
                 ))}
-              </ListGroup>
+                  </ListGroup> */}
               <Mutation
                 mutation={gql`
                   mutation AddButton($configId: ID!, $name: String!) {

src/containers/FlightDirector/MacroButtons/sortableMacroButtonList.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {SortableContainer, SortableElement} from "react-sortable-hoc";
+import {ListGroup, ListGroupItem} from "reactstrap";
+
+const SortableButton = SortableElement(
+  ({
+    button,
+    selectedButton,
+    setSelectedButton,
+  }: {
+    button: {id: string; name: string; category: string};
+    selectedButton?: string | null;
+    setSelectedButton: (id: string) => void;
+  }) => (
+    <ListGroupItem
+      key={`${button.id}`}
+      onClick={() => setSelectedButton(button.id)}
+      active={button.id === selectedButton}
+    >
+      {button.name}
+      <br />
+      <small>{button.category}</small>
+    </ListGroupItem>
+  ),
+);
+
+const SortableButtonList = SortableContainer(
+  ({
+    id,
+    selectedButton,
+    setSelectedButton,
+    buttons,
+    onSortEnd,
+    ...props
+  }: {
+    id: string;
+    selectedButton?: string | null;
+    setSelectedButton: (id: string) => void;
+    buttons: {id: string; name: string; category: string}[];
+    onSortEnd: (newIndex: number) => void;
+  }) => {
+    return (
+      <ListGroup style={{maxHeight: "60vh", overflowY: "auto"}} {...props}>
+        {buttons.map((b, index) => (
+          <SortableButton
+            key={b.id}
+            index={index}
+            button={b}
+            selectedButton={selectedButton}
+            setSelectedButton={() => setSelectedButton(b.id)}
+          />
+        ))}
+      </ListGroup>
+    );
+  },
+);
+
+export default SortableButtonList;