[DataEntryTable] Click recent entries to edit

Author: imnasnainaec

src/components/DataEntry/DataEntryTable/RecentEntryCold.tsx

@@ -0,0 +1,74 @@
+import { Edit } from "@mui/icons-material";
+import { Grid2 } from "@mui/material";
+import { ReactElement, memo } from "react";
+
+import { Word, WritingSystem } from "api/models";
+import { NoteButton } from "components/Buttons";
+import { AudioSummary } from "components/WordCard";
+import theme from "types/theme";
+import { TypographyWithFont } from "utilities/fontComponents";
+import { firstGlossText } from "utilities/wordUtilities";
+
+const idAffix = "recent-entry";
+
+export interface RecentEntryProps {
+  analysisLang: WritingSystem;
+  entry: Word;
+  rowIndex: number;
+  senseGuid: string;
+}
+
+/** Displays a recently entered word that a user cannot edit. */
+export function RecentEntryCold(props: RecentEntryProps): ReactElement {
+  const sense = props.entry.senses.find((s) => s.guid === props.senseGuid);
+  const gloss = sense ? firstGlossText(sense, props.analysisLang.bcp47) : "";
+
+  return (
+    <Grid2 alignItems="center" container id={`${idAffix}-${props.rowIndex}`}>
+      <Grid2
+        size={4}
+        style={{ paddingInline: theme.spacing(2), position: "relative" }}
+      >
+        <TypographyWithFont vernacular>
+          {props.entry.vernacular}
+        </TypographyWithFont>
+      </Grid2>
+
+      <Grid2
+        size={4}
+        style={{ paddingInline: theme.spacing(2), position: "relative" }}
+      >
+        <TypographyWithFont analysis lang={props.analysisLang.bcp47}>
+          {gloss}
+        </TypographyWithFont>
+      </Grid2>
+
+      <Grid2
+        size={1}
+        style={{ paddingInline: theme.spacing(1), position: "relative" }}
+      >
+        {props.entry.note.text ? (
+          <NoteButton disabled noteText={props.entry.note.text} />
+        ) : null}
+      </Grid2>
+
+      <Grid2
+        size={1}
+        style={{ paddingInline: theme.spacing(1), position: "relative" }}
+      >
+        <AudioSummary count={props.entry.audio.length} />
+      </Grid2>
+
+      <Grid2 size={1} />
+
+      <Grid2
+        size={1}
+        style={{ paddingInline: theme.spacing(1), position: "relative" }}
+      >
+        <Edit />
+      </Grid2>
+    </Grid2>
+  );
+}
+
+export default memo(RecentEntryCold);

src/components/DataEntry/DataEntryTable/index.tsx

@@ -27,6 +27,7 @@ import * as backend from "backend";
 import { getCurrentUser, getUserId } from "backend/localStorage";
 import NewEntry from "components/DataEntry/DataEntryTable/NewEntry";
 import RecentEntry from "components/DataEntry/DataEntryTable/RecentEntry";
+import { RecentEntryCold } from "components/DataEntry/DataEntryTable/RecentEntryCold";
 import {
   filterWordsWithSenses,
   focusInput,
@@ -35,7 +36,6 @@ import { uploadFileFromPronunciation } from "components/Pronunciations/utilities
 import { useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
 import { type Hash } from "types/hash";
-import theme from "types/theme";
 import {
   FileWithSpeakerId,
   newGloss,
@@ -214,6 +214,7 @@ const defaultNewEntryState = (): NewEntryState => ({
 interface EntryTableState extends NewEntryState {
   defunctUpdates: Hash<string>;
   defunctWordIds: Hash<DefunctStatus>;
+  recentWordEditingIndex: number | undefined;
   recentWords: WordAccess[];
   senseSwitches: SenseSwitch[];
 }
@@ -222,6 +223,7 @@ const defaultEntryTableState = (): EntryTableState => ({
   ...defaultNewEntryState(),
   defunctUpdates: {},
   defunctWordIds: {},
+  recentWordEditingIndex: undefined,
   recentWords: [],
   senseSwitches: [],
 });
@@ -1016,7 +1018,7 @@ export default function DataEntryTable(
 
   return (
     <form onSubmit={(e?: FormEvent<HTMLFormElement>) => e?.preventDefault()}>
-      <Grid2 container rowSpacing={theme.spacing(2)}>
+      <Grid2 container rowSpacing={1}>
         <Grid2 size={4}>
           <Typography align="center" variant="h5">
             {t("addWords.vernacular")}
@@ -1033,25 +1035,44 @@ export default function DataEntryTable(
           <Grid2
             key={`${wordAccess.word.id}_${wordAccess.senseGuid}`}
             size={12}
+            sx={{ borderBottom: "1px solid #eee" }}
           >
-            <RecentEntry
-              rowIndex={index}
-              entry={wordAccess.word}
-              senseGuid={wordAccess.senseGuid}
-              updateGloss={updateRecentGloss}
-              updateNote={updateRecentNote}
-              updateVern={updateRecentVern}
-              removeEntry={undoRecentEntry}
-              addAudioToWord={addAudioFileToWord}
-              delAudioFromWord={deleteAudioFromWord}
-              repAudioInWord={replaceAudioInWord}
-              focusNewEntry={handleFocusNewEntry}
-              analysisLang={analysisLang}
-              vernacularLang={vernacularLang}
-              disabled={Object.keys(state.defunctWordIds).includes(
-                wordAccess.word.id
-              )}
-            />
+            {index === state.recentWordEditingIndex ? (
+              <RecentEntry
+                rowIndex={index}
+                entry={wordAccess.word}
+                senseGuid={wordAccess.senseGuid}
+                updateGloss={updateRecentGloss}
+                updateNote={updateRecentNote}
+                updateVern={updateRecentVern}
+                removeEntry={undoRecentEntry}
+                addAudioToWord={addAudioFileToWord}
+                delAudioFromWord={deleteAudioFromWord}
+                repAudioInWord={replaceAudioInWord}
+                focusNewEntry={handleFocusNewEntry}
+                analysisLang={analysisLang}
+                vernacularLang={vernacularLang}
+                disabled={Object.keys(state.defunctWordIds).includes(
+                  wordAccess.word.id
+                )}
+              />
+            ) : (
+              <div
+                onClick={() =>
+                  setState((prev) => ({
+                    ...prev,
+                    recentWordEditingIndex: index,
+                  }))
+                }
+              >
+                <RecentEntryCold
+                  analysisLang={analysisLang}
+                  entry={wordAccess.word}
+                  rowIndex={index}
+                  senseGuid={wordAccess.senseGuid}
+                />
+              </div>
+            )}
           </Grid2>
         ))}