Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

item count on panel #17

Merged
merged 2 commits into from
Oct 2, 2019
Merged

item count on panel #17

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8fcebf3
item count on panel
manjeetaR Oct 1, 2019
29d7181
resolved conflicts
manjeetaR Oct 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/assets/styles/saved-items.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,12 @@
.saved-items-panel .saved-items-container:last-of-type {
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;
}
23 changes: 14 additions & 9 deletions src/components/saved-items.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {notifyAction} from '../common/helpers';
import { notifyAction } from '../common/helpers';

export default class SavedItems extends Component {
state = {
open: false
}
}

handleSavedItemsButtonClick = () => {
this.setState({ open: !this.state.open });
Expand All @@ -19,6 +19,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[0] && savedItems[0][item].length}</span>)
}

getSavedItems = (savedItemName) => {
let savedItems = JSON.parse(localStorage.getItem('SavedAwesomeLists'));

Expand Down Expand Up @@ -80,14 +85,14 @@ export default class SavedItems extends Component {
}
}

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` : ''}`}>
Expand All @@ -98,15 +103,15 @@ export default class SavedItems extends Component {
<p>The items you have marked as seen or bookmarked are shown below.</p>

<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">
Expand All @@ -115,7 +120,7 @@ export default class SavedItems extends Component {
</div>
</div>
);
}
}
}

SavedItems.propTypes = {
Expand Down