diff --git a/app/API/graphql_queries.js b/app/API/graphql_queries.js index 8c3d18ab0..0267b227b 100644 --- a/app/API/graphql_queries.js +++ b/app/API/graphql_queries.js @@ -72,3 +72,12 @@ export const loggedInUserUnreadNotificationsCount = gql` } } ` + +export const loggedInUserPendingModerationCount = gql` + query LoggedInUserUnreadNotificationsCount { + loggedInUser { + id + actions_pending_moderation + } + } +` diff --git a/app/components/App/Sidebar.jsx b/app/components/App/Sidebar.jsx index adc46cd39..55f8ac9f2 100644 --- a/app/components/App/Sidebar.jsx +++ b/app/components/App/Sidebar.jsx @@ -1,8 +1,10 @@ import React from 'react' import { connect } from 'react-redux' import { Link } from 'react-router' +import { Query } from 'react-apollo' import { withNamespaces } from 'react-i18next' import classNames from 'classnames' +import { get } from 'lodash' import capitalize from 'voca/capitalize' import { Flex } from '@rebass/grid' @@ -15,12 +17,14 @@ import { Facebook } from 'styled-icons/fa-brands/Facebook' import { LinkExternal } from 'styled-icons/octicons/LinkExternal' +import { loggedInUserPendingModerationCount } from '../../API/graphql_queries' import { MOBILE_WIDTH_THRESHOLD, MIN_REPUTATION_MODERATION } from '../../constants' import RawIcon from '../Utils/RawIcon' import ReputationGuard from '../Utils/ReputationGuard' import { closeSidebar, toggleSidebar } from '../../state/user_preferences/reducer' import UserLanguageSelector from '../LoggedInUser/UserLanguageSelector' import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab' +import Tag from '../Utils/Tag' @connect((state) => ({ sidebarExpended: state.UserPreferences.sidebarExpended }), { toggleSidebar, @@ -142,9 +146,21 @@ export default class Sidebar extends React.PureComponent { {capitalize(t('entities.video_plural'))} - - {t('menu.moderation')} - + + {({ data }) => { + const pendingCount = get(data, 'loggedInUser.actions_pending_moderation', 0) + return ( + + {t('menu.moderation')} + {pendingCount} + + ) + }} + ) diff --git a/app/styles/_components/App/sidebar.sass b/app/styles/_components/App/sidebar.sass index bcdc8d12b..a04d74200 100644 --- a/app/styles/_components/App/sidebar.sass +++ b/app/styles/_components/App/sidebar.sass @@ -43,6 +43,8 @@ $border-color: lightgrey .menu-content padding: 9px + & .tag + margin: 0 5px .link-with-icon > i width: 20px @@ -104,6 +106,8 @@ $border-color: lightgrey width: 100% &> span display: none + &> .tag + margin: 0 5px .connect-register-buttons margin-bottom: 5px