diff --git a/App.jsx b/App.jsx index 7936ba1..e380961 100644 --- a/App.jsx +++ b/App.jsx @@ -6,7 +6,7 @@ const backendUrl = "https://kucinakobackend.ichigo.everydayimshuflin.com"; function makeRequest(queryString, jsonHandler) { const effectiveUrl = `${backendUrl}/${queryString}` - fetch(`${backendUrl}`) + fetch(`${effectiveUrl}`) .then((resp) => { return resp.json() }) @@ -20,34 +20,95 @@ function testHandler(json) { console.log(json); } +class Results extends Component { + constructor(props) { + super(props); + this.content = this.content.bind(this); + } + + content() { + const header = ( +
+ Searched for { this.props.searchTerm } search type: { this.props.searchType } +
); + const entries = this.props.searchResults.map((entry, idx) => { + return (
+ { entry.sai } - { entry.eng } +
+ { entry.syn_category } +
+ Type: { entry.morph_type } +
); + }); + return [header].concat(entries); + } + + render() { + const results = this.props.searchResults; + return( +
+ { results ? this.content() : "No results" } +
+ ); + } +} + class App extends Component { constructor(props) { super(props); this.input = React.createRef(); - this.handleSubmit = this.handleSubmit.bind(this); + this.searchEng = this.searchEng.bind(this); + this.searchSaimiar = this.searchSaimiar.bind(this); + + this.state = { + searchResults: null, + searchType: null, + searchTerm: null + }; } - handleSubmit(event) { - const value = this.input.current.value; - console.log("handling submit with value: ", value); - makeRequest("", testHandler); + searchSaimiar(evt) { + const searchTerm = this.input.current.value; + const request = `saimiar?sai=like.*${searchTerm}*` + makeRequest(request, (json) => { + const searchResults = json.length === 0 ? null : json; + this.setState({ searchResults, searchType: "saimiar", searchTerm }); + }); + } + + searchEng(evt) { + const searchTerm = this.input.current.value; + const request = `saimiar?eng=like.*${searchTerm}*` + makeRequest(request, (json) => { + const searchResults = json.length === 0 ? null : json; + this.setState({ searchResults, searchType: "eng-saimiar", searchTerm }); + }); } render() { return(
-

Kucinako

-
- +
+

Kucinako

+
+ +
+
+ +
-
- -
+
); } } + + export default App; diff --git a/App.scss b/App.scss index bf6eb21..de1be06 100644 --- a/App.scss +++ b/App.scss @@ -20,3 +20,9 @@ div .textInput { input { width: 100%; } + +.searchButton { + padding: 5px; + margin: 10px; + font-dize: 22px; +}