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 { import {
defaultTextOptions as opts, defaultTextOptions as opts,
VerbTable, VerbTable,
} from "@lingdocs/pashto-inflector"; } from "@lingdocs/pashto-inflector";
import { import {
makeBlock, makeBlockWPronouns,
makeOptionLabel,
} from "./explorer-helpers"; } 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 // TODO: Plural nouns like shoode
export type ExplorerState = {
predicate: Adjective | UnisexNoun,
predicateType: PredicateType,
};
const defaultState: ExplorerState = { const defaultState: ExplorerState = {
predicate: inputs.adjectives.find(ps => ps.p === "ستړی") || inputs.adjectives[0], predicatesSelected: {
predicateType: "adjectives", adjective: defaultAdjective,
unisexNoun: defaultUnisexNoun,
},
predicateType: "adjective",
}; };
function EquativeExplorer() { function EquativeExplorer() {
@ -31,89 +37,17 @@ function EquativeExplorer() {
const newState = reducer(state, action); const newState = reducer(state, action);
unsafeSetState(newState); 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 <> return <>
<div className="d-flex flex-row"> <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>
<div className="form-check"> <VerbTable
<input textOptions={opts}
className="form-check-input" block={makeBlockWPronouns(state.predicatesSelected[state.predicateType])}
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)} />
</>; </>;
} }

View File

@ -14,7 +14,7 @@ export function sort(arr: (Adjective | UnisexNoun)[]): (Adjective | UnisexNoun)[
return arr.sort((a, b) => a.p.localeCompare(b.p)); 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 makeP = (p: T.Person): T.ArrayOneOrMore<T.PsString> => {
const b = assembleEquativeOutput(equativeMachine(p, e)); const b = assembleEquativeOutput(equativeMachine(p, e));
return ("long" in b ? b.long : b) as T.ArrayOneOrMore<T.PsString>; 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 unisexNouns = nouns.filter(x => isUnisexNoun(x)) as UnisexNoun[];
const inputs = { 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; export default inputs;

View File

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