more refactor
This commit is contained in:
parent
edca391118
commit
ad31f2b966
|
@ -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)} />
|
||||
</>;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>;
|
||||
|
|
|
@ -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;
|
|
@ -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,
|
||||
};
|
||||
// }
|
||||
|
|
|
@ -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>;
|
||||
}
|
|
@ -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,
|
||||
};
|
Loading…
Reference in New Issue