Make editing Saimiar entries' english work

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
       "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
       "no-redeclare": "off",
       "@typescript-eslint/no-redeclare": ["error"],
-      "quotes": ["error", "double"]
+      "quotes": ["error", "double"],
+      "no-warning-comments": "off"
 	},
 };

src/App.scss

@@ -37,6 +37,10 @@ input {
     padding: 5px;
 }
 
+.searchResultHeader {
+    padding-bottom: 1em;
+}
+
 .synclass {
     color: #a63333;
     i {

src/App.tsx

@@ -3,8 +3,29 @@ import React, {useState} from "react";
 import "./App.scss";
 import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps} from "./dbtypes";
 import {SaiEntry, JutEntry, ElesuEntry, TukEntry} from "./Entries";
+import {backendUrl, setPassword} from "./requests";
 
-const backendUrl = "https://kucinakobackend.ichigo.everydayimshuflin.com";
+const PasswordDialog = (_props) => {
+    const [password, setPasswordStr] = useState("");
+
+    const modal = (): any => document.querySelector(".passwordDialog");
+    const save = () => {
+        setPassword(password);
+        modal().close();
+        location.reload(); // TODO this is a hack
+    };
+
+    const cancel = () => {
+        modal().close();
+    };
+
+    return (
+        <dialog className="passwordDialog">
+            <input type="password" placeholder="enter password" value={password} onChange={ (evt) => setPasswordStr(evt.target.value) } />
+            <button onClick={save}>Save</button>
+            <button onClick={cancel}>Cancel</button>
+        </dialog>);
+};
 
 enum Conlang {
     Saimiar = "saimiar",
@@ -183,8 +204,14 @@ const App = (_props) => {
         </select>
     );
 
+    const showPasswordBox = () => {
+        const modal: any = document.querySelector(".passwordDialog");
+        modal.showModal();
+    };
+
     return (
         <main>
+            <PasswordDialog />
             <div className="container">
                 <div className="search">
                     <h1>Kucinako - Wordbook of Arzhanai languages</h1>
@@ -199,6 +226,7 @@ const App = (_props) => {
                     { langSelectDropdown }
                     <button onClick={ searchConlang } className="searchButton">{renderConlang(conlang)}</button>
                     <button onClick={ searchEng } className="searchButton">English</button>
+                    <button onClick={ showPasswordBox } className="searchButton">Password</button>
                 </div>
                 <Results
                     searchResults={ searchResults }

src/Entries.tsx

@@ -1,15 +1,71 @@
-import React from "react";
+import React, {useState} from "react";
+
+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);
+
+    const [editing, setEditing] = useState(false);
+    const [english, setEnglish] = useState(entry.eng);
+
     const synCategory = entry.syn_category;
     const isNominal = synCategory === "nominal";
+
+    const mainEntryStyle = {
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: "row",
+    };
+
+    const controlStyle = {
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        minWidth: "20%",
+    };
+
+    const edit = (evt) => {
+        evt.preventDefault();
+        setEditing(true);
+    };
+
+    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 }>
-            <b>{ entry.sai }</b> - { entry.eng }
-            <br />
+            <div style={mainEntryStyle}>
+                <span><b>{ entry.sai }</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 }
@@ -17,6 +73,7 @@ const SaiEntry = (props: {entry: SaiEntryProps}) => {
                     { isNominal ? formatMorphology(entry) : null }
                 </span>
             </div>
+        </div>
     );
 };
 

src/requests.ts

@@ -0,0 +1,34 @@
+import jwt from "jsonwebtoken";
+
+const backendUrl = "https://kucinakobackend.ichigo.everydayimshuflin.com";
+
+const getPassword = (): string | null => window.sessionStorage.getItem("password");
+
+const setPassword = (password: string) => {
+    window.sessionStorage.setItem("password", password);
+};
+
+const makeAuthorizationHeader = (key: string): string => {
+    const unixTime = Date.now() / 1000;
+    const token = jwt.sign({role: "conlang_postgrest_rw", exp: unixTime + 60}, key);
+    return `Bearer ${token}`;
+};
+
+const updateEntry = (conlangDb: string, id: number, english: string) => {
+    const url = `${backendUrl}/${conlangDb}?id=eq.${id}`;
+
+    const request = new Request(url, {
+        method: "PATCH",
+        headers: {
+            Authorization: makeAuthorizationHeader(getPassword()),
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            eng: english,
+        }),
+    });
+
+    fetch(request).then((resp) => console.log(resp));
+};
+
+export {backendUrl, updateEntry, getPassword, setPassword};