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

@@ -22,17 +22,26 @@ class App extends Component {
 
   inputRef = React.createRef();
 
-  handleInputChange = (event) => {
+  handleInputEvent = (event) => {
-    const { value } = event.target;
+    const { type, key, target: { value } } = event;
 
-    if (Number(value) || value === '') {
+    if (type === 'change') {
-      this.setState((prevState) => ({ number: value, foundPRs: [] }));
+      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>

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}
   />