more refactor

2021-10-19 10:45:35 -04:00 · 2021-10-19 10:45:35 -04:00 · ad31f2b966
parent edca391118
commit ad31f2b966
6 changed files with 116 additions and 108 deletions
--- a/src/components/equative-explorer/EquativeExplorer.tsx
+++ b/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,
-    makeOptionLabel,
+    makeBlockWPronouns,
 } from "./explorer-helpers";
-import inputs from "./explorer-inputs";
-import { reducer, ExplorerReducerAction } from "./explorer-reducer";
-
-export type PredicateType = "adjectives" | "unisexNouns";
-const predicateTypes: PredicateType[] = ["adjectives", "unisexNouns"];
-// type SubjectType = "pronouns" | "nouns";
+import {
+    reducer,
+} from "./explorer-reducer";
+import {
+    PredicateSelector,
+} 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],
-    predicateType: "adjectives",
+    predicatesSelected: {
+        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">
-                <label htmlFor="subject-select"><strong>Subject:</strong></label>
-                <div className="form-check">
-                    <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>
+            <PredicateSelector
+                state={state}
+                dispatch={dispatch}
+            />
        </div>
-        <VerbTable textOptions={opts} block={makeBlock(state.predicate)} />
+        <VerbTable
+            textOptions={opts}
+            block={makeBlockWPronouns(state.predicatesSelected[state.predicateType])}
+        />
    </>;
 }

--- a/src/components/equative-explorer/explorer-helpers.ts
+++ b/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>;
--- a/src/components/equative-explorer/explorer-inputs.ts
+++ b/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),
-    unisexNouns: sort(unisexNouns),
+    adjective: sort(adjectives),
+    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;
--- a/src/components/equative-explorer/explorer-reducer.ts
+++ b/src/components/equative-explorer/explorer-reducer.ts
@ -1,11 +1,5 @@
 import inputs from "./explorer-inputs";
-import { PredicateType, ExplorerState } from "./EquativeExplorer";
-
-export type ExplorerReducerAction = {
-    type: "setPredicateType", payload: PredicateType,
-} | {
-    type: "setPredicate", payload: number,
-};
+import { ExplorerState, ExplorerReducerAction } from "./explorer-types";

 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,
        };
    // }
--- a/src/components/equative-explorer/explorer-selectors.tsx
+++ b/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>;
+}
--- a/src/components/equative-explorer/explorer-types.ts
+++ b/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,
+};