Convert App to functional component

This commit is contained in:
Greg Shuflin 2021-09-12 22:12:39 -07:00
parent 12207c30b1
commit 3a261bef95
2 changed files with 71 additions and 76 deletions

View File

@ -1,4 +1,4 @@
import React, {Component} from 'react'; import React, {useState} from 'react';
import './App.scss'; import './App.scss';
import {declineSaimiar} from './saimiar_morphology'; import {declineSaimiar} from './saimiar_morphology';
@ -145,86 +145,80 @@ 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) { if (conlang === Conlang.Saimiar) {
this.searchSaimiar(searchTerm); searchSaimiar(searchTerm);
} else if (conlang === Conlang.Juteyuji) { } else if (conlang === Conlang.Juteyuji) {
this.searchJuteyuji(searchTerm); searchJuteyuji(searchTerm);
} else { } else {
console.error(`Conlang ${conlang} not supported`); console.error(`Conlang ${conlang} not supported`);
} }
} };
searchSaimiar(searchTerm: string) { const searchSaimiar = (searchTerm: string) => {
const request = `saimiar?sai=like.*${searchTerm}*`; const request = `saimiar?sai=like.*${searchTerm}*`;
if (searchTerm === '') { if (searchTerm === '') {
this.setState({searchResults: null, searchTerm: null, direction: null}); setSearchResults(null);
setSearchTerm(null);
setDirection(null);
} else { } else {
makeRequest(request, (json) => { 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}*`; const request = `juteyuji?jut=like.*${searchTerm}*`;
if (searchTerm === '') { if (searchTerm === '') {
this.setState({searchResults: null, searchTerm: null, direction: null}); setSearchResults(null);
setSearchTerm(null);
setDirection(null);
} else { } else {
makeRequest(request, (json) => { 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}*`; const request = `${conlang}?eng=like.*${searchTerm}*`;
if (searchTerm === '') { if (searchTerm === '') {
this.setState({searchResults: null, searchTerm: null}); setSearchResults(null);
setSearchTerm(null);
} else { } else {
makeRequest(request, (json) => { 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; const conlang: Conlang = evt.target.value as Conlang;
console.log('Conlang in handlelangchange', 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 ref={ this.langSelection } onChange={ this.handleLangChange } defaultValue={Conlang.Saimiar}> <select value={conlang} onChange={ handleLangChange }>
{conlangs.map((conlang) => <option value={conlang} key={conlang}>{renderConlang(conlang)}</option>)} {conlangs.map((conlang) => <option value={conlang} key={conlang}>{renderConlang(conlang)}</option>)}
</select> </select>
); );
@ -235,23 +229,24 @@ class App extends Component {
<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) => {
setSearchBoxInput(evt.target.value);
} } />
</div> </div>
<br/> <br/>
{ langSelectDropdown } { langSelectDropdown }
<button onClick={ this.searchConlang } className="searchButton">{renderConlang(this.state.conlang)}</button> <button onClick={ searchConlang } className="searchButton">{renderConlang(conlang)}</button>
<button onClick={ this.searchEng } className="searchButton">English</button> <button onClick={ searchEng } className="searchButton">English</button>
</div> </div>
<Results <Results
searchResults={ this.state.searchResults } searchResults={ searchResults }
searchTerm= { this.state.searchTerm } searchTerm= { searchTerm }
conlang={ this.state.conlang } conlang={ conlang }
direction={ this.state.direction } direction={ direction }
/> />
</div> </div>
</main> </main>
); );
} };
}
export default App; export default App;