gues-kucinako/src/Entries.tsx

import React, {useState} from "react";

import {updateEntry, getPassword} from "./requests";
import {declineSaimiar} from "./saimiar_morphology";
import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps, Conlang} from "./types";

interface BaseProps {
    id: number;
    conlang: Conlang;
    conlangEntry: string;
    english: string;
    langSpecific: React.ReactNode;
}

const EntryBase = (props: BaseProps) => {
    const [editing, setEditing] = useState(false);
    const [english, setEnglish] = useState(props.english);

    const mainEntryStyle = {
        display: "flex",
        justifyContent: "space-between",
        flexDirection: "row",
    };

    const controlStyle = {
        display: "flex",
        justifyContent: "space-between",
        flexDirection: "row",
        minWidth: "20%",
    };

    const save = () => {
        updateEntry(props.conlang, props.id, english);
    };

    const engTranslation = editing ? <input type="text" value={ english } onChange={ (evt) => setEnglish(evt.target.value) }/>
        : english;

    const EditControls = ({onSave}: { onSave: () => void }) => {
        const cancel = () => setEditing(false);
        const edit = (evt) => {
            evt.preventDefault();
            setEditing(true);
        };

        if (!getPassword()) {
            return null;
        }

        return (editing ? (<span>
            <button onClick={ onSave }>Save</button>
            <button onClick={ cancel }>Cancel</button>
        </span>)
            : <a href="" onClick={edit}>Edit</a>);
    };

    const expand = (evt) => {
        evt.preventDefault();
    };

    return (
        <div className="searchResult" key={ props.id }>
            <div style={mainEntryStyle}>
                <span><b>{ props.conlangEntry }</b> { engTranslation }</span>
                <span style={controlStyle}>
                    <a href="" onClick={expand}>Expand</a>
                    <EditControls onSave={save} />
                </span>
            </div>
            { props.langSpecific }
        </div>
    );
};

const SaiEntry = (props: {entry: SaiEntryProps}) => {
    const {entry} = props;

    const synCategory = entry.syn_category;
    const isNominal = synCategory === "nominal";

    const langSpecific = (
        <div>
            <span className="synclass">
                <i>{ entry.syn_category }</i>
                { entry.morph_type ? `\t\t${entry.morph_type}` : null }
                <br/>
                { isNominal ? formatMorphology(entry) : null }
            </span>
        </div>
    );

    return <EntryBase id={entry.id} conlang={Conlang.Saimiar} conlangEntry={entry.sai} english={entry.eng} langSpecific={langSpecific} />;
};

function formatMorphology(entry) {
    const decl = declineSaimiar(entry);
    if (!decl) {
        return "";
    }

    return (<span style={ {fontSize: "medium", color: "#6a3131"} } >
        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>,
        Adp: <i>{decl.adp}</i>,
        All: <i>{decl.all}</i>,
        Loc: <i>{decl.loc}</i>,
        Ell: <i>{decl.ell}</i>,
        Inst: <i>{decl.inst}</i>,
        Rel: <i>{decl.rel}</i>
    </span>);
}

const JutEntry = (props: {entry: JutEntryProps}) => {
    const {entry} = props;

    const langSpecific = (<div>
        <span className="synclass">
            {entry.syn_category} { entry.syn_category === "noun" ? `- ${entry.gender}` : null }
        </span>
    </div>);

    return <EntryBase id={entry.id} conlang={Conlang.Juteyuji} conlangEntry={entry.jut} english={entry.eng} langSpecific={langSpecific} />;
};

const ElesuEntry = (props: {entry: ElesuEntryProps}) => {
    const {entry} = props;

    const langSpecific = <div>
        <span className="synclass">
            { entry.syn_category }
        </span>
    </div>;

    return <EntryBase id={entry.id} conlang={Conlang.Elesu} conlangEntry={entry.elesu} english={entry.eng} langSpecific={langSpecific} />;
};

const TukEntry = (props: {entry: TukEntryProps}) => {
    const {entry} = props;
    const langSpecific = <div>
        <span className="synclass">
            { entry.syn_category }
        </span>
    </div>;

    return <EntryBase id={entry.id} conlang={Conlang.Tukvaysi} conlangEntry={entry.tuk} english={entry.eng} langSpecific={langSpecific} />;
};

export {SaiEntry, ElesuEntry, JutEntry, TukEntry};