Make editing Saimiar entries' english work
This commit is contained in:
parent
321afa3b12
commit
198bb6128a
@ -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"
|
||||
},
|
||||
};
|
||||
|
@ -37,6 +37,10 @@ input {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.searchResultHeader {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.synclass {
|
||||
color: #a63333;
|
||||
i {
|
||||
|
30
src/App.tsx
30
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 }
|
||||
|
@ -1,21 +1,78 @@
|
||||
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 />
|
||||
<span className="synclass">
|
||||
<i>{ entry.syn_category }</i>
|
||||
{ entry.morph_type ? `\t\t${entry.morph_type}` : null }
|
||||
<br/>
|
||||
{ isNominal ? formatMorphology(entry) : null }
|
||||
</span>
|
||||
<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 }
|
||||
<br/>
|
||||
{ isNominal ? formatMorphology(entry) : null }
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
34
src/requests.ts
Normal file
34
src/requests.ts
Normal file
@ -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};
|
Loading…
Reference in New Issue
Block a user