fix inflection pattern

src/demo-components/InflectionDemo.tsx

@@ -16,17 +16,18 @@ const chevStyle = {
   color: "#ccc",
 };
 
-const nounsAdjs = nounsAdjsUnsafe
+const nounsAdjs = nounsAdjsUnsafe.filter(
-    .filter(x => tp.isNounEntry(x) || tp.isAdjectiveEntry(x)) as (T.NounEntry | T.AdjectiveEntry)[];
+  (x) => tp.isNounEntry(x) || tp.isAdjectiveEntry(x)
+) as (T.NounEntry | T.AdjectiveEntry)[];
 
-function InflectionDemo({ opts }: {
+function InflectionDemo({ opts }: { opts: T.TextOptions }) {
-    opts: T.TextOptions,
-}) {
   const [pattern, setPattern] = useState<T.InflectionPattern | "all">("all");
-    const [word, setWord] = useState<T.NounEntry | T.AdjectiveEntry | undefined>(undefined)
+  const [word, setWord] = useState<T.NounEntry | T.AdjectiveEntry | undefined>(
+    undefined
+  );
   const patterns: {
-        value: T.InflectionPattern | "all",
+    value: T.InflectionPattern | "all";
-        label: JSX.Element | string,
+    label: JSX.Element | string;
   }[] = [
     {
       value: "all",
@@ -35,27 +36,47 @@ function InflectionDemo({ opts }: {
     {
       value: 0,
       label: "no inflection",
-        }, {
+    },
+    {
       value: 1,
       label: "basic",
-        }, {
+    },
+    {
       value: 2,
-            label: <>unstressed <InlinePs opts={opts}>{{ p: "ی", f: "ey" }}</InlinePs></>,
+      label: (
-        }, {
+        <>
+          unstressed <InlinePs opts={opts}>{{ p: "ی", f: "ay" }}</InlinePs>
+        </>
+      ),
+    },
+    {
       value: 3,
-            label: <>stressed <InlinePs opts={opts}>{{ p: "ی", f: "éy" }}</InlinePs></>,
+      label: (
-        }, {
+        <>
+          stressed <InlinePs opts={opts}>{{ p: "ی", f: "áy" }}</InlinePs>
+        </>
+      ),
+    },
+    {
       value: 4,
       label: '"Pashtoon" pattern',
-        }, {
+    },
+    {
       value: 5,
       label: "short squish",
-        }, {
+    },
+    {
       value: 6,
-            label: <>fem. inan. <InlinePs opts={opts}>{{ p: "ي", f: "ee" }}</InlinePs></>,
+      label: (
+        <>
+          fem. inan. <InlinePs opts={opts}>{{ p: "ي", f: "ee" }}</InlinePs>
+        </>
+      ),
     },
   ];
-    const entries = (nounsAdjs as (T.NounEntry | T.AdjectiveEntry)[]).filter(tp.isPattern(pattern))
+  const entries = (nounsAdjs as (T.NounEntry | T.AdjectiveEntry)[]).filter(
+    tp.isPattern(pattern)
+  );
   function handlePatternChange(e: React.ChangeEvent<HTMLInputElement>) {
     const v = e.target.value;
     const value = v === "all" ? v : (Number(v) as T.InflectionPattern);
@@ -70,9 +91,8 @@ function InflectionDemo({ opts }: {
       setWord(entries[0]);
       return;
     }
-        const oldIndex = entries.findIndex(e => e.ts === word.ts);
+    const oldIndex = entries.findIndex((e) => e.ts === word.ts);
-        const newIndex = entries.length === (oldIndex + 1)
+    const newIndex = entries.length === oldIndex + 1 ? 0 : oldIndex + 1;
-            ? 0 : (oldIndex + 1);
     setWord(entries[newIndex]);
   }
   function wordBack() {
@@ -80,9 +100,8 @@ function InflectionDemo({ opts }: {
       setWord(entries[entries.length - 1]);
       return;
     }
-        const oldIndex = entries.findIndex(e => e.ts === word.ts);
+    const oldIndex = entries.findIndex((e) => e.ts === word.ts);
-        const newIndex = oldIndex === 0
+    const newIndex = oldIndex === 0 ? entries.length - 1 : oldIndex + 1;
-            ? (entries.length - 1) : (oldIndex + 1);
     setWord(entries[newIndex]);
   }
   const inf = ((): T.InflectorOutput | false => {
@@ -94,16 +113,27 @@ function InflectionDemo({ opts }: {
       return false;
     }
   })();
-    return <div style={{ paddingBottom: "20px" }}>
+  return (
+    <div style={{ paddingBottom: "20px" }}>
       <p>
-            Produces the inflections and plural forms (Pashto and Arabic plurals where applicable) for words
+        Produces the inflections and plural forms (Pashto and Arabic plurals
+        where applicable) for words
       </p>
-        <div className="d-block mx-auto card" style={{ maxWidth: "700px", background: "var(--closer)"}}>
+      <div
+        className="d-block mx-auto card"
+        style={{ maxWidth: "700px", background: "var(--closer)" }}
+      >
         <div className="card-body">
           <div className="row">
             <div className="col-sm-6">
               <div>
-                            <h6 className="my-2">Filter words by <a href="https://grammar.lingdocs.com/inflection/inflection-patterns/">inflection pattern</a>:</h6>
+                <h6 className="my-2">
+                  Filter words by{" "}
+                  <a href="https://grammar.lingdocs.com/inflection/inflection-patterns/">
+                    inflection pattern
+                  </a>
+                  :
+                </h6>
                 <div>
                   {patterns.map(({ value, label }) => (
                     <div key={value} className="form-check">
@@ -115,9 +145,7 @@ function InflectionDemo({ opts }: {
                         value={value}
                         onChange={handlePatternChange}
                       />
-                                        <label className="form-check-label">
+                      <label className="form-check-label">{label}</label>
-                                            {label}
-                                        </label>
                     </div>
                   ))}
                 </div>
@@ -157,28 +185,48 @@ function InflectionDemo({ opts }: {
           </div>
         </div>
       </div>
-        {inf ? <div className="mt-3">
+      {inf ? (
-                {inf.inflections && word && (() => {
+        <div className="mt-3">
+          {inf.inflections &&
+            word &&
+            (() => {
               const pattern = getInflectionPattern(word);
-                    return <div>
+              return (
-                        <a href={`https://grammar.lingdocs.com/inflection/inflection-patterns/${inflectionSubUrl(pattern)}`} rel="noreferrer" target="_blank">
+                <div>
-                            <div className="badge bg-light mb-2">Inflection pattern {HumanReadableInflectionPattern(pattern, opts)}
+                  <a
+                    href={`https://grammar.lingdocs.com/inflection/inflection-patterns/${inflectionSubUrl(
+                      pattern
+                    )}`}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    <div className="badge bg-light mb-2">
+                      Inflection pattern{" "}
+                      {HumanReadableInflectionPattern(pattern, opts)}
                     </div>
                   </a>
                   <InflectionsTable inf={inf.inflections} textOptions={opts} />
-                    </div>;
+                </div>
+              );
             })()}
-                {"plural" in inf && inf.plural !== undefined && <div>
+          {"plural" in inf && inf.plural !== undefined && (
+            <div>
               <h5>Plural</h5>
               <InflectionsTable inf={inf.plural} textOptions={opts} />
-                </div>}
+            </div>
-                {"arabicPlural" in inf && inf.arabicPlural !== undefined && <div>
+          )}
+          {"arabicPlural" in inf && inf.arabicPlural !== undefined && (
+            <div>
               <h5>Arabic Plural</h5>
               <InflectionsTable inf={inf.arabicPlural} textOptions={opts} />
-                </div>}
+            </div>
-        </div> : <div>
+          )}
-        </div>}
+        </div>
-    </div>;
+      ) : (
+        <div></div>
+      )}
+    </div>
+  );
 }
 
 function inflectionSubUrl(pattern: T.InflectionPattern): string {
@@ -194,8 +242,8 @@ function inflectionSubUrl(pattern: T.InflectionPattern): string {
     ? "#4-words-with-the-pashtoon-pattern"
     : pattern === 5
     ? "#5-shorter-words-that-squish"
-        // : pattern === 6
+    : // : pattern === 6
-        : "#6-inanimate-feminine-nouns-ending-in-ي---ee"
+      "#6-inanimate-feminine-nouns-ending-in-ي---ee";
 }
 
 export default InflectionDemo;