Add url searching. Minor cleanup

drewbitt · Nov 13, 2019 · 1d2752d · 1d2752d
1 parent 86b2572
commit 1d2752d
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 31 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,8 @@
 import React from "react";
-import { TextField, Button, Paper } from "@material-ui/core";
 import "./App.css";
 import PaperDropzone from "./components/PaperDropzone";
 import LoadingSpinnerComponent from "./components/Spinner";
+import URLForm from "./components/URLForm";
 
 function App(props) {
   return (
@@ -12,18 +12,7 @@ function App(props) {
         <h4>Trace the original anime from a screenshot.</h4>
         <PaperDropzone props={props} />
         <h2 style={{ color: "orange" }}>OR</h2>
-        <Paper component="form" style={{ width: "500px" }}>
-          <TextField
-            placeholder="Input Image URL"
-            variant="outlined"
-            // TODO: move/change width hardcode, with matching value in PaperDropzone
-            style={{ background: "white", width: "82.5%" }}
-            name="imageUrl"
-          ></TextField>
-          <Button variant="outlined" color="secondary" type="submit" style={{paddingTop: '15px', paddingBottom: '15px'}}>
-            Submit
-          </Button>
-        </Paper>
+        <URLForm props={props}/>
         <LoadingSpinnerComponent />
       </header>
     </div>

diff --git a/src/components/Results.js b/src/components/Results.js
@@ -10,7 +10,9 @@ class Results extends React.Component {
             ? this.props.location.state.results.docs.map((item, index) => {
                 return (
                   <div id="result">
-                    {index == 0 ? <h2>Trace.moe results</h2> : ""}
+                    {/* This is bad. First result would have an h2. 
+                    Unable to chain map & h2 otherwise right now though*/}
+                    {index === 0 ? <h2>Trace.moe results</h2> : ""}
                     <li key={index + 1}>
                       Guess #{index + 1}: {item.title_english} - EP:{" "}
                       {item.episode} -{" "}

diff --git a/src/components/Spinner.js b/src/components/Spinner.js
@@ -5,7 +5,7 @@ import ClipLoader from "react-spinners/ClipLoader";
 
 const override = css`
   display: block;
-  margin: 0 auto;
+  margin: 10 auto;
   border-color: red;
 `;
 
@@ -18,7 +18,7 @@ export const LoadingSpinnerComponent = props => {
           <ClipLoader
             css={override}
             sizeUnit={"px"}
-            size={150}
+            size={120}
             color={"#123abc"}
           />
         </div>

diff --git a/src/components/URLForm.js b/src/components/URLForm.js
@@ -0,0 +1,41 @@
+import React from "react";
+import { Button, TextField, Paper } from "@material-ui/core";
+import { searchAnimeWithURL } from "./../utils/main";
+import { trackPromise } from "react-promise-tracker";
+
+class URLForm extends React.Component {
+  submit = event => {
+    event.preventDefault();
+    const urlString = event.target[0].value;
+    trackPromise(
+      searchAnimeWithURL(urlString).then(res => {
+        console.log(res);
+        this.props.props.history.push("/results", { results: res });
+      })
+    );
+  };
+
+  render() {
+    return (
+      <Paper component="form" style={{ width: "500px" }} onSubmit={this.submit}>
+          <TextField
+            placeholder="Input Image URL"
+            variant="outlined"
+            // TODO: move/change width hardcode, with matching value in PaperDropzone
+            style={{ background: "white", width: "82.5%" }}
+            name="imageURL"
+          ></TextField>
+          <Button
+            variant="outlined"
+            color="secondary"
+            type="submit"
+            style={{ paddingTop: "15px", paddingBottom: "15px" }}
+          >
+            Submit
+          </Button>
+      </Paper>
+    );
+  }
+}
+
+export default URLForm;
diff --git a/src/utils/main.js b/src/utils/main.js
@@ -46,10 +46,9 @@ export function searchAnime(files) {
         })
         .catch(err => {
           if (err.response) {
-            // TODO: need to reject, not just throw?
-            throw err.response.data;
+            reject(err.response.data);
           } else {
-            throw err.message;
+            reject(err.message);
           }
         });
     };
@@ -62,18 +61,21 @@ export function searchAnimeWithURL(url) {
   if (!REGEX_VALIDATION_URL.test(url)) {
     return Promise.reject(new Error(`This is URL not valid: ${url}`));
   }
-  return axios
-    .get(`${TRACE_HOST_API_DOMAIN}${TRACE_SEARCH_QUERY_URL_PATH}` + url)
-    .then(res => {
-      return getSearchResultFromBinding(res.data);
-    })
-    .catch(err => {
-      if (err.response) {
-        throw err.response.data;
-      } else {
-        throw err.message;
-      }
-    });
+
+  return new Promise((resolve, reject) => {
+    return axios
+      .get(`${TRACE_HOST_API_DOMAIN}${TRACE_SEARCH_QUERY_URL_PATH}` + url)
+      .then(res => {
+        resolve(getSearchResultFromBinding(res.data));
+      })
+      .catch(err => {
+        if (err.response) {
+          reject(err.response.data);
+        } else {
+          reject(err.message);
+        }
+      });
+  });
 }
 
 function SearchResult(