From 6b63642d3d60e12378eb223f560d7008559eaa5a Mon Sep 17 00:00:00 2001
From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
Date: Tue, 20 Nov 2018 12:56:07 -0800
Subject: [PATCH] Merge pull request #6 from
 RandellDawson/feature/search-with-enter-keypress

Added the ability to search by pressing Enter. Associated refactoring.
---
 dashboard-client/app/app/src/App.js           | 21 +++++++++++++------
 .../app/app/src/components/Input.js           |  3 ++-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/dashboard-client/app/app/src/App.js b/dashboard-client/app/app/src/App.js
index e9cbf299a8..768e458133 100644
--- a/dashboard-client/app/app/src/App.js
+++ b/dashboard-client/app/app/src/App.js
@@ -22,17 +22,26 @@ class App extends Component {
 
   inputRef = React.createRef();
 
-  handleInputChange = (event) => {
-    const { value } = event.target;
+  handleInputEvent = (event) => {
+    const { type, key, target: { value } } = event;
 
-    if (Number(value) || value === '') {
-      this.setState((prevState) => ({ number: value, foundPRs: [] }));
+    if (type === 'change') {
+      if (Number(value) || value === '') {
+        this.setState((prevState) => ({ number: value, foundPRs: [] }));
+      }
+    }
+    else if (type === 'keypress' && key === 'Enter') {
+      this.searchPRs(value);
     }
   }
 
   handleButtonClick = () => {
     const { number } = this.state;
 
+    this.searchPRs(number);
+  }
+
+  searchPRs = (number) => {
     fetch(`https://pr-relations.glitch.me/pr/${number}`)
       .then((response) => response.json())
       .then(({ ok, foundPRs }) => {
@@ -52,12 +61,12 @@ class App extends Component {
   }
 
   render() {
-    const { handleButtonClick, handleInputChange, inputRef, state } = this;
+    const { handleButtonClick, handleInputEvent, inputRef, state } = this;
     const { number, foundPRs } = state;
 
     return (
       <Container>
-        <Input ref={inputRef} value={number} onInputChange={handleInputChange} />
+        <Input ref={inputRef} value={number} onInputEvent={handleInputEvent} />
         <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 4383004cac..a72712e38f 100644
--- a/dashboard-client/app/app/src/components/Input.js
+++ b/dashboard-client/app/app/src/components/Input.js
@@ -4,7 +4,8 @@ const Input = React.forwardRef((props, ref) => (
   <input
     type="text"
     placeholder="PR #"
-    onChange={props.onInputChange}
+    onChange={props.onInputEvent}
+    onKeyPress={props.onInputEvent}
     value={props.value}
     ref={ref}
   />