Gloss autocomplete (#512)

Replace gloss spelling suggestions with dropdown menu
sillsdev · Jul 24, 2020 · 4bf11c6 · 4bf11c6
1 parent 15896f8
commit 4bf11c6
Show file tree

Hide file tree

Showing 16 changed files with 222 additions and 669 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/styles": "^4.10.0",
     "@matt-block/react-recaptcha-v2": "^1.0.6",
     "axios": "^0.19.2",

diff --git a/src/components/DataEntry/DataEntryTable/DataEntryTable.tsx b/src/components/DataEntry/DataEntryTable/DataEntryTable.tsx
@@ -14,7 +14,6 @@ import DomainTree from "../../../types/SemanticDomain";
 import theme from "../../../types/theme";
 import { SemanticDomain, Word } from "../../../types/word";
 import Recorder from "../../Pronunciations/Recorder";
-import SpellChecker from "../spellChecker";
 import { ExistingEntry } from "./ExistingEntry/ExistingEntry";
 import { ImmutableExistingEntry } from "./ExistingEntry/ImmutableExistingEntry";
 import { NewEntry } from "./NewEntry/NewEntry";
@@ -66,11 +65,9 @@ export class DataEntryTable extends React.Component<
     };
     this.refNewEntry = React.createRef<NewEntry>();
     this.recorder = new Recorder();
-    this.spellChecker = new SpellChecker();
   }
   refNewEntry: React.RefObject<NewEntry>;
   recorder: Recorder;
-  spellChecker: SpellChecker;
 
   async componentDidMount() {
     let allWords = await this.props.getWordsFromBackend();
@@ -239,40 +236,29 @@ export class DataEntryTable extends React.Component<
 
           {this.state.recentlyAddedWords.map((wordAccess, index) =>
             wordAccess.mutable ? (
-              <React.Fragment key={wordAccess.word.id}>
-                <ExistingEntry
-                  key={wordAccess.word.id}
-                  wordsBeingAdded={this.state.recentlyAddedWords.map(
-                    (wordAccess) => wordAccess.word
-                  )}
-                  existingWords={this.state.existingWords}
-                  entryIndex={index}
-                  entry={wordAccess.word}
-                  updateWord={(wordToUpdate: Word, wordToDelete?: Word) =>
-                    this.updateExistingWord(wordToUpdate, wordToDelete)
-                  }
-                  removeWord={(word: Word) => this.removeWord(word)}
-                  recorder={this.recorder}
-                  spellChecker={this.spellChecker}
-                  semanticDomain={this.props.semanticDomain}
-                  displayDuplicates={
-                    this.state.displayDuplicatesIndex === index
-                  }
-                  toggleDisplayDuplicates={() => {
-                    this.toggleDisplayDuplicates(index);
-                  }}
-                  displaySpellingSuggestions={
-                    this.state.displaySpellingSuggestionsIndex === index
-                  }
-                  toggleDisplaySpellingSuggestions={() => {
-                    this.toggleDisplaySpellingSuggestions(index);
-                  }}
-                  focusNewEntry={() => {
-                    if (this.refNewEntry.current)
-                      this.refNewEntry.current.focusVernInput();
-                  }}
-                />
-              </React.Fragment>
+              <ExistingEntry
+                key={wordAccess.word.id}
+                wordsBeingAdded={this.state.recentlyAddedWords.map(
+                  (wordAccess) => wordAccess.word
+                )}
+                existingWords={this.state.existingWords}
+                entryIndex={index}
+                entry={wordAccess.word}
+                updateWord={(wordToUpdate: Word, wordToDelete?: Word) =>
+                  this.updateExistingWord(wordToUpdate, wordToDelete)
+                }
+                removeWord={(word: Word) => this.removeWord(word)}
+                recorder={this.recorder}
+                semanticDomain={this.props.semanticDomain}
+                displayDuplicates={this.state.displayDuplicatesIndex === index}
+                toggleDisplayDuplicates={() => {
+                  this.toggleDisplayDuplicates(index);
+                }}
+                focusNewEntry={() => {
+                  if (this.refNewEntry.current)
+                    this.refNewEntry.current.focusVernInput();
+                }}
+              />
             ) : (
               <ImmutableExistingEntry
                 key={wordAccess.word.id}
@@ -292,7 +278,6 @@ export class DataEntryTable extends React.Component<
                 this.updateWordForNewEntry(wordToUpdate, glossIndex)
               }
               addNewWord={(word: Word) => this.addNewWord(word)}
-              spellChecker={this.spellChecker}
               semanticDomain={this.props.semanticDomain}
               autocompleteSetting={this.state.autoComplete}
               displayDuplicates={
@@ -305,15 +290,6 @@ export class DataEntryTable extends React.Component<
                   this.state.recentlyAddedWords.length
                 );
               }}
-              displaySpellingSuggestions={
-                this.state.displaySpellingSuggestionsIndex ===
-                this.state.recentlyAddedWords.length
-              }
-              toggleDisplaySpellingSuggestions={() => {
-                this.toggleDisplaySpellingSuggestions(
-                  this.state.recentlyAddedWords.length
-                );
-              }}
               setIsReadyState={(isReady: boolean) =>
                 this.setState({ isReady: isReady })
               }
@@ -340,29 +316,22 @@ export class DataEntryTable extends React.Component<
               color={this.state.isReady ? "primary" : "secondary"}
               style={{ marginTop: theme.spacing(2) }}
               onClick={() => {
+                // Check if there is a new word, but the user clicked complete instead of pressing enter
                 if (this.refNewEntry.current) {
                   let newEntry = this.refNewEntry.current.state.newEntry;
-                  if (
-                    newEntry &&
-                    newEntry.vernacular &&
-                    newEntry.vernacular !== ""
-                  ) {
-                    this.addNewWord(newEntry).then(() => {
-                      // When the server responds clear out recently added words so
-                      // this word doesn't appear in the next domain
-                      let recentlyAddedWords: WordAccess[] = [];
-                      this.setState({ recentlyAddedWords });
-                    });
-                    // clear the data from the NewEntry fields
+                  if (newEntry && newEntry.vernacular) {
+                    this.addNewWord(newEntry);
                     this.refNewEntry.current.resetState();
                   }
                 }
+
+                // Reset everything
+                this.props.hideQuestions();
                 let recentlyAddedWords: WordAccess[] = [];
-                this.props.displaySemanticDomainView(true);
                 this.setState({ recentlyAddedWords });
 
-                //Since DataEntryComponent isn't rerendered, just hidden, this will enforce questions being hidden as a default
-                this.props.hideQuestions();
+                // Reveal the TreeView, hiding DataEntry
+                this.props.displaySemanticDomainView(true);
               }}
             >
               <Translate id="addWords.done" />

diff --git a/...s/DataEntry/DataEntryTable/DuplicateResolutionView/tests/DuplicateResolutionView.test.tsx b/...s/DataEntry/DataEntryTable/DuplicateResolutionView/tests/DuplicateResolutionView.test.tsx
@@ -1,25 +1,26 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import { DuplicateResolutionView } from "../DuplicateResolutionView";
+import renderer from "react-test-renderer";
+
 import { Word, Sense } from "../../../../../types/word";
 import { mockWord } from "../../../tests/MockWord";
+import { DuplicateResolutionView } from "../DuplicateResolutionView";
 
-describe("Tests DeleteEntry", () => {
+describe("Tests DuplicateResolutionView", () => {
   it("renders without crashing", () => {
-    const div = document.createElement("div");
-    ReactDOM.render(
-      <DuplicateResolutionView
-        existingEntry={mockWord}
-        newSense={""}
-        addSense={(existingWord: Word, newSense: string) => null}
-        addSemanticDomain={(
-          existingWord: Word,
-          sense: Sense,
-          index: number
-        ) => {}}
-      />,
-      div
-    );
-    ReactDOM.unmountComponentAtNode(div);
+    renderer.act(() => {
+      renderer.create(
+        <DuplicateResolutionView
+          existingEntry={mockWord}
+          newSense={""}
+          addSense={(existingWord: Word, newSense: string) => null}
+          addSemanticDomain={(
+            existingWord: Word,
+            sense: Sense,
+            index: number
+          ) => {}}
+          duplicateInput={React.createRef<HTMLDivElement>()}
+        />
+      );
+    });
   });
 });