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",
        flexWrap: "wrap",
    };

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

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

    const engTranslation = editing ? 
        <input 
            type="text" 
            value={ english } 
            onChange={ (evt) => setEnglish(evt.target.value) }
            style={{ width: "100%", marginTop: "5px" }}
        /> : 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>);
    };

    return (
        <div className="searchResult" key={ props.id }>
            <div style={mainEntryStyle}>
                <span><b>{ props.conlangEntry }</b> { engTranslation }</span>
                <span style={controlStyle}>
                    <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 barStyle = {
        display: "inline-flex",
        gap: "1em",
    };

    let morphology = null;
    if (isNominal) {
        const decl = declineSaimiar(entry);
        if (decl) {
            morphology = (
            <table className="saimiarNounMorpho">
            <tr>
                <td>Abs: <i>{decl.abs}</i></td><td>Erg: <i>{decl.erg}</i></td><td>Adp: <i>{decl.adp}</i></td>
            </tr>
            <tr>
                <td>All: <i>{decl.all}</i></td><td>Loc: <i>{decl.loc}</i></td><td>Ell: <i>{decl.ell}</i></td>
            </tr>
            <tr>
                <td>Inst: <i>{decl.inst}</i></td><td>Rel: <i>{decl.rel}</i></td><td></td>
            </tr>
            </table>);
        }
    }

    const langSpecific = (
        <div className="additionalNotes">
            <span style={barStyle}>
                <span className="synCategory">
                    <i>{ entry.syn_category }</i>
                </span>
                <span className="morphType">
                    { entry.morph_type ? `\t\t${entry.morph_type}` : null }
                </span>
                { entry.etym ? <span className="etym">etym.: <i>{entry.etym}</i></span>
                    : null
                }
                { entry.semantic_field ? <span className="semField">{entry.semantic_field}</span> : null }
            </span>
            <br/>
            { morphology }
        </div>
    );

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

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