From 848495f82a20ff2661c5dd4627bd9e8dc15b29f9 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 29 Sep 2020 16:15:35 -0400
Subject: [PATCH] keep notifications behind flag

---
 ui/component/commentReactions/view.jsx | 86 +++++++++++++-------------
 ui/component/commentsList/view.jsx     | 16 ++---
 ui/component/header/index.js           |  3 +-
 ui/component/header/view.jsx           |  7 ++-
 4 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/ui/component/commentReactions/view.jsx b/ui/component/commentReactions/view.jsx
index cb043db7d..5aa5fad2c 100644
--- a/ui/component/commentReactions/view.jsx
+++ b/ui/component/commentReactions/view.jsx
@@ -1,10 +1,10 @@
 // @flow
-import * as ICONS from 'constants/icons';
-import * as REACTION_TYPES from 'constants/reactions';
-import React from 'react';
-import classnames from 'classnames';
-import Button from 'component/button';
-import usePersistedState from 'effects/use-persisted-state';
+// import * as ICONS from 'constants/icons';
+// import * as REACTION_TYPES from 'constants/reactions';
+// import React from 'react';
+// import classnames from 'classnames';
+// import Button from 'component/button';
+// import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
   myReacts: Array<string>,
@@ -15,42 +15,44 @@ type Props = {
 };
 
 export default function CommentReactions(props: Props) {
-  const { myReacts, othersReacts, commentId, react, typesReacting } = props;
-  const [activeChannel] = usePersistedState('comment-channel');
+  //   const { myReacts, othersReacts, commentId, react, typesReacting } = props;
+  //   const [activeChannel] = usePersistedState('comment-channel');
 
-  const getCountForReact = type => {
-    let count = 0;
-    if (othersReacts && othersReacts[type]) {
-      count += othersReacts[type];
-    }
-    if (myReacts && myReacts.includes(type)) {
-      count += 1;
-    }
-    return count;
-  };
+  //   const getCountForReact = type => {
+  //     let count = 0;
+  //     if (othersReacts && othersReacts[type]) {
+  //       count += othersReacts[type];
+  //     }
+  //     if (myReacts && myReacts.includes(type)) {
+  //       count += 1;
+  //     }
+  //     return count;
+  //   };
 
-  return (
-    <>
-      <Button
-        title={__('Upvote')}
-        icon={ICONS.UPVOTE}
-        className={classnames('comment__action', {
-          'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
-        })}
-        disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.LIKE)}
-        onClick={() => react(commentId, REACTION_TYPES.LIKE)}
-        label={getCountForReact(REACTION_TYPES.LIKE)}
-      />
-      <Button
-        title={__('Downvote')}
-        icon={ICONS.DOWNVOTE}
-        className={classnames('comment__action', {
-          'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
-        })}
-        disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.DISLIKE)}
-        onClick={() => react(commentId, REACTION_TYPES.DISLIKE)}
-        label={getCountForReact(REACTION_TYPES.DISLIKE)}
-      />
-    </>
-  );
+  return null;
+
+  //   return (
+  //     <>
+  //       <Button
+  //         title={__('Upvote')}
+  //         icon={ICONS.UPVOTE}
+  //         className={classnames('comment__action', {
+  //           'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
+  //         })}
+  //         disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.LIKE)}
+  //         onClick={() => react(commentId, REACTION_TYPES.LIKE)}
+  //         label={getCountForReact(REACTION_TYPES.LIKE)}
+  //       />
+  //       <Button
+  //         title={__('Downvote')}
+  //         icon={ICONS.DOWNVOTE}
+  //         className={classnames('comment__action', {
+  //           'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
+  //         })}
+  //         disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.DISLIKE)}
+  //         onClick={() => react(commentId, REACTION_TYPES.DISLIKE)}
+  //         label={getCountForReact(REACTION_TYPES.DISLIKE)}
+  //       />
+  //     </>
+  //   );
 }
diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index 6fe9fa664..d1d3d0eba 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -5,7 +5,7 @@ import Spinner from 'component/spinner';
 import Button from 'component/button';
 import Card from 'component/common/card';
 import CommentCreate from 'component/commentCreate';
-import usePersistedState from 'effects/use-persisted-state';
+// import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
   comments: Array<any>,
@@ -21,7 +21,7 @@ type Props = {
 function CommentList(props: Props) {
   const {
     fetchComments,
-    fetchReacts,
+    // fetchReacts,
     uri,
     comments,
     claimIsMine,
@@ -55,18 +55,18 @@ function CommentList(props: Props) {
     }
   };
 
-  const [activeChannel] = usePersistedState('comment-channel', '');
+  //   const [activeChannel] = usePersistedState('comment-channel', '');
   const commentRef = React.useRef();
 
   useEffect(() => {
     fetchComments(uri);
   }, [fetchComments, uri]);
 
-  useEffect(() => {
-    if (totalComments) {
-      fetchReacts(uri);
-    }
-  }, [fetchReacts, uri, totalComments, activeChannel]);
+  //   useEffect(() => {
+  //     if (totalComments) {
+  //       fetchReacts(uri);
+  //     }
+  //   }, [fetchReacts, uri, totalComments, activeChannel]);
 
   useEffect(() => {
     if (linkedCommentId && commentRef && commentRef.current) {
diff --git a/ui/component/header/index.js b/ui/component/header/index.js
index 4da1e5304..efffa1b62 100644
--- a/ui/component/header/index.js
+++ b/ui/component/header/index.js
@@ -2,7 +2,7 @@ import * as MODALS from 'constants/modal_types';
 import { connect } from 'react-redux';
 import { selectBalance, formatCredits, SETTINGS } from 'lbry-redux';
 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 { doSetClientSetting } from 'redux/actions/settings';
 import { doSignOut, doOpenModal } from 'redux/actions/app';
@@ -22,6 +22,7 @@ const select = state => ({
   syncError: selectGetSyncErrorMessage(state),
   emailToVerify: selectEmailToVerify(state),
   hasNavigated: selectHasNavigated(state),
+  user: selectUser(state),
 });
 
 const perform = dispatch => ({
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 6d327f285..19eb2d289 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -22,6 +22,7 @@ import { IS_MAC } from 'component/app/view';
 // @endif
 
 type Props = {
+  user: ?User,
   balance: string,
   roundedBalance: number,
   history: {
@@ -81,6 +82,7 @@ const Header = (props: Props) => {
     sidebarOpen,
     setSidebarOpen,
     isAbsoluteSideNavHidden,
+    user,
   } = props;
   const isMobile = useIsMobile();
   // 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 hasBackout = Boolean(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
   const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
@@ -201,7 +204,7 @@ const Header = (props: Props) => {
                     icon={ICONS.MENU}
                     onClick={() => setSidebarOpen(!sidebarOpen)}
                   >
-                    {isAbsoluteSideNavHidden && isMobile && <NotificationBubble />}
+                    {isAbsoluteSideNavHidden && isMobile && notificationsEnabled && <NotificationBubble />}
                   </Button>
                 </span>
               )}
@@ -252,7 +255,7 @@ const Header = (props: Props) => {
                       >
                         <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
                       </MenuButton>
-                      <NotificationHeaderButton />
+                      {notificationsEnabled && <NotificationHeaderButton />}
                       <MenuList className="menu__list--header">
                         <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOAD}`)}>
                           <Icon aria-hidden icon={ICONS.PUBLISH} />