keep notifications behind flag

This commit is contained in:
Sean Yesmunt 2020-09-29 16:15:35 -04:00
parent f979d23175
commit 848495f82a
4 changed files with 59 additions and 53 deletions

View file

@ -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)}
); // />
// </>
// );
} }

View file

@ -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) {

View file

@ -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 => ({

View file

@ -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} />