import React, {Component} from 'react'; import './App.scss'; import {declineSaimiar} from './saimiar_morphology'; 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 makeRequest(queryString, jsonHandler) { const effectiveUrl = `${backendUrl}/${queryString}`; fetch(`${effectiveUrl}`) .then((resp) => resp.json()) .then((json) => { jsonHandler(json); }); } const Entry = (props) => { const {conlang} = props; if (conlang === Conlang.Saimiar) { return ; } if (conlang === Conlang.Juteyuji) { return ; } return
Conlang { conlang } not yet supported
; }; const SaiEntry = (props) => { const {entry} = props; const synCategory = entry.syn_category; const isNominal = synCategory === 'nominal'; return (
{ entry.sai } - { entry.eng }
{ entry.syn_category } { entry.morph_type ? `\t\t${entry.morph_type}` : null }
{ isNominal ? formatMorphology(entry) : null }
); }; const JutEntry = (props) => { const {entry} = props; console.log(props); return (
{ entry.jut } - { entry.eng }
{ entry.syn_category === 'noun' ? entry.gender : null }
); }; function formatMorphology(entry) { const decl = declineSaimiar(entry); if (!decl) { return ''; } return ( Abs: {decl.abs}, Erg: {decl.erg}, Adp: {decl.adp}, All: {decl.all}, Loc: {decl.loc}, Ell: {decl.ell}, Inst: {decl.inst}, Rel: {decl.rel} ); } const Results = (props) => { 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 header = (
Searched for { props.searchTerm }, { searchType }, found { num } result(s)
); const entries = props.searchResults.map( (entry, _idx) => , ); return [header].concat(entries); }; const results = props.searchResults; return (
{ results ? content() : 'No search' }
); }; interface App { [x: string]: any; } class App extends Component { constructor(props) { super(props); this.input = React.createRef(); this.handleLangChange = this.handleLangChange.bind(this); this.searchEng = this.searchEng.bind(this); this.searchSaimiar = this.searchSaimiar.bind(this); this.searchJuteyuji = this.searchJuteyuji.bind(this); this.searchConlang = this.searchConlang.bind(this); this.state = { searchResults: null, 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 === '') { this.setState({searchResults: null, searchTerm: null, direction: null}); } else { makeRequest(request, (json) => { this.setState({searchResults: json, searchTerm, direction: SearchDirection.ToEnglish}); }); } } searchJuteyuji(searchTerm: string) { 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; console.log('Conlang in handlelangchange', conlang); this.setState({conlang, searchResults: null}); } render() { const conlangs = [Conlang.Saimiar, Conlang.Elesu, Conlang.Tukvaysi, Conlang.Juteyuji]; const langSelectDropdown = ( ); return (

Kucinako


{ langSelectDropdown }
); } } export default App;