quizzing etc still a bit rough

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "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

@@ -6,7 +6,7 @@
  *
  */
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import verbs from "./verbs";
 import nounsAdjs from "./nouns-adjs";
 import Pashto from "./components/Pashto";
@@ -26,7 +26,7 @@ import * as T from "./types";
 import { isNounEntry } from "./lib/type-predicates";
 import defualtTextOptions from "./lib/default-text-options";
 import PhraseBuilder from "./components/vp-explorer/VPExplorer";
-const textOptionsLocalStorageName = "textOptions2";
+import { useStickyState } from "./library";
 type VerbType = "simple" | "stative compound" | "dynamic compound";
 const verbTypes: VerbType[] = [
     "simple",
@@ -48,13 +48,13 @@ const allVerbs = verbs.map((v: { entry: T.DictionaryEntry, complement?: T.Dictio
 }));
 
 function App() {
-    const [verbTs, setVerbTs] = useState<number>(0);
-    const [verbTypeShowing, setVerbTypeShowing] = useState<VerbType>("simple");
-    const [regularIrregular, setRegularIrregular] = useState<"regular" | "irregular">("regular");
-    const [transitivityShowing, setTransitivityShowing] = useState<T.Transitivity>("intransitive");
-    const [showingTextOptions, setShowingTextOptions] = useState<boolean>(false);
-    const [textOptions, setTextOptions] = useState<T.TextOptions>(defualtTextOptions);
-    const [theme, setTheme] = useState<"light" | "dark">("light");
+    const [verbTs, setVerbTs] = useStickyState<number>(0, "verbTs1");
+    const [verbTypeShowing, setVerbTypeShowing] = useStickyState<VerbType>("simple", "vTypeShowing");
+    const [regularIrregular, setRegularIrregular] = useStickyState<"regular" | "irregular">("regular", "regIrreg");
+    const [transitivityShowing, setTransitivityShowing] = useStickyState<T.Transitivity>("intransitive", "transitivityShowing1");
+    const [showingTextOptions, setShowingTextOptions] = useStickyState<boolean>(false, "showTextOpts1");
+    const [textOptions, setTextOptions] = useStickyState<T.TextOptions>(defualtTextOptions, "textOpts1");
+    const [theme, setTheme] = useStickyState<"light" | "dark">("light", "theme1");
     // const onlyGrammTrans = (arr: Transitivity[]) => (
     //     arr.length === 1 && arr[0] === "grammatically transitive"
     // );
@@ -64,45 +64,6 @@ function App() {
     //     }
     // }
 
-    useEffect(() => {
-        const verbTsRaw = localStorage.getItem("verbTs");
-        const verbTypeShowing = localStorage.getItem("verbTypeShowing") as undefined | VerbType;
-        const regularIrregular = localStorage.getItem("regularIrregular") as "regular" | "irregular";
-        const transitivitiyShowing = localStorage.getItem("transitivityShowing") as undefined | T.Transitivity;
-        const theme = localStorage.getItem("theme");
-        const textOptionst = localStorage.getItem(textOptionsLocalStorageName);
-        if (regularIrregular) {
-            setRegularIrregular(regularIrregular);
-        }
-        if (verbTsRaw) {
-            setVerbTs(JSON.parse(verbTsRaw));
-        }
-        if (verbTypeShowing) {
-            setVerbTypeShowing(verbTypeShowing);
-        }
-        if (transitivitiyShowing) {
-            setTransitivityShowing(transitivitiyShowing);
-        }
-        if (theme) {
-            setTheme(theme as "light" | "dark");
-        }
-        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-            setTheme("dark");
-        }
-        if (textOptionst) {
-            setTextOptions(JSON.parse(textOptionst) as T.TextOptions);
-        }
-    }, []);
-
-    useEffect(() => {
-        localStorage.setItem("verbTs", verbTs.toString());
-        localStorage.setItem("regularIrregular", regularIrregular);
-        localStorage.setItem("verbTypeShowing", verbTypeShowing);
-        localStorage.setItem("transitivityShowing", transitivityShowing);
-        localStorage.setItem(textOptionsLocalStorageName, JSON.stringify(textOptions));
-        localStorage.setItem("theme", theme);
-    });
-
     useEffect(() => {
         document.documentElement.setAttribute("data-theme", theme);
     }, [theme])

src/components/np-picker/NPPronounPicker.tsx

@@ -60,7 +60,7 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton, opts }: {
     clearButton?: JSX.Element,
     opts: T.TextOptions,
 }) {
-    const [display, setDisplay] = useStickyState<"persons" | "p" | "e">("persons", "prounoun-picker-display"); 
+    const [display, setDisplay] = useStickyState<"persons" | "p" | "e">("e", "prounoun-picker-display"); 
 
     const p = personToPickerState(pronoun.person);
     function handleClick(row: number, col: number) {

src/components/vp-explorer/VPExplorer.tsx

@@ -41,21 +41,40 @@ export function VPExplorer(props: {
     getNounByTs: (ts: number) => T.NounEntry | undefined,
     getVerbByTs: (ts: number) => T.VerbEntry | undefined,
 })) {
+    console.log("passedVerb", props.verb);
     const [subject, setSubject] = useStickyState<T.NPSelection | undefined>(undefined, "subjectNPSelection");
+    // not quite working with stickyState
     const [mode, setMode] = useStickyState<"charts" | "phrases" | "quiz">("phrases", "verbExplorerMode");
+    // const [mode, setMode] = useState<"charts" | "phrases" | "quiz">("charts");
     const [showAnswer, setShowAnswer] = useState<boolean>(false);
     const passedVerb = props.verb;
-    const [verb, setVerb] = useStickyState<T.VerbSelection | undefined>(
-        passedVerb
-            ? (old) => makeVerbSelection(passedVerb, setSubject, old)
-            : undefined,
-        "verbExplorerVerb",
-    );
+    // this isn't quite working
+    // const [verb, setVerb] = useStickyState<T.VerbSelection | undefined>(
+    //     passedVerb
+    //         ? (old) => makeVerbSelection(passedVerb, setSubject, old)
+    //         : undefined,
+    //     "verbExplorerVerb",
+    // );
+    const [verb, setVerb] = useState<T.VerbSelection | undefined>(
+        passedVerb ? makeVerbSelection(passedVerb, setSubject) : undefined
+    )
+    useEffect(() => {
+        if (mode === "quiz") {
+            if (!verb) setMode("phrases");
+            handleResetQuiz();
+        }
+        // TODO: better system with all this
+        // eslint-disable-next-line
+    }, []);
     useEffect(() => {
         if (!passedVerb) {
             setVerb(undefined);
         } else {
             setVerb(o => makeVerbSelection(passedVerb, setSubject, o));
+            if (mode === "quiz") {
+                // TODO: Better
+                setMode("charts");
+            }
         }
         // eslint-disable-next-line
     }, [passedVerb]);
@@ -204,6 +223,8 @@ export function VPExplorer(props: {
             <VPDisplay VP={verbPhrase} opts={props.opts} />
         }
         {(verb && (mode === "charts")) && <ChartDisplay VS={verb} opts={props.opts} />}
+        {mode === "quiz" && <div style={{ height: "300px" }}>
+        </div>}
     </div>
 }
 

src/lib/useStickyState.ts

@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
  * @param key a key for saving the state in locolStorage
  * @returns 
  */
-export default function useStickyState<T extends string | object | boolean | undefined | null>(defaultValue: T | ((old: T | undefined) => T), key: string): [
+export default function useStickyState<T extends string | number | object | boolean | undefined | null>(defaultValue: T | ((old: T | undefined) => T), key: string): [
   value: T,
   setValue: React.Dispatch<React.SetStateAction<T>>,
 ] {