diff --git a/src/components/App.jsx b/src/components/App.jsx
index bb6d3ce..42b1a74 100644
--- 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 (
-
+
-
+
) : (
)
diff --git a/src/components/core/Header.jsx b/src/components/core/Header.jsx
index 63850d6..a20245a 100644
--- a/src/components/core/Header.jsx
+++ b/src/components/core/Header.jsx
@@ -10,20 +10,17 @@ const Header = ({ onToggleChangeDarkMode, darkMode }) => (
Issue-Collab
-
+
dark mode
-
+
-
+
);
diff --git a/src/components/search/SearchResult.jsx b/src/components/search/SearchResult.jsx
index 4617986..84b89b8 100644
--- 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 = ({
{bodyText}
-
{`${userName}/${repoName}`}
+
{`${userName}/${repoName}`}
+
{`Total comments ${comments}`}
{issueAge}
diff --git a/src/components/search/SearchResult.scss b/src/components/search/SearchResult.scss
index 4b757f5..6ad4445 100644
--- 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
index cb11592..5260fd9 100644
--- 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
index 9d7c074..2a3c883 100644
--- 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 (
);
};
diff --git a/src/utils/localStorage.js b/src/utils/localStorage.js
index 40f7132..fa08526 100644
--- 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;
- }
-}
\ No newline at end of file
+export function getLocalStorageItem(name) {
+ if (window.localStorage) {
+ return window.localStorage.getItem(name);
+ }
+
+ console.error('LocalStorage is unavailable');
+ return null;
+}