Create prototype ReviewEntriesCompleted; Reorganize goals/ReviewEntries/

public/locales/en/translation.json

@@ -320,6 +320,11 @@
       "toolbar": {
         "search": "Search"
       }
+    },
+    "undo": {
+      "undo": "Undo Edit",
+      "undoDialog": "Undo this edit?",
+      "undoDisabled": "Undo Unavailable"
     }
   },
   "charInventory": {

src/components/App/DefaultState.ts

@@ -6,7 +6,7 @@ import { defaultState as pronunciationsState } from "components/Pronunciations/R
 import { defaultState as treeViewState } from "components/TreeView/Redux/TreeViewReduxTypes";
 import { defaultState as characterInventoryState } from "goals/CharacterInventory/Redux/CharacterInventoryReducer";
 import { defaultState as mergeDuplicateGoal } from "goals/MergeDuplicates/Redux/MergeDupsReducer";
-import { defaultState as reviewEntriesState } from "goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesReduxTypes";
+import { defaultState as reviewEntriesState } from "goals/ReviewEntries/Redux/ReviewEntriesReduxTypes";
 import { defaultState as analyticsState } from "types/Redux/analyticsReduxTypes";
 
 export const defaultState = {

src/components/DataEntry/DataEntryTable/NewEntry/SenseDialog.tsx

@@ -14,8 +14,8 @@ import StyledMenuItem from "components/DataEntry/DataEntryTable/NewEntry/StyledM
 import {
   DomainCell,
   PartOfSpeechCell,
-} from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
-import { ReviewEntriesWord } from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
+} from "goals/ReviewEntries/ReviewEntriesTable/CellComponents";
+import { ReviewEntriesWord } from "goals/ReviewEntries/ReviewEntriesTypes";
 import { firstGlossText } from "utilities/wordUtilities";
 
 interface SenseDialogProps {

src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx

@@ -15,8 +15,8 @@ import {
   DomainCell,
   GlossCell,
   PartOfSpeechCell,
-} from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
-import { ReviewEntriesWord } from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
+} from "goals/ReviewEntries/ReviewEntriesTable/CellComponents";
+import { ReviewEntriesWord } from "goals/ReviewEntries/ReviewEntriesTypes";
 
 interface vernDialogProps {
   vernacularWords: Word[];

src/components/DataEntry/DataEntryTable/NewEntry/tests/SenseDialog.test.tsx

@@ -16,7 +16,7 @@ import { defaultWritingSystem } from "types/writingSystem";
 //  MUI: Unable to set focus to a MenuItem whose component has not been rendered.
 jest.mock("@mui/material/MenuItem", () => "div");
 
-jest.mock("goals/ReviewEntries/ReviewEntriesComponent/CellComponents", () => ({
+jest.mock("goals/ReviewEntries/ReviewEntriesTable/CellComponents", () => ({
   DomainCell: () => <div />,
   PartOfSpeechCell: () => <div />,
 }));

src/components/DataEntry/DataEntryTable/NewEntry/tests/VernDialog.test.tsx

@@ -16,7 +16,7 @@ import { defaultWritingSystem } from "types/writingSystem";
 //  MUI: Unable to set focus to a MenuItem whose component has not been rendered.
 jest.mock("@mui/material/MenuItem", () => "div");
 
-jest.mock("goals/ReviewEntries/ReviewEntriesComponent/CellComponents", () => ({
+jest.mock("goals/ReviewEntries/ReviewEntriesTable/CellComponents", () => ({
   DomainCell: () => <div />,
   GlossCell: () => <div />,
   PartOfSpeechCell: () => <div />,

src/components/GoalTimeline/Redux/GoalActions.ts

@@ -18,7 +18,7 @@ import {
 } from "components/GoalTimeline/Redux/GoalReducer";
 import { CharacterChange } from "goals/CharacterInventory/CharacterInventoryTypes";
 import { dispatchMergeStepData } from "goals/MergeDuplicates/Redux/MergeDupsActions";
-import { EntryEdit } from "goals/ReviewEntries/ReviewEntries";
+import { EntryEdit } from "goals/ReviewEntries/ReviewEntriesTypes";
 import { StoreState } from "types";
 import { StoreStateDispatch } from "types/Redux/actions";
 import { Goal, GoalStatus, GoalType } from "types/goals";

src/components/GoalTimeline/Redux/GoalReducer.ts

@@ -5,7 +5,10 @@ import {
   MergeDupsData,
   MergesCompleted,
 } from "goals/MergeDuplicates/MergeDupsTypes";
-import { EntriesEdited, EntryEdit } from "goals/ReviewEntries/ReviewEntries";
+import {
+  EntriesEdited,
+  EntryEdit,
+} from "goals/ReviewEntries/ReviewEntriesTypes";
 import { StoreActionTypes } from "rootActions";
 import { GoalType } from "types/goals";
 

src/goals/DefaultGoal/BaseGoalScreen.tsx

@@ -1,22 +1,22 @@
 import loadable from "@loadable/component";
-import React, { ReactElement, useEffect } from "react";
+import { ReactElement, useEffect } from "react";
 
 import { setCurrentGoal } from "components/GoalTimeline/Redux/GoalActions";
 import PageNotFound from "components/PageNotFound/component";
 import DisplayProgress from "goals/DefaultGoal/DisplayProgress";
 import Loading from "goals/DefaultGoal/Loading";
 import { clearTree } from "goals/MergeDuplicates/Redux/MergeDupsActions";
-import ReviewDeferredDuplicates from "goals/ReviewDeferredDuplicates";
-import { clearReviewEntriesState } from "goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesActions";
+import { clearReviewEntriesState } from "goals/ReviewEntries/Redux/ReviewEntriesActions";
 import { StoreState } from "types";
 import { Goal, GoalStatus, GoalType } from "types/goals";
 import { useAppDispatch, useAppSelector } from "types/hooks";
 
 const CharacterInventory = loadable(() => import("goals/CharacterInventory"));
 const MergeDup = loadable(() => import("goals/MergeDuplicates"));
-const ReviewEntriesComponent = loadable(
-  () => import("goals/ReviewEntries/ReviewEntriesComponent")
+const ReviewDeferredDups = loadable(
+  () => import("goals/ReviewDeferredDuplicates")
 );
+const ReviewEntries = loadable(() => import("goals/ReviewEntries"));
 
 function displayComponent(goal: Goal): ReactElement {
   const isCompleted = goal.status === GoalStatus.Completed;
@@ -26,9 +26,9 @@ function displayComponent(goal: Goal): ReactElement {
     case GoalType.MergeDups:
       return <MergeDup completed={isCompleted} />;
     case GoalType.ReviewDeferredDups:
-      return <ReviewDeferredDuplicates completed={isCompleted} />;
+      return <ReviewDeferredDups completed={isCompleted} />;
     case GoalType.ReviewEntries:
-      return <ReviewEntriesComponent />;
+      return <ReviewEntries completed={isCompleted} />;
     default:
       return <PageNotFound />;
   }
@@ -58,9 +58,9 @@ export function BaseGoalScreen(): ReactElement {
   }, [dispatch]);
 
   return (
-    <React.Fragment>
+    <>
       {goal.status !== GoalStatus.Completed && <DisplayProgress />}
       {displayComponent(goal)}
-    </React.Fragment>
+    </>
   );
 }

src/goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesActions.ts → src/goals/ReviewEntries/Redux/ReviewEntriesActions.ts

@@ -8,12 +8,12 @@ import {
   ReviewSortBy,
   ReviewUpdateWord,
   ReviewUpdateWords,
-} from "goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesReduxTypes";
+} from "goals/ReviewEntries/Redux/ReviewEntriesReduxTypes";
 import {
   ColumnId,
   ReviewEntriesSense,
   ReviewEntriesWord,
-} from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
+} from "goals/ReviewEntries/ReviewEntriesTypes";
 import { StoreStateDispatch } from "types/Redux/actions";
 import { newNote, newSense } from "types/word";
 

src/goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesReducer.ts → src/goals/ReviewEntries/Redux/ReviewEntriesReducer.ts

@@ -3,7 +3,7 @@ import {
   ReviewEntriesAction,
   ReviewEntriesActionTypes,
   ReviewEntriesState,
-} from "goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesReduxTypes";
+} from "goals/ReviewEntries/Redux/ReviewEntriesReduxTypes";
 import { StoreAction, StoreActionTypes } from "rootActions";
 
 export const reviewEntriesReducer = (

src/goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesReduxTypes.ts → src/goals/ReviewEntries/Redux/ReviewEntriesReduxTypes.ts

@@ -1,7 +1,7 @@
 import {
   ColumnId,
   ReviewEntriesWord,
-} from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
+} from "goals/ReviewEntries/ReviewEntriesTypes";
 
 export enum ReviewEntriesActionTypes {
   SortBy = "SORT_BY",

src/goals/ReviewEntries/ReviewEntriesCompleted.tsx

@@ -0,0 +1,117 @@
+import { ArrowRightAlt } from "@mui/icons-material";
+import { Button, Grid, Typography } from "@mui/material";
+import { ReactElement, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+
+import { getFrontierWords, getWord, updateWord } from "backend";
+import { CancelConfirmDialog } from "components/Dialogs";
+import {
+  EntriesEdited,
+  EntryEdit,
+} from "goals/ReviewEntries/ReviewEntriesTypes";
+import { StoreState } from "types";
+import theme from "types/theme";
+
+export default function ReviewEntriesCompleted(): ReactElement {
+  const changes = useSelector(
+    (state: StoreState) => state.goalsState.currentGoal.changes as EntriesEdited
+  );
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Typography component="h1" variant="h4">
+        {t("reviewEntries.title")}
+      </Typography>
+      <Typography>
+        {t("reviewEntries.completed.number")}
+        {changes.entryEdits?.length ?? 0}
+      </Typography>
+      {changes.entryEdits?.map((e) => <EditedEntry edit={e} key={e.newId} />)}
+    </>
+  );
+}
+
+function EditedEntry(props: { edit: EntryEdit }): ReactElement {
+  return (
+    <Grid container style={{ flexWrap: "nowrap", overflow: "auto" }}>
+      <Typography>{props.edit.oldId}</Typography>
+      <Grid key={"arrow"} style={{ margin: theme.spacing(1) }}>
+        <ArrowRightAlt
+          fontSize="large"
+          style={{
+            position: "relative",
+            left: "50%",
+            top: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+        />
+      </Grid>
+      <Typography>{props.edit.newId}</Typography>
+      <UndoButton
+        edit={props.edit}
+        textId="reviewEntries.undo.undo"
+        dialogId="reviewEntries.undo.undoDialog"
+        disabledId="reviewEntries.undo.undoDisabled"
+      />
+    </Grid>
+  );
+}
+
+interface UndoButtonProps {
+  edit: EntryEdit;
+  textId: string;
+  dialogId: string;
+  disabledId: string;
+}
+
+function UndoButton(props: UndoButtonProps): ReactElement {
+  const [isUndoEnabled, setUndoEnabled] = useState<boolean>(false);
+  const [undoDialogOpen, setUndoDialogOpen] = useState<boolean>(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    function checkFrontier(): void {
+      getFrontierWords().then((words) =>
+        setUndoEnabled(words.findIndex((w) => w.id === props.edit.newId) !== -1)
+      );
+    }
+    checkFrontier();
+  });
+
+  return isUndoEnabled ? (
+    <Grid container direction="column" justifyContent="center">
+      <>
+        <Button
+          variant="outlined"
+          id={`edit-undo-${props.edit.newId}`}
+          onClick={() => setUndoDialogOpen(true)}
+        >
+          {t(props.textId)}
+        </Button>
+        <CancelConfirmDialog
+          open={undoDialogOpen}
+          textId={props.dialogId}
+          handleCancel={() => setUndoDialogOpen(false)}
+          handleConfirm={() =>
+            undoEdit(props.edit).then(() => setUndoDialogOpen(false))
+          }
+          buttonIdCancel="edit-undo-cancel"
+          buttonIdConfirm="edit-undo-confirm"
+        />
+      </>
+    </Grid>
+  ) : (
+    <Grid container direction="column" justifyContent="center">
+      <>
+        <Button disabled>{t(props.disabledId)}</Button>
+      </>
+    </Grid>
+  );
+}
+
+const undoEdit = async (edit: EntryEdit): Promise<void> => {
+  const oldWord = await getWord(edit.oldId);
+  await updateWord({ ...oldWord, id: edit.newId });
+};

src/goals/ReviewEntries/ReviewEntriesComponent/CellColumns.tsx → src/goals/ReviewEntries/ReviewEntriesTable/CellColumns.tsx

@@ -14,13 +14,13 @@ import {
   PronunciationsCell,
   SenseCell,
   VernacularCell,
-} from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+} from "goals/ReviewEntries/ReviewEntriesTable/CellComponents";
 import {
   ColumnId,
   ReviewEntriesSense,
   ReviewEntriesWord,
   ReviewEntriesWordField,
-} from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
+} from "goals/ReviewEntries/ReviewEntriesTypes";
 import { compareFlags } from "utilities/wordUtilities";
 
 export class ColumnTitle {

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DefinitionCell.tsx → src/goals/ReviewEntries/ReviewEntriesTable/CellComponents/DefinitionCell.tsx

@@ -5,10 +5,10 @@ import { useSelector } from "react-redux";
 
 import { Definition, WritingSystem } from "api/models";
 import Overlay from "components/Overlay";
-import { FieldParameterStandard } from "goals/ReviewEntries/ReviewEntriesComponent/CellColumns";
+import { FieldParameterStandard } from "goals/ReviewEntries/ReviewEntriesTable/CellColumns";
 import AlignedList, {
   SPACER,
-} from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/AlignedList";
+} from "goals/ReviewEntries/ReviewEntriesTable/CellComponents/AlignedList";
 import { StoreState } from "types";
 import { newDefinition } from "types/word";
 import {

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DeleteCell.tsx → src/goals/ReviewEntries/ReviewEntriesTable/CellComponents/DeleteCell.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from "react-i18next";
 
 import { deleteFrontierWord as deleteFromBackend } from "backend";
 import { CancelConfirmDialog } from "components/Dialogs";
-import { updateAllWords } from "goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesActions";
-import { ReviewEntriesWord } from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
+import { updateAllWords } from "goals/ReviewEntries/Redux/ReviewEntriesActions";
+import { ReviewEntriesWord } from "goals/ReviewEntries/ReviewEntriesTypes";
 import { StoreState } from "types";
 import { useAppDispatch, useAppSelector } from "types/hooks";
 

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DomainCell.tsx → src/goals/ReviewEntries/ReviewEntriesTable/CellComponents/DomainCell.tsx

@@ -11,12 +11,12 @@ import Overlay from "components/Overlay";
 import TreeView from "components/TreeView";
 import AlignedList, {
   SPACER,
-} from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/AlignedList";
+} from "goals/ReviewEntries/ReviewEntriesTable/CellComponents/AlignedList";
 import {
   ColumnId,
   ReviewEntriesSense,
   ReviewEntriesWord,
-} from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
+} from "goals/ReviewEntries/ReviewEntriesTypes";
 import { StoreState } from "types";
 import { newSemanticDomainForMongoDB } from "types/semanticDomain";
 import { themeColors } from "types/theme";

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/FlagCell.tsx → src/goals/ReviewEntries/ReviewEntriesTable/CellComponents/FlagCell.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 
 import { Flag } from "api/models";
 import FlagButton from "components/Buttons/FlagButton";
-import { FieldParameterStandard } from "goals/ReviewEntries/ReviewEntriesComponent/CellColumns";
+import { FieldParameterStandard } from "goals/ReviewEntries/ReviewEntriesTable/CellColumns";
 
 interface FlagCellProps extends FieldParameterStandard {
   editable?: boolean;