Merge pull request #3 from RandellDawson/feat/add-links-to-results

fix: improved input elem behavior

dashboard-client/app/app/src/App.js

@@ -16,33 +16,54 @@ const Container = styled.div`
 
 class App extends Component {
   state = {
-    number: null,
+    number: '',
     foundPRs: []
   };
 
+  inputRef = React.createRef();
+
   handleInputChange = (event) => {
     const { value } = event.target;
-
+    console.log(Number(value))
-    this.setState((prevState) => ({ number: value }));
+    if (Number(value) || value === '') {
+      this.setState((prevState) => ({ number: value, foundPRs: [] }));
+    }
   }
 
   handleButtonClick = () => {
     const { number } = this.state;
 
-    fetch(`https://pr-relations.glitch.me/test/${number}`)
+    fetch(`https://pr-relations.glitch.me/pr/${number}`)
       .then((response) => response.json())
-      .then(({ foundPRs }) => {
+      .then(({ ok, foundPRs }) => {
-        console.log(foundPRs);
+        if (ok) {
-        this.setState((prevState) => ({ foundPRs }))
+          if (!foundPRs.length) {
+            foundPRs.push({number: 'No PRs with matching files', filenames: []});
+          }
+          this.setState((prevState) => ({ foundPRs }));
+        }
+        else {
+          this.inputRef.current.focus();
+        }
+      })
+      .catch((err) => {
+        //console.log(err)
+        this.setState((prevState) => ({ number: '', foundPRs: [] }));
       });
   }
 
   render() {
-    const { foundPRs } = this.state;
+    const { number, foundPRs } = this.state;
 
     return (
       <Container>
-        <Input onInputChange={this.handleInputChange} />
+      <input
+        type="text"
+        placeholder="PR #"
+        onChange={this.handleInputChange}
+        value={number}
+        ref={this.inputRef}
+      />
         <button onClick={this.handleButtonClick}>Search</button>
         <Results foundPRs={foundPRs} />
       </Container>

dashboard-client/app/app/src/components/Input.js

@@ -1,10 +1,12 @@
 import React from 'react';
 
-const Input = ({ onInputChange }) => (
+const Input = ({ onInputChange, value, test }) => (
   <input
     type="text"
     placeholder="PR #"
     onChange={onInputChange}
+    value={value}
+    ref={test}
   />
 );
 

dashboard-client/app/app/src/components/Results.js

@@ -6,10 +6,15 @@ const Results = ({ foundPRs }) => {
     const files = filenames.map((filename, index) => {
       return <li key={`${number}-${index}`}>{filename}</li>;
     });
-
+    const prUrl = `https://github.com/freeCodeCamp/freeCodeCamp/pull/${number}`
     return (
       <div key={number}>
-        <h4>{number}</h4>
+        <h5>
+          {!Number(number)
+            ? number
+            : <a href={prUrl} rel="noopener noreferrer" target="_blank">{number}</a>
+          }
+        </h5>
         <ul>
           {files}
         </ul>