gues-kucinako/src/App.tsx

215 lines
6.6 KiB
TypeScript
Raw Normal View History

2021-09-13 01:05:41 -07:00
import React, {useState} from "react";
2019-01-22 00:41:13 -08:00
2021-09-13 01:05:41 -07:00
import "./App.scss";
import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps} from "./dbtypes";
import {SaiEntry, JutEntry, ElesuEntry, TukEntry} from "./Entries";
2021-09-13 01:05:41 -07:00
const backendUrl = "https://kucinakobackend.ichigo.everydayimshuflin.com";
2019-01-24 02:56:41 -08:00
enum Conlang {
2021-09-13 01:05:41 -07:00
Saimiar = "saimiar",
Elesu = "elesu",
Tukvaysi = "tukvaysi",
Juteyuji = "juteyuji",
2019-01-24 02:56:41 -08:00
}
2021-09-12 21:11:52 -07:00
enum SearchDirection {
ToConlang,
ToEnglish
}
const renderConlang = (conlang: Conlang): string => {
if (conlang === Conlang.Saimiar) {
2021-09-13 01:05:41 -07:00
return "Saimiar";
2021-09-12 02:07:44 -07:00
}
2021-09-12 00:55:17 -07:00
if (conlang === Conlang.Elesu) {
2021-09-13 01:05:41 -07:00
return "Elésu";
2021-09-12 02:07:44 -07:00
}
2021-09-12 00:55:17 -07:00
if (conlang === Conlang.Juteyuji) {
2021-09-13 01:05:41 -07:00
return "Juteyuji";
2021-09-12 02:07:44 -07:00
}
2021-09-12 00:55:17 -07:00
if (conlang === Conlang.Tukvaysi) {
2021-09-13 01:05:41 -07:00
return "Tukvaysi";
2021-09-12 02:07:44 -07:00
}
};
2021-09-12 22:55:46 -07:00
function buildRequest(searchTerm: string, conlang: Conlang, direction: SearchDirection, jsonHandler: (json: Object) => void) {
const specForConlang = {
2021-09-13 01:05:41 -07:00
[Conlang.Saimiar]: "sai",
[Conlang.Juteyuji]: "jut",
[Conlang.Tukvaysi]: "tuk",
[Conlang.Elesu]: "elesu",
2021-09-12 22:55:46 -07:00
};
2021-09-13 00:17:25 -07:00
const offset = 0;
const limit = 20;
2021-09-12 22:55:46 -07:00
const conlangDb = conlang.toString();
2021-09-13 00:17:25 -07:00
const conlangSpec = specForConlang[conlang];
2021-09-13 01:05:41 -07:00
const field = direction === SearchDirection.ToConlang ? "eng" : conlangSpec;
2021-09-13 00:17:25 -07:00
const params = new URLSearchParams([
[field, `like.*${searchTerm}*`],
2021-09-13 01:05:41 -07:00
["order", conlangSpec],
["limit", limit],
["offset", offset],
2021-09-13 01:36:16 -07:00
] as string[][]);
2021-09-13 00:17:25 -07:00
const effectiveUri = `${backendUrl}/${conlangDb}?${params}`;
2021-09-12 22:55:46 -07:00
fetch(`${effectiveUri}`)
.then((resp) => resp.json())
.then((json) => {
jsonHandler(json);
});
}
2021-09-12 21:35:46 -07:00
interface EntryProps {
conlang: Conlang;
2021-09-12 23:09:58 -07:00
entry: SaiEntryProps | JutEntryProps | ElesuEntryProps | TukEntryProps;
2021-09-12 21:35:46 -07:00
key: string;
}
const Entry = (props: EntryProps) => {
2021-09-12 02:07:44 -07:00
const {conlang} = props;
if (conlang === Conlang.Saimiar) {
2021-09-12 21:35:46 -07:00
return <SaiEntry entry={ props.entry as SaiEntryProps } />;
2021-09-12 02:07:44 -07:00
}
2021-09-12 00:55:17 -07:00
2021-09-12 20:48:11 -07:00
if (conlang === Conlang.Juteyuji) {
2021-09-12 21:35:46 -07:00
return <JutEntry entry={ props.entry as JutEntryProps } />;
2021-09-12 20:48:11 -07:00
}
2021-09-12 23:06:42 -07:00
if (conlang === Conlang.Elesu) {
return <ElesuEntry entry={ props.entry as ElesuEntryProps } />;
}
2021-09-12 23:09:58 -07:00
if (conlang === Conlang.Tukvaysi) {
return <TukEntry entry={ props.entry as TukEntryProps } />;
}
2021-09-12 01:07:30 -07:00
};
2021-09-12 21:35:46 -07:00
interface ResultsProps {
2021-09-12 21:43:26 -07:00
searchResults: Array<any>;
2021-09-12 21:35:46 -07:00
searchTerm: string;
conlang: Conlang;
direction: SearchDirection;
}
const Results = (props: ResultsProps) => {
2021-09-12 02:07:44 -07:00
const content = () => {
const {conlang} = props;
const num = props.searchResults.length;
2021-09-12 20:48:11 -07:00
const renderedName = renderConlang(conlang);
2021-09-12 21:11:52 -07:00
const searchType = (props.direction === SearchDirection.ToConlang) ? `English -> ${renderedName}` : `${renderedName} -> English`;
2021-09-13 01:05:41 -07:00
const result = num === 1 ? "result" : "results";
2021-09-12 02:07:44 -07:00
const header = (
<div className="searchResultHeader" key="header">
2021-09-13 01:04:43 -07:00
Searched for <b>{ props.searchTerm }</b>, { searchType }, found { num } { result }
2021-09-12 02:07:44 -07:00
</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">
2021-09-13 01:05:41 -07:00
{ results ? content() : "No search" }
2021-09-12 02:07:44 -07:00
</div>
);
2021-09-12 01:07:30 -07:00
};
2021-09-12 22:12:39 -07:00
const App = (_props) => {
2021-09-13 01:05:41 -07:00
const defaultConlang = window.sessionStorage.getItem("conlang") as Conlang || Conlang.Saimiar;
2021-09-12 22:12:39 -07:00
const [searchResults, setSearchResults] = useState(null);
const [conlang, setConlangState] = useState(defaultConlang);
2021-09-12 22:12:39 -07:00
const [direction, setDirection] = useState(null);
const [searchTerm, setSearchTerm] = useState(null);
2021-09-12 02:22:50 -07:00
2021-09-13 01:05:41 -07:00
const [searchBoxInput, setSearchBoxInput] = useState("");
2021-09-12 02:07:44 -07:00
const setConlang = (conlang: Conlang) => {
setConlangState(conlang);
2021-09-13 01:05:41 -07:00
window.sessionStorage.setItem("conlang", conlang);
};
2021-09-12 22:12:39 -07:00
const searchConlang = (_evt) => {
const searchTerm = searchBoxInput;
2021-09-13 01:05:41 -07:00
if (searchTerm === "") {
2021-09-12 22:12:39 -07:00
setSearchResults(null);
setSearchTerm(null);
setDirection(null);
2021-09-12 22:55:46 -07:00
return;
2021-09-12 02:07:44 -07:00
}
2021-09-12 23:06:42 -07:00
buildRequest(searchTerm, conlang, SearchDirection.ToEnglish, (json) => {
setSearchResults(json);
setSearchTerm(searchTerm);
setDirection(SearchDirection.ToEnglish);
});
2021-09-12 22:12:39 -07:00
};
2021-09-12 20:48:11 -07:00
2021-09-12 22:12:39 -07:00
const searchEng = (_evt) => {
const searchTerm = searchBoxInput;
2021-09-13 01:05:41 -07:00
if (searchTerm === "") {
2021-09-12 22:12:39 -07:00
setSearchResults(null);
setSearchTerm(null);
2021-09-12 22:55:46 -07:00
setDirection(null);
2021-09-12 02:07:44 -07:00
} else {
2021-09-12 22:55:46 -07:00
buildRequest(searchTerm, conlang, SearchDirection.ToConlang, (json) => {
2021-09-12 22:12:39 -07:00
setSearchResults(json);
setSearchTerm(searchTerm);
setDirection(SearchDirection.ToConlang);
2021-09-12 02:07:44 -07:00
});
}
2021-09-12 22:12:39 -07:00
};
2021-09-12 02:07:44 -07:00
2021-09-12 22:12:39 -07:00
const handleLangChange = (evt) => {
const conlang: Conlang = evt.target.value as Conlang;
2021-09-12 22:12:39 -07:00
setConlang(conlang);
setSearchResults(null);
};
2021-09-12 02:07:44 -07:00
2021-09-12 22:12:39 -07:00
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>
);
2021-09-12 22:12:39 -07:00
return (
<main>
<div className="container">
<div className="search">
2021-09-12 22:17:30 -07:00
<h1>Kucinako - Wordbook of Arzhanai languages</h1>
2021-09-12 23:06:42 -07:00
<p><b>Kucinako</b> is a dictionary of words in various languages of the world Arzhanø, and their English
2021-09-12 22:17:30 -07:00
equivalents.</p>
2021-09-12 22:12:39 -07:00
<div className="textInput">
<input className="textInput" type="text" value={ searchBoxInput } onChange={ (evt) => {
setSearchBoxInput(evt.target.value);
} } />
2021-09-12 02:07:44 -07:00
</div>
2021-09-12 22:12:39 -07:00
<br/>
{ langSelectDropdown }
<button onClick={ searchConlang } className="searchButton">{renderConlang(conlang)}</button>
<button onClick={ searchEng } className="searchButton">English</button>
2021-09-12 02:07:44 -07:00
</div>
2021-09-12 22:12:39 -07:00
<Results
searchResults={ searchResults }
searchTerm= { searchTerm }
conlang={ conlang }
direction={ direction }
/>
</div>
</main>
);
};
2019-01-22 00:41:13 -08:00
export default App;