gues-kucinako/src/App.tsx
2021-09-13 01:36:16 -07:00

215 lines
6.6 KiB
TypeScript

import React, {useState} from "react";
import "./App.scss";
import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps} from "./dbtypes";
import {SaiEntry, JutEntry, ElesuEntry, TukEntry} from "./Entries";
const backendUrl = "https://kucinakobackend.ichigo.everydayimshuflin.com";
enum Conlang {
Saimiar = "saimiar",
Elesu = "elesu",
Tukvaysi = "tukvaysi",
Juteyuji = "juteyuji",
}
enum SearchDirection {
ToConlang,
ToEnglish
}
const renderConlang = (conlang: Conlang): string => {
if (conlang === Conlang.Saimiar) {
return "Saimiar";
}
if (conlang === Conlang.Elesu) {
return "Elésu";
}
if (conlang === Conlang.Juteyuji) {
return "Juteyuji";
}
if (conlang === Conlang.Tukvaysi) {
return "Tukvaysi";
}
};
function buildRequest(searchTerm: string, conlang: Conlang, direction: SearchDirection, jsonHandler: (json: Object) => void) {
const specForConlang = {
[Conlang.Saimiar]: "sai",
[Conlang.Juteyuji]: "jut",
[Conlang.Tukvaysi]: "tuk",
[Conlang.Elesu]: "elesu",
};
const offset = 0;
const limit = 20;
const conlangDb = conlang.toString();
const conlangSpec = specForConlang[conlang];
const field = direction === SearchDirection.ToConlang ? "eng" : conlangSpec;
const params = new URLSearchParams([
[field, `like.*${searchTerm}*`],
["order", conlangSpec],
["limit", limit],
["offset", offset],
] as string[][]);
const effectiveUri = `${backendUrl}/${conlangDb}?${params}`;
fetch(`${effectiveUri}`)
.then((resp) => resp.json())
.then((json) => {
jsonHandler(json);
});
}
interface EntryProps {
conlang: Conlang;
entry: SaiEntryProps | JutEntryProps | ElesuEntryProps | TukEntryProps;
key: string;
}
const Entry = (props: EntryProps) => {
const {conlang} = props;
if (conlang === Conlang.Saimiar) {
return <SaiEntry entry={ props.entry as SaiEntryProps } />;
}
if (conlang === Conlang.Juteyuji) {
return <JutEntry entry={ props.entry as JutEntryProps } />;
}
if (conlang === Conlang.Elesu) {
return <ElesuEntry entry={ props.entry as ElesuEntryProps } />;
}
if (conlang === Conlang.Tukvaysi) {
return <TukEntry entry={ props.entry as TukEntryProps } />;
}
};
interface ResultsProps {
searchResults: Array<any>;
searchTerm: string;
conlang: Conlang;
direction: SearchDirection;
}
const Results = (props: ResultsProps) => {
const content = () => {
const {conlang} = props;
const num = props.searchResults.length;
const renderedName = renderConlang(conlang);
const searchType = (props.direction === SearchDirection.ToConlang) ? `English -> ${renderedName}` : `${renderedName} -> English`;
const result = num === 1 ? "result" : "results";
const header = (
<div className="searchResultHeader" key="header">
Searched for <b>{ props.searchTerm }</b>, { searchType }, found { num } { result }
</div>);
const entries = props.searchResults.map(
(entry, _idx) => <Entry entry={ entry } key= { entry.id } conlang={ conlang } />,
);
return [header].concat(entries);
};
const results = props.searchResults;
return (
<div className="results">
{ results ? content() : "No search" }
</div>
);
};
const App = (_props) => {
const defaultConlang = window.sessionStorage.getItem("conlang") as Conlang || Conlang.Saimiar;
const [searchResults, setSearchResults] = useState(null);
const [conlang, setConlangState] = useState(defaultConlang);
const [direction, setDirection] = useState(null);
const [searchTerm, setSearchTerm] = useState(null);
const [searchBoxInput, setSearchBoxInput] = useState("");
const setConlang = (conlang: Conlang) => {
setConlangState(conlang);
window.sessionStorage.setItem("conlang", conlang);
};
const searchConlang = (_evt) => {
const searchTerm = searchBoxInput;
if (searchTerm === "") {
setSearchResults(null);
setSearchTerm(null);
setDirection(null);
return;
}
buildRequest(searchTerm, conlang, SearchDirection.ToEnglish, (json) => {
setSearchResults(json);
setSearchTerm(searchTerm);
setDirection(SearchDirection.ToEnglish);
});
};
const searchEng = (_evt) => {
const searchTerm = searchBoxInput;
if (searchTerm === "") {
setSearchResults(null);
setSearchTerm(null);
setDirection(null);
} else {
buildRequest(searchTerm, conlang, SearchDirection.ToConlang, (json) => {
setSearchResults(json);
setSearchTerm(searchTerm);
setDirection(SearchDirection.ToConlang);
});
}
};
const handleLangChange = (evt) => {
const conlang: Conlang = evt.target.value as Conlang;
setConlang(conlang);
setSearchResults(null);
};
const conlangs = [Conlang.Saimiar, Conlang.Elesu, Conlang.Tukvaysi, Conlang.Juteyuji];
const langSelectDropdown = (
<select value={conlang} onChange={ handleLangChange }>
{conlangs.map((conlang) => <option value={conlang} key={conlang}>{renderConlang(conlang)}</option>)}
</select>
);
return (
<main>
<div className="container">
<div className="search">
<h1>Kucinako - Wordbook of Arzhanai languages</h1>
<p><b>Kucinako</b> is a dictionary of words in various languages of the world Arzhanø, and their English
equivalents.</p>
<div className="textInput">
<input className="textInput" type="text" value={ searchBoxInput } onChange={ (evt) => {
setSearchBoxInput(evt.target.value);
} } />
</div>
<br/>
{ langSelectDropdown }
<button onClick={ searchConlang } className="searchButton">{renderConlang(conlang)}</button>
<button onClick={ searchEng } className="searchButton">English</button>
</div>
<Results
searchResults={ searchResults }
searchTerm= { searchTerm }
conlang={ conlang }
direction={ direction }
/>
</div>
</main>
);
};
export default App;