[MergeDups] Unify sense-reference info

src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DragSense.tsx

@@ -1,22 +1,23 @@
 import { Card } from "@mui/material";
-import { ReactElement, useCallback, useEffect, useState } from "react";
+import { type ReactElement, useCallback, useEffect, useState } from "react";
 import { Draggable } from "react-beautiful-dnd";
 
 import { trashId } from "goals/MergeDuplicates/MergeDupsStep/MergeDragDrop";
 import SenseCardContent from "goals/MergeDuplicates/MergeDupsStep/SenseCardContent";
-import { MergeTreeSense } from "goals/MergeDuplicates/MergeDupsTreeTypes";
+import {
+  type MergeTreeReference,
+  type MergeTreeSense,
+} from "goals/MergeDuplicates/MergeDupsTreeTypes";
 import { setSidebar } from "goals/MergeDuplicates/Redux/MergeDupsActions";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
 import theme from "types/theme";
 
 interface DragSenseProps {
   index: number;
-  wordId: string;
-  mergeSenseId: string;
-  mergeSenses: MergeTreeSense[];
   isOnlySenseInProtectedWord: boolean;
-  isProtectedSense: boolean;
+  mergeSenses: MergeTreeSense[];
+  senseRef: MergeTreeReference;
 }
 
 function arraysEqual<T>(arr1: T[], arr2: T[]): boolean {
@@ -45,17 +46,13 @@ export default function DragSense(props: DragSenseProps): ReactElement {
     (state: StoreState) => state.mergeDuplicateGoal.tree.sidebar
   );
   const isInSidebar =
-    sidebar.wordId === props.wordId &&
-    sidebar.mergeSenseId === props.mergeSenseId &&
+    sidebar.senseRef.wordId === props.senseRef.wordId &&
+    sidebar.senseRef.mergeSenseId === props.senseRef.mergeSenseId &&
     sidebar.mergeSenses.length > 1;
 
   const updateSidebar = useCallback(() => {
     dispatch(
-      setSidebar({
-        mergeSenses: props.mergeSenses,
-        wordId: props.wordId,
-        mergeSenseId: props.mergeSenseId,
-      })
+      setSidebar({ mergeSenses: props.mergeSenses, senseRef: props.senseRef })
     );
   }, [dispatch, props]);
 
@@ -88,12 +85,8 @@ export default function DragSense(props: DragSenseProps): ReactElement {
 
   return (
     <Draggable
-      key={props.mergeSenseId}
-      draggableId={JSON.stringify({
-        wordId: props.wordId,
-        mergeSenseId: props.mergeSenseId,
-        isSenseProtected: props.isProtectedSense,
-      })}
+      key={props.senseRef.mergeSenseId}
+      draggableId={JSON.stringify(props.senseRef)}
       index={props.index}
       isDragDisabled={props.isOnlySenseInProtectedWord}
     >
@@ -109,13 +102,13 @@ export default function DragSense(props: DragSenseProps): ReactElement {
             minWidth: 150,
             maxWidth: 300,
             opacity:
-              !props.isProtectedSense &&
+              !props.senseRef.isSenseProtected &&
               (snapshot.draggingOver === trashId || snapshot.combineWith)
                 ? 0.7
                 : 1,
             background: isInSidebar
               ? "lightblue"
-              : props.isProtectedSense
+              : props.senseRef.isSenseProtected
                 ? "lightyellow"
                 : snapshot.draggingOver === trashId
                   ? "red"

src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DropWord.tsx

@@ -75,11 +75,13 @@ export default function DropWord(props: DropWordProps): ReactElement {
                     <DragSense
                       key={id}
                       index={index}
-                      wordId={props.wordId}
-                      mergeSenseId={id}
                       mergeSenses={senses}
+                      senseRef={{
+                        isSenseProtected: senses[0].protected,
+                        mergeSenseId: id,
+                        wordId: props.wordId,
+                      }}
                       isOnlySenseInProtectedWord={protectedWithOneChild}
-                      isProtectedSense={senses[0].protected}
                     />
                   );
                 })}

src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDragSense.tsx

@@ -1,13 +1,10 @@
 import { Card } from "@mui/material";
-import { ReactElement } from "react";
+import { type ReactElement } from "react";
 import { Draggable } from "react-beautiful-dnd";
 
 import { trashId } from "goals/MergeDuplicates/MergeDupsStep/MergeDragDrop";
 import SenseCardContent from "goals/MergeDuplicates/MergeDupsStep/SenseCardContent";
-import {
-  MergeTreeReference,
-  MergeTreeSense,
-} from "goals/MergeDuplicates/MergeDupsTreeTypes";
+import { type MergeTreeSense } from "goals/MergeDuplicates/MergeDupsTreeTypes";
 import { useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
 import theme from "types/theme";
@@ -21,10 +18,8 @@ export default function SidebarDragSense(
   props: SidebarDragSenseProps
 ): ReactElement {
   const draggableId = useAppSelector((state: StoreState) => {
-    const { mergeSenseId, wordId } = state.mergeDuplicateGoal.tree.sidebar;
-    const order = props.index;
-    const ref: MergeTreeReference = { wordId, mergeSenseId, order };
-    return JSON.stringify(ref);
+    const ref = state.mergeDuplicateGoal.tree.sidebar.senseRef;
+    return JSON.stringify({ ...ref, order: props.index });
   });
 
   return (

src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDrop.tsx

@@ -1,10 +1,10 @@
 import { ArrowForwardIos, HelpOutline } from "@mui/icons-material";
 import { Grid, IconButton, Typography } from "@mui/material";
-import { ReactElement } from "react";
+import { type ReactElement } from "react";
 import { Droppable } from "react-beautiful-dnd";
 
 import SidebarDragSense from "goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDragSense";
-import { MergeTreeSense } from "goals/MergeDuplicates/MergeDupsTreeTypes";
+import { type MergeTreeSense } from "goals/MergeDuplicates/MergeDupsTreeTypes";
 import { setSidebar } from "goals/MergeDuplicates/Redux/MergeDupsActions";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
@@ -17,14 +17,13 @@ export default function SidebarDrop(): ReactElement {
   );
   const vernacular = useAppSelector((state: StoreState) => {
     const tree = state.mergeDuplicateGoal.tree;
-    return tree.words[tree.sidebar.wordId]?.vern;
+    return tree.words[tree.sidebar.senseRef.wordId]?.vern;
   });
 
+  const { mergeSenseId, wordId } = sidebar.senseRef;
+
   return (
-    <Droppable
-      droppableId={`${sidebar.wordId} ${sidebar.mergeSenseId}`}
-      key={sidebar.mergeSenseId}
-    >
+    <Droppable droppableId={`${wordId} ${mergeSenseId}`} key={mergeSenseId}>
       {(providedDroppable): ReactElement => (
         <div
           ref={providedDroppable.innerRef}

src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/tests/index.test.tsx

@@ -156,6 +156,6 @@ describe("MergeDragDrop", () => {
     });
     expect(mockSetSidebar).toHaveBeenCalledTimes(1);
     const callArg = mockSetSidebar.mock.calls[0][0];
-    expect(callArg.mergeSenseId).toEqual("word1_senseA");
+    expect(callArg.senseRef.mergeSenseId).toEqual("word1_senseA");
   });
 });

src/goals/MergeDuplicates/MergeDupsTreeTypes.ts

@@ -95,14 +95,15 @@ export function convertWordToMergeTreeWord(word: Word): MergeTreeWord {
 
 export interface Sidebar {
   mergeSenses: MergeTreeSense[];
-  wordId: string;
-  mergeSenseId: string;
+  senseRef: MergeTreeReference;
 }
 
 export const defaultSidebar: Sidebar = {
   mergeSenses: [],
-  wordId: "",
-  mergeSenseId: "",
+  senseRef: {
+    wordId: "",
+    mergeSenseId: "",
+  },
 };
 
 export interface MergeTree {

src/goals/MergeDuplicates/Redux/MergeDupsReducer.ts

@@ -91,7 +91,7 @@ const mergeDuplicatesSlice = createSlice({
         }
 
         // If the deleted sense was open in the sidebar, reset the sidebar.
-        const { mergeSenseId, wordId } = state.tree.sidebar;
+        const { mergeSenseId, wordId } = state.tree.sidebar.senseRef;
         if (mergeSenseId === srcRef.mergeSenseId && wordId === srcRef.wordId) {
           state.tree.sidebar = defaultSidebar;
         }

src/goals/MergeDuplicates/Redux/tests/MergeDupsReducer.test.tsx

@@ -100,8 +100,11 @@ describe("MergeDupsReducer", () => {
       ...defaultTree,
       sidebar: {
         ...defaultSidebar,
-        mergeSenseId: "word2_senseA",
-        wordId: "word2",
+        senseRef: {
+          ...defaultSidebar.senseRef,
+          mergeSenseId: "word2_senseA",
+          wordId: "word2",
+        },
       },
       words: testTreeWords(),
     },
@@ -114,7 +117,7 @@ describe("MergeDupsReducer", () => {
     sidebarClosed = false
   ): void {
     const { sidebar, words } = mergeDupStepReducer(mockState, action).tree;
-    expect(!sidebar.wordId).toEqual(sidebarClosed);
+    expect(!sidebar.senseRef.wordId).toEqual(sidebarClosed);
     // Stringify for this test, because order within `.sensesGuids` matters.
     expect(JSON.stringify(words)).toEqual(JSON.stringify(expectedWords));
   }