Compare commits
8 Commits
146b8126a2
...
e5b6d99f23
Author | SHA1 | Date | |
---|---|---|---|
|
e5b6d99f23 | ||
|
f4e674c88f | ||
|
9192e070e1 | ||
|
4593473b33 | ||
|
bb80900eb0 | ||
|
7c5e16acc3 | ||
|
3a261bef95 | ||
|
12207c30b1 |
242
src/App.tsx
242
src/App.tsx
@ -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
38
src/dbtypes.ts
Normal 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};
|
Loading…
Reference in New Issue
Block a user