Convert App to functional component
This commit is contained in:
parent
12207c30b1
commit
3a261bef95
145
src/App.tsx
145
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 {
|
||||
[x: string]: any;
|
||||
}
|
||||
const App = (_props) => {
|
||||
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 {
|
||||
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);
|
||||
|
||||
this.state = {
|
||||
searchResults: null,
|
||||
conlang: Conlang.Saimiar,
|
||||
direction: null,
|
||||
searchTerm: null,
|
||||
};
|
||||
}
|
||||
|
||||
searchConlang(_evt) {
|
||||
const searchTerm = this.input.current.value;
|
||||
const {conlang} = this.state;
|
||||
const searchConlang = (_evt) => {
|
||||
const searchTerm = searchBoxInput;
|
||||
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 searchTerm = this.input.current.value;
|
||||
const {conlang} = this.state;
|
||||
const searchEng = (_evt) => {
|
||||
const searchTerm = searchBoxInput;
|
||||
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 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</h1>
|
||||
<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;
|
||||
|
@ -14,4 +14,4 @@ interface JutEntryProps {
|
||||
gender: string;
|
||||
}
|
||||
|
||||
export { SaiEntryProps, JutEntryProps };
|
||||
export {SaiEntryProps, JutEntryProps};
|
||||
|
Loading…
Reference in New Issue
Block a user