sort of fixed the mini-pronoun conflict checking - but now the alerts dont work

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "3.9.7",
+  "version": "3.9.8",
   "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/components/ep-explorer/EPExplorer.tsx

@@ -41,7 +41,10 @@ function EPExplorer(props: {
         "EPState8",
         flashMessage,
     );
-    const [alert, setAlert] = useState<string | undefined>(undefined);
+    // const [
+    //     // alertMsg,
+    //     // setAlertMsg,
+    // ] = useState<string | undefined>(undefined);
     const [showClipped, setShowClipped] = useState<string>("");
     const parent = useRef<HTMLDivElement>(null);
     useEffect(() => {
@@ -62,10 +65,13 @@ function EPExplorer(props: {
         adjustEps({ type: "load EPS", payload: e });
     }
     function flashMessage(msg: string) {
-        setAlert(msg);
+        console.log(msg);
-        setTimeout(() => {
+        alert(msg);
-            setAlert(undefined);
+        // for some crazy reason using this alert functionality breaks the flow!
-        }, 1500);
+        // setAlertMsg(msg);
+        // setTimeout(() => {
+        //     setAlertMsg(undefined);
+        // }, 1500);
     }
     function flashClippedMessage(m: string) {
         setShowClipped(m);
@@ -133,15 +139,15 @@ function EPExplorer(props: {
             eps={eps}
             setOmitSubject={"eps" in props ? false : payload => adjustEps({ type: "set omitSubject", payload })}
         />}
-        {alert && <div className="alert alert-warning text-center" role="alert" style={{
+        {/* {alertMsg && <div className="alert alert-warning text-center" role="alert" style={{
             position: "fixed",
             top: "30%",
             left: "50%",
             transform: "translate(-50%, -50%)",
             zIndex: 9999999999999,
         }}>
-            {alert}
+            {alertMsg}
-        </div>}
+        </div>} */}
         {showClipped && <div className="alert alert-primary text-center" role="alert" style={{
             position: "fixed",
             top: "30%",

src/components/ep-explorer/EPPicker.tsx

@@ -4,7 +4,7 @@ import EquativePicker from "./EquativePicker";
 import ButtonSelect from "../ButtonSelect";
 import ComplementPicker from "../ComplementPicker";
 import epsReducer, { EpsReducerAction } from "./eps-reducer";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { completeEPSelection } from "../../lib/phrase-building/render-ep";
 import APPicker from "../ap-picker/APPicker";
 import autoAnimate from "@formkit/auto-animate";
@@ -16,18 +16,11 @@ function EPPicker({ opts, eps, onChange, entryFeeder }: {
     entryFeeder: T.EntryFeeder,
 }) {
     const parent = useRef<HTMLDivElement>(null);
-    const [alert, setAlert] = useState<string | undefined>("");
     useEffect(() => {
         parent.current && autoAnimate(parent.current);
     }, [parent]);
     function adjustEps(action: EpsReducerAction) {
-        onChange(epsReducer(eps, action, handleAlert));
+        onChange(epsReducer(eps, action));
-    }
-    function handleAlert(msg: string) {
-        setAlert(msg);
-        setTimeout(() => {
-            setAlert(undefined);
-        }, 1500);
     }
     const phraseIsComplete = !!completeEPSelection(eps);
     return <div>
@@ -109,15 +102,6 @@ function EPPicker({ opts, eps, onChange, entryFeeder }: {
                 />
             </div>
         </div>
-        {alert && <div className="alert alert-warning text-center" role="alert" style={{
-            position: "fixed",
-            top: "30%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            zIndex: 9999999999999,
-        }}>
-            {alert}
-        </div>}
     </div>;
 }
 

src/components/vp-explorer/VPExplorer.tsx

@@ -51,12 +51,18 @@ function VPExplorer(props: {
         "verbExplorerMode2",
     );
     const [showClipped, setShowClipped] = useState<string>("");
-    const [alert, setAlert] = useState<string | undefined>(undefined);
+    const [
+        alertMsg,
+        // setAlertMsg,
+    ] = useState<string | undefined>(undefined);
     function flashMessage(msg: string) {
-        setAlert(msg);
+        console.log(msg);
-        setTimeout(() => {
+        // for some crazy reason this causes it to go through with the state change 
-            setAlert(undefined);
+        // we're trying to avoid when there's a potential errored state
-        }, 1500);
+        // setAlertMsg(msg);
+        // setTimeout(() => {
+        //     setAlertMsg(undefined);
+        // }, 2000);
     }
     useEffect(() => {
         adjustVps({
@@ -159,7 +165,7 @@ function VPExplorer(props: {
         {mode === "phrases" && <VPPicker
             opts={props.opts}
             entryFeeder={props.entryFeeder}
-            onChange={(vps) => adjustVps({ type: "load vps", payload: vps })}
+            onChange={(payload) => adjustVps({ type: "load vps", payload })}
             vps={vps}
         />}
         {mode !== "phrases" && <div className="my-2">
@@ -185,14 +191,14 @@ function VPExplorer(props: {
         }}>
             {showClipped}
         </div>}
-        {alert && <div className="alert alert-warning text-center" role="alert" style={{
+        {alertMsg && <div className="alert alert-warning text-center" role="alert" style={{
             position: "fixed",
             top: "30%",
             left: "50%",
             transform: "translate(-50%, -50%)",
             zIndex: 9999999999999,
         }}>
-            {alert}
+            {alertMsg}
         </div>}
     </div>
 }

src/components/vp-explorer/VPPicker.tsx

@@ -5,7 +5,6 @@ import { useEffect, useRef, useState } from "react";
 import { getKingAndServant, renderVP } from "../../lib/phrase-building/render-vp";
 import { completeVPSelection, isPastTense } from "../../lib/phrase-building/vp-tools";
 import VPExplorerExplanationModal, { roleIcon } from "./VPExplorerExplanationModal";
-import { vpsReducer, VpsReducerAction } from "./vps-reducer";
 import APPicker from "../ap-picker/APPicker";
 import autoAnimate from "@formkit/auto-animate";
 import {
@@ -15,11 +14,12 @@ import {
     isNoObject,
 } from "../../lib/phrase-building/blocks-utils";
 import ComplementPicker from "../ComplementPicker";
+import { vpsReducer, VpsReducerAction } from "../../library";
 
 function VPPicker({ opts, vps, onChange, entryFeeder }: {
     opts: T.TextOptions,
     vps: T.VPSelectionState,
-    onChange: (eps: T.VPSelectionState) => void,
+    onChange: (vps: T.VPSelectionState) => void,
     entryFeeder: T.EntryFeeder,
 }) {
     const parent = useRef<HTMLDivElement>(null);
@@ -27,16 +27,8 @@ function VPPicker({ opts, vps, onChange, entryFeeder }: {
         parent.current && autoAnimate(parent.current);
     }, [parent]);
     const [showingExplanation, setShowingExplanation] = useState<{ role: "servant" | "king", item: "subject" | "object" } | false>(false);
-    const [alert, setAlert] = useState<string | undefined>(undefined);
-    function flashMessage(msg: string) {
-        setAlert(msg);
-        setTimeout(() => {
-            setAlert(undefined);
-        }, 1500);
-    }
     function adjustVps(action: VpsReducerAction) {
-        const newVps = vpsReducer(vps, action, flashMessage);
+        onChange(vpsReducer(vps, action));
-        onChange(newVps);
     }
     function handleSubjectChange(subject: T.NPSelection | undefined, skipPronounConflictCheck?: boolean) {
         adjustVps({
@@ -207,15 +199,6 @@ function VPPicker({ opts, vps, onChange, entryFeeder }: {
             showing={showingExplanation}
             setShowing={setShowingExplanation}
         />
-        {alert && <div className="alert alert-warning text-center" role="alert" style={{
-            position: "fixed",
-            top: "30%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            zIndex: 9999999999999,
-        }}>
-            {alert}
-        </div>}
     </div>;
 }
 

src/components/vp-explorer/vps-reducer.ts

@@ -80,15 +80,6 @@ export type VpsReducerAction = {
 }
 
 export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, sendAlert?: (msg: string) => void): T.VPSelectionState {
-    return ensureMiniPronounsOk(vps, doReduce());
-    function ensureMiniPronounsOk(old: T.VPSelectionState, vps: T.VPSelectionState): T.VPSelectionState {
-        const error = checkForMiniPronounsError(vps);
-        if (error) {
-            if (sendAlert) sendAlert(error);
-            return old;
-        }
-        return vps;
-    }
     function doReduce(): T.VPSelectionState {
         if (action.type === "load vps") {
             return action.payload;
@@ -319,6 +310,14 @@ export function vpsReducer(vps: T.VPSelectionState, action: VpsReducerAction, se
         }
         throw new Error("unknown vpsReducer state");
     }
+    const modified = doReduce();
+    console.log("called once");
+    const err = checkForMiniPronounsError(modified);
+    if (err) {
+        if (sendAlert) sendAlert(err);
+        return vps;
+    }
+    return modified;
 }
 
 function hasPronounConflict(subject: T.NPSelection | undefined, object: undefined | T.VerbObject): boolean {

src/lib/phrase-building/blocks-utils.ts

@@ -269,9 +269,9 @@ export function adjustSubjectSelection(blocks: T.VPSBlock[] | T.EPSBlock[], subj
     return nb;
 }
 
-export function adjustObjectSelection(blocks: T.VPSBlock[], object: T.ObjectSelectionComplete | T.NPSelection | T.VerbObject | T.ObjectSelectionComplete): T.VPSBlockComplete[];
+export function adjustObjectSelection(blocks: Readonly<T.VPSBlock[]>, object: T.ObjectSelectionComplete | T.NPSelection | T.VerbObject | T.ObjectSelectionComplete): T.VPSBlockComplete[];
-export function adjustObjectSelection(blocks: T.VPSBlock[], object: T.ObjectSelection | T.NPSelection | T.VerbObject | T.ObjectSelection | undefined): T.EPSBlock[];
+export function adjustObjectSelection(blocks: Readonly<T.VPSBlock[]>, object: T.ObjectSelection | T.NPSelection | T.VerbObject | T.ObjectSelection | undefined): T.EPSBlock[];
-export function adjustObjectSelection(blocks: T.VPSBlock[], object: T.ObjectSelection | T.ObjectSelectionComplete | T.VerbObject | T.NPSelection | undefined): T.VPSBlock[] | T.VPSBlockComplete[] {
+export function adjustObjectSelection(blocks: Readonly<T.VPSBlock[]>, object: T.ObjectSelection | T.ObjectSelectionComplete | T.VerbObject | T.NPSelection | undefined): T.VPSBlock[] | T.VPSBlockComplete[] {
     const nb = [...blocks];
     const i = nb.findIndex(b => b.block && b.block.type === "objectSelection");
     if (i === -1) {