conjugation viewer api change, just pass the entry (and complement) in and the conjugation will be handled by the ConjugationViewer or return null if there is none/error

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/App.tsx

@@ -12,7 +12,6 @@ import verbs from "./verbs";
 import Pashto from "./components/Pashto";
 import Phonetics from "./components/Phonetics";
 import InlinePs from "./components/InlinePs";
-import { conjugateVerb } from "./lib/verb-conjugation";
 import { getVerbInfo } from "./lib/verb-info";
 import ButtonSelect from "./components/ButtonSelect";
 import {
@@ -177,16 +176,6 @@ function App() {
     const makeVerbLabel = (entry: T.DictionaryEntry): string => (
         `${entry.p} - ${clamp(entry.e, 20)}`
     );
-
-    const conjugation = v
-        ? conjugateVerb(v.verb.entry, aayTailType, v.verb.complement)
-        : undefined;
-    // if (v) {
-    //     console.log("Verb chosen:");
-    //     console.log(v.verb);
-    //     console.log("Conjugation of verb:")
-    //     console.log(conjugation);
-    // }
     return <>
         <main className="flex-shrink-0 mb-4">
             <div className="container" style={{ maxWidth: "800px" }}>
@@ -216,7 +205,7 @@ function App() {
                     <div className="card-body">
                         <div className="row">
                             <div className="col-sm-6">
-                                {(v && conjugation) ?
+                                {v ?
                                     <div>
                                         <div className="mb-1">Select a verb:</div>
                                         <div className="input-group">
@@ -308,11 +297,10 @@ function App() {
                         </div>
                     </div>
                 </div>
-                {conjugation && <ConjugationViewer
+                {v?.verb.entry && <ConjugationViewer
-                    conjugation={conjugation}
+                    entry={v?.verb.entry}
+                    complement={v?.verb.complement}
                     textOptions={textOptions}
-                    ec={v ? v.verb.entry.ec : undefined}
-                    ep={v ? v.verb.entry.ep : undefined}
                 />}
             </div>
         </main>

src/components/ConjugationViewer.tsx

@@ -12,6 +12,7 @@ import VerbFormDisplay from "./VerbFormDisplay";
 import ButtonSelect from "./ButtonSelect";
 import Hider from "./Hider";
 import { getForms } from "../lib/conjugation-forms";
+import { conjugateVerb } from "../lib/verb-conjugation";
 import PersonSelection from "./PersonSelection";
 import {
     personIsAllowed,
@@ -171,11 +172,11 @@ const initialState: State = {
     formsOpened: [],
 };
 
-function ConjugationViewer({ conjugation, textOptions, ec, ep }: {
+function ConjugationViewer({ entry, complement, textOptions, aayTailType }: {
-    conjugation: T.VerbOutput,
+    entry: T.DictionaryEntry,
+    complement?: T.DictionaryEntry,
     textOptions: T.TextOptions,
-    ec?: string | undefined,
+    aayTailType?: T.AayTail,
-    ep?: string | undefined,
 }) {
     const [state, dispatch] = useReducer(reducer, initialState);
     useEffect(() => {
@@ -189,6 +190,22 @@ function ConjugationViewer({ conjugation, textOptions, ec, ep }: {
             }
         }
     }, []);
+    useEffect(() => {
+        localStorage.setItem(stateLocalStorageName, JSON.stringify(state));
+    });
+
+    const conjugation = (() => {
+        try {
+            return conjugateVerb(entry, aayTailType ? aayTailType : "aay", complement);
+        } catch(e) {
+            return undefined;
+        }
+    })();
+    if (conjugation === undefined) {
+        // don't show the conjugation viewer if the verb can't be conjugated
+        return null;
+    }
+
     const verbConj1 = ("dynamic" in conjugation)
         ? conjugation[state.compoundTypeSelected]
         : ("transitive" in conjugation)
@@ -197,15 +214,11 @@ function ConjugationViewer({ conjugation, textOptions, ec, ep }: {
     const verbConj = (verbConj1.singularForm && state.compoundComplementVersionSelected === "sing")
         ? verbConj1.singularForm
         : verbConj1;
-    const englishConjugation: T.EnglishVerbConjugation | undefined = ec ? {
+    const englishConjugation: T.EnglishVerbConjugation | undefined = entry.ec ? {
-        ec: parseEc(ec),
+        ec: parseEc(entry.ec),
-        ep: ep,
+        ep: entry.ep,
     } : undefined;
 
-    useEffect(() => {
-        localStorage.setItem(stateLocalStorageName, JSON.stringify(state));
-    });
-
     const filterDifficulty = (f: T.DisplayForm): boolean => (
         state.difficulty === "advanced" || !f.advanced
     );