General improvements for non-Sai conlangs

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
         "@typescript-eslint"
 	],
 	rules: {
-      "arrow-parens": ["error", "always"]
+      "arrow-parens": ["error", "always"],
+      "indent": ["error", 4]
 	},
 };

index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./src/App.jsx";
+import App from "./src/App.tsx";
 
 const root = document.getElementById("root");
 ReactDOM.render(<App />, root);

package.json

@@ -10,8 +10,9 @@
     "start": "parcel index.html",
     "build": "parcel build index.html --no-source-maps",
     "prebuild": "yarn run typecheck",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src/*"
+    "typecheck": "tsc --noEmit --jsx preserve",
+    "lint": "eslint src/*",
+    "lint-fix": "eslint src/* --fix"
   },
   "devDependencies": {
     "@parcel/transformer-image": "2.0.0-rc.0",

src/App.jsx

@@ -1,180 +0,0 @@
-import React, {Component} from 'react';
-
-import './App.scss';
-import {declineSaimiar} from './saimiar_morphology.ts';
-
-const backendUrl = 'https://kucinakobackend.ichigo.everydayimshuflin.com';
-
-function makeRequest(queryString, jsonHandler) {
-	const effectiveUrl = `${backendUrl}/${queryString}`;
-	fetch(`${effectiveUrl}`)
-		.then((resp) => resp.json())
-		.then((json) => {
-			jsonHandler(json);
-		});
-}
-
-function renderConlangName(name) {
-	if (name === 'saimiar') {
-		return 'Saimiar';
-	}
-
-	if (name === 'elesu') {
-		return 'Elésu';
-	}
-
-	if (name === 'juteyuji') {
-		return 'Juteyuji';
-	}
-
-	if (name === 'tukvaysi') {
-		return 'Tukvaysi';
-	}
-}
-
-const Entry = (props) => {
-	const {conlang} = props;
-	if (conlang === 'saimiar') {
-		return <SaiEntry entry={ props.entry } />;
-	}
-
-	return <div>Unknown entry type for { conlang }</div>;
-};
-
-const SaiEntry = (props) => {
-	const {entry} = props;
-	const synCategory = entry.syn_category;
-	const isNominal = synCategory === 'nominal';
-	return (
-		<div className="searchResult" key={ entry.id }>
-			<b>{ entry.sai }</b> - { entry.eng }
-			<br />
-			<span className="synclass">
-				<i>{ entry.syn_category }</i>
-				{ entry.morph_type ? `\t\t${entry.morph_type}` : null }
-				<br/>
-				{ isNominal ? formatMorphology(entry) : null }
-			</span>
-		</div>
-	);
-};
-
-function formatMorphology(entry) {
-	const decl = declineSaimiar(entry);
-	if (!decl) {
-		return '';
-	}
-
-	return (<span style={ {fontSize: 'medium', color: '#6a3131'} } >
-        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>,
-        Adp: <i>{decl.adp}</i>,
-        All: <i>{decl.all}</i>,
-        Loc: <i>{decl.loc}</i>,
-        Ell: <i>{decl.ell}</i>,
-        Inst: <i>{decl.inst}</i>,
-        Rel: <i>{decl.rel}</i>
-	</span>);
-}
-
-const Results = (props) => {
-	const content = () => {
-		const {conlang} = props;
-		const num = props.searchResults.length;
-		const renderedName = renderConlangName(conlang);
-		const searchType = (props.direction === 'toConlang') ? `English -> ${renderedName}` : `${renderedName} -> English`;
-		const header = (
-			<div className="searchResultHeader" key="header">
-        Searched for <b>{ props.searchTerm }</b>, { searchType }, found { num } result(s)
-			</div>);
-		const entries = props.searchResults.map(
-			(entry, _idx) => <Entry entry={ entry } key= { entry.id } conlang={ conlang } />,
-		);
-		return [header].concat(entries);
-	};
-
-	const results = props.searchResults;
-	return (
-		<div className="results">
-			{ results ? content() : 'No search' }
-		</div>
-	);
-};
-
-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.state = {
-			searchResults: null,
-			conlang: 'saimiar',
-			direction: null,
-			searchTerm: null,
-		};
-	}
-
-	searchSaimiar(_evt) {
-		const searchTerm = this.input.current.value;
-		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: 'toEnglish'});
-			});
-		}
-	}
-
-	searchEng(_evt) {
-		const searchTerm = this.input.current.value;
-		const request = `saimiar?eng=like.*${searchTerm}*`;
-		if (searchTerm === '') {
-			this.setState({searchResults: null, searchTerm: null});
-		} else {
-			makeRequest(request, (json) => {
-				this.setState({searchResults: json, searchTerm, direction: 'toConlang'});
-			});
-		}
-	}
-
-	handleLangChange(evt) {
-		const conlang = evt.target.value;
-		this.setState({conlang});
-	}
-
-	render() {
-		return (
-			<main>
-				<div className="container">
-					<div className="search">
-						<h1>Kucinako</h1>
-						<div className="textInput">
-							<input className="textInput" type="text" ref={ this.input } />
-						</div>
-						<br/>
-						<select ref={ this.langSelection } onChange={ this.handleLangChange } defaultValue="saimiar">
-							<option value="saimiar">Saimiar</option>
-							<option value="elesu">Elesu</option>
-							<option value="tukvaysi">Tukvaysi</option>
-							<option value="juteyuji">Juteyuji</option>
-						</select>
-						<button onClick={ this.searchSaimiar } className="searchButton">Saimiar</button>
-						<button onClick={ this.searchEng } className="searchButton">English</button>
-					</div>
-					<Results
-						searchResults={ this.state.searchResults }
-						searchTerm= { this.state.searchTerm }
-						conlang={ this.state.conlang }
-						direction={ this.state.direction }
-					/>
-				</div>
-			</main>
-		);
-	}
-}
-
-export default App;

src/App.tsx

@@ -0,0 +1,205 @@
+import React, {Component} from 'react';
+
+import './App.scss';
+import {declineSaimiar} from './saimiar_morphology';
+
+const backendUrl = 'https://kucinakobackend.ichigo.everydayimshuflin.com';
+
+enum Conlang {
+    Saimiar = 'sai',
+    Elesu = 'ele',
+    Tukvaysi = 'tuk',
+    Juteyuji = 'jut',
+}
+
+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 <SaiEntry entry={ props.entry } />;
+    }
+
+    return <div>Conlang { conlang } not yet supported</div>;
+};
+
+const SaiEntry = (props) => {
+    const {entry} = props;
+    const synCategory = entry.syn_category;
+    const isNominal = synCategory === 'nominal';
+    return (
+        <div className="searchResult" key={ entry.id }>
+            <b>{ entry.sai }</b> - { entry.eng }
+            <br />
+            <span className="synclass">
+                <i>{ entry.syn_category }</i>
+                { entry.morph_type ? `\t\t${entry.morph_type}` : null }
+                <br/>
+                { isNominal ? formatMorphology(entry) : null }
+            </span>
+        </div>
+    );
+};
+
+function formatMorphology(entry) {
+    const decl = declineSaimiar(entry);
+    if (!decl) {
+        return '';
+    }
+
+    return (<span style={ {fontSize: 'medium', color: '#6a3131'} } >
+        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>,
+        Adp: <i>{decl.adp}</i>,
+        All: <i>{decl.all}</i>,
+        Loc: <i>{decl.loc}</i>,
+        Ell: <i>{decl.ell}</i>,
+        Inst: <i>{decl.inst}</i>,
+        Rel: <i>{decl.rel}</i>
+    </span>);
+}
+
+const Results = (props) => {
+    const content = () => {
+        const {conlang} = props;
+        const num = props.searchResults.length;
+        console.log(`Conlang is: ${conlang}`);
+        const renderedName = renderConlang(conlang);
+        const searchType = (props.direction === 'toConlang') ? `English -> ${renderedName}` : `${renderedName} -> English`;
+        const header = (
+            <div className="searchResultHeader" key="header">
+        Searched for <b>{ props.searchTerm }</b>, { searchType }, found { num } result(s)
+            </div>);
+        const entries = props.searchResults.map(
+            (entry, _idx) => <Entry entry={ entry } key= { entry.id } conlang={ conlang } />,
+        );
+        return [header].concat(entries);
+    };
+
+    const results = props.searchResults;
+    return (
+        <div className="results">
+            { results ? content() : 'No search' }
+        </div>
+    );
+};
+
+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.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 {
+            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: 'toEnglish'});
+            });
+        }
+    }
+
+    searchEng(_evt) {
+        const searchTerm = this.input.current.value;
+        const request = `saimiar?eng=like.*${searchTerm}*`;
+        if (searchTerm === '') {
+            this.setState({searchResults: null, searchTerm: null});
+        } else {
+            makeRequest(request, (json) => {
+                this.setState({searchResults: json, searchTerm, direction: 'toConlang'});
+            });
+        }
+    }
+
+    handleLangChange(evt) {
+        const conlang: Conlang = evt.target.value as Conlang;
+        console.log('Conlang in handlelangchange', conlang);
+        this.setState({conlang});
+    }
+
+    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>
+        );
+
+        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>
+                    </div>
+                    <Results
+                        searchResults={ this.state.searchResults }
+                        searchTerm= { this.state.searchTerm }
+                        conlang={ this.state.conlang }
+                        direction={ this.state.direction }
+                    />
+                </div>
+            </main>
+        );
+    }
+}
+
+export default App;

src/saimiar_morphology.ts

@@ -1,6 +1,17 @@
 const rootEndingPair = (str) => ({root: str.slice(0, -1), ending: str.slice(-1)});
 
-function declineSaimiar(entry) {
+type SaimiarDeclension = {
+    abs: string;
+    erg: string;
+    adp: string;
+    all: string;
+    loc: string;
+    ell: string;
+    inst: string;
+    rel: string;
+};
+
+function declineSaimiar(entry): SaimiarDeclension {
     const split = entry.sai.split(' ');
     const sai = split.at(-1);
     const morph = entry.morph_type;
@@ -26,7 +37,7 @@ function declineSaimiar(entry) {
     return null;
 }
 
-function vowelDeclension(sai: string) {
+function vowelDeclension(sai: string): SaimiarDeclension {
     const {root, ending} = rootEndingPair(sai);
     const adpEnding = ending === 'u' ? 'ys' : `${ending}s`;
 
@@ -42,7 +53,7 @@ function vowelDeclension(sai: string) {
     };
 }
 
-function aiDeclension(sai: string) {
+function aiDeclension(sai: string): SaimiarDeclension {
     const {root, ending} = rootEndingPair(sai);
     return {
         abs: `${root}${ending}`,
@@ -56,7 +67,7 @@ function aiDeclension(sai: string) {
     };
 }
 
-function consonantDeclension(sai: string) {
+function consonantDeclension(sai: string): SaimiarDeclension {
     const split = rootEndingPair(sai);
     const root = split.ending === 'ø' ? split.root : sai;
     const absFinal = split.ending === 'ø' ? 'ø' : '';
@@ -75,7 +86,7 @@ function consonantDeclension(sai: string) {
 
 const vowels = ['a', 'e', 'ê', 'i', 'o', 'ô', 'u', 'y'];
 
-function initalDeclension(sai: string) {
+function initalDeclension(sai: string): SaimiarDeclension {
     const initial = sai.slice(0, 1);
     const root = sai.slice(1);
 
@@ -96,4 +107,4 @@ function initalDeclension(sai: string) {
     };
 }
 
-export {declineSaimiar};
+export {declineSaimiar, SaimiarDeclension};