Generalize entry logic into EntryBase
This commit is contained in:
parent
0b7ee6b3c6
commit
4a73e9983a
@ -1,18 +1,21 @@
|
||||
import React, {useState} from "react";
|
||||
|
||||
import {Conlang} from "./dbtypes";
|
||||
import {updateEntry, getPassword} from "./requests";
|
||||
import {declineSaimiar} from "./saimiar_morphology";
|
||||
import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps} from "./dbtypes";
|
||||
|
||||
const SaiEntry = (props: {entry: SaiEntryProps}) => {
|
||||
const {entry} = props;
|
||||
console.log(entry);
|
||||
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(entry.eng);
|
||||
|
||||
const synCategory = entry.syn_category;
|
||||
const isNominal = synCategory === "nominal";
|
||||
const [english, setEnglish] = useState(props.english);
|
||||
|
||||
const mainEntryStyle = {
|
||||
display: "flex",
|
||||
@ -27,56 +30,69 @@ const SaiEntry = (props: {entry: SaiEntryProps}) => {
|
||||
minWidth: "20%",
|
||||
};
|
||||
|
||||
const edit = (evt) => {
|
||||
evt.preventDefault();
|
||||
setEditing(true);
|
||||
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();
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
updateEntry("saimiar", entry.id, english);
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
setEditing(false);
|
||||
};
|
||||
|
||||
const engTranslation = editing ? <input type="text" value={ english } onChange={ (evt) => setEnglish(evt.target.value) }/>
|
||||
: english;
|
||||
|
||||
let editButton = null;
|
||||
if (getPassword()) {
|
||||
editButton = editing ? (<span>
|
||||
<button onClick={ save }>Save</button>
|
||||
<button onClick={ cancel }>Cancel</button>
|
||||
</span>)
|
||||
: <a href="" onClick={edit}>Edit</a>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="searchResult" key={ entry.id }>
|
||||
<div className="searchResult" key={ props.id }>
|
||||
<div style={mainEntryStyle}>
|
||||
<span><b>{ entry.sai }</b> - { engTranslation }</span>
|
||||
<span><b>{ props.conlangEntry }</b> { engTranslation }</span>
|
||||
<span style={controlStyle}>
|
||||
<a href="" onClick={expand}>Expand</a>
|
||||
{ editButton }
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="synclass">
|
||||
<i>{ entry.syn_category }</i>
|
||||
{ entry.morph_type ? `\t\t${entry.morph_type}` : null }
|
||||
<br/>
|
||||
{ isNominal ? formatMorphology(entry) : null }
|
||||
<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) {
|
||||
|
@ -16,8 +16,8 @@ const makeAuthorizationHeader = (key: string): string => {
|
||||
return `Bearer ${token}`;
|
||||
};
|
||||
|
||||
const updateEntry = (conlangDb: string, id: number, english: string) => {
|
||||
const url = `${backendUrl}/${conlangDb}?id=eq.${id}`;
|
||||
const updateEntry = (conlang: Conlang, id: number, english: string) => {
|
||||
const url = `${backendUrl}/${conlang.toString()}?id=eq.${id}`;
|
||||
|
||||
const request = new Request(url, {
|
||||
method: "PATCH",
|
||||
|
Loading…
Reference in New Issue
Block a user