diff --git a/.eslintrc.js b/.eslintrc.js index 5e07b07..88be7f5 100644 --- a/.eslintrc.js +++ b/.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" }, }; diff --git a/src/App.scss b/src/App.scss index 5fd5a1c..4b7557a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -37,6 +37,10 @@ input { padding: 5px; } +.searchResultHeader { + padding-bottom: 1em; +} + .synclass { color: #a63333; i { diff --git a/src/App.tsx b/src/App.tsx index 29ae225..5bc6d31 100644 --- a/src/App.tsx +++ b/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 ( + + setPasswordStr(evt.target.value) } /> + + + ); +}; enum Conlang { Saimiar = "saimiar", @@ -183,8 +204,14 @@ const App = (_props) => { ); + const showPasswordBox = () => { + const modal: any = document.querySelector(".passwordDialog"); + modal.showModal(); + }; + return (
+

Kucinako - Wordbook of Arzhanai languages

@@ -199,6 +226,7 @@ const App = (_props) => { { langSelectDropdown } +
{ 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 ? setEnglish(evt.target.value) }/> + : english; + + let editButton = null; + if (getPassword()) { + editButton = editing ? ( + + + ) + : Edit; + } + return (
- { entry.sai } - { entry.eng } -
- - { entry.syn_category } - { entry.morph_type ? `\t\t${entry.morph_type}` : null } -
- { isNominal ? formatMorphology(entry) : null } -
+
+ { entry.sai } - { engTranslation } + + Expand + { editButton } + +
+
+ + { entry.syn_category } + { entry.morph_type ? `\t\t${entry.morph_type}` : null } +
+ { isNominal ? formatMorphology(entry) : null } +
+
); }; diff --git a/src/requests.ts b/src/requests.ts new file mode 100644 index 0000000..52a40d1 --- /dev/null +++ b/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};