Feature: API endpoint constants (#30)

* Implemented expeced behaviour for text input.

* Added constants for API endpoints. Refactored Footer, Pareto and Search components accordingly.

dashboard-client/src/components/Footer.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
+import { ENDPOINT_INFO } from '../constants';
+
 const Container = styled.div`
   margin-top: 5px;
   text-align: center;
@@ -19,9 +21,7 @@ class Footer extends Component {
   }
 
   componentDidMount() {
-    const baseUrl = 'https://pr-relations.glitch.me/';
+    fetch(ENDPOINT_INFO)
-    const fetchUrl = baseUrl + 'info';
-    fetch(fetchUrl)
       .then((response) => response.json())
       .then(({ ok, numPRs, prRange, lastUpdate }) => {
         if (ok) {

dashboard-client/src/components/Pareto.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { ENDPOINT_PARETO } from '../constants';
+
 const Result = styled.div`
   word-wrap: break-word;
   margin: 10px 0;
@@ -31,7 +33,7 @@ class Pareto extends React.Component {
   };
 
   componentDidMount() {
-    fetch(`https://pr-relations.glitch.me/pareto`)
+    fetch(ENDPOINT_PARETO)
       .then((response) => response.json())
       .then(({ ok, pareto }) => {
         if (ok) {

dashboard-client/src/components/Search.js

@@ -4,6 +4,9 @@ import Input from './Input';
 import PrResults from './PrResults';
 import FilenameResults from './FilenameResults';
 import SearchOption from './SearchOption';
+
+import { ENDPOINT_PR, ENDPOINT_SEARCH } from '../constants';
+
 class Search extends Component {
   state = {
     searchValue: '',
@@ -39,35 +42,44 @@ class Search extends Component {
     if (searchValue) {
       this.searchPRs(searchValue);
     }
+    else {
+      this.inputRef.current.focus();
+    }
   }
 
   handleOptionChange = (changeEvent) => {
     const selectedOption = changeEvent.target.value;
+
     this.setState((prevState) => ({ selectedOption, ...this.clearObj }));
+    this.inputRef.current.focus();
   }
 
   searchPRs = (value) => {
     const { selectedOption } = this.state;
-    const baseUrl = 'https://pr-relations.glitch.me/';
+    const fetchUrl = selectedOption === 'pr' ?
-    const fetchUrl = baseUrl + (selectedOption === 'pr' ? `pr/${value}` : `search/?value=${value}`);
+      `${ENDPOINT_PR}/${value}` :
+      `${ENDPOINT_SEARCH}/?value=${value}`;
+
     fetch(fetchUrl)
       .then((response) => response.json())
       .then(({ ok, message, results }) => {
         if (ok) {
           this.setState((prevState) => ({ message, results }));
         }
-      else {
-        this.inputRef.current.focus();
-      }
       })
       .catch(() => {
         this.setState((prevState) => (this.clearObj));
       });
   }
 
+  componentDidMount() {
+    this.inputRef.current.focus();
+  }
+
   render() {
     const { handleButtonClick, handleInputEvent, inputRef, handleOptionChange, state } = this;
     const { searchValue, message, results, selectedOption } = state;
+
     return (
       <>
         <div>

dashboard-client/src/constants/index.js

@@ -0,0 +1,15 @@
+const API_HOST = !!process.env.REACT_APP_DEV ?
+  'http://localhost:3001/' :
+  'https://pr-relations.glitch.me';
+const ENDPOINT_INFO = API_HOST + '/info';
+const ENDPOINT_PARETO = API_HOST + '/pareto';
+const ENDPOINT_PR = API_HOST + '/pr';
+const ENDPOINT_SEARCH = API_HOST + '/search'
+
+export {
+  API_HOST,
+  ENDPOINT_INFO,
+  ENDPOINT_PARETO,
+  ENDPOINT_PR,
+  ENDPOINT_SEARCH
+};