+
-
-
+
{formatDate(props.date)}
{
- evt.preventDefault()
- evt.stopPropagation()
- props.onReadToggleClick(props.id)
+ evt.preventDefault();
+ evt.stopPropagation();
+ props.onReadToggleClick(props.id);
}}
>
-
- )
+ );
- return (
- props.goto
- ?
onLinkClick(id)}>{notificationItem}
- : notificationItem
- )
-}
+ return props.goto ? (
+
onLinkClick(id)}
+ >
+ {notificationItem}
+
+ ) : (
+ notificationItem
+ );
+};
-const notificationType = PropTypes.oneOf(_.values(NOTIFICATION_TYPE))
+const notificationType = PropTypes.oneOf(_.values(NOTIFICATION_TYPE));
NotificationItem.propTypes = {
type: notificationType.isRequired,
@@ -118,6 +139,6 @@ NotificationItem.propTypes = {
seen: PropTypes.bool,
onReadToggleClick: PropTypes.func.isRequired,
onLinkClick: PropTypes.func.isRequired,
-}
+};
-export default NotificationItem
+export default NotificationItem;
diff --git a/src/components/Notifications/NotificationItem/styles.scss b/src/components/Notifications/NotificationItem/styles.scss
index a3f29ed..7580017 100644
--- a/src/components/Notifications/NotificationItem/styles.scss
+++ b/src/components/Notifications/NotificationItem/styles.scss
@@ -1,5 +1,5 @@
// this is to include tc styles in the output library
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
:global {
.notification-item-link {
@@ -18,7 +18,7 @@
&.unseen {
.notification-item {
box-shadow: inset 2px 0 0 0 $tc-light-blue;
- &:hover{
+ &:hover {
box-shadow: none;
}
}
diff --git a/src/components/Notifications/NotificationsBell/index.jsx b/src/components/Notifications/NotificationsBell/index.jsx
index 11b1eb2..a0bbc66 100644
--- a/src/components/Notifications/NotificationsBell/index.jsx
+++ b/src/components/Notifications/NotificationsBell/index.jsx
@@ -1,30 +1,36 @@
/**
* Notifications bell icon
*/
-import React from 'react'
-import PropTypes from 'prop-types'
-import cn from 'classnames'
-import Bell from '../../../assets/icons/ui-bell.svg'
+import React from "react";
+import PropTypes from "prop-types";
+import cn from "classnames";
+import Bell from "../../../assets/icons/ui-bell.svg";
import { useSelector } from "react-redux";
-import { filterReadNotifications } from '../../../utils/notifications';
-import './styles.scss'
+import { filterReadNotifications } from "../../../utils/notifications";
+import "./styles.scss";
const NotificationsBell = ({ onClick, hasUnread }) => {
const unread = useSelector((state) => {
- return filterReadNotifications(state.notifications.notifications).length
- + filterReadNotifications(state.notifications.communityNotifications).length;
+ return (
+ filterReadNotifications(state.notifications.notifications).length +
+ filterReadNotifications(state.notifications.communityNotifications).length
+ );
});
return (
-
+
- )
-}
+ );
+};
NotificationsBell.propTypes = {
hasUnread: PropTypes.bool,
- onClick: PropTypes.func
-}
+ onClick: PropTypes.func,
+};
-export default NotificationsBell
+export default NotificationsBell;
diff --git a/src/components/Notifications/NotificationsBell/styles.scss b/src/components/Notifications/NotificationsBell/styles.scss
index de45930..8a0f3b9 100644
--- a/src/components/Notifications/NotificationsBell/styles.scss
+++ b/src/components/Notifications/NotificationsBell/styles.scss
@@ -1,4 +1,4 @@
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
.container {
align-items: center;
diff --git a/src/components/Notifications/NotificationsDropdown/index.jsx b/src/components/Notifications/NotificationsDropdown/index.jsx
index e30c65a..d074651 100644
--- a/src/components/Notifications/NotificationsDropdown/index.jsx
+++ b/src/components/Notifications/NotificationsDropdown/index.jsx
@@ -3,95 +3,95 @@
*
* A bell icon which toggles a dropdown with notifications
*/
-import React from 'react'
-import PropTypes from 'prop-types'
-import Dropdown from '../../Dropdown/Dropdown'
-import NotificationsBell from '../NotificationsBell'
+import React from "react";
+import PropTypes from "prop-types";
+import Dropdown from "../../Dropdown/Dropdown";
+import NotificationsBell from "../NotificationsBell";
class EnhancedDropdown extends Dropdown {
constructor(props) {
- super(props)
- this.onClickOutside = this.onClickOutside.bind(this)
+ super(props);
+ this.onClickOutside = this.onClickOutside.bind(this);
}
onClickOutside(evt) {
- let currNode = evt.target
- let isDropdown = false
+ let currNode = evt.target;
+ let isDropdown = false;
do {
- if (currNode.className
- && currNode.className.indexOf
- && currNode.className.indexOf('dropdown-wrap') > -1) {
- isDropdown = true
- break
+ if (
+ currNode.className &&
+ currNode.className.indexOf &&
+ currNode.className.indexOf("dropdown-wrap") > -1
+ ) {
+ isDropdown = true;
+ break;
}
- currNode = currNode.parentNode
+ currNode = currNode.parentNode;
- if (!currNode)
- break
- } while (currNode.tagName)
+ if (!currNode) break;
+ } while (currNode.tagName);
if (!isDropdown) {
this.setState({ isOpen: false }, () => {
- this.props.onToggle(false)
- this.refreshEventHandlers()
- })
+ this.props.onToggle(false);
+ this.refreshEventHandlers();
+ });
}
}
}
class NotificationsDropdown extends React.Component {
-
constructor(props) {
- super(props)
+ super(props);
this.state = {
- isOpen: false
- }
+ isOpen: false,
+ };
- this.toggle = this.toggle.bind(this)
+ this.toggle = this.toggle.bind(this);
}
toggle(isOpen) {
- if (typeof isOpen === 'object') {
+ if (typeof isOpen === "object") {
if (this.props.onToggle) {
- this.props.onToggle(!this.state.isOpen)
+ this.props.onToggle(!this.state.isOpen);
}
- this.setState({ isOpen: !this.state.isOpen})
+ this.setState({ isOpen: !this.state.isOpen });
} else {
if (this.props.onToggle) {
- this.props.onToggle(isOpen)
+ this.props.onToggle(isOpen);
}
- this.setState({ isOpen })
+ this.setState({ isOpen });
}
}
render() {
- const { hasUnread, children } = this.props
+ const { hasUnread, children } = this.props;
return (
-
+
-
-
- {children}
-
+
{children}
- )
+ );
}
}
NotificationsDropdown.propTypes = {
hasUnread: PropTypes.bool,
onToggle: PropTypes.func,
- children: PropTypes.node
-}
+ children: PropTypes.node,
+};
-export default NotificationsDropdown
+export default NotificationsDropdown;
diff --git a/src/components/Notifications/NotificationsDropdownHeader/index.jsx b/src/components/Notifications/NotificationsDropdownHeader/index.jsx
index e822fb8..45f422d 100644
--- a/src/components/Notifications/NotificationsDropdownHeader/index.jsx
+++ b/src/components/Notifications/NotificationsDropdownHeader/index.jsx
@@ -3,22 +3,28 @@
*
* Shows title and "Mark all as read" button
*/
-import React from 'react'
-import PropTypes from 'prop-types'
-import './styles.scss'
+import React from "react";
+import PropTypes from "prop-types";
+import "./styles.scss";
const NotificationsDropdownHeader = (props) => (
Notifications
- Mark all as read
+
+ Mark all as read
+
-)
+);
NotificationsDropdownHeader.propTypes = {
onMarkAllClick: PropTypes.func.isRequired,
- hasUnread: PropTypes.bool
-}
+ hasUnread: PropTypes.bool,
+};
-export default NotificationsDropdownHeader
+export default NotificationsDropdownHeader;
diff --git a/src/components/Notifications/NotificationsDropdownHeader/styles.scss b/src/components/Notifications/NotificationsDropdownHeader/styles.scss
index 5811676..d63c809 100644
--- a/src/components/Notifications/NotificationsDropdownHeader/styles.scss
+++ b/src/components/Notifications/NotificationsDropdownHeader/styles.scss
@@ -1,5 +1,5 @@
// this is to include tc styles in the output library
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
:global {
.notifications-dropdown-header {
@@ -27,12 +27,13 @@
line-height: 39px;
position: relative;
&:after {
- content: '\a0\b7\a0';
+ content: "\a0\b7\a0";
display: inline-block;
}
}
- .mark-all, .settings {
+ .mark-all,
+ .settings {
@include roboto;
background: none;
border: 0;
@@ -42,7 +43,7 @@
font-size: 12px;
letter-spacing: 0;
padding: 0;
- align-self: flex-end
+ align-self: flex-end;
}
}
}
diff --git a/src/components/Notifications/NotificationsEmpty/index.jsx b/src/components/Notifications/NotificationsEmpty/index.jsx
index 993d7e5..ea7a6cd 100644
--- a/src/components/Notifications/NotificationsEmpty/index.jsx
+++ b/src/components/Notifications/NotificationsEmpty/index.jsx
@@ -1,26 +1,27 @@
/**
* Message to show when there is no notifications
*/
-import React from 'react'
-import PropTypes from 'prop-types'
-import './styles.scss'
-import Bell from '../../../assets/icons/bell.svg'
+import React from "react";
+import PropTypes from "prop-types";
+import "./styles.scss";
+import Bell from "../../../assets/icons/bell.svg";
-
-
-const NotificationsEmpty = ({children, message = 'Good job! You�re all caught up'}) => (
+const NotificationsEmpty = ({
+ children,
+ message = "Good job! You�re all caught up",
+}) => (
-
{message}
{children &&
{children}
}
-)
+);
NotificationsEmpty.propTypes = {
message: PropTypes.string,
- children: PropTypes.node
-}
+ children: PropTypes.node,
+};
-export default NotificationsEmpty
+export default NotificationsEmpty;
diff --git a/src/components/Notifications/NotificationsEmpty/styles.scss b/src/components/Notifications/NotificationsEmpty/styles.scss
index 95f2bfe..1669911 100644
--- a/src/components/Notifications/NotificationsEmpty/styles.scss
+++ b/src/components/Notifications/NotificationsEmpty/styles.scss
@@ -1,5 +1,5 @@
// this is to include tc styles in the output library
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
:global {
.notifications-empty {
diff --git a/src/components/Notifications/NotificationsMobilePage/index.jsx b/src/components/Notifications/NotificationsMobilePage/index.jsx
index b01d4ef..f2b582a 100644
--- a/src/components/Notifications/NotificationsMobilePage/index.jsx
+++ b/src/components/Notifications/NotificationsMobilePage/index.jsx
@@ -1,37 +1,34 @@
/**
* Fullscreen popup which shows notifications in mobile resolution
*/
-import React from 'react'
-import PropTypes from 'prop-types'
-import MobilePage from '../MobilePage'
-import NotificationsBell from '../NotificationsBell'
-import XMartIcon from '../../../assets/icons/x-mark-white.svg'
-import './styles.scss'
+import React from "react";
+import PropTypes from "prop-types";
+import MobilePage from "../MobilePage";
+import NotificationsBell from "../NotificationsBell";
+import XMartIcon from "../../../assets/icons/x-mark-white.svg";
+import "./styles.scss";
const NotificationsDropdown = ({ onToggle, children, hasUnread, isOpen }) => (
-
+
{isOpen && (
-
+ {children}
)}
-)
+);
NotificationsDropdown.propTypes = {
hasUnread: PropTypes.bool,
onToggle: PropTypes.func.isRequired,
- children: PropTypes.node
-}
+ children: PropTypes.node,
+};
-export default NotificationsDropdown
+export default NotificationsDropdown;
diff --git a/src/components/Notifications/NotificationsMobilePage/styles.scss b/src/components/Notifications/NotificationsMobilePage/styles.scss
index c68062c..343415f 100644
--- a/src/components/Notifications/NotificationsMobilePage/styles.scss
+++ b/src/components/Notifications/NotificationsMobilePage/styles.scss
@@ -1,4 +1,4 @@
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
.container {
align-items: center;
@@ -19,7 +19,7 @@
padding: 0 16px;
&::before {
- content: '';
+ content: "";
}
}
diff --git a/src/components/Notifications/NotificationsReadAll/index.jsx b/src/components/Notifications/NotificationsReadAll/index.jsx
index a64fe3d..e73adaf 100644
--- a/src/components/Notifications/NotificationsReadAll/index.jsx
+++ b/src/components/Notifications/NotificationsReadAll/index.jsx
@@ -4,17 +4,20 @@
* FIXME reimplement this component using general Button component from `topcoder-react-utils`
* after update to the latest version of `topcoder-react-utils`
*/
-import React from 'react'
-import { Link } from '@reach/router'
+import React from "react";
+import { Link } from "@reach/router";
-import './styles.scss'
+import "./styles.scss";
-const NotificationsReadAll = ({ children, to, onClick }) => (
+const NotificationsReadAll = ({ children, to, onClick }) =>
to ? (
-
{children}
+
+ {children}
+
) : (
-
{children}
- )
-)
+
+ {children}
+
+ );
-export default NotificationsReadAll
+export default NotificationsReadAll;
diff --git a/src/components/Notifications/NotificationsReadAll/styles.scss b/src/components/Notifications/NotificationsReadAll/styles.scss
index b276843..c720cc4 100644
--- a/src/components/Notifications/NotificationsReadAll/styles.scss
+++ b/src/components/Notifications/NotificationsReadAll/styles.scss
@@ -1,4 +1,4 @@
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
.read-all {
@include roboto;
diff --git a/src/components/Notifications/NotificationsSection/index.jsx b/src/components/Notifications/NotificationsSection/index.jsx
index 6b3623c..5e28284 100644
--- a/src/components/Notifications/NotificationsSection/index.jsx
+++ b/src/components/Notifications/NotificationsSection/index.jsx
@@ -3,50 +3,68 @@
*
* Displays source title, "mark all" button and list of notifications
*/
-import React from 'react'
-import PropTypes from 'prop-types'
-import { TransitionGroup, Transition } from 'react-transition-group'
-import NotificationItem from '../NotificationItem'
-import NotificationsSectionTitle from '../NotificationsSectionTitle'
-import LoadingIndicator from '../../LoadingIndicator'
-import cn from 'classnames'
-import './styles.scss'
+import React from "react";
+import PropTypes from "prop-types";
+import { TransitionGroup, Transition } from "react-transition-group";
+import NotificationItem from "../NotificationItem";
+import NotificationsSectionTitle from "../NotificationsSectionTitle";
+import LoadingIndicator from "../../LoadingIndicator";
+import cn from "classnames";
+import "./styles.scss";
const NotificationsSection = (props) => {
return (
-
- {!(props.isSimple && props.isGlobal) &&
+
+ {!(props.isSimple && props.isGlobal) && (
- }
+ )}
- {props.transitionState !== 'exiting' && props.notifications.map(notification => (
-
- { state => (
-
- ))}
+ {props.transitionState !== "exiting" &&
+ props.notifications.map((notification) => (
+
+ {(state) => (
+
+ ))}
- {props.onViewOlderClick && props.total > props.notifications.length && (
- props.isLoading || props.isCommunityLoading ? (
-
+ {props.onViewOlderClick &&
+ props.total > props.notifications.length &&
+ (props.isLoading || props.isCommunityLoading ? (
+
+
) : (
-
View {props.total - props.notifications.length} older notifications
- )
- )
- }
+
+ View {props.total - props.notifications.length} older notifications
+
+ ))}
- )
-}
+ );
+};
NotificationsSection.propTypes = {
isSimple: PropTypes.bool,
@@ -61,6 +79,6 @@ NotificationsSection.propTypes = {
notifications: PropTypes.array.isRequired,
isLoading: PropTypes.bool,
isCommunityLoading: PropTypes.bool,
-}
+};
-export default NotificationsSection
+export default NotificationsSection;
diff --git a/src/components/Notifications/NotificationsSection/styles.scss b/src/components/Notifications/NotificationsSection/styles.scss
index e03b361..b33d581 100644
--- a/src/components/Notifications/NotificationsSection/styles.scss
+++ b/src/components/Notifications/NotificationsSection/styles.scss
@@ -1,5 +1,5 @@
// this is to include tc styles in the output library
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
:global {
.notifications-section {
@@ -36,7 +36,7 @@
margin-top: 20px;
}
- .notifications-section.is-simple+.notifications-section.is-simple {
+ .notifications-section.is-simple + .notifications-section.is-simple {
margin-top: 0;
}
diff --git a/src/components/Notifications/NotificationsSectionTitle/index.jsx b/src/components/Notifications/NotificationsSectionTitle/index.jsx
index 5dbcb13..2769c20 100644
--- a/src/components/Notifications/NotificationsSectionTitle/index.jsx
+++ b/src/components/Notifications/NotificationsSectionTitle/index.jsx
@@ -3,30 +3,40 @@
*
* Can be two types depend on isGlobal flag
*/
-import React from 'react'
-import PropTypes from 'prop-types'
-import './styles.scss'
+import React from "react";
+import PropTypes from "prop-types";
+import "./styles.scss";
const NotificationsSectionTitle = (props) => {
return (
-
- {props.isGlobal ?
- {props.title} :
- {props.title}
+
+ {props.isGlobal ? (
+ {props.title}
+ ) : (
+ {props.title}
+ )}
+ {props.onMarkAllClick && (
- Mark All
+
+ Mark All
+
- }
+ )}
- )
-}
+ );
+};
NotificationsSectionTitle.propTypes = {
isGlobal: PropTypes.bool,
title: PropTypes.string.isRequired,
- onMarkAllClick: PropTypes.func
-}
+ onMarkAllClick: PropTypes.func,
+};
-export default NotificationsSectionTitle
+export default NotificationsSectionTitle;
diff --git a/src/components/Notifications/NotificationsSectionTitle/styles.scss b/src/components/Notifications/NotificationsSectionTitle/styles.scss
index fc83f45..833bf94 100644
--- a/src/components/Notifications/NotificationsSectionTitle/styles.scss
+++ b/src/components/Notifications/NotificationsSectionTitle/styles.scss
@@ -1,5 +1,5 @@
// this is to include tc styles in the output library
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
:global {
.exiting {
diff --git a/src/components/NotificationsMenu/index.jsx b/src/components/NotificationsMenu/index.jsx
index 84f7d4e..fc1e670 100644
--- a/src/components/NotificationsMenu/index.jsx
+++ b/src/components/NotificationsMenu/index.jsx
@@ -4,9 +4,9 @@
* Component to show the bell icon and the notification dropdown
*/
-import React, {} from "react";
+import React from "react";
import "./styles.css";
-import NotificationDropdown from '../../containers/NotificationsDropdownContainer'
+import NotificationDropdown from "../../containers/NotificationsDropdownContainer";
const NotificationsMenu = () => {
return (
diff --git a/src/components/NotificationsMenu/styles.css b/src/components/NotificationsMenu/styles.css
index 5ef0cf7..be7ea7b 100644
--- a/src/components/NotificationsMenu/styles.css
+++ b/src/components/NotificationsMenu/styles.css
@@ -1,9 +1,9 @@
.notifications-menu {
- position: relative;
- margin-right: 18px;
- height: 30px;
- display: flex;
- cursor: pointer;
- align-items: center;
- justify-content: center;
+ position: relative;
+ margin-right: 18px;
+ height: 30px;
+ display: flex;
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
}
diff --git a/src/components/NotificationsModal/index.jsx b/src/components/NotificationsModal/index.jsx
index 047e82e..c6bda25 100644
--- a/src/components/NotificationsModal/index.jsx
+++ b/src/components/NotificationsModal/index.jsx
@@ -4,21 +4,21 @@
* The component to contain View All Notifications page.
*/
import React from "react";
-import { Portal } from 'react-portal'
-import { useNavigate } from '@reach/router'
-import Notifications from '../../containers/NotificationsContainer'
-import XMark from '../../assets/icons/x-mark.svg'
+import { Portal } from "react-portal";
+import { useNavigate } from "@reach/router";
+import Notifications from "../../containers/NotificationsContainer";
+import XMark from "../../assets/icons/x-mark.svg";
import "./styles.scss";
const NotificationsModal = ({ isEmpty }) => {
- const navigate = useNavigate()
+ const navigate = useNavigate();
const close = (
{
- navigate('/')
+ navigate("/");
}}
>
@@ -20,23 +20,21 @@ const SideFilter = (props) => (
/>
))}
- {props.children &&
-
- {props.children}
-
- }
+ {props.children && (
+
{props.children}
+ )}
- {props.filters.map(filter => (
+ {props.filters.map((filter) => (
(
))}
-)
+);
SideFilterSection.defaultProps = {
filter: [],
- selectedFilter: ''
-}
+ selectedFilter: "",
+};
SideFilterSection.propTypes = {
filter: PropTypes.array,
onFilterItemClick: PropTypes.func.isRequired,
- selectedFilter: PropTypes.string
-}
+ selectedFilter: PropTypes.string,
+};
-export default SideFilterSection
+export default SideFilterSection;
diff --git a/src/components/SideFilter/SideFilterSection.scss b/src/components/SideFilter/SideFilterSection.scss
index 65089b3..e461819 100644
--- a/src/components/SideFilter/SideFilterSection.scss
+++ b/src/components/SideFilter/SideFilterSection.scss
@@ -1,9 +1,9 @@
// this is to include tc styles in the output library
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
:global {
.side-filter-section + .side-filter-section::before {
- content: '';
+ content: "";
display: block;
border-top: 1px solid $tc-gray-10;
margin: 10px;
diff --git a/src/components/SideFilter/SideFilterSectionItem.jsx b/src/components/SideFilter/SideFilterSectionItem.jsx
index 5a16308..6e83f32 100644
--- a/src/components/SideFilter/SideFilterSectionItem.jsx
+++ b/src/components/SideFilter/SideFilterSectionItem.jsx
@@ -5,33 +5,35 @@
* - Has onClick callback with filter value argument
*/
-import React from 'react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import './SideFilterSectionItem.scss'
+import React from "react";
+import PropTypes from "prop-types";
+import _ from "lodash";
+import "./SideFilterSectionItem.scss";
const SideFilterSectionItem = (props) => (
props.onClick(props.value)}
>
{props.title}
- {_.isNumber(props.quantity) && {props.quantity}
}
+ {_.isNumber(props.quantity) && (
+ {props.quantity}
+ )}
-)
+);
SideFilterSectionItem.defaultProps = {
quantity: null,
- isSelected: false
-}
+ isSelected: false,
+};
SideFilterSectionItem.propTypes = {
onClick: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
quantity: PropTypes.number,
- isSelected: PropTypes.bool
-}
+ isSelected: PropTypes.bool,
+};
-export default SideFilterSectionItem
+export default SideFilterSectionItem;
diff --git a/src/components/SideFilter/SideFilterSectionItem.scss b/src/components/SideFilter/SideFilterSectionItem.scss
index 9fb24ca..ab584ce 100644
--- a/src/components/SideFilter/SideFilterSectionItem.scss
+++ b/src/components/SideFilter/SideFilterSectionItem.scss
@@ -1,5 +1,5 @@
// this is to include tc styles in the output library
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
:global {
.side-filter-section-item {
diff --git a/src/components/Sticky/index.jsx b/src/components/Sticky/index.jsx
index 0cf938d..7197fbe 100644
--- a/src/components/Sticky/index.jsx
+++ b/src/components/Sticky/index.jsx
@@ -1,43 +1,44 @@
-import React from 'react'
-import StickyComponent from 'react-stickynode'
+import React from "react";
+import StickyComponent from "react-stickynode";
export default class Sticky extends React.Component {
-
constructor(props) {
- super(props)
- this.mountSticky = (sticky) => { this.sticky = sticky }
- this.handleScroll = this.handleScroll.bind(this)
- this.updateSticky = this.updateSticky.bind(this)
+ super(props);
+ this.mountSticky = (sticky) => {
+ this.sticky = sticky;
+ };
+ this.handleScroll = this.handleScroll.bind(this);
+ this.updateSticky = this.updateSticky.bind(this);
}
componentDidMount() {
- window.addEventListener('scroll', this.handleScroll)
- document.addEventListener('refreshsticky', this.updateSticky)
+ window.addEventListener("scroll", this.handleScroll);
+ document.addEventListener("refreshsticky", this.updateSticky);
}
componentWillUnmount() {
- window.removeEventListener('scroll', this.handleScroll)
- document.removeEventListener('refreshsticky', this.updateSticky)
+ window.removeEventListener("scroll", this.handleScroll);
+ document.removeEventListener("refreshsticky", this.updateSticky);
}
updateSticky() {
setTimeout(() => {
if (this.sticky) {
- this.sticky.updateInitialDimension()
- this.sticky.update()
+ this.sticky.updateInitialDimension();
+ this.sticky.update();
}
- })
+ });
}
handleScroll() {
setTimeout(() => {
if (this.sticky) {
- this.sticky.update()
+ this.sticky.update();
}
- })
+ });
}
render() {
- return {profile.handle}
) }
-
+ {isMobile ? (
+ {profile.handle}
+ )}
{isOpenMenu && (
@@ -60,7 +63,9 @@ const UserMenu = ({ profile }) => {
diff --git a/src/constants/apps.js b/src/constants/apps.js
index f54eb10..d93176e 100644
--- a/src/constants/apps.js
+++ b/src/constants/apps.js
@@ -8,6 +8,7 @@ import myteamsIcon from '../assets/images/my-teams.svg';
import myteamsGreenIcon from '../assets/images/my-teams-green.svg';
import createTeamIcon from '../assets/images/create-team.svg';
import createTeamGreenIcon from '../assets/images/create-team-green.svg';
+import earnIcon from "../assets/images/earn.svg";
/**
* Micro-app categories
@@ -42,17 +43,25 @@ export const APP_CATEGORIES = [
icon: appTaasAdminIcon,
path: '/taas-admin',
menu: [],
+ roles: ["bookingmanager","administrator"],
},
{
title: 'Documentation',
icon: appDocumentationIcon,
- path: '/model',
+ path: "/model",
menu: [],
},
{
- title: 'Community Admin',
+ title: "Community Admin",
icon: myteamsIcon,
- path: '/community-admin',
+ path: "/community-admin",
+ menu: [],
+ roles: ["Community Admin"],
+ },
+ {
+ title: "Earn",
+ icon: earnIcon,
+ path: "/earn",
menu: [],
},
],
diff --git a/src/constants/notifications.js b/src/constants/notifications.js
index b0ebc7d..4b39ebd 100644
--- a/src/constants/notifications.js
+++ b/src/constants/notifications.js
@@ -505,8 +505,7 @@ export const NOTIFICATIONS = [
type: NOTIFICATION_TYPE.MEMBER_ADDED,
rules: [
{
- text:
- "You are requested to add
{{userFullName}} as a copilot",
+ text: "You are requested to add
{{userFullName}} as a copilot",
topcoderRoles: [ROLE_CONNECT_COPILOT_MANAGER],
goTo: GOTO.TOPCODER_TEAM,
},
@@ -843,8 +842,7 @@ export const NOTIFICATIONS = [
type: NOTIFICATION_TYPE.UPDATES,
rules: [
{
- text:
- "
{{userHandle}} updated the project specification",
+ text: "
{{userHandle}} updated the project specification",
shouldBundle: true,
bundledText:
"Project specification has been modified {{bundledCount}} times. Last modified by:
{{userHandle}} ",
@@ -867,8 +865,7 @@ export const NOTIFICATIONS = [
type: NOTIFICATION_TYPE.UPDATES,
rules: [
{
- text:
- "
{{userFullName}} updated the project specification",
+ text: "
{{userFullName}} updated the project specification",
shouldBundle: true,
bundledText:
"Project specification has been modified {{bundledCount}} times. Last modified by:
{{userHandle}} ",
@@ -1161,8 +1158,7 @@ export const NOTIFICATIONS = [
goTo: GOTO.PHASE,
},
{
- text:
- "
{{userHandle}} activated a milestone in the phase",
+ text: "
{{userHandle}} activated a milestone in the phase",
shouldBundle: true,
bundledText:
"Milestones activated {{bundledCount}} times. Last activated by:
{{userHandle}} ",
@@ -1191,8 +1187,7 @@ export const NOTIFICATIONS = [
goTo: GOTO.PHASE,
},
{
- text:
- "
{{userHandle}} completed a milestone in the phase",
+ text: "
{{userHandle}} completed a milestone in the phase",
shouldBundle: true,
bundledText:
"Milestones completed {{bundledCount}} times. Last completed by:
{{userHandle}} ",
@@ -1218,8 +1213,7 @@ export const NOTIFICATIONS = [
goTo: GOTO.PHASE,
},
{
- text:
- "Waiting for customer on a milestone in the project {{projectName}}",
+ text: "Waiting for customer on a milestone in the project {{projectName}}",
projectRoles: [
PROJECT_ROLE_COPILOT,
PROJECT_ROLE_MANAGER,
diff --git a/src/containers/NotificationsContainer/index.jsx b/src/containers/NotificationsContainer/index.jsx
index 5b9a585..93f2278 100644
--- a/src/containers/NotificationsContainer/index.jsx
+++ b/src/containers/NotificationsContainer/index.jsx
@@ -1,21 +1,29 @@
/**
* Container component for notifications list with filter
*/
-import React, { Component } from 'react'
-
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import { connect } from 'react-redux'
-import { Link } from '@reach/router'
-import Sticky from '../../components/Sticky'
-import { getNotifications, getCommunityNotifications, setNotificationsFilterBy, markAllNotificationsRead,
- toggleNotificationRead, viewOlderNotifications, toggleBundledNotificationRead,
- hideOlderNotifications, toggleNotificationSeen } from '../../actions/notifications'
-import NotificationsSection from '../../components/Notifications/NotificationsSection'
-import NotificationsSectionTitle from '../../components/Notifications/NotificationsSectionTitle'
-import SideFilter from '../../components/SideFilter'
-import NotificationsEmpty from '../../components/Notifications/NotificationsEmpty'
-import spinnerWhileLoading from '../../components/LoadingSpinner'
+import React, { Component } from "react";
+
+import PropTypes from "prop-types";
+import _ from "lodash";
+import { connect } from "react-redux";
+import { Link } from "@reach/router";
+import Sticky from "../../components/Sticky";
+import {
+ getNotifications,
+ getCommunityNotifications,
+ setNotificationsFilterBy,
+ markAllNotificationsRead,
+ toggleNotificationRead,
+ viewOlderNotifications,
+ toggleBundledNotificationRead,
+ hideOlderNotifications,
+ toggleNotificationSeen,
+} from "../../actions/notifications";
+import NotificationsSection from "../../components/Notifications/NotificationsSection";
+import NotificationsSectionTitle from "../../components/Notifications/NotificationsSectionTitle";
+import SideFilter from "../../components/SideFilter";
+import NotificationsEmpty from "../../components/Notifications/NotificationsEmpty";
+import spinnerWhileLoading from "../../components/LoadingSpinner";
import {
getNotificationsFilters,
getCommunityNotificationsFilters,
@@ -25,73 +33,107 @@ import {
limitQuantityInSources,
preRenderNotifications,
preRenderCommunityNotifications,
-} from '../../utils/notifications'
-import { NOTIFICATIONS_NEW_PER_SOURCE } from '../../constants/notifications'
-import './styles.scss'
+} from "../../utils/notifications";
+import { NOTIFICATIONS_NEW_PER_SOURCE } from "../../constants/notifications";
+import "./styles.scss";
const NotificationsContainerView = (props) => {
if (!props.initialized && !props.communityInitialized) {
- return null
+ return null;
}
- const { sources, communitySources, notifications, communityNotifications, filterBy, setNotificationsFilterBy,
- markAllNotificationsRead, toggleNotificationRead, viewOlderNotifications,
- oldSourceIds, pending, toggleBundledNotificationRead } = props
+ const {
+ sources,
+ communitySources,
+ notifications,
+ communityNotifications,
+ filterBy,
+ setNotificationsFilterBy,
+ markAllNotificationsRead,
+ toggleNotificationRead,
+ viewOlderNotifications,
+ oldSourceIds,
+ pending,
+ toggleBundledNotificationRead,
+ } = props;
- const notReadNotifications = filterReadNotifications(notifications)
- const allNotificationsBySources = splitNotificationsBySources(sources, notReadNotifications)
+ const notReadNotifications = filterReadNotifications(notifications);
+ const allNotificationsBySources = splitNotificationsBySources(
+ sources,
+ notReadNotifications
+ );
const notificationsBySources = limitQuantityInSources(
allNotificationsBySources,
NOTIFICATIONS_NEW_PER_SOURCE,
oldSourceIds
- )
+ );
- const notReadCommunityNotifications = filterReadNotifications(communityNotifications)
- const allCommunityNotificationsBySources = splitCommunityNotificationsBySources(communitySources, notReadCommunityNotifications)
- const communityNotificationsBySources = allCommunityNotificationsBySources
+ const notReadCommunityNotifications = filterReadNotifications(
+ communityNotifications
+ );
+ const allCommunityNotificationsBySources =
+ splitCommunityNotificationsBySources(
+ communitySources,
+ notReadCommunityNotifications
+ );
+ const communityNotificationsBySources = allCommunityNotificationsBySources;
- let globalSource = notificationsBySources.length > 0 && notificationsBySources[0].id === 'global' ? notificationsBySources[0] : null
- let projectSources = globalSource ? notificationsBySources.slice(1) : notificationsBySources
+ let globalSource =
+ notificationsBySources.length > 0 &&
+ notificationsBySources[0].id === "global"
+ ? notificationsBySources[0]
+ : null;
+ let projectSources = globalSource
+ ? notificationsBySources.slice(1)
+ : notificationsBySources;
if (filterBy) {
- if (filterBy === 'global') {
- projectSources = []
+ if (filterBy === "global") {
+ projectSources = [];
} else {
- globalSource = null
- projectSources = _.filter(projectSources, { id: filterBy })
+ globalSource = null;
+ projectSources = _.filter(projectSources, { id: filterBy });
}
}
- let broadcastSource = communityNotificationsBySources.find(source => source.id === 'broadcast')
- let challengeSources = communityNotificationsBySources.filter(source => source.id !== 'broadcast')
+ let broadcastSource = communityNotificationsBySources.find(
+ (source) => source.id === "broadcast"
+ );
+ let challengeSources = communityNotificationsBySources.filter(
+ (source) => source.id !== "broadcast"
+ );
if (filterBy) {
- if (filterBy === 'broadcast') {
- challengeSources = []
+ if (filterBy === "broadcast") {
+ challengeSources = [];
} else {
- broadcastSource = null
- challengeSources = _.filter(challengeSources, { id: filterBy })
+ broadcastSource = null;
+ challengeSources = _.filter(challengeSources, { id: filterBy });
}
}
const toggleNotificationOrBundleRead = (notificationId) => {
if (!pending) {
- const notification = _.find(notReadNotifications, { id: notificationId }) || _.find(notReadCommunityNotifications, { id: notificationId })
+ const notification =
+ _.find(notReadNotifications, { id: notificationId }) ||
+ _.find(notReadCommunityNotifications, { id: notificationId });
// if it's bundled notification, then toggle all notifications inside the bundle
if (notification.bundledIds) {
- toggleBundledNotificationRead(notificationId, notification.bundledIds)
+ toggleBundledNotificationRead(notificationId, notification.bundledIds);
} else {
- toggleNotificationRead(notificationId)
+ toggleNotificationRead(notificationId);
}
}
- }
+ };
// this function checks that notification is not seen yet,
// before marking it as seen
const markNotificationSeen = (notificationId) => {
- const notification = _.find(notifications, { id: notificationId }) || _.find(communityNotifications, { id: notificationId })
+ const notification =
+ _.find(notifications, { id: notificationId }) ||
+ _.find(communityNotifications, { id: notificationId });
if (notification && !notification.seen) {
- toggleNotificationSeen(notificationId)
+ toggleNotificationSeen(notificationId);
}
- }
+ };
return (
@@ -99,76 +141,115 @@ const NotificationsContainerView = (props) => {
- {globalSource && globalSource.total > 0 &&
+ {globalSource && globalSource.total > 0 && (
!pending && markAllNotificationsRead('global', notifications)}
+ onMarkAllClick={() =>
+ !pending &&
+ markAllNotificationsRead("global", notifications)
+ }
onReadToggleClick={toggleNotificationOrBundleRead}
- onViewOlderClick={() => viewOlderNotifications(globalSource.id)}
+ onViewOlderClick={() =>
+ viewOlderNotifications(globalSource.id)
+ }
onLinkClick={(notificationId) => {
- markNotificationSeen(notificationId)
+ markNotificationSeen(notificationId);
}}
/>
- }
+ )}
- {projectSources.length > 0 && !pending && markAllNotificationsRead(source.id, notifications)}
- onReadToggleClick={toggleNotificationOrBundleRead}
- onViewOlderClick={() => viewOlderNotifications(source.id)}
- onLinkClick={(notificationId) => {
- markNotificationSeen(notificationId)
- }}
- />
- ))}
+ {projectSources.length > 0 && (
+
+ !pending &&
+ markAllNotificationsRead(source.id, notifications)
+ }
+ onReadToggleClick={toggleNotificationOrBundleRead}
+ onViewOlderClick={() => viewOlderNotifications(source.id)}
+ onLinkClick={(notificationId) => {
+ markNotificationSeen(notificationId);
+ }}
+ />
+ ))}
- {challengeSources.length > 0 && !pending && markAllNotificationsRead(source.id, communityNotifications)}
- onReadToggleClick={toggleNotificationOrBundleRead}
- onViewOlderClick={() => viewOlderNotifications(source.id)}
- onLinkClick={(notificationId) => {
- markNotificationSeen(notificationId)
- }}
- />
- ))}
+ {challengeSources.length > 0 && (
+
+ !pending &&
+ markAllNotificationsRead(
+ source.id,
+ communityNotifications
+ )
+ }
+ onReadToggleClick={toggleNotificationOrBundleRead}
+ onViewOlderClick={() => viewOlderNotifications(source.id)}
+ onLinkClick={(notificationId) => {
+ markNotificationSeen(notificationId);
+ }}
+ />
+ ))}
- {broadcastSource && broadcastSource.total > 0 && !pending && markAllNotificationsRead('broadcast', notifications)}
+ onMarkAllClick={() =>
+ !pending &&
+ markAllNotificationsRead("broadcast", notifications)
+ }
onReadToggleClick={toggleNotificationOrBundleRead}
- onViewOlderClick={() => viewOlderNotifications(broadcastSource.id)}
+ onViewOlderClick={() =>
+ viewOlderNotifications(broadcastSource.id)
+ }
onLinkClick={(notificationId) => {
- markNotificationSeen(notificationId)
+ markNotificationSeen(notificationId);
}}
/>
- }
+ )}
- {globalSource || projectSources.length > 0 || challengeSources.length || broadcastSource ?
- End of list
:
+ {globalSource ||
+ projectSources.length > 0 ||
+ challengeSources.length ||
+ broadcastSource ? (
+ End of list
+ ) : (
- Maybe you need to check your
- }
+ )}
- )
-}
+ );
+};
class NotificationsContainer extends Component {
constructor(props) {
- super(props)
+ super(props);
}
componentWillMount() {
- document.title = 'Notifications - TopCoder'
+ document.title = "Notifications - TopCoder";
}
componentWillUnmount() {
- this.props.hideOlderNotifications()
+ this.props.hideOlderNotifications();
}
render() {
- const { notifications, communityNotifications, ...restProps } = this.props
- const preRenderedNotifications = preRenderNotifications(notifications)
- const preRenderedNotifications2 = preRenderCommunityNotifications(communityNotifications)
+ const { notifications, communityNotifications, ...restProps } = this.props;
+ const preRenderedNotifications = preRenderNotifications(notifications);
+ const preRenderedNotifications2 = preRenderCommunityNotifications(
+ communityNotifications
+ );
return (
- )
+ );
}
}
-const enhance = spinnerWhileLoading(props => !(props.isLoading || props.isCommunityLoading))
-const NotificationsContainerWithLoader = enhance(NotificationsContainer)
+const enhance = spinnerWhileLoading(
+ (props) => !(props.isLoading || props.isCommunityLoading)
+);
+const NotificationsContainerWithLoader = enhance(NotificationsContainer);
NotificationsContainer.propTypes = {
isLoading: PropTypes.bool.isRequired,
@@ -226,11 +311,11 @@ NotificationsContainer.propTypes = {
isCommunityLoading: PropTypes.bool.isRequired,
communityInitialized: PropTypes.bool.isRequired,
communityNotifications: PropTypes.array,
-}
+};
const mapStateToProps = ({ notifications, auth }) => {
- return Object.assign({}, notifications, { user: auth.profile })
-}
+ return Object.assign({}, notifications, { user: auth.profile });
+};
const mapDispatchToProps = {
getNotifications,
@@ -242,6 +327,9 @@ const mapDispatchToProps = {
hideOlderNotifications,
toggleBundledNotificationRead,
toggleNotificationSeen,
-}
+};
-export default connect(mapStateToProps, mapDispatchToProps)(NotificationsContainerWithLoader)
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(NotificationsContainerWithLoader);
diff --git a/src/containers/NotificationsContainer/styles.scss b/src/containers/NotificationsContainer/styles.scss
index dc47eec..ccba35b 100644
--- a/src/containers/NotificationsContainer/styles.scss
+++ b/src/containers/NotificationsContainer/styles.scss
@@ -1,5 +1,5 @@
// this is to include tc styles in the output library
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
:global {
.container {
@@ -28,7 +28,7 @@
@media screen and (min-width: $screen-md) and (max-width: 280px * 3) {
/* minus sidebar border width */
- width: calc(100% * 2/3 - 1px);
+ width: calc(100% * 2 / 3 - 1px);
}
@media screen and (max-width: $screen-md - 1px) {
diff --git a/src/containers/NotificationsDropdownContainer/index.jsx b/src/containers/NotificationsDropdownContainer/index.jsx
index 86203e3..f580b5a 100644
--- a/src/containers/NotificationsDropdownContainer/index.jsx
+++ b/src/containers/NotificationsDropdownContainer/index.jsx
@@ -3,13 +3,24 @@
*
* Connects to the state and prepare data for dummy component
*/
-import React from 'react'
-import { Link, navigate } from '@reach/router'
-import { connect } from 'react-redux'
-import _ from 'lodash'
-import { TransitionGroup, Transition } from 'react-transition-group'
-import { getNotifications, getCommunityNotifications, toggleNotificationSeen, markAllNotificationsRead, markAllNotificationsSeen, toggleNotificationRead,
- toggleBundledNotificationRead, viewOlderNotifications, hideOlderNotifications, resetNotifications, resetCommunityNotifications } from '../../actions/notifications'
+import React from "react";
+import { Link, navigate } from "@reach/router";
+import { connect } from "react-redux";
+import _ from "lodash";
+import { TransitionGroup, Transition } from "react-transition-group";
+import {
+ getNotifications,
+ getCommunityNotifications,
+ toggleNotificationSeen,
+ markAllNotificationsRead,
+ markAllNotificationsSeen,
+ toggleNotificationRead,
+ toggleBundledNotificationRead,
+ viewOlderNotifications,
+ hideOlderNotifications,
+ resetNotifications,
+ resetCommunityNotifications,
+} from "../../actions/notifications";
import {
splitNotificationsBySources,
splitCommunityNotificationsBySources,
@@ -18,107 +29,164 @@ import {
limitQuantityInSources,
preRenderNotifications,
preRenderCommunityNotifications,
-} from '../../utils/notifications'
-import NotificationsSection from '../../components/Notifications/NotificationsSection'
-import NotificationsEmpty from '../../components/Notifications/NotificationsEmpty'
-import NotificationsDropdownHeader from '../../components/Notifications/NotificationsDropdownHeader'
-import NotificationsDropdown from '../../components/Notifications/NotificationsDropdown'
-import NotificationsMobilePage from '../../components/Notifications/NotificationsMobilePage'
-import NotificationsReadAll from '../../components/Notifications/NotificationsReadAll'
-import ScrollLock from 'react-scroll-lock-component'
-import MediaQuery from 'react-responsive'
-import LoadingIndicator from '../../components/LoadingIndicator'
+} from "../../utils/notifications";
+import NotificationsSection from "../../components/Notifications/NotificationsSection";
+import NotificationsEmpty from "../../components/Notifications/NotificationsEmpty";
+import NotificationsDropdownHeader from "../../components/Notifications/NotificationsDropdownHeader";
+import NotificationsDropdown from "../../components/Notifications/NotificationsDropdown";
+import NotificationsMobilePage from "../../components/Notifications/NotificationsMobilePage";
+import NotificationsReadAll from "../../components/Notifications/NotificationsReadAll";
+import ScrollLock from "react-scroll-lock-component";
+import MediaQuery from "react-responsive";
+import LoadingIndicator from "../../components/LoadingIndicator";
import {
NOTIFICATIONS_DROPDOWN_PER_SOURCE,
NOTIFICATIONS_NEW_PER_SOURCE,
REFRESH_NOTIFICATIONS_INTERVAL,
SCREEN_BREAKPOINT_MD,
PLATFORM,
-} from '../../constants/notifications'
-import './styles.scss'
+} from "../../constants/notifications";
+import "./styles.scss";
const NotificationsDropdownContainerView = (props) => {
- const {initialized, communityInitialized, isLoading, isCommunityLoading, sources, communitySources, notifications, communityNotifications, markAllNotificationsRead, toggleNotificationRead, toggleNotificationSeen,
- pending, toggleBundledNotificationRead, oldSourceIds, viewOlderNotifications, isDropdownMobileOpen, isDropdownWebOpen,
- toggleNotificationsDropdownMobile, toggleNotificationsDropdownWeb, markAllNotificationsSeen } = props
- if ((!initialized && isLoading) || (!communityInitialized && isCommunityLoading)) {
+ const {
+ initialized,
+ communityInitialized,
+ isLoading,
+ isCommunityLoading,
+ sources,
+ communitySources,
+ notifications,
+ communityNotifications,
+ markAllNotificationsRead,
+ toggleNotificationRead,
+ toggleNotificationSeen,
+ pending,
+ toggleBundledNotificationRead,
+ oldSourceIds,
+ viewOlderNotifications,
+ isDropdownMobileOpen,
+ isDropdownWebOpen,
+ toggleNotificationsDropdownMobile,
+ toggleNotificationsDropdownWeb,
+ markAllNotificationsSeen,
+ } = props;
+ if (
+ (!initialized && isLoading) ||
+ (!communityInitialized && isCommunityLoading)
+ ) {
return (
- )
+ );
}
- const getPathname = link => link.split(/[?#]/)[0].replace(/\/?$/, '')
+ const getPathname = (link) => link.split(/[?#]/)[0].replace(/\/?$/, "");
// mark notifications with url match current page's url as seen
if (!pending) {
const seenNotificationIds = notifications
- .filter(({ isRead, seen, goto = '' }) => !isRead && !seen && getPathname(goto) === getPathname(window.location.pathname))
+ .filter(
+ ({ isRead, seen, goto = "" }) =>
+ !isRead &&
+ !seen &&
+ getPathname(goto) === getPathname(window.location.pathname)
+ )
.map(({ id }) => id)
- .join('-')
- seenNotificationIds.length && setTimeout(() => toggleNotificationSeen(seenNotificationIds), 0)
+ .join("-");
+ seenNotificationIds.length &&
+ setTimeout(() => toggleNotificationSeen(seenNotificationIds), 0);
}
const notReadNotifications = filterReadNotifications(notifications);
- const allNotificationsBySources = splitNotificationsBySources(sources, notReadNotifications)
+ const allNotificationsBySources = splitNotificationsBySources(
+ sources,
+ notReadNotifications
+ );
- const notReadCommunityNotifications = filterReadNotifications(communityNotifications);
- const allCommunityNotificationsBySources = splitCommunityNotificationsBySources(communitySources, notReadCommunityNotifications)
+ const notReadCommunityNotifications = filterReadNotifications(
+ communityNotifications
+ );
+ const allCommunityNotificationsBySources =
+ splitCommunityNotificationsBySources(
+ communitySources,
+ notReadCommunityNotifications
+ );
- const hasUnread = notReadNotifications.length > 0 || notReadCommunityNotifications.length > 0
+ const hasUnread =
+ notReadNotifications.length > 0 || notReadCommunityNotifications.length > 0;
// we have to give Dropdown component some time
// before removing notification item node from the list
// otherwise dropdown thinks we clicked outside and closes dropdown
const toggleNotificationReadWithDelay = (notificationId) => {
if (!pending) {
- const notification = _.find(notReadNotifications, { id: notificationId }) || _.find(notReadCommunityNotifications, { id: notificationId })
+ const notification =
+ _.find(notReadNotifications, { id: notificationId }) ||
+ _.find(notReadCommunityNotifications, { id: notificationId });
setTimeout(() => {
// if it's bundled notification, then toggle all notifications inside the bundle
if (notification.bundledIds) {
- toggleBundledNotificationRead(notificationId, notification.bundledIds)
+ toggleBundledNotificationRead(
+ notificationId,
+ notification.bundledIds
+ );
} else {
- toggleNotificationRead(notificationId)
+ toggleNotificationRead(notificationId);
}
- }, 0)
+ }, 0);
}
- }
+ };
let notificationsEmpty = (
- Maybe you need to check your
-
- )
- if ((!isLoading && !initialized) || (!isCommunityLoading && !communityInitialized)) {
+ );
+ if (
+ (!isLoading && !initialized) ||
+ (!isCommunityLoading && !communityInitialized)
+ ) {
notificationsEmpty = (
- Maybe the notification server is not working or your device is offline.
+ Maybe the notification server is not working or your device is
+ offline.
- )
+ );
}
const markNotificationsSeen = (isOpen) => {
if (isOpen) {
- markAllNotificationsSeen(null, [...notifications, ...communityNotifications])
+ markAllNotificationsSeen(null, [
+ ...notifications,
+ ...communityNotifications,
+ ]);
}
- }
+ };
// this function checks that notification is not seen yet,
// before marking it as seen
const markNotificationSeen = (notificationId) => {
- const notification = _.find(notifications, { id: notificationId }) || _.find(communityNotifications, { id: notificationId })
+ const notification =
+ _.find(notifications, { id: notificationId }) ||
+ _.find(communityNotifications, { id: notificationId });
if (notification && !notification.seen) {
- toggleNotificationSeen(notificationId)
+ toggleNotificationSeen(notificationId);
}
- }
+ };
return (
@@ -128,135 +196,208 @@ const NotificationsDropdownContainerView = (props) => {
allNotificationsBySources,
NOTIFICATIONS_DROPDOWN_PER_SOURCE,
oldSourceIds
- )
- const hiddenByLimitCount = _.sumBy(notificationsBySources, 'total') - _.sumBy(notificationsBySources, 'notifications.length')
- const globalSource = notificationsBySources.length > 0 && notificationsBySources[0].id === 'global' ? notificationsBySources[0] : null
- const projectSources = notificationsBySources.length > 1 && globalSource ? notificationsBySources.slice(1) : notificationsBySources
+ );
+ const hiddenByLimitCount =
+ _.sumBy(notificationsBySources, "total") -
+ _.sumBy(notificationsBySources, "notifications.length");
+ const globalSource =
+ notificationsBySources.length > 0 &&
+ notificationsBySources[0].id === "global"
+ ? notificationsBySources[0]
+ : null;
+ const projectSources =
+ notificationsBySources.length > 1 && globalSource
+ ? notificationsBySources.slice(1)
+ : notificationsBySources;
- const communityNotificationsBySources = allCommunityNotificationsBySources
- const broadcastSource = communityNotificationsBySources.find(source => source.id === 'broadcast')
- const challengeSources = communityNotificationsBySources.filter(source => source.id !== 'broadcast')
+ const communityNotificationsBySources =
+ allCommunityNotificationsBySources;
+ const broadcastSource = communityNotificationsBySources.find(
+ (source) => source.id === "broadcast"
+ );
+ const challengeSources = communityNotificationsBySources.filter(
+ (source) => source.id !== "broadcast"
+ );
return (
{
- toggleNotificationsDropdownWeb(isOpen)
- markNotificationsSeen(isOpen)
+ toggleNotificationsDropdownWeb(isOpen);
+ markNotificationsSeen(isOpen);
}}
>
- {isDropdownWebOpen &&
-
!pending && markAllNotificationsRead()} hasUnread={hasUnread}/>
- {!hasUnread ? (
-
- {notificationsEmpty}
-
- ) : ([
-
+ {isDropdownWebOpen && (
+
+
+ !pending && markAllNotificationsRead()
+ }
+ hasUnread={hasUnread}
+ />
+ {!hasUnread ? (
-
- {state => (
- {
- toggleNotificationsDropdownWeb()
- markNotificationSeen(notificationId)
- }}
- />
- )}
-
-
- {projectSources.filter(source => source.notifications.length > 0).map(source => (
-
- {state => (
+ {notificationsEmpty}
+
+ ) : (
+ [
+
+
+
+ {(state) => (
{
- toggleNotificationsDropdownWeb()
- markNotificationSeen(notificationId)
+ toggleNotificationsDropdownWeb();
+ markNotificationSeen(notificationId);
}}
/>
)}
- ))}
-
-
- {challengeSources.filter(source => source.notifications.length > 0).map(source => (
-
- {state => (
+
+ {projectSources
+ .filter(
+ (source) => source.notifications.length > 0
+ )
+ .map((source) => (
+
+ {(state) => (
+ {
+ toggleNotificationsDropdownWeb();
+ markNotificationSeen(notificationId);
+ }}
+ />
+ )}
+
+ ))}
+
+
+ {challengeSources
+ .filter(
+ (source) => source.notifications.length > 0
+ )
+ .map((source) => (
+
+ {(state) => (
+ {
+ toggleNotificationsDropdownWeb();
+ markNotificationSeen(notificationId);
+ }}
+ />
+ )}
+
+ ))}
+
+
+ {(state) => (
{
- toggleNotificationsDropdownWeb()
- markNotificationSeen(notificationId)
+ toggleNotificationsDropdownWeb();
+ markNotificationSeen(notificationId);
}}
/>
)}
- ))}
-
-
- {state => (
- {
- toggleNotificationsDropdownWeb()
- markNotificationSeen(notificationId)
- }}
- />
- )}
-
-
- ,
- {
- toggleNotificationsDropdownWeb()
- navigate('/notifications')
- }}>
- {
- hiddenByLimitCount > 0 ?
- `View ${hiddenByLimitCount} older notification${hiddenByLimitCount > 1 ? 's' : ''}` :
- 'View all notifications'
- }
-
- ])}
- {
+ toggleNotificationsDropdownWeb();
+ navigate("/notifications");
+ }}
+ >
+ {hiddenByLimitCount > 0
+ ? `View ${hiddenByLimitCount} older notification${
+ hiddenByLimitCount > 1 ? "s" : ""
+ }`
+ : "View all notifications"}
+ ,
+ ]
+ )}
+
+ )}
- )
+ );
} else {
const notificationsBySources = limitQuantityInSources(
allNotificationsBySources,
NOTIFICATIONS_NEW_PER_SOURCE,
oldSourceIds
- )
- const globalSource = notificationsBySources.length > 0 && notificationsBySources[0].id === 'global' ? notificationsBySources[0] : null
- const projectSources = notificationsBySources.length > 1 && globalSource ? notificationsBySources.slice(1) : notificationsBySources
+ );
+ const globalSource =
+ notificationsBySources.length > 0 &&
+ notificationsBySources[0].id === "global"
+ ? notificationsBySources[0]
+ : null;
+ const projectSources =
+ notificationsBySources.length > 1 && globalSource
+ ? notificationsBySources.slice(1)
+ : notificationsBySources;
- const communityNotificationsBySources = allCommunityNotificationsBySources
- const broadcastSource = communityNotificationsBySources.find(source => source.id === 'broadcast')
- const challengeSources = communityNotificationsBySources.filter(source => source.id !== 'broadcast')
+ const communityNotificationsBySources =
+ allCommunityNotificationsBySources;
+ const broadcastSource = communityNotificationsBySources.find(
+ (source) => source.id === "broadcast"
+ );
+ const challengeSources = communityNotificationsBySources.filter(
+ (source) => source.id !== "broadcast"
+ );
return (
{
- toggleNotificationsDropdownMobile()
+ toggleNotificationsDropdownMobile();
}}
isOpen={isDropdownMobileOpen}
>
@@ -264,72 +405,94 @@ const NotificationsDropdownContainerView = (props) => {
notificationsEmpty
) : (
-
- {state => (
+
+ {(state) => (
viewOlderNotifications(globalSource.id)}
+ onViewOlderClick={() =>
+ viewOlderNotifications(globalSource.id)
+ }
onLinkClick={(notificationId) => {
- toggleNotificationsDropdownMobile()
- markNotificationSeen(notificationId)
+ toggleNotificationsDropdownMobile();
+ markNotificationSeen(notificationId);
}}
/>
)}
- {projectSources.filter(source => source.notifications.length).map(source => (
-
- {state => (
- viewOlderNotifications(source.id)}
- onLinkClick={(notificationId) => {
- toggleNotificationsDropdownMobile()
- markNotificationSeen(notificationId)
- }}
- />
- )}
-
- ))}
+ {projectSources
+ .filter((source) => source.notifications.length)
+ .map((source) => (
+
+ {(state) => (
+
+ viewOlderNotifications(source.id)
+ }
+ onLinkClick={(notificationId) => {
+ toggleNotificationsDropdownMobile();
+ markNotificationSeen(notificationId);
+ }}
+ />
+ )}
+
+ ))}
- {challengeSources.filter(source => source.notifications.length > 0).map(source => (
-
- {state => (
- viewOlderNotifications(source.id)}
- onLinkClick={(notificationId) => {
- toggleNotificationsDropdownWeb()
- markNotificationSeen(notificationId)
- }}
- />
- )}
-
- ))}
+ {challengeSources
+ .filter((source) => source.notifications.length > 0)
+ .map((source) => (
+
+ {(state) => (
+
+ viewOlderNotifications(source.id)
+ }
+ onLinkClick={(notificationId) => {
+ toggleNotificationsDropdownWeb();
+ markNotificationSeen(notificationId);
+ }}
+ />
+ )}
+
+ ))}
-
- {state => (
+
+ {(state) => (
{
- toggleNotificationsDropdownWeb()
- markNotificationSeen(notificationId)
+ toggleNotificationsDropdownWeb();
+ markNotificationSeen(notificationId);
}}
/>
)}
@@ -337,52 +500,54 @@ const NotificationsDropdownContainerView = (props) => {
)}
- )
+ );
}
}}
- )
-}
+ );
+};
class NotificationsDropdownContainer extends React.Component {
constructor(props) {
- super(props)
+ super(props);
this.state = {
isDropdownWebOpen: false,
isDropdownMobileOpen: false,
notificationsVisited: false,
- }
+ };
- this.onToggleNotificationsDropdownWeb = this.onToggleNotificationsDropdownWeb.bind(this)
- this.onToggleNotificationsDropdownMobile = this.onToggleNotificationsDropdownMobile.bind(this)
+ this.onToggleNotificationsDropdownWeb =
+ this.onToggleNotificationsDropdownWeb.bind(this);
+ this.onToggleNotificationsDropdownMobile =
+ this.onToggleNotificationsDropdownMobile.bind(this);
}
componentDidMount() {
- const { initialized, communityInitialized } = this.props
+ const { initialized, communityInitialized } = this.props;
if (!(initialized || communityInitialized)) {
- this.getPlatformNotifications()
+ this.getPlatformNotifications();
}
this.autoRefreshNotifications = setInterval(() => {
- this.getPlatformNotifications()
- }, REFRESH_NOTIFICATIONS_INTERVAL)
+ this.getPlatformNotifications();
+ }, REFRESH_NOTIFICATIONS_INTERVAL);
}
componentWillUnmount() {
- clearInterval(this.autoRefreshNotifications)
+ clearInterval(this.autoRefreshNotifications);
// hide notifications dropdown for mobile, when this component is unmounted
- this.onToggleNotificationsDropdownMobile(false)
- this.onToggleNotificationsDropdownWeb(false)
- this.props.hideOlderNotifications()
+ this.onToggleNotificationsDropdownMobile(false);
+ this.onToggleNotificationsDropdownWeb(false);
+ this.props.hideOlderNotifications();
}
componentWillReceiveProps(nextProps) {
- const { platform: oldPlatform } = this.props
- const { platform } = nextProps
+ const { platform: oldPlatform } = this.props;
+ const { platform } = nextProps;
if (platform !== oldPlatform) {
- this.getPlatformNotifications(platform)
+ this.getPlatformNotifications(platform);
}
}
@@ -393,51 +558,63 @@ class NotificationsDropdownContainer extends React.Component {
platform,
resetNotifications,
resetCommunityNotifications,
- } = this.props
+ } = this.props;
- p = p || platform
+ p = p || platform;
if (p === PLATFORM.BOTH) {
- resetNotifications()
- resetCommunityNotifications()
- getNotifications()
- getCommunityNotifications()
+ resetNotifications();
+ resetCommunityNotifications();
+ getNotifications();
+ getCommunityNotifications();
} else if (p === PLATFORM.CONNECT) {
- resetCommunityNotifications()
- getNotifications()
+ resetCommunityNotifications();
+ getNotifications();
} else {
- resetNotifications()
- getCommunityNotifications()
+ resetNotifications();
+ getCommunityNotifications();
}
}
onToggleNotificationsDropdownWeb(isOpen) {
- this.setState({ isDropdownWebOpen: !_.isUndefined(isOpen) ? isOpen : !this.state.isDropdownWebOpen})
+ this.setState({
+ isDropdownWebOpen: !_.isUndefined(isOpen)
+ ? isOpen
+ : !this.state.isDropdownWebOpen,
+ });
}
onToggleNotificationsDropdownMobile(isOpen) {
- this.setState({ isDropdownMobileOpen: !_.isUndefined(isOpen) ? isOpen : !this.state.isDropdownMobileOpen})
+ this.setState({
+ isDropdownMobileOpen: !_.isUndefined(isOpen)
+ ? isOpen
+ : !this.state.isDropdownMobileOpen,
+ });
}
render() {
- const { notifications, communityNotifications, ...restProps } = this.props
- const preRenderedNotifications = preRenderNotifications(notifications)
- const preRenderedCommunityNotifications = preRenderCommunityNotifications(communityNotifications)
+ const { notifications, communityNotifications, ...restProps } = this.props;
+ const preRenderedNotifications = preRenderNotifications(notifications);
+ const preRenderedCommunityNotifications = preRenderCommunityNotifications(
+ communityNotifications
+ );
return (
- )
+ );
}
}
-const mapStateToProps = ({ notifications }) => notifications
+const mapStateToProps = ({ notifications }) => notifications;
const mapDispatchToProps = {
getNotifications,
@@ -451,6 +628,9 @@ const mapDispatchToProps = {
hideOlderNotifications,
resetNotifications,
resetCommunityNotifications,
-}
+};
-export default connect(mapStateToProps, mapDispatchToProps)(NotificationsDropdownContainer)
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(NotificationsDropdownContainer);
diff --git a/src/containers/NotificationsDropdownContainer/styles.scss b/src/containers/NotificationsDropdownContainer/styles.scss
index 89fff46..f1b1a31 100644
--- a/src/containers/NotificationsDropdownContainer/styles.scss
+++ b/src/containers/NotificationsDropdownContainer/styles.scss
@@ -1,5 +1,5 @@
// this is to include tc styles in the output library
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-includes";
:global {
// project override for dropdown shadow
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index b4308d4..c018e32 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,10 +1,16 @@
// FONT STACK
// --------------------------------------------------------------------------------------------
// Use the mixin to include fonts.
-@mixin font-family($font-name, $font-weight, $font-style, $font-url, $font-file) {
+@mixin font-family(
+ $font-name,
+ $font-weight,
+ $font-style,
+ $font-url,
+ $font-file
+) {
@font-face {
- font-family: '#{$font-name}';
- src: url('#{$font-url}#{$font-file}.svg##{$font-name}') format('svg');
+ font-family: "#{$font-name}";
+ src: url("#{$font-url}#{$font-file}.svg##{$font-name}") format("svg");
font-weight: $font-weight;
font-style: $font-style;
}
@@ -25,20 +31,92 @@
// 900 Black (Heavy)
// Roboto
-@include font-family('Roboto', 900, normal, '../assets/fonts/roboto/', 'roboto-black');
-@include font-family('Roboto', 900, italic, '../assets/fonts/roboto/', 'roboto-blackitalic');
+@include font-family(
+ "Roboto",
+ 900,
+ normal,
+ "../assets/fonts/roboto/",
+ "roboto-black"
+);
+@include font-family(
+ "Roboto",
+ 900,
+ italic,
+ "../assets/fonts/roboto/",
+ "roboto-blackitalic"
+);
-@include font-family('Roboto', 700, normal, '../assets/fonts/roboto/', 'roboto-bold');
-@include font-family('Roboto', 700, italic, '../assets/fonts/roboto/', 'roboto-bolditalic');
+@include font-family(
+ "Roboto",
+ 700,
+ normal,
+ "../assets/fonts/roboto/",
+ "roboto-bold"
+);
+@include font-family(
+ "Roboto",
+ 700,
+ italic,
+ "../assets/fonts/roboto/",
+ "roboto-bolditalic"
+);
-@include font-family('Roboto', 500, normal, '../assets/fonts/roboto/', 'roboto-medium');
-@include font-family('Roboto', 500, italic, '../assets/fonts/roboto/', 'roboto-mediumitalic');
+@include font-family(
+ "Roboto",
+ 500,
+ normal,
+ "../assets/fonts/roboto/",
+ "roboto-medium"
+);
+@include font-family(
+ "Roboto",
+ 500,
+ italic,
+ "../assets/fonts/roboto/",
+ "roboto-mediumitalic"
+);
-@include font-family('Roboto', 400, normal, '../assets/fonts/roboto/', 'roboto-regular');
-@include font-family('Roboto', 400, italic, '../assets/fonts/roboto/', 'roboto-italic');
+@include font-family(
+ "Roboto",
+ 400,
+ normal,
+ "../assets/fonts/roboto/",
+ "roboto-regular"
+);
+@include font-family(
+ "Roboto",
+ 400,
+ italic,
+ "../assets/fonts/roboto/",
+ "roboto-italic"
+);
-@include font-family('Roboto', 300, normal, '../assets/fonts/roboto/', 'roboto-light');
-@include font-family('Roboto', 300, italic, '../assets/fonts/roboto/', 'roboto-lightitalic');
+@include font-family(
+ "Roboto",
+ 300,
+ normal,
+ "../assets/fonts/roboto/",
+ "roboto-light"
+);
+@include font-family(
+ "Roboto",
+ 300,
+ italic,
+ "../assets/fonts/roboto/",
+ "roboto-lightitalic"
+);
-@include font-family('Roboto', 100, normal, '../assets/fonts/roboto/', 'roboto-thin');
-@include font-family('Roboto', 100, italic, '../assets/fonts/roboto/', 'roboto-thinitalic');
+@include font-family(
+ "Roboto",
+ 100,
+ normal,
+ "../assets/fonts/roboto/",
+ "roboto-thin"
+);
+@include font-family(
+ "Roboto",
+ 100,
+ italic,
+ "../assets/fonts/roboto/",
+ "roboto-thinitalic"
+);
diff --git a/src/styles/main.module.scss b/src/styles/main.module.scss
index 0f7b5e5..6a3108c 100644
--- a/src/styles/main.module.scss
+++ b/src/styles/main.module.scss
@@ -1,7 +1,7 @@
-@import '~tc-ui/src/styles/tc-styles';
-@import '~tc-ui/src/styles/tc-includes';
+@import "~tc-ui/src/styles/tc-styles";
+@import "~tc-ui/src/styles/tc-includes";
// This is the partial where we load all the Roboto fonts for Webpack
-@import 'fonts';
+@import "fonts";
:global {
.notifications-dropdown,
diff --git a/webpack.config.js b/webpack.config.js
index 757a9e9..4b31b48 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,9 +2,9 @@
const webpackMerge = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");
-const autoprefixer = require('autoprefixer');
-const path = require('path')
-const webpack = require('webpack')
+const autoprefixer = require("autoprefixer");
+const path = require("path");
+const webpack = require("webpack");
module.exports = (webpackConfigEnv, options) => {
const defaultConfig = singleSpaDefaults({
@@ -15,17 +15,17 @@ module.exports = (webpackConfigEnv, options) => {
});
let cssLocalIdent;
- if (options.mode === 'production') {
- cssLocalIdent = '[hash:base64:6]';
+ if (options.mode === "production") {
+ cssLocalIdent = "[hash:base64:6]";
} else {
- cssLocalIdent = 'navbar_[path][name]___[local]___[hash:base64:6]';
+ cssLocalIdent = "navbar_[path][name]___[local]___[hash:base64:6]";
}
// modify the webpack config however you'd like to by adding to this object
return webpackMerge.smart(defaultConfig, {
output: {
- path: path.resolve(__dirname, 'dist'),
- publicPath: 'navbar',
+ path: path.resolve(__dirname, "dist"),
+ publicPath: "navbar",
},
module: {
rules: [
@@ -33,64 +33,64 @@ module.exports = (webpackConfigEnv, options) => {
/* Loads svg images. */
test: /[/\/]assets[/\/]images[/\/].+\.svg$/,
exclude: /node_modules/,
- loader: 'file-loader',
+ loader: "file-loader",
options: {
- outputPath: 'images',
- }
+ outputPath: "images",
+ },
},
{
/* Loads image assets. */
test: /\.(gif|jpe?g|png)$/,
- loader: 'file-loader',
+ loader: "file-loader",
options: {
- outputPath: 'images',
- }
+ outputPath: "images",
+ },
},
{
/* Loads font resources from "src/assets/fonts" folder. */
test: /\.(eot|otf|svg|ttf|woff2?)$/,
include: [/src[/\\]assets[/\\]fonts/],
- loader: 'file-loader',
+ loader: "file-loader",
options: {
- outputPath: 'fonts',
- }
+ outputPath: "fonts",
+ },
},
{
/* Loads SCSS stylesheets. */
test: /\.scss/,
- use: [
- 'style-loader',
- {
- loader: 'css-loader',
- options: {
- modules: {
- localIdentName: cssLocalIdent,
- mode: 'local',
- }
+ use: [
+ "style-loader",
+ {
+ loader: "css-loader",
+ options: {
+ modules: {
+ localIdentName: cssLocalIdent,
+ mode: "local",
},
},
- {
- loader: 'postcss-loader',
- options: {
- postcssOptions: {
- plugins: [autoprefixer],
- }
+ },
+ {
+ loader: "postcss-loader",
+ options: {
+ postcssOptions: {
+ plugins: [autoprefixer],
},
},
- 'resolve-url-loader',
- {
- loader: 'sass-loader',
- options: {
- sourceMap: true,
- },
- }
- ]
+ },
+ "resolve-url-loader",
+ {
+ loader: "sass-loader",
+ options: {
+ sourceMap: true,
+ },
+ },
+ ],
},
],
},
plugins: [
new webpack.DefinePlugin({
- 'process.env': {
+ "process.env": {
APPENV: JSON.stringify(process.env.APPENV),
},
}),
@@ -101,13 +101,16 @@ module.exports = (webpackConfigEnv, options) => {
components: path.resolve(__dirname, "src/components"),
fonts: path.resolve(__dirname, "src/assets/fonts"),
styles: path.resolve(__dirname, "src/styles"),
- handlebars: path.resolve(__dirname, 'node_modules/handlebars/dist/handlebars.min.js'),
+ handlebars: path.resolve(
+ __dirname,
+ "node_modules/handlebars/dist/handlebars.min.js"
+ ),
},
symlinks: false,
},
devServer: {
port: 3001,
- host: '0.0.0.0'
- }
+ host: "0.0.0.0",
+ },
});
};