diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js
index 0077f193bca..bf9fe118a02 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.js
+++ b/app/javascript/flavours/glitch/features/getting_started/index.js
@@ -9,6 +9,8 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { me } from 'flavours/glitch/util/initial_state';
+import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
+import { List as ImmutableList } from 'immutable';
import { createSelector } from 'reselect';
import { fetchLists } from 'flavours/glitch/actions/lists';
@@ -45,13 +47,31 @@ const makeMapStateToProps = () => {
lists: getOrderedLists(state),
myAccount: state.getIn(['accounts', me]),
columns: state.getIn(['settings', 'columns']),
+ unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
+ unreadNotifications: state.getIn(['notifications', 'unread']),
});
return mapStateToProps;
};
+const mapDispatchToProps = dispatch => ({
+ fetchFollowRequests: () => dispatch(fetchFollowRequests()),
+ fetchLists: () => dispatch(fetchLists()),
+ openSettings: () => dispatch(openModal('SETTINGS', {})),
+});
+
+const badgeDisplay = (number, limit) => {
+ if (number === 0) {
+ return undefined;
+ } else if (limit && number >= limit) {
+ return `${limit}+`;
+ } else {
+ return number;
+ }
+};
+
+@connect(makeMapStateToProps, mapDispatchToProps)
@injectIntl
-@connect(makeMapStateToProps)
export default class GettingStarted extends ImmutablePureComponent {
static propTypes = {
@@ -59,25 +79,28 @@ export default class GettingStarted extends ImmutablePureComponent {
myAccount: ImmutablePropTypes.map.isRequired,
columns: ImmutablePropTypes.list,
multiColumn: PropTypes.bool,
- dispatch: PropTypes.func.isRequired,
+ fetchFollowRequests: PropTypes.func.isRequired,
+ unreadFollowRequests: PropTypes.number,
+ unreadNotifications: PropTypes.number,
lists: ImmutablePropTypes.list,
+ fetchLists: PropTypes.func.isRequired,
+ openSettings: PropTypes.func.isRequired,
};
- openSettings = () => {
- this.props.dispatch(openModal('SETTINGS', {}));
- }
-
- openOnboardingModal = (e) => {
- e.preventDefault();
- this.props.dispatch(openModal('ONBOARDING'));
- }
-
componentWillMount () {
- this.props.dispatch(fetchLists());
+ this.props.fetchLists();
+ }
+
+ componentDidMount () {
+ const { myAccount, fetchFollowRequests } = this.props;
+
+ if (myAccount.get('locked')) {
+ fetchFollowRequests();
+ }
}
render () {
- const { intl, myAccount, columns, multiColumn, lists } = this.props;
+ const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications, lists, openSettings } = this.props;
const navItems = [];
let listItems = [];
@@ -88,7 +111,7 @@ export default class GettingStarted extends ImmutablePureComponent {
}
if (!columns.find(item => item.get('id') === 'NOTIFICATIONS')) {
- navItems.push();
+ navItems.push();
}
if (!columns.find(item => item.get('id') === 'COMMUNITY')) {
@@ -105,7 +128,7 @@ export default class GettingStarted extends ImmutablePureComponent {
}
if (myAccount.get('locked')) {
- navItems.push();
+ navItems.push();
}
navItems.push();
@@ -129,7 +152,7 @@ export default class GettingStarted extends ImmutablePureComponent {
{listItems}
-
+
diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.js b/app/javascript/flavours/glitch/features/ui/components/column_link.js
index b845d18957d..b058aa963fc 100644
--- a/app/javascript/flavours/glitch/features/ui/components/column_link.js
+++ b/app/javascript/flavours/glitch/features/ui/components/column_link.js
@@ -2,12 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
-const ColumnLink = ({ icon, text, to, onClick, href, method }) => {
+const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
+ const badgeElement = typeof badge !== 'undefined' ? {badge} : null;
+
if (href) {
return (
{text}
+ {badgeElement}
);
} else if (to) {
@@ -15,6 +18,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method }) => {
{text}
+ {badgeElement}
);
} else {
@@ -22,6 +26,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method }) => {
{text}
+ {badgeElement}
);
}
@@ -34,6 +39,7 @@ ColumnLink.propTypes = {
onClick: PropTypes.func,
href: PropTypes.string,
method: PropTypes.string,
+ badge: PropTypes.node,
};
export default ColumnLink;
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 10cad345edc..3d16c856d2a 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -753,6 +753,17 @@
}
}
+.column-link__badge {
+ display: inline-block;
+ border-radius: 4px;
+ font-size: 12px;
+ line-height: 19px;
+ font-weight: 500;
+ background: $ui-base-color;
+ padding: 4px 8px;
+ margin: -6px 10px;
+}
+
.keyboard-shortcuts {
padding: 8px 0 0;
overflow: hidden;