fixed bug and simplified

src/components/EntrySelect.tsx

@@ -2,20 +2,59 @@ import {
     Types as T,
 } from "@lingdocs/pashto-inflector";
 import Select from "react-select";
+import AsyncSelect from "react-select/async";
 import {
     makeSelectOption,
     makeVerbSelectOption,
     zIndexProps,
 } from "./np-picker/picker-tools";
 
-function EntrySelect<E extends T.DictionaryEntry | VerbEntry>(props: {
+function EntrySelect<E extends T.DictionaryEntry | VerbEntry>(props: ({
-    entries: E[],
+    entries: E[]
+} | { 
+    searchF: (search: string) => E[],
+    getByTs: (ts: number) => E,
+}) & {
     value: E | undefined,
     onChange: (value: E | undefined) => void,
     name: string | undefined,
     isVerbSelect?: boolean,
     opts: T.TextOptions,
 }) {
+    function makeOption(e: E | T.DictionaryEntry) {
+        if ("entry" in e) {
+            return (props.isVerbSelect ? makeVerbSelectOption : makeSelectOption)(e, props.opts);
+        }
+        return makeSelectOption(e, props.opts);
+    }
+    const value = props.value ? makeOption(props.value) : undefined;
+    if ("searchF" in props) {
+        const options = (searchString: string) => 
+            new Promise<{ value: string, label: string | JSX.Element }[]>(resolve => {
+                resolve(props.searchF(searchString).map(makeOption));
+            });
+        const onChange = (v: { label: string | JSX.Element, value: string } | null) => {
+            if (!v) {
+                props.onChange(undefined);
+                return;
+            }
+            const s = props.getByTs(parseInt(v.value));
+            if (!s) return;
+            props.onChange(s);
+        }
+        return <div>
+            <AsyncSelect
+                isSearchable={true}
+                className="mb-2"
+                value={value}
+                onChange={onChange}
+                defaultOptions={[]}
+                loadOptions={options}
+                placeholder={props.name ? `Select ${props.name}...` : undefined}
+                {...zIndexProps}
+            />
+        </div>;
+    }
     const options = props.entries
         .sort((a, b) => {
             if ("entry" in a) {
@@ -23,13 +62,8 @@ function EntrySelect<E extends T.DictionaryEntry | VerbEntry>(props: {
             }
             return a.p.localeCompare("p" in b ? b.p : b.entry.p, "af-PS");
         })
-        .map((e) => {
+        .map(makeOption);
-            if ("entry" in e) {
+    const onChange = (v: { label: string | JSX.Element, value: string } | null) => {
-                return (props.isVerbSelect ? makeVerbSelectOption : makeSelectOption)(e, props.opts);
-            }
-            return makeSelectOption(e, props.opts);
-        });
-    function onSelect(v: { label: string | JSX.Element, value: string } | null) {
         if (!v) {
             props.onChange(undefined);
             return;
@@ -42,21 +76,11 @@ function EntrySelect<E extends T.DictionaryEntry | VerbEntry>(props: {
         if (!s) return;
         props.onChange(s);
     }
-    const selectedEntry: T.DictionaryEntry | undefined = !props.value
-        ? undefined
-        : "entry" in props.value
-        ? props.value.entry
-        : "p" in props.value
-        ? props.value
-        : undefined; 
-    const selected = !selectedEntry
-        ? undefined
-        : options.find(o => (selectedEntry && (o.value === selectedEntry.ts.toString())));
     return <div>
         <Select
             isSearchable={true}
-            value={selected}
+            value={value}
-            onChange={onSelect}
+            onChange={onChange}
             className="mb-2"
             options={options}
             placeholder={props.name ? `Select ${props.name}...` : undefined}

src/components/TensePicker.tsx

@@ -154,7 +154,7 @@ function TensePicker({ onChange, verb, mode }: {
                 {...zIndexProps}
             />
             {verb && <div className="d-flex flex-row justify-content-between align-items-center mt-3 mb-1" style={{ width: "100%" }}>
-                <div onClick={moveTense("back")} className="clickable">
+                <div className="btn btn-light clickable" onClick={moveTense("back")}>
                     <i className="fas fa-chevron-left" />
                 </div>
                 {mode !== "charts" && <ButtonSelect
@@ -169,7 +169,7 @@ function TensePicker({ onChange, verb, mode }: {
                     }]}
                     handleChange={onPosNegSelect}
                 />}
-                <div onClick={moveTense("forward")} className="clickable">
+                <div onClick={moveTense("forward")} className="btn btn-light clickable">
                     <i className="fas fa-chevron-right" />
                 </div>
             </div>}

src/components/np-picker/picker-tools.tsx

@@ -24,6 +24,12 @@ export const zIndexProps = {
 
 export function makeVerbSelectOption(e: VerbEntry, opts: T.TextOptions): { value: string, label: string | JSX.Element } {
     const eng = getEnglishVerb(e.entry);
+    if (!eng) {
+        console.log("yep no eng for", e);
+    } else if (e.entry.p === "اړېدل") {
+        console.log("eng for", e);
+        console.log(eng);
+    }
     const ps = plainTextPsAdjustment(
         { p: e.entry.p, f: removeFVarients(e.entry.f) },
         opts,