keep notifications behind flag
This commit is contained in:
parent
f979d23175
commit
848495f82a
4 changed files with 59 additions and 53 deletions
|
@ -1,10 +1,10 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as ICONS from 'constants/icons';
|
// import * as ICONS from 'constants/icons';
|
||||||
import * as REACTION_TYPES from 'constants/reactions';
|
// import * as REACTION_TYPES from 'constants/reactions';
|
||||||
import React from 'react';
|
// import React from 'react';
|
||||||
import classnames from 'classnames';
|
// import classnames from 'classnames';
|
||||||
import Button from 'component/button';
|
// import Button from 'component/button';
|
||||||
import usePersistedState from 'effects/use-persisted-state';
|
// import usePersistedState from 'effects/use-persisted-state';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
myReacts: Array<string>,
|
myReacts: Array<string>,
|
||||||
|
@ -15,42 +15,44 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function CommentReactions(props: Props) {
|
export default function CommentReactions(props: Props) {
|
||||||
const { myReacts, othersReacts, commentId, react, typesReacting } = props;
|
// const { myReacts, othersReacts, commentId, react, typesReacting } = props;
|
||||||
const [activeChannel] = usePersistedState('comment-channel');
|
// const [activeChannel] = usePersistedState('comment-channel');
|
||||||
|
|
||||||
const getCountForReact = type => {
|
// const getCountForReact = type => {
|
||||||
let count = 0;
|
// let count = 0;
|
||||||
if (othersReacts && othersReacts[type]) {
|
// if (othersReacts && othersReacts[type]) {
|
||||||
count += othersReacts[type];
|
// count += othersReacts[type];
|
||||||
}
|
// }
|
||||||
if (myReacts && myReacts.includes(type)) {
|
// if (myReacts && myReacts.includes(type)) {
|
||||||
count += 1;
|
// count += 1;
|
||||||
}
|
// }
|
||||||
return count;
|
// return count;
|
||||||
};
|
// };
|
||||||
|
|
||||||
return (
|
return null;
|
||||||
<>
|
|
||||||
<Button
|
// return (
|
||||||
title={__('Upvote')}
|
// <>
|
||||||
icon={ICONS.UPVOTE}
|
// <Button
|
||||||
className={classnames('comment__action', {
|
// title={__('Upvote')}
|
||||||
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
|
// icon={ICONS.UPVOTE}
|
||||||
})}
|
// className={classnames('comment__action', {
|
||||||
disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.LIKE)}
|
// 'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
|
||||||
onClick={() => react(commentId, REACTION_TYPES.LIKE)}
|
// })}
|
||||||
label={getCountForReact(REACTION_TYPES.LIKE)}
|
// disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.LIKE)}
|
||||||
/>
|
// onClick={() => react(commentId, REACTION_TYPES.LIKE)}
|
||||||
<Button
|
// label={getCountForReact(REACTION_TYPES.LIKE)}
|
||||||
title={__('Downvote')}
|
// />
|
||||||
icon={ICONS.DOWNVOTE}
|
// <Button
|
||||||
className={classnames('comment__action', {
|
// title={__('Downvote')}
|
||||||
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
|
// icon={ICONS.DOWNVOTE}
|
||||||
})}
|
// className={classnames('comment__action', {
|
||||||
disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.DISLIKE)}
|
// 'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
|
||||||
onClick={() => react(commentId, REACTION_TYPES.DISLIKE)}
|
// })}
|
||||||
label={getCountForReact(REACTION_TYPES.DISLIKE)}
|
// disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.DISLIKE)}
|
||||||
/>
|
// onClick={() => react(commentId, REACTION_TYPES.DISLIKE)}
|
||||||
</>
|
// label={getCountForReact(REACTION_TYPES.DISLIKE)}
|
||||||
);
|
// />
|
||||||
|
// </>
|
||||||
|
// );
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@ import Spinner from 'component/spinner';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import Card from 'component/common/card';
|
import Card from 'component/common/card';
|
||||||
import CommentCreate from 'component/commentCreate';
|
import CommentCreate from 'component/commentCreate';
|
||||||
import usePersistedState from 'effects/use-persisted-state';
|
// import usePersistedState from 'effects/use-persisted-state';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
comments: Array<any>,
|
comments: Array<any>,
|
||||||
|
@ -21,7 +21,7 @@ type Props = {
|
||||||
function CommentList(props: Props) {
|
function CommentList(props: Props) {
|
||||||
const {
|
const {
|
||||||
fetchComments,
|
fetchComments,
|
||||||
fetchReacts,
|
// fetchReacts,
|
||||||
uri,
|
uri,
|
||||||
comments,
|
comments,
|
||||||
claimIsMine,
|
claimIsMine,
|
||||||
|
@ -55,18 +55,18 @@ function CommentList(props: Props) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const [activeChannel] = usePersistedState('comment-channel', '');
|
// const [activeChannel] = usePersistedState('comment-channel', '');
|
||||||
const commentRef = React.useRef();
|
const commentRef = React.useRef();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchComments(uri);
|
fetchComments(uri);
|
||||||
}, [fetchComments, uri]);
|
}, [fetchComments, uri]);
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
if (totalComments) {
|
// if (totalComments) {
|
||||||
fetchReacts(uri);
|
// fetchReacts(uri);
|
||||||
}
|
// }
|
||||||
}, [fetchReacts, uri, totalComments, activeChannel]);
|
// }, [fetchReacts, uri, totalComments, activeChannel]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (linkedCommentId && commentRef && commentRef.current) {
|
if (linkedCommentId && commentRef && commentRef.current) {
|
||||||
|
|
|
@ -2,7 +2,7 @@ import * as MODALS from 'constants/modal_types';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { selectBalance, formatCredits, SETTINGS } from 'lbry-redux';
|
import { selectBalance, formatCredits, SETTINGS } from 'lbry-redux';
|
||||||
import { selectGetSyncErrorMessage } from 'lbryinc';
|
import { selectGetSyncErrorMessage } from 'lbryinc';
|
||||||
import { selectUserVerifiedEmail, selectUserEmail, selectEmailToVerify } from 'redux/selectors/user';
|
import { selectUserVerifiedEmail, selectUserEmail, selectEmailToVerify, selectUser } from 'redux/selectors/user';
|
||||||
import { doClearEmailEntry, doClearPasswordEntry } from 'redux/actions/user';
|
import { doClearEmailEntry, doClearPasswordEntry } from 'redux/actions/user';
|
||||||
import { doSetClientSetting } from 'redux/actions/settings';
|
import { doSetClientSetting } from 'redux/actions/settings';
|
||||||
import { doSignOut, doOpenModal } from 'redux/actions/app';
|
import { doSignOut, doOpenModal } from 'redux/actions/app';
|
||||||
|
@ -22,6 +22,7 @@ const select = state => ({
|
||||||
syncError: selectGetSyncErrorMessage(state),
|
syncError: selectGetSyncErrorMessage(state),
|
||||||
emailToVerify: selectEmailToVerify(state),
|
emailToVerify: selectEmailToVerify(state),
|
||||||
hasNavigated: selectHasNavigated(state),
|
hasNavigated: selectHasNavigated(state),
|
||||||
|
user: selectUser(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
|
|
|
@ -22,6 +22,7 @@ import { IS_MAC } from 'component/app/view';
|
||||||
// @endif
|
// @endif
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
user: ?User,
|
||||||
balance: string,
|
balance: string,
|
||||||
roundedBalance: number,
|
roundedBalance: number,
|
||||||
history: {
|
history: {
|
||||||
|
@ -81,6 +82,7 @@ const Header = (props: Props) => {
|
||||||
sidebarOpen,
|
sidebarOpen,
|
||||||
setSidebarOpen,
|
setSidebarOpen,
|
||||||
isAbsoluteSideNavHidden,
|
isAbsoluteSideNavHidden,
|
||||||
|
user,
|
||||||
} = props;
|
} = props;
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
// on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
|
// on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
|
||||||
|
@ -90,6 +92,7 @@ const Header = (props: Props) => {
|
||||||
const isPwdResetPage = history.location.pathname.includes(PAGES.AUTH_PASSWORD_RESET);
|
const isPwdResetPage = history.location.pathname.includes(PAGES.AUTH_PASSWORD_RESET);
|
||||||
const hasBackout = Boolean(backout);
|
const hasBackout = Boolean(backout);
|
||||||
const { backLabel, backNavDefault, title: backTitle, simpleTitle: simpleBackTitle } = backout || {};
|
const { backLabel, backNavDefault, title: backTitle, simpleTitle: simpleBackTitle } = backout || {};
|
||||||
|
const notificationsEnabled = user && user.experimental_ui;
|
||||||
|
|
||||||
// Sign out if they click the "x" when they are on the password prompt
|
// Sign out if they click the "x" when they are on the password prompt
|
||||||
const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
|
const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
|
||||||
|
@ -201,7 +204,7 @@ const Header = (props: Props) => {
|
||||||
icon={ICONS.MENU}
|
icon={ICONS.MENU}
|
||||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||||
>
|
>
|
||||||
{isAbsoluteSideNavHidden && isMobile && <NotificationBubble />}
|
{isAbsoluteSideNavHidden && isMobile && notificationsEnabled && <NotificationBubble />}
|
||||||
</Button>
|
</Button>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@ -252,7 +255,7 @@ const Header = (props: Props) => {
|
||||||
>
|
>
|
||||||
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
|
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
|
||||||
</MenuButton>
|
</MenuButton>
|
||||||
<NotificationHeaderButton />
|
{notificationsEnabled && <NotificationHeaderButton />}
|
||||||
<MenuList className="menu__list--header">
|
<MenuList className="menu__list--header">
|
||||||
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOAD}`)}>
|
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOAD}`)}>
|
||||||
<Icon aria-hidden icon={ICONS.PUBLISH} />
|
<Icon aria-hidden icon={ICONS.PUBLISH} />
|
||||||
|
|
Loading…
Add table
Reference in a new issue