add number of comments

trybick · Oct 17, 2020 · 19b4196 · 19b4196
1 parent d27a08b
commit 19b4196
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 49 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -8,7 +8,7 @@ import TogglesContainer from './toggles/TogglesContainer';
 import LoadingSpinner from './statuses/LoadingSpinner';
 import InitialGreeting from './statuses/InitialGreeting';
 import SearchResultsContainer from './search/SearchResultsContainer';
-import {setLocalStorageItem, getLocalStorageItem} from  "../utils/localStorage.js";
+import { setLocalStorageItem, getLocalStorageItem } from '../utils/localStorage.js';
 
 class App extends React.Component {
   state = {
@@ -35,22 +35,21 @@ class App extends React.Component {
     textToSearch: '',
     pageNum: 1,
     isButtonLocked: false,
-    darkMode: false
+    darkMode: false,
   };
 
   componentDidMount = () => {
     let darkModeStorage = false;
 
-    if(getLocalStorageItem('dark-mode') != null){
-      darkModeStorage = getLocalStorageItem('dark-mode') === '1' ? true : false;
-      this.setState({darkMode: darkModeStorage});
-    }
-    else{
-      this.setState({darkMode: false});
+    if (getLocalStorageItem('dark-mode') != null) {
+      darkModeStorage = getLocalStorageItem('dark-mode') === '1';
+      this.setState({ darkMode: darkModeStorage });
+    } else {
+      this.setState({ darkMode: false });
     }
 
     this.updateBodyClassDarkMode(darkModeStorage);
-  }
+  };
 
   getActiveItems = type => {
     const items = this.state[type];
@@ -165,16 +164,14 @@ class App extends React.Component {
   };
 
   onToggleChangeDarkMode = event => {
-    if(event.target.checked){
-
+    if (event.target.checked) {
       this.setState({
-        darkMode: true
+        darkMode: true,
       });
       setLocalStorageItem('dark-mode', '1');
-    }
-    else{
+    } else {
       this.setState({
-        darkMode: false
+        darkMode: false,
       });
       setLocalStorageItem('dark-mode', '0');
     }
@@ -183,8 +180,8 @@ class App extends React.Component {
   };
 
   updateBodyClassDarkMode = darkMode => {
-    document.body.className = darkMode ? "dark-mode" : "";
-  }
+    document.body.className = darkMode ? 'dark-mode' : '';
+  };
 
   resetToggles = toggleType => {
     const currentItems = this.state[toggleType];
@@ -221,13 +218,12 @@ class App extends React.Component {
       pageNum,
       results,
       textToSearch,
-      darkMode
+      darkMode,
     } = this.state;
 
-
     return (
       <div className="app-wrapper">
-        <Header onToggleChangeDarkMode={this.onToggleChangeDarkMode} darkMode={darkMode}/>
+        <Header onToggleChangeDarkMode={this.onToggleChangeDarkMode} darkMode={darkMode} />
         <TogglesContainer
           labels={labels}
           languages={languages}
@@ -243,8 +239,7 @@ class App extends React.Component {
 
         {isEmpty ? (
           isFetching ? (
-            <LoadingSpinner darkMode={darkMode}/>
-
+            <LoadingSpinner darkMode={darkMode} />
           ) : (
             <InitialGreeting hasError={fetchError} />
           )

diff --git a/src/components/core/Header.jsx b/src/components/core/Header.jsx
@@ -10,20 +10,17 @@ const Header = ({ onToggleChangeDarkMode, darkMode }) => (
       <span className="page-header-title-highlight">Issue</span>-Collab
     </h2>
     <div>
-      <Toggle
-          checked={darkMode}
-          onChange={onToggleChangeDarkMode}
-      /> 
+      <Toggle checked={darkMode} onChange={onToggleChangeDarkMode} />
       <span className="toggle-label">dark mode</span>
     </div>
-    
+
     <a
       className="github-link"
       href="https://github.com/trybick/issue-collab"
       target="_blank"
       rel="noopener noreferrer"
     >
-      <img className="github-svg" src={darkMode ? githubIconWhite : githubIcon} alt="github-icon"/>
+      <img className="github-svg" src={darkMode ? githubIconWhite : githubIcon} alt="github-icon" />
     </a>
   </div>
 );

diff --git a/src/components/search/SearchResult.jsx b/src/components/search/SearchResult.jsx
@@ -11,6 +11,7 @@ export const SearchResult = ({
   userName,
   repoName,
   issueAge,
+  comments,
   labels,
 }) => {
   const [hasBeenClicked, setClicked] = useState(false);
@@ -38,7 +39,8 @@ export const SearchResult = ({
         <p className="body-text">{bodyText}</p>
 
         <div className="metadata">
-          <div>{`${userName}/${repoName}`}</div>
+          <div>{`${userName}/${repoName}`} </div>
+          <div className="comments">{`Total comments ${comments}`}</div>
           <div className="issue-age">{issueAge}</div>
         </div>
 

diff --git a/src/components/search/SearchResult.scss b/src/components/search/SearchResult.scss
@@ -51,5 +51,12 @@
     .label-chips {
       margin: 5px 0 5px;
     }
+
+    .comments{
+      font-size: 0.7rem;
+      margin-top: -8px;
+      display: inline;
+      float: right;
+    }
   }
 }
diff --git a/src/components/search/SearchResultsContainer.jsx b/src/components/search/SearchResultsContainer.jsx
@@ -21,7 +21,7 @@ const SearchResultsContainer = ({ currentPage, onPageChange, results }) => {
   const formattedResults =
     results.items[0] &&
     results.items.map(item => {
-      const htmlUrl = item.html_url.split('/');
+      const { htmlUrl, comments } = [item.html_url.split('/'), item.comments];
       const userName = htmlUrl[3];
       const repoName = htmlUrl[4];
       const issueAge = moment(item.created_at).fromNow();
@@ -46,6 +46,7 @@ const SearchResultsContainer = ({ currentPage, onPageChange, results }) => {
           bodyText={bodyText}
           userName={userName}
           repoName={repoName}
+          comments={comments}
           issueAge={issueAge}
           labels={item.labels}
         />

diff --git a/src/components/statuses/LoadingSpinner.jsx b/src/components/statuses/LoadingSpinner.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import PulseLoader from 'react-spinners/PulseLoader';
 import './LoadingSpinner.scss';
 
-const LoadingSpinner = ({darkMode}) => {
+const LoadingSpinner = ({ darkMode }) => {
   return (
     <div className="loading-spinner-wrapper">
-      <PulseLoader color={darkMode ? "white" : "black"} />
+      <PulseLoader color={darkMode ? 'white' : 'black'} />
     </div>
   );
 };

diff --git a/src/utils/localStorage.js b/src/utils/localStorage.js
@@ -1,19 +1,17 @@
-export function setLocalStorageItem(name, value){
-    if(window.localStorage){
-        return window.localStorage.setItem(name, value);
-    }
-    else{
-        console.error("LocalStorage is unavailable");
-        return null;
-    }
+export function setLocalStorageItem(name, value) {
+  if (window.localStorage) {
+    return window.localStorage.setItem(name, value);
+  }
+
+  console.error('LocalStorage is unavailable');
+  return null;
 }
 
-export function getLocalStorageItem(name){
-    if(window.localStorage){
-        return window.localStorage.getItem(name);
-    }
-    else{
-        console.error("LocalStorage is unavailable");
-        return null;
-    }
-}
+export function getLocalStorageItem(name) {
+  if (window.localStorage) {
+    return window.localStorage.getItem(name);
+  }
+
+  console.error('LocalStorage is unavailable');
+  return null;
+}