more refactor

This commit is contained in:
lingdocs 2021-10-19 10:45:35 -04:00
parent edca391118
commit ad31f2b966
6 changed files with 116 additions and 108 deletions

View File

@ -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}
<PredicateSelector
state={state}
dispatch={dispatch}
/>
<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}
<VerbTable
textOptions={opts}
block={makeBlockWPronouns(state.predicatesSelected[state.predicateType])}
/>
<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)} />
</>;
}

View File

@ -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>;

View File

@ -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;

View File

@ -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,
};
// }

View File

@ -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>;
}

View File

@ -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,
};