Compare commits

...

8 Commits

Author SHA1 Message Date
Greg Shuflin
e5b6d99f23 Store language in browser session storage 2021-09-12 23:15:32 -07:00
Greg Shuflin
f4e674c88f Tukvaysi support 2021-09-12 23:09:58 -07:00
Greg Shuflin
9192e070e1 Add Elesu support 2021-09-12 23:06:42 -07:00
Greg Shuflin
4593473b33 Tighten up request logic 2021-09-12 22:55:46 -07:00
Greg Shuflin
bb80900eb0 Explanatory text 2021-09-12 22:17:30 -07:00
Greg Shuflin
7c5e16acc3 Remove console.log 2021-09-12 22:13:04 -07:00
Greg Shuflin
3a261bef95 Convert App to functional component 2021-09-12 22:12:39 -07:00
Greg Shuflin
12207c30b1 Move type definitions 2021-09-12 21:43:26 -07:00
2 changed files with 161 additions and 119 deletions

View File

@ -1,7 +1,8 @@
import React, {Component} from 'react'; import React, {useState} from 'react';
import './App.scss'; import './App.scss';
import {declineSaimiar} from './saimiar_morphology'; import {declineSaimiar} from './saimiar_morphology';
import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps} from './dbtypes';
const backendUrl = 'https://kucinakobackend.ichigo.everydayimshuflin.com'; const backendUrl = 'https://kucinakobackend.ichigo.everydayimshuflin.com';
@ -35,9 +36,20 @@ const renderConlang = (conlang: Conlang): string => {
} }
}; };
function makeRequest(queryString, jsonHandler) { function buildRequest(searchTerm: string, conlang: Conlang, direction: SearchDirection, jsonHandler: (json: Object) => void) {
const effectiveUrl = `${backendUrl}/${queryString}`; const specForConlang = {
fetch(`${effectiveUrl}`) [Conlang.Saimiar]: 'sai',
[Conlang.Juteyuji]: 'jut',
[Conlang.Tukvaysi]: 'tuk',
[Conlang.Elesu]: 'elesu',
};
const conlangDb = conlang.toString();
const field = direction === SearchDirection.ToConlang ? 'eng' : specForConlang[conlang];
const query = `${conlangDb}?${field}=like.*${searchTerm}*`;
const effectiveUri = `${backendUrl}/${query}`;
fetch(`${effectiveUri}`)
.then((resp) => resp.json()) .then((resp) => resp.json())
.then((json) => { .then((json) => {
jsonHandler(json); jsonHandler(json);
@ -46,7 +58,7 @@ function makeRequest(queryString, jsonHandler) {
interface EntryProps { interface EntryProps {
conlang: Conlang; conlang: Conlang;
entry: SaiEntryProps | JutEntryProps; entry: SaiEntryProps | JutEntryProps | ElesuEntryProps | TukEntryProps;
key: string; key: string;
} }
@ -60,16 +72,14 @@ const Entry = (props: EntryProps) => {
return <JutEntry entry={ props.entry as JutEntryProps } />; return <JutEntry entry={ props.entry as JutEntryProps } />;
} }
return <div>Conlang { conlang } not yet supported</div>; if (conlang === Conlang.Elesu) {
}; return <ElesuEntry entry={ props.entry as ElesuEntryProps } />;
}
interface SaiEntryProps { if (conlang === Conlang.Tukvaysi) {
id: number; return <TukEntry entry={ props.entry as TukEntryProps } />;
sai: string; }
eng: string; };
syn_category: string;
morph_type: string;
}
const SaiEntry = (props: {entry: SaiEntryProps}) => { const SaiEntry = (props: {entry: SaiEntryProps}) => {
const {entry} = props; const {entry} = props;
@ -89,17 +99,8 @@ const SaiEntry = (props: {entry: SaiEntryProps}) => {
); );
}; };
interface JutEntryProps {
id: number;
jut: string;
eng: string;
syn_category: string;
gender: string;
}
const JutEntry = (props: {entry: JutEntryProps}) => { const JutEntry = (props: {entry: JutEntryProps}) => {
const {entry} = props; const {entry} = props;
console.log(props);
return ( return (
<div className="searchResult" key={ entry.id }> <div className="searchResult" key={ entry.id }>
@ -111,6 +112,32 @@ const JutEntry = (props: {entry: JutEntryProps}) => {
</div>); </div>);
}; };
const ElesuEntry = (props: {entry: ElesuEntryProps}) => {
const {entry} = props;
return (
<div className="searchResult" key={ entry.id }>
<b>{ entry.elesu }</b> - { entry.eng }
<br/>
<span className="synclass">
{ entry.syn_category }
</span>
</div>);
};
const TukEntry = (props: {entry: TukEntryProps}) => {
const {entry} = props;
return (
<div className="searchResult" key={ entry.id }>
<b>{ entry.tuk }</b> - { entry.eng }
<br/>
<span className="synclass">
{ entry.syn_category }
</span>
</div>);
};
function formatMorphology(entry) { function formatMorphology(entry) {
const decl = declineSaimiar(entry); const decl = declineSaimiar(entry);
if (!decl) { if (!decl) {
@ -129,7 +156,7 @@ function formatMorphology(entry) {
} }
interface ResultsProps { interface ResultsProps {
searchResults: any; searchResults: Array<any>;
searchTerm: string; searchTerm: string;
conlang: Conlang; conlang: Conlang;
direction: SearchDirection; direction: SearchDirection;
@ -160,113 +187,90 @@ const Results = (props: ResultsProps) => {
); );
}; };
interface App { const App = (_props) => {
[x: string]: any; 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);
class App extends Component { const [searchBoxInput, setSearchBoxInput] = useState('');
constructor(props) {
super(props);
this.input = React.createRef();
this.handleLangChange = this.handleLangChange.bind(this);
this.searchEng = this.searchEng.bind(this); const setConlang = (conlang: Conlang) => {
this.searchSaimiar = this.searchSaimiar.bind(this); setConlangState(conlang);
this.searchJuteyuji = this.searchJuteyuji.bind(this); window.sessionStorage.setItem('conlang', conlang);
this.searchConlang = this.searchConlang.bind(this); };
this.state = { const searchConlang = (_evt) => {
searchResults: null, const searchTerm = searchBoxInput;
conlang: Conlang.Saimiar,
direction: null,
searchTerm: null,
};
}
searchConlang(_evt) {
const searchTerm = this.input.current.value;
const {conlang} = this.state;
if (conlang === Conlang.Saimiar) {
this.searchSaimiar(searchTerm);
} else if (conlang === Conlang.Juteyuji) {
this.searchJuteyuji(searchTerm);
} else {
console.error(`Conlang ${conlang} not supported`);
}
}
searchSaimiar(searchTerm: string) {
const request = `saimiar?sai=like.*${searchTerm}*`;
if (searchTerm === '') { if (searchTerm === '') {
this.setState({searchResults: null, searchTerm: null, direction: null}); 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 { } else {
makeRequest(request, (json) => { buildRequest(searchTerm, conlang, SearchDirection.ToConlang, (json) => {
this.setState({searchResults: json, searchTerm, direction: SearchDirection.ToEnglish}); setSearchResults(json);
setSearchTerm(searchTerm);
setDirection(SearchDirection.ToConlang);
}); });
} }
} };
searchJuteyuji(searchTerm: string) { const handleLangChange = (evt) => {
const request = `juteyuji?jut=like.*${searchTerm}*`;
if (searchTerm === '') {
this.setState({searchResults: null, searchTerm: null, direction: null});
} else {
makeRequest(request, (json) => {
this.setState({searchResults: json, searchTerm, direction: SearchDirection.ToEnglish});
});
}
}
searchEng(_evt) {
const searchTerm = this.input.current.value;
const {conlang} = this.state;
const request = `${conlang}?eng=like.*${searchTerm}*`;
if (searchTerm === '') {
this.setState({searchResults: null, searchTerm: null});
} else {
makeRequest(request, (json) => {
this.setState({searchResults: json, searchTerm, direction: SearchDirection.ToConlang});
});
}
}
handleLangChange(evt) {
const conlang: Conlang = evt.target.value as Conlang; const conlang: Conlang = evt.target.value as Conlang;
console.log('Conlang in handlelangchange', conlang); setConlang(conlang);
this.setState({conlang, searchResults: null}); setSearchResults(null);
} };
render() { const conlangs = [Conlang.Saimiar, Conlang.Elesu, Conlang.Tukvaysi, Conlang.Juteyuji];
const conlangs = [Conlang.Saimiar, Conlang.Elesu, Conlang.Tukvaysi, Conlang.Juteyuji]; const langSelectDropdown = (
const langSelectDropdown = ( <select value={conlang} onChange={ handleLangChange }>
<select ref={ this.langSelection } onChange={ this.handleLangChange } defaultValue={Conlang.Saimiar}> {conlangs.map((conlang) => <option value={conlang} key={conlang}>{renderConlang(conlang)}</option>)}
{conlangs.map((conlang) => <option value={conlang} key={conlang}>{renderConlang(conlang)}</option>)} </select>
</select> );
);
return ( return (
<main> <main>
<div className="container"> <div className="container">
<div className="search"> <div className="search">
<h1>Kucinako</h1> <h1>Kucinako - Wordbook of Arzhanai languages</h1>
<div className="textInput"> <p><b>Kucinako</b> is a dictionary of words in various languages of the world Arzhanø, and their English
<input className="textInput" type="text" ref={ this.input } /> equivalents.</p>
</div> <div className="textInput">
<br/> <input className="textInput" type="text" value={ searchBoxInput } onChange={ (evt) => {
{ langSelectDropdown } setSearchBoxInput(evt.target.value);
<button onClick={ this.searchConlang } className="searchButton">{renderConlang(this.state.conlang)}</button> } } />
<button onClick={ this.searchEng } className="searchButton">English</button>
</div> </div>
<Results <br/>
searchResults={ this.state.searchResults } { langSelectDropdown }
searchTerm= { this.state.searchTerm } <button onClick={ searchConlang } className="searchButton">{renderConlang(conlang)}</button>
conlang={ this.state.conlang } <button onClick={ searchEng } className="searchButton">English</button>
direction={ this.state.direction }
/>
</div> </div>
</main> <Results
); searchResults={ searchResults }
} searchTerm= { searchTerm }
} conlang={ conlang }
direction={ direction }
/>
</div>
</main>
);
};
export default App; export default App;

38
src/dbtypes.ts Normal file
View File

@ -0,0 +1,38 @@
interface SaiEntryProps {
id: number;
sai: string;
eng: string;
syn_category: string;
morph_type: string;
notes: string;
}
interface JutEntryProps {
id: number;
jut: string;
eng: string;
syn_category: string;
gender: string;
notes: string;
}
interface ElesuEntryProps {
id: number;
elesu: string;
eng: string;
syn_category: string;
gender: string;
sai_borrowing: string;
notes: string;
proto_southern_root: string;
}
interface TukEntryProps {
id: number;
tuk: string;
eng: string;
syn_category: string;
notes: string;
}
export {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps};