From 3c5203e97d9d1321cfe43445447a5f00190e17b7 Mon Sep 17 00:00:00 2001
From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
Date: Tue, 20 Nov 2018 12:53:47 -0800
Subject: [PATCH] Merge pull request #5 from
 RandellDawson/refactor/input-react-component

Implemented ref forwarding for Input component. Minor clean up.
---
 dashboard-client/app/app/src/App.js           | 20 +++++++------------
 .../app/app/src/components/Input.js           | 10 +++++-----
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/dashboard-client/app/app/src/App.js b/dashboard-client/app/app/src/App.js
index 9f1388029f..e9cbf299a8 100644
--- a/dashboard-client/app/app/src/App.js
+++ b/dashboard-client/app/app/src/App.js
@@ -24,7 +24,7 @@ class App extends Component {
 
   handleInputChange = (event) => {
     const { value } = event.target;
-    console.log(Number(value))
+
     if (Number(value) || value === '') {
       this.setState((prevState) => ({ number: value, foundPRs: [] }));
     }
@@ -38,7 +38,7 @@ class App extends Component {
       .then(({ ok, foundPRs }) => {
         if (ok) {
           if (!foundPRs.length) {
-            foundPRs.push({number: 'No PRs with matching files', filenames: []});
+            foundPRs.push({ number: 'No PRs with matching files', filenames: [] });
           }
           this.setState((prevState) => ({ foundPRs }));
         }
@@ -46,25 +46,19 @@ class App extends Component {
           this.inputRef.current.focus();
         }
       })
-      .catch((err) => {
-        //console.log(err)
+      .catch(() => {
         this.setState((prevState) => ({ number: '', foundPRs: [] }));
       });
   }
 
   render() {
-    const { number, foundPRs } = this.state;
+    const { handleButtonClick, handleInputChange, inputRef, state } = this;
+    const { number, foundPRs } = state;
 
     return (
       <Container>
-      <input
-        type="text"
-        placeholder="PR #"
-        onChange={this.handleInputChange}
-        value={number}
-        ref={this.inputRef}
-      />
-        <button onClick={this.handleButtonClick}>Search</button>
+        <Input ref={inputRef} value={number} onInputChange={handleInputChange} />
+        <button onClick={handleButtonClick}>Search</button>
         <Results foundPRs={foundPRs} />
       </Container>
     );
diff --git a/dashboard-client/app/app/src/components/Input.js b/dashboard-client/app/app/src/components/Input.js
index 8b81a78954..4383004cac 100644
--- a/dashboard-client/app/app/src/components/Input.js
+++ b/dashboard-client/app/app/src/components/Input.js
@@ -1,13 +1,13 @@
 import React from 'react';
 
-const Input = ({ onInputChange, value, test }) => (
+const Input = React.forwardRef((props, ref) => (
   <input
     type="text"
     placeholder="PR #"
-    onChange={onInputChange}
-    value={value}
-    ref={test}
+    onChange={props.onInputChange}
+    value={props.value}
+    ref={ref}
   />
-);
+));
 
 export default Input;