Merge pull request #18 from RandellDawson/fix/correct-search-result-messages

[Fix] Correct search result messages and add info footer

dashboard-client/app/app/package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build && rm build/static/js/*.map && rm build/static/css/*.map",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

dashboard-client/app/app/src/App.js

@@ -4,6 +4,14 @@ import styled from 'styled-components';
 import Tabs from './components/Tabs';
 import Search from './components/Search';
 import Pareto from './components/Pareto';
+import Footer from './components/Footer';
+
+const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
 
 const Container = styled.div`
   display: flex;
@@ -17,6 +25,21 @@ const Container = styled.div`
   box-shadow: 0 0 4px 0 #777;
 `;
 
+const Title = styled.h1`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${({ theme }) => theme.primary};
+  color: white;
+  width: 100%;
+  padding: 3px;
+`;
+
+const imgStyle = {
+  paddingRight: '20px',
+  paddingTop: '6px'
+};
+
 class App extends Component {
   state = {
     view: 'search'
@@ -30,13 +53,15 @@ class App extends Component {
   render() {
     const { handleViewChange, state: { view } } = this;
     return (
-      <>
+      <PageContainer>
+        <Title><img style={imgStyle} src="https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/e/d/ed1c70bda321aaeee9e6c20ab650ce8bc34899fa.svg" alt="Free Code Camp Logo" /> Moderator Tools</Title>
         <Tabs view={view} onViewChange={handleViewChange}/>
         <Container>
           { view === 'search' && <Search /> }
           { view === 'reports' && <Pareto /> }
         </Container>
-      </>
+        <Footer />
+      </PageContainer>
     );
   }
 }

dashboard-client/app/app/src/components/Footer.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  margin-top: 5px;
+  text-align: center;
+`;
+
+const Info = styled.div`
+  font-size: 14px;
+  padding: 2px;
+`;
+
+class Footer extends Component {
+  state = {
+    numPRs: null,
+    prRange: null,
+    lastUpdate: null
+  }
+
+  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
+    });
+  }
+
+  localTime(lastUpdate) {
+    const newTime = new Date(lastUpdate);
+    return newTime.toLocaleString();
+  }
+
+  render() {
+    const { numPRs, prRange, lastUpdate } = this.state;
+    return (
+      <Container>
+        <Info>Last Update: {this.localTime(lastUpdate)}</Info>
+        <Info># of open PRs: {numPRs} ({prRange})</Info>
+      </Container>
+    );
+  }
+};
+
+export default Footer;

dashboard-client/app/app/src/components/Search.js

@@ -8,7 +8,8 @@ class Search extends Component {
   state = {
     searchValue: '',
     selectedOption: 'pr',
-    results: []
+    results: [],
+    message: ''
   };
 
   clearObj = { searchValue: '', results: [] };
@@ -35,8 +36,10 @@ class Search extends Component {
 
   handleButtonClick = () => {
     const { searchValue } = this.state;
+    if (searchValue) {
       this.searchPRs(searchValue);
     }
+  }
 
   handleOptionChange = (changeEvent) => {
     const selectedOption = changeEvent.target.value;
@@ -49,14 +52,9 @@ class Search extends Component {
     const fetchUrl = baseUrl + (selectedOption === 'pr' ? `pr/${value}` : `search/?value=${value}`);
     fetch(fetchUrl)
     .then((response) => response.json())
-    .then((response) => {
-      if (response.ok) {
-        const { results }  = response;
-        const objArrName = selectedOption === 'pr' ? 'filenames' : 'prs';
-        if (!results.length) {
-          results.push({ searchValue: 'No matching results', [objArrName]: [] });
-        }
-        this.setState((prevState) => ({ results }));
+    .then(({ ok, message, results }) => {
+      if (ok) {
+        this.setState((prevState) => ({ message, results }));
       }
       else {
         this.inputRef.current.focus();
@@ -69,7 +67,7 @@ class Search extends Component {
 
   render() {
     const { handleButtonClick, handleInputEvent, inputRef, handleOptionChange, state } = this;
-    const { searchValue, results, selectedOption } = state;
+    const { searchValue, message, results, selectedOption } = state;
     return (
       <>
         <div>
@@ -82,6 +80,7 @@ class Search extends Component {
         </div>
         <Input ref={inputRef} value={searchValue} onInputEvent={handleInputEvent} />
         <button onClick={handleButtonClick}>Search</button>
+        {message}
         {selectedOption === 'pr' && <PrResults searchValue={searchValue} results={results} /> }
         {selectedOption === 'filename' && <FilenameResults searchValue={searchValue} results={results} /> }
       </>

dashboard-client/app/app/src/components/Tabs.js

@@ -15,13 +15,13 @@ const Tab = styled.div`
   padding: 5px;
   border: 2px solid ${({ theme }) => theme.primary};
   border-left: none;
-  flex-basis: 200px;
+  width: 200px;
   text-align: center;
 
   &:hover {
     cursor: pointer;
-    background: rgba(0, 0, 255, 0.8);
-    color: white;
+    background: #EEEEEE;
+    color: ${({ theme }) => theme.primary};
   }
 
   &:first-child {

dashboard-client/app/app/src/theme/index.js

@@ -1,5 +1,5 @@
 const theme = {
-  primary: 'blue'
+  primary: '#006400'
 };
 
 export default theme;