Merge pull request #17 from manjeetaR/item-count

item count on panel
carolinaknoll · Oct 2, 2019 · 3f9ab7d · 3f9ab7d
2 parents 0c0388d + 29d7181
commit 3f9ab7d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/src/assets/styles/saved-items.css b/src/assets/styles/saved-items.css
@@ -56,6 +56,14 @@
   padding-bottom: 20px;
 }
 
+.badge-count{
+  height: 20px;
+  width: 35px;
+  margin: 3px -12px 0 18px;  
+  font-size: 12px;
+  background: rgba(215,115,515,0.1);
+  border-radius: 30px;
+}
 .import-export-button-container {
   display:flex;
   justify-content: center;

diff --git a/src/components/saved-items.js b/src/components/saved-items.js
@@ -1,12 +1,12 @@
-import React, {Component}  from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {toast} from 'react-toastify';
-import {notifyAction} from '../common/helpers';
+import { toast } from 'react-toastify';
+import { notifyAction } from '../common/helpers';
 
 export default class SavedItems extends Component {
   state = {
     open: false
-  }  
+  }
 
   handleSavedItemsButtonClick = () => {
     this.setState({ open: !this.state.open });
@@ -20,6 +20,11 @@ export default class SavedItems extends Component {
     return this.getSavedItems('savedBookmarks');
   }
 
+  getItemCount = (item) => {
+    const savedItems = JSON.parse(localStorage.getItem('SavedAwesomeLists'));
+    return (<span className="badge-count">{savedItems && savedItems[0] && savedItems[0][item].length}</span>)
+  }
+
   getSavedItems = (savedItemName) => {
     let savedItems = JSON.parse(localStorage.getItem('SavedAwesomeLists'));
 
@@ -125,14 +130,14 @@ export default class SavedItems extends Component {
     e.target.value = null;
   }
 
-	render() {
-    const {open} = this.state;
+  render() {
+    const { open } = this.state;
 
     return (
       <div className="saved-items-panel-container">
         <button className="button-default saved-items-button" onClick={this.handleSavedItemsButtonClick}>
           <i className="awesome-text-gradient far fa-save"></i>
-          { this.props.showText ? 'View saved items' : null }
+          {this.props.showText ? 'View saved items' : null}
         </button>
 
         <div className={`saved-items-panel ${open ? `open` : ''}`}>
@@ -149,24 +154,24 @@ export default class SavedItems extends Component {
             </button>
 
             <div className="import-container">
-              <input className="file-input" type="file" accept=".json" onChange={this.handleImportedFileChange}/>
+              <input className="file-input" type="file" accept=".json" onChange={this.handleImportedFileChange} />
               <button className="button-default saved-items-button" onClick={this.importSavedBookmarks}>
                 <i className="awesome-text-gradient fas fa-file-upload"></i>
                 Import items
               </button>
             </div>
           </div>
-          
+
           <h2 className="saved-items-type-title awesome-text-gradient heading-divider">
-            <i className="icon bookmark fas fa-star"></i> Bookmarked
+            <i className="icon bookmark fas fa-star"></i> Bookmarked{this.getItemCount('savedBookmarks')}
           </h2>
 
           <div className="saved-items-container">
             {this.getSavedBookmarks()}
           </div>
 
           <h2 className="saved-items-type-title awesome-text-gradient heading-divider">
-            <i className="icon bookmark fas fa-eye"></i> Seen
+            <i className="icon bookmark fas fa-eye"></i>Seen{this.getItemCount('savedSeen')}
           </h2>
 
           <div className="saved-items-container">
@@ -175,7 +180,7 @@ export default class SavedItems extends Component {
         </div>
       </div>
     );
-	}
+  }
 }
 
 SavedItems.propTypes = {