src/App.tsx

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

src/dbtypes.ts

@@ -1,38 +0,0 @@
-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};