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
- + - github-icon + github-icon
); 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; +}