Generalize entry logic into EntryBase

src/Entries.tsx

@@ -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) {

src/requests.ts

@@ -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",