From 6cc0266286692d69c48dbf93a461dc29cab89123 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Tue, 2 May 2023 08:57:58 -0400
Subject: [PATCH 1/3] Fix column overflow

---
 .../DragDropComponents/MergeDragDrop.tsx      | 65 ++++++++++---------
 .../MergeDupStep/MergeDupStepComponent.tsx    | 11 +---
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/MergeDragDrop.tsx b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/MergeDragDrop.tsx
index 3fa9ed4ca5..e24e558a1b 100644
--- a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/MergeDragDrop.tsx
+++ b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/MergeDragDrop.tsx
@@ -1,5 +1,5 @@
 import { Delete } from "@mui/icons-material";
-import { Drawer, ImageListItem, Tooltip } from "@mui/material";
+import { Drawer, ImageList, ImageListItem, Tooltip } from "@mui/material";
 import { ReactElement, useState } from "react";
 import { DragDropContext, Droppable, DropResult } from "react-beautiful-dnd";
 import { useTranslation } from "react-i18next";
@@ -118,39 +118,44 @@ export default function MergeDragDrop(): ReactElement {
   }
 
   const newId = v4();
+  const colCount = Object.keys(treeWords).length + 2; // +2 for trash and extra empty word
 
   return (
     <DragDropContext onDragEnd={handleDrop}>
-      <ImageListItem key={"trash"} style={{ marginTop: "70vh" }}>
-        <Droppable key={trashId} droppableId={trashId}>
-          {(provided): ReactElement => (
-            <div ref={provided.innerRef}>
-              <Tooltip title={t("mergeDups.helpText.delete")} placement="top">
-                <Delete fontSize="large" />
-              </Tooltip>
-              <div style={{ position: "absolute" }}>{provided.placeholder}</div>
-            </div>
-          )}
-        </Droppable>
-      </ImageListItem>
-      {Object.keys(treeWords).map((key) => (
-        <ImageListItem
-          key={key}
-          style={{ height: "70vh", margin: theme.spacing(1) }}
-        >
-          <DropWord mergeState={mergeState} wordId={key} />
+      <ImageList rowHeight="auto" cols={colCount}>
+        <ImageListItem key={"trash"} style={{ marginTop: "70vh" }}>
+          <Droppable key={trashId} droppableId={trashId}>
+            {(provided): ReactElement => (
+              <div ref={provided.innerRef}>
+                <Tooltip title={t("mergeDups.helpText.delete")} placement="top">
+                  <Delete fontSize="large" />
+                </Tooltip>
+                <div style={{ position: "absolute" }}>
+                  {provided.placeholder}
+                </div>
+              </div>
+            )}
+          </Droppable>
         </ImageListItem>
-      ))}
-      <ImageListItem key={newId} style={{ margin: theme.spacing(1) }}>
-        <DropWord mergeState={mergeState} wordId={newId} />
-      </ImageListItem>
-      {renderSidebar()}
-      <CancelConfirmDialog
-        open={!!senseToDelete}
-        textId="mergeDups.helpText.deleteDialog"
-        handleCancel={() => setSenseToDelete("")}
-        handleConfirm={performDelete}
-      />
+        {Object.keys(treeWords).map((key) => (
+          <ImageListItem
+            key={key}
+            style={{ height: "70vh", margin: theme.spacing(1) }}
+          >
+            <DropWord mergeState={mergeState} wordId={key} />
+          </ImageListItem>
+        ))}
+        <ImageListItem key={newId} style={{ margin: theme.spacing(1) }}>
+          <DropWord mergeState={mergeState} wordId={newId} />
+        </ImageListItem>
+        {renderSidebar()}
+        <CancelConfirmDialog
+          open={!!senseToDelete}
+          textId="mergeDups.helpText.deleteDialog"
+          handleCancel={() => setSenseToDelete("")}
+          handleConfirm={performDelete}
+        />
+      </ImageList>
     </DragDropContext>
   );
 }
diff --git a/src/goals/MergeDupGoal/MergeDupStep/MergeDupStepComponent.tsx b/src/goals/MergeDupGoal/MergeDupStep/MergeDupStepComponent.tsx
index db2e8c0a3a..769117da67 100644
--- a/src/goals/MergeDupGoal/MergeDupStep/MergeDupStepComponent.tsx
+++ b/src/goals/MergeDupGoal/MergeDupStep/MergeDupStepComponent.tsx
@@ -1,4 +1,4 @@
-import { Button, Grid, ImageList, Typography } from "@mui/material";
+import { Button, Grid, Typography } from "@mui/material";
 import React, { ReactElement } from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 
@@ -39,18 +39,11 @@ class MergeDupStep extends React.Component<
   }
 
   render(): ReactElement {
-    // number of columns = wordCount + 2:
-    //  first column for the trash icon
-    //  one column for each word
-    //  last column for the blank card
-    const columnCount = this.props.wordCount + 2;
     return this.props.wordCount ? (
       <React.Fragment>
         {/* Merging pane */}
         <div style={{ background: "#eee", padding: theme.spacing(1) }}>
-          <ImageList rowHeight="auto" cols={columnCount}>
-            <MergeDragDrop />
-          </ImageList>
+          <MergeDragDrop />
         </div>
         {/* Merge/skip buttons */}
         <Grid container justifyContent="flex-start">

From 5906e2de345c915febf5cba68a9c90aae599fced Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Tue, 2 May 2023 09:49:29 -0400
Subject: [PATCH 2/3] Fix flag bug

---
 .../MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx
index 13486297a3..2fe7b547be 100644
--- a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx
+++ b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx
@@ -25,7 +25,6 @@ export default function DropWord(props: DropWordProps): ReactElement {
 
   const treeWord = props.mergeState.tree.words[props.wordId];
   const data = props.mergeState.data;
-  const flag = data.words[props.wordId]?.flag ?? newFlag();
   let protectedWithOneChild = false;
   const verns: string[] = [];
   if (treeWord) {
@@ -88,7 +87,7 @@ export default function DropWord(props: DropWordProps): ReactElement {
                 />
               )}
               <FlagButton
-                flag={flag}
+                flag={treeWord.flag}
                 updateFlag={(newFlag: Flag) => {
                   dispatch(flagWord(props.wordId, newFlag));
                 }}

From b27177c804ea8df110056143551670d748ce2a52 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Tue, 2 May 2023 10:36:57 -0400
Subject: [PATCH 3/3] Remove unused import

---
 .../MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx
index 2fe7b547be..3415c05b33 100644
--- a/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx
+++ b/src/goals/MergeDupGoal/MergeDupStep/DragDropComponents/DropWord.tsx
@@ -12,7 +12,6 @@ import { flagWord, setVern } from "goals/MergeDupGoal/Redux/MergeDupActions";
 import { MergeTreeState } from "goals/MergeDupGoal/Redux/MergeDupReduxTypes";
 import { useAppDispatch } from "types/hooks";
 import theme from "types/theme";
-import { newFlag } from "types/word";
 
 interface DropWordProps {
   mergeState: MergeTreeState;