more refactor

src/components/equative-explorer/EquativeExplorer.tsx

@@ -1,28 +1,34 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
     defaultTextOptions as opts,
     VerbTable,
 } from "@lingdocs/pashto-inflector";
 import {
-    makeBlock,
+    makeBlockWPronouns,
-    makeOptionLabel,
 } from "./explorer-helpers";
-import inputs from "./explorer-inputs";
+import {
-import { reducer, ExplorerReducerAction } from "./explorer-reducer";
+    reducer,
-
+} from "./explorer-reducer";
-export type PredicateType = "adjectives" | "unisexNouns";
+import {
-const predicateTypes: PredicateType[] = ["adjectives", "unisexNouns"];
+    PredicateSelector,
-// type SubjectType = "pronouns" | "nouns";
+} from "./explorer-selectors";
+import {
+    ExplorerState,
+    ExplorerReducerAction,
+} from "./explorer-types";
+import {
+    defaultUnisexNoun,
+    defaultAdjective,
+} from "./explorer-inputs";
 
 // TODO: Plural nouns like shoode
 
-export type ExplorerState = {
-    predicate: Adjective | UnisexNoun,
-    predicateType: PredicateType,
-};
 const defaultState: ExplorerState = {
-    predicate: inputs.adjectives.find(ps => ps.p === "ستړی") || inputs.adjectives[0],
+    predicatesSelected: {
-    predicateType: "adjectives",
+        adjective: defaultAdjective,
+        unisexNoun: defaultUnisexNoun,
+    },
+    predicateType: "adjective",
 };
 
 function EquativeExplorer() {
@@ -31,89 +37,17 @@ function EquativeExplorer() {
         const newState = reducer(state, action);
         unsafeSetState(newState);
     }
-    function handlePredicateSelect(e: React.ChangeEvent<HTMLSelectElement>) {
-        dispatch({ type: "setPredicate", payload: parseInt(e.target.value) });
-    }
-    function handlePredicateTypeSelect(e: React.ChangeEvent<HTMLInputElement>) {
-        const payload = e.target.value as PredicateType;
-        dispatch({ type: "setPredicateType", payload });
-    }
     return <>
         <div className="d-flex flex-row">
-            {/* <div className="form-group">
+            <PredicateSelector
-                <label htmlFor="subject-select"><strong>Subject:</strong></label>
+                state={state}
-                <div className="form-check">
+                dispatch={dispatch}
-                    <input
+            />
-                        className="form-check-input"
-                        type="radio"
-                        name="pronounsSubjectRadio"
-                        id="pronounsSubjectRadio"
-                        value={subjectTypes[0]}
-                        checked={subjectType === "pronouns"}
-                        onChange={handleSubjectTypeSelect}
-                    />
-                    <label className="form-check-label" htmlFor="pronounsSubjectRadio">
-                        Pronouns
-                    </label>
-                </div>
-                <div className="form-check">
-                    <input
-                        className="form-check-input"
-                        type="radio"
-                        name="nounsSubjectRadio"
-                        id="nounsSubjectRadio"
-                        value={subjectTypes[0]}
-                        checked={subjectType === "nouns"}
-                        onChange={handleSubjectTypeSelect}
-                    />
-                    <label className="form-check-label" htmlFor="nounsSubjectRadio">
-                        Nouns
-                    </label>
-                </div>
-            </div> */}
-            <div className="form-group">
-                <label htmlFor="predicate-select"><strong>Predicate:</strong></label>
-                <div className="form-check">
-                    <input
-                        className="form-check-input"
-                        type="radio"
-                        name="adjectivesPredicateRadio"
-                        id="adjectivesPredicateRadio"
-                        value={predicateTypes[0]}
-                        checked={state.predicateType === "adjectives"}
-                        onChange={handlePredicateTypeSelect}
-                    />
-                    <label className="form-check-label" htmlFor="adjectivesPredicateRadio">
-                        Adjectives
-                    </label>
-                </div>
-                <div className="form-check mb-2">
-                    <input
-                        className="form-check-input"
-                        type="radio"
-                        name="unisexNounsPredicateRadio"
-                        id="unisexNounsPredicateRadio"
-                        value={predicateTypes[1]}
-                        checked={state.predicateType === "unisexNouns"}
-                        onChange={handlePredicateTypeSelect}
-                    />
-                    <label className="form-check-label" htmlFor="unisexNounsPredicateRadio">
-                        Unisex Nouns
-                    </label>
-                </div>
-                <select
-                    className="form-control"
-                    id="predicate-select"
-                    value={state.predicate.ts}
-                    onChange={handlePredicateSelect}
-                >
-                    {inputs[state.predicateType].map(e => (
-                        <option key={e.ts+"s"} value={e.ts}>{makeOptionLabel(e)}</option>
-                    ))}
-                </select>
-            </div>
         </div>
-        <VerbTable textOptions={opts} block={makeBlock(state.predicate)} />
+        <VerbTable
+            textOptions={opts}
+            block={makeBlockWPronouns(state.predicatesSelected[state.predicateType])}
+        />
     </>;
 }
 

src/components/equative-explorer/explorer-helpers.ts

@@ -14,7 +14,7 @@ export function sort(arr: (Adjective | UnisexNoun)[]): (Adjective | UnisexNoun)[
     return arr.sort((a, b) => a.p.localeCompare(b.p));
 }
 
-export function makeBlock(e: Adjective | UnisexNoun): T.VerbBlock {
+export function makeBlockWPronouns(e: Adjective | UnisexNoun): T.VerbBlock {
     const makeP = (p: T.Person): T.ArrayOneOrMore<T.PsString> => {
         const b = assembleEquativeOutput(equativeMachine(p, e));
         return ("long" in b ? b.long : b) as T.ArrayOneOrMore<T.PsString>;

src/components/equative-explorer/explorer-inputs.ts

@@ -7,8 +7,11 @@ import { sort } from "./explorer-helpers";
 const unisexNouns = nouns.filter(x => isUnisexNoun(x)) as UnisexNoun[];
 
 const inputs = {
-    adjectives: sort(adjectives),
+    adjective: sort(adjectives),
-    unisexNouns: sort(unisexNouns),
+    unisexNoun: sort(unisexNouns),
 };
 
+export const defaultAdjective = inputs.adjective.find(ps => ps.p === "ستړی") || inputs.adjective[0];
+export const defaultUnisexNoun = inputs.unisexNoun.find(ps => ps.p === "پښتون") || inputs.unisexNoun[0];
+
 export default inputs;

src/components/equative-explorer/explorer-reducer.ts

@@ -1,11 +1,5 @@
 import inputs from "./explorer-inputs";
-import { PredicateType, ExplorerState } from "./EquativeExplorer";
+import { ExplorerState, ExplorerReducerAction } from "./explorer-types";
-
-export type ExplorerReducerAction = {
-    type: "setPredicateType", payload: PredicateType,
-} | {
-    type: "setPredicate", payload: number,
-};
 
 export function reducer(state: ExplorerState, action: ExplorerReducerAction): ExplorerState {
     if (action.type === "setPredicate") {
@@ -13,13 +7,15 @@ export function reducer(state: ExplorerState, action: ExplorerReducerAction): Ex
         const predicate = (pile.find(p => p.ts === action.payload) || pile[0]);
         return {
             ...state,
-            predicate,
+            predicatesSelected: {
+                ...state.predicatesSelected,
+                [state.predicateType]: predicate,
+            },
         };
     }
     // if (action.type === "setPredicateType") {
-        const predicate = inputs[action.payload][0];
         return {
-            predicate,
+            ...state,
             predicateType: action.payload,
         };
     // }

src/components/equative-explorer/explorer-selectors.tsx

@@ -0,0 +1,59 @@
+import { ExplorerState, PredicateType } from "./explorer-types";
+import { makeOptionLabel } from "./explorer-helpers";
+import inputs from "./explorer-inputs";
+import { ExplorerReducerAction } from "./explorer-types";
+
+export function PredicateSelector({ state, dispatch }: {
+    state: ExplorerState,
+    dispatch: (action: ExplorerReducerAction) => void,
+}) {
+    function onTypeSelect(e: React.ChangeEvent<HTMLInputElement>) {
+        const t = e.target.value as PredicateType;
+        dispatch({ type: "setPredicateType", payload: t });
+    }
+    function onPredicateSelect(e: React.ChangeEvent<HTMLSelectElement>) {
+        const ts = parseInt(e.target.value);
+        dispatch({ type: "setPredicate", payload: ts });
+    }
+    return <div className="form-group">
+        <label htmlFor="predicate-select"><strong>Predicate:</strong></label>
+        <div className="form-check">
+            <input
+                className="form-check-input"
+                type="radio"
+                name="adjectivesPredicateRadio"
+                id="adjectivesPredicateRadio"
+                value="adjective"
+                checked={state.predicateType === "adjective"}
+                onChange={onTypeSelect}
+            />
+            <label className="form-check-label" htmlFor="adjectivesPredicateRadio">
+                Adjectives
+            </label>
+        </div>
+        <div className="form-check mb-2">
+            <input
+                className="form-check-input"
+                type="radio"
+                name="unisexNounsPredicateRadio"
+                id="unisexNounsPredicateRadio"
+                value="unisexNoun"
+                checked={state.predicateType === "unisexNoun"}
+                onChange={onTypeSelect}
+            />
+            <label className="form-check-label" htmlFor="unisexNounsPredicateRadio">
+                Unisex Nouns
+            </label>
+        </div>
+        <select
+            className="form-control"
+            id="predicate-select"
+            value={state.predicatesSelected[state.predicateType].ts}
+            onChange={onPredicateSelect}
+        >
+            {inputs[state.predicateType].map(e => (
+                <option key={e.ts+"s"} value={e.ts}>{makeOptionLabel(e)}</option>
+            ))}
+        </select>
+    </div>;
+}

src/components/equative-explorer/explorer-types.ts

@@ -0,0 +1,16 @@
+export type PredicateType = keyof PredicatesSelected;
+
+export type ExplorerState = {
+    predicateType: PredicateType,
+    predicatesSelected: PredicatesSelected,
+};
+type PredicatesSelected = {
+    adjective: Adjective,
+    unisexNoun: UnisexNoun,
+};
+
+export type ExplorerReducerAction = {
+    type: "setPredicateType", payload: PredicateType,
+} | {
+    type: "setPredicate", payload: number,
+};