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;
+}