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,18 +21,16 @@ class Footer extends Component {
   }
 
   componentDidMount() {
-    const baseUrl = 'https://pr-relations.glitch.me/';
-    const fetchUrl = baseUrl + 'info';
-    fetch(fetchUrl)
-    .then((response) => response.json())
-    .then(({ ok, numPRs, prRange, lastUpdate }) => {
-      if (ok) {
-        this.setState((prevState) => ({ numPRs, prRange, lastUpdate }));
-      }
-    })
-    .catch(() => {
-      // do nothing
-    });
+    fetch(ENDPOINT_INFO)
+      .then((response) => response.json())
+      .then(({ ok, numPRs, prRange, lastUpdate }) => {
+        if (ok) {
+          this.setState((prevState) => ({ numPRs, prRange, lastUpdate }));
+        }
+      })
+      .catch(() => {
+        // do nothing
+      });
   }
 
   localTime(lastUpdate) {

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,20 +33,20 @@ class Pareto extends React.Component {
   };
 
   componentDidMount() {
-    fetch(`https://pr-relations.glitch.me/pareto`)
-    .then((response) => response.json())
-    .then(({ ok, pareto }) => {
-      if (ok) {
-        if (!pareto.length) {
-          pareto.push({ filename: 'Nothing to show in Pareto Report', count: 0, prs: [] });
+    fetch(ENDPOINT_PARETO)
+      .then((response) => response.json())
+      .then(({ ok, pareto }) => {
+        if (ok) {
+          if (!pareto.length) {
+            pareto.push({ filename: 'Nothing to show in Pareto Report', count: 0, prs: [] });
+          }
+          this.setState((prevState) => ({ data: pareto }));
         }
+      })
+      .catch(() => {
+        const pareto = [{ filename: 'Nothing to show in Pareto Report', count: 0, prs: [] }];
         this.setState((prevState) => ({ data: pareto }));
-      }
-    })
-    .catch(() => {
-      const pareto = [{ filename: 'Nothing to show in Pareto Report', count: 0, prs: [] }];
-      this.setState((prevState) => ({ data: pareto }));
-    });
+      });
   }
 
   render() {

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 = baseUrl + (selectedOption === 'pr' ? `pr/${value}` : `search/?value=${value}`);
+    const fetchUrl = selectedOption === 'pr' ?
+      `${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));
-    });
+      .then((response) => response.json())
+      .then(({ ok, message, results }) => {
+        if (ok) {
+          this.setState((prevState) => ({ message, results }));
+        }
+      })
+      .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
+};