From 57125eccb68efeed3be13ee3a8576b5d325b987f Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Mon, 16 Dec 2024 17:38:36 -0500 Subject: [PATCH] Unify sense-reference info --- .../MergeDupsStep/MergeDragDrop/DragSense.tsx | 35 ++++++++----------- .../MergeDupsStep/MergeDragDrop/DropWord.tsx | 8 +++-- .../MergeDragDrop/SidebarDragSense.tsx | 11 ++---- .../MergeDragDrop/SidebarDrop.tsx | 12 +++---- .../MergeDragDrop/tests/index.test.tsx | 2 +- .../MergeDuplicates/MergeDupsTreeTypes.ts | 9 ++--- .../MergeDuplicates/Redux/MergeDupsReducer.ts | 2 +- .../Redux/tests/MergeDupsReducer.test.tsx | 9 +++-- 8 files changed, 40 insertions(+), 48 deletions(-) diff --git a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DragSense.tsx b/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DragSense.tsx index fcbe4e8660..85188ed472 100644 --- a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DragSense.tsx +++ b/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DragSense.tsx @@ -1,10 +1,13 @@ 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"; @@ -12,11 +15,9 @@ 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(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 ( @@ -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" diff --git a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DropWord.tsx b/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DropWord.tsx index 2d80007ec7..a752d59399 100644 --- a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DropWord.tsx +++ b/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DropWord.tsx @@ -75,11 +75,13 @@ export default function DropWord(props: DropWordProps): ReactElement { ); })} diff --git a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDragSense.tsx b/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDragSense.tsx index 0708d9dbe1..0e7eccb86c 100644 --- a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDragSense.tsx +++ b/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDragSense.tsx @@ -4,10 +4,7 @@ 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 { 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 ( diff --git a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDrop.tsx b/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDrop.tsx index aa11fc5853..69908d2177 100644 --- a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDrop.tsx +++ b/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"; @@ -15,16 +15,14 @@ export default function SidebarDrop(): ReactElement { const sidebar = useAppSelector( (state: StoreState) => state.mergeDuplicateGoal.tree.sidebar ); + const { mergeSenseId, wordId } = sidebar.senseRef; 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; }); return ( - + {(providedDroppable): ReactElement => (
{ }); expect(mockSetSidebar).toHaveBeenCalledTimes(1); const callArg = mockSetSidebar.mock.calls[0][0]; - expect(callArg.mergeSenseId).toEqual("word1_senseA"); + expect(callArg.senseRef.mergeSenseId).toEqual("word1_senseA"); }); }); diff --git a/src/goals/MergeDuplicates/MergeDupsTreeTypes.ts b/src/goals/MergeDuplicates/MergeDupsTreeTypes.ts index c27d7a0fcd..44aea74ae6 100644 --- a/src/goals/MergeDuplicates/MergeDupsTreeTypes.ts +++ b/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 { diff --git a/src/goals/MergeDuplicates/Redux/MergeDupsReducer.ts b/src/goals/MergeDuplicates/Redux/MergeDupsReducer.ts index 0169862abe..6f38786068 100644 --- a/src/goals/MergeDuplicates/Redux/MergeDupsReducer.ts +++ b/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; } diff --git a/src/goals/MergeDuplicates/Redux/tests/MergeDupsReducer.test.tsx b/src/goals/MergeDuplicates/Redux/tests/MergeDupsReducer.test.tsx index d4e62a6d01..77ab8eed44 100644 --- a/src/goals/MergeDuplicates/Redux/tests/MergeDupsReducer.test.tsx +++ b/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)); }