diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js
index 7b645c9d0..b07789562 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.js
+++ b/app/javascript/flavours/glitch/features/getting_started/index.js
@@ -73,9 +73,15 @@ const badgeDisplay = (number, limit) => {
}
};
-@connect(makeMapStateToProps, mapDispatchToProps)
-@injectIntl
-export default class GettingStarted extends ImmutablePureComponent {
+const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
+
+ export default @connect(makeMapStateToProps, mapDispatchToProps)
+ @injectIntl
+ class GettingStarted extends ImmutablePureComponent {
+
+ static contextTypes = {
+ router: PropTypes.object.isRequired,
+ };
static propTypes = {
intl: PropTypes.object.isRequired,
@@ -97,6 +103,11 @@ export default class GettingStarted extends ImmutablePureComponent {
componentDidMount () {
const { myAccount, fetchFollowRequests } = this.props;
+ if (window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) {
+ this.context.router.history.replace('/timelines/home');
+ return;
+ }
+
if (myAccount.get('locked')) {
fetchFollowRequests();
}
@@ -135,7 +146,7 @@ export default class GettingStarted extends ImmutablePureComponent {
}
if (myAccount.get('locked')) {
- navItems.push();
+ navItems.push();
}
navItems.push();
diff --git a/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js b/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js
new file mode 100644
index 000000000..189f403bd
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
+import { connect } from 'react-redux';
+import { NavLink, withRouter } from 'react-router-dom';
+import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
+import { me } from 'flavours/glitch/util/initial_state';
+import { List as ImmutableList } from 'immutable';
+import { FormattedMessage } from 'react-intl';
+
+const mapStateToProps = state => ({
+ locked: state.getIn(['accounts', me, 'locked']),
+ count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
+});
+
+export default @withRouter
+@connect(mapStateToProps)
+class FollowRequestsNavLink extends React.Component {
+
+ static propTypes = {
+ dispatch: PropTypes.func.isRequired,
+ locked: PropTypes.bool,
+ count: PropTypes.number.isRequired,
+ };
+
+ componentDidMount () {
+ const { dispatch, locked } = this.props;
+
+ if (locked) {
+ dispatch(fetchFollowRequests());
+ }
+ }
+
+ render () {
+ const { locked, count } = this.props;
+
+ if (!locked || count === 0) {
+ return null;
+ }
+
+ return ;
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/ui/components/list_panel.js b/app/javascript/flavours/glitch/features/ui/components/list_panel.js
index 50592d357..b2e6925b7 100644
--- a/app/javascript/flavours/glitch/features/ui/components/list_panel.js
+++ b/app/javascript/flavours/glitch/features/ui/components/list_panel.js
@@ -13,7 +13,7 @@ const getOrderedLists = createSelector([state => state.get('lists')], lists => {
return lists;
}
- return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+ return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title'))).take(4);
});
const mapStateToProps = state => ({
@@ -37,7 +37,7 @@ class ListPanel extends ImmutablePureComponent {
render () {
const { lists } = this.props;
- if (!lists) {
+ if (!lists || lists.isEmpty()) {
return null;
}
diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
index 68dde7c5c..c75bffe4d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
+++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
@@ -3,12 +3,14 @@ import { NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import Icon from 'flavours/glitch/components/icon';
import NotificationsCounterIcon from './notifications_counter_icon';
+import FollowRequestsNavLink from './follow_requests_nav_link';
import ListPanel from './list_panel';
const NavigationPanel = () => (
+
diff --git a/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js b/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js
index 25df35264..679c02dce 100644
--- a/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js
+++ b/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js
@@ -1,26 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import Icon from 'flavours/glitch/components/icon';
+import IconWithBadge from 'flavours/glitch/components/icon';
const mapStateToProps = state => ({
- count: state.getIn(['notifications', 'unread']),
- showBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
+ count: state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0,
+ icon: 'bell',
});
-const formatNumber = num => num > 99 ? '99+' : num;
-
-const NotificationsCounterIcon = ({ count, className, showBadge }) => (
-
-
- {showBadge && count > 0 && {formatNumber(count)}}
-
-);
-
-NotificationsCounterIcon.propTypes = {
- count: PropTypes.number.isRequired,
- showBadge: PropTypes.bool,
- className: PropTypes.string,
-};
-
-export default connect(mapStateToProps)(NotificationsCounterIcon);
+export default connect(mapStateToProps)(IconWithBadge);