Store language in browser session storage

src/App.tsx

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

src/dbtypes.ts

@@ -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};