[CharInv] Have find-replace auto-save would-be-lost changes (#3937)

Author: imnasnainaec

src/goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace.tsx

@@ -17,6 +17,7 @@ export enum FindAndReplaceId {
 }
 
 interface FindAndReplaceProps {
+  close: () => void;
   initialFindValue: string;
 }
 
@@ -47,6 +48,7 @@ export default function FindAndReplace(
       )
     );
     setWarningDialogOpen(false);
+    props.close();
   };
 
   const dialogText = (

src/goals/CharacterInventory/CharInv/CharacterDetail/index.tsx

@@ -49,7 +49,10 @@ export default function CharacterDetail(
         <CharacterWords character={props.character} />
       </Grid2>
       <Grid2 size={12}>
-        <FindAndReplace initialFindValue={props.character} />
+        <FindAndReplace
+          close={() => props.close()}
+          initialFindValue={props.character}
+        />
       </Grid2>
     </Grid2>
   );

src/goals/CharacterInventory/CharInv/CharacterEntry.tsx

@@ -17,7 +17,7 @@ import {
   exit,
   setRejectedCharacters,
   setValidCharacters,
-  uploadInventory,
+  uploadAndExit,
 } from "goals/CharacterInventory/Redux/CharacterInventoryActions";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
@@ -51,7 +51,7 @@ export default function CharacterEntry(): ReactElement {
 
   const save = async (): Promise<void> => {
     setSaveInProgress(true);
-    await dispatch(uploadInventory());
+    await dispatch(uploadAndExit());
   };
 
   return (

src/goals/CharacterInventory/CharInv/tests/index.test.tsx

@@ -15,7 +15,7 @@ import { defaultState } from "rootRedux/types";
 jest.mock("goals/CharacterInventory/Redux/CharacterInventoryActions", () => ({
   exit: () => mockExit(),
   loadCharInvData: () => mockLoadCharInvData(),
-  uploadInventory: () => mockUploadInventory(),
+  uploadAndExit: () => mockUploadAndExit(),
 }));
 jest.mock("rootRedux/hooks", () => {
   return {
@@ -26,7 +26,7 @@ jest.mock("rootRedux/hooks", () => {
 
 const mockExit = jest.fn();
 const mockLoadCharInvData = jest.fn();
-const mockUploadInventory = jest.fn();
+const mockUploadAndExit = jest.fn();
 
 async function renderCharInvCreation(): Promise<void> {
   await act(async () => {
@@ -49,9 +49,9 @@ describe("CharInv", () => {
   });
 
   it("saves inventory on save", async () => {
-    expect(mockUploadInventory).toHaveBeenCalledTimes(0);
+    expect(mockUploadAndExit).toHaveBeenCalledTimes(0);
     await userEvent.click(screen.getByTestId(CharInvCancelSaveIds.ButtonSave));
-    expect(mockUploadInventory).toHaveBeenCalledTimes(1);
+    expect(mockUploadAndExit).toHaveBeenCalledTimes(1);
   });
 
   it("opens a dialogue on cancel, closes on no", async () => {

src/goals/CharacterInventory/Redux/CharacterInventoryActions.ts

@@ -109,7 +109,6 @@ export function uploadInventory() {
     const project = getState().currentProjectState.project;
     const charChanges = getCharChanges(project, charInvState);
     if (!charChanges.length) {
-      exit();
       return;
     }
     await dispatch(
@@ -122,6 +121,12 @@ export function uploadInventory() {
     const changes = getState().goalsState.currentGoal.changes as CharInvChanges;
     dispatch(addCharInvChangesToGoal({ ...changes, charChanges }));
     await dispatch(asyncUpdateGoal());
+  };
+}
+
+export function uploadAndExit() {
+  return async (dispatch: StoreStateDispatch) => {
+    await dispatch(uploadInventory());
     exit();
   };
 }
@@ -188,6 +193,9 @@ function addWordChanges(wordChanges: FindAndReplaceChange) {
  * - Update the in-state character inventory. */
 export function findAndReplace(find: string, replace: string) {
   return async (dispatch: StoreStateDispatch) => {
+    // First save pending inventory changes so they won't be lost.
+    await dispatch(uploadInventory());
+
     const changedWords = (await getFrontierWords()).filter((w) =>
       w.vernacular.includes(find)
     );