Convert App to functional component

src/App.tsx

@@ -1,8 +1,8 @@
-import React, {Component} from 'react';
+import React, {useState} from 'react';
 
 import './App.scss';
 import {declineSaimiar} from './saimiar_morphology';
-import {SaiEntryProps, JutEntryProps } from './dbtypes';
+import {SaiEntryProps, JutEntryProps} from './dbtypes';
 
 const backendUrl = 'https://kucinakobackend.ichigo.everydayimshuflin.com';
 
@@ -145,113 +145,108 @@ const Results = (props: ResultsProps) => {
     );
 };
 
-interface App {
+const App = (_props) => {
-    [x: string]: any;
+    const [searchResults, setSearchResults] = useState(null);
-}
+    const [conlang, setConlang] = useState(Conlang.Saimiar);
+    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 searchConlang = (_evt) => {
-        this.searchSaimiar = this.searchSaimiar.bind(this);
+        const searchTerm = searchBoxInput;
-        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);
+            searchSaimiar(searchTerm);
         } else if (conlang === Conlang.Juteyuji) {
-            this.searchJuteyuji(searchTerm);
+            searchJuteyuji(searchTerm);
         } else {
             console.error(`Conlang ${conlang} not supported`);
         }
-    }
+    };
 
-    searchSaimiar(searchTerm: string) {
+    const searchSaimiar = (searchTerm: string) => {
         const request = `saimiar?sai=like.*${searchTerm}*`;
         if (searchTerm === '') {
-            this.setState({searchResults: null, searchTerm: null, direction: null});
+            setSearchResults(null);
+            setSearchTerm(null);
+            setDirection(null);
         } else {
             makeRequest(request, (json) => {
-                this.setState({searchResults: json, searchTerm, direction: SearchDirection.ToEnglish});
+                setSearchResults(json);
+                setSearchTerm(searchTerm);
+                setDirection(SearchDirection.ToEnglish);
             });
         }
-    }
+    };
 
-    searchJuteyuji(searchTerm: string) {
+    const searchJuteyuji = (searchTerm: string) => {
         const request = `juteyuji?jut=like.*${searchTerm}*`;
         if (searchTerm === '') {
-            this.setState({searchResults: null, searchTerm: null, direction: null});
+            setSearchResults(null);
+            setSearchTerm(null);
+            setDirection(null);
         } else {
             makeRequest(request, (json) => {
-                this.setState({searchResults: json, searchTerm, direction: SearchDirection.ToEnglish});
+                setSearchResults(json);
+                setSearchTerm(searchTerm);
+                setDirection(SearchDirection.ToEnglish);
             });
         }
-    }
+    };
 
-    searchEng(_evt) {
+    const searchEng = (_evt) => {
-        const searchTerm = this.input.current.value;
+        const searchTerm = searchBoxInput;
-        const {conlang} = this.state;
         const request = `${conlang}?eng=like.*${searchTerm}*`;
         if (searchTerm === '') {
-            this.setState({searchResults: null, searchTerm: null});
+            setSearchResults(null);
+            setSearchTerm(null);
         } else {
             makeRequest(request, (json) => {
-                this.setState({searchResults: json, searchTerm, direction: SearchDirection.ToConlang});
+                setSearchResults(json);
+                setSearchTerm(searchTerm);
+                setDirection(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 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</h1>
-                        <div className="textInput">
+                    <div className="textInput">
-                            <input className="textInput" type="text" ref={ this.input } />
+                        <input className="textInput" type="text" value={ searchBoxInput } onChange={ (evt) => {
-                        </div>
+                            setSearchBoxInput(evt.target.value);
-                        <br/>
+                        } } />
-                        { langSelectDropdown }
-                        <button onClick={ this.searchConlang } className="searchButton">{renderConlang(this.state.conlang)}</button>
-                        <button onClick={ this.searchEng } className="searchButton">English</button>
                     </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>
-            </main>
+                <Results
-        );
+                    searchResults={ searchResults }
-    }
+                    searchTerm= { searchTerm }
-}
+                    conlang={ conlang }
+                    direction={ direction }
+                />
+            </div>
+        </main>
+    );
+};
 
 export default App;

src/dbtypes.ts

@@ -14,4 +14,4 @@ interface JutEntryProps {
     gender: string;
 }
 
-export { SaiEntryProps, JutEntryProps };
+export {SaiEntryProps, JutEntryProps};