Allow to react/reply to comments from notifications

ui/component/notification/view.jsx

@@ -9,6 +9,7 @@ import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { formatLbryUrlForWeb } from 'util/url';
+import { useHistory } from 'react-router';
 import { parseURI } from 'lbry-redux';
 import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view';
 import FileThumbnail from 'component/fileThumbnail';
@@ -17,6 +18,8 @@ import NotificationContentChannelMenu from 'component/notificationContentChannel
 import LbcMessage from 'component/common/lbc-message';
 import { NavLink } from 'react-router-dom';
 import UriIndicator from 'component/uriIndicator';
+import CommentReactions from 'component/commentReactions';
+// import CommentCreate from 'component/commentCreate';
 
 type Props = {
   notification: WebNotification,
@@ -28,7 +31,9 @@ type Props = {
 
 export default function Notification(props: Props) {
   const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
+  const { push } = useHistory();
   const { notification_rule, notification_parameters, is_read, id } = notification;
+  const [isReplying, setReplying] = React.useState(false);
   const isCommentNotification =
     notification_rule === RULE.COMMENT ||
     notification_rule === RULE.COMMENT_REPLY ||
@@ -127,6 +132,10 @@ export default function Notification(props: Props) {
     if (!is_read) {
       doReadNotifications([id]);
     }
+
+    if (notificationLink) {
+      push(notificationLink);
+    }
   }
 
   function handleReadNotification(e) {
@@ -134,6 +143,10 @@ export default function Notification(props: Props) {
     doReadNotifications([id]);
   }
 
+  function handleCommentReply() {
+    setReplying(!isReplying);
+  }
+
   const Wrapper = menuButton
     ? (props: { children: any }) => (
         <MenuItem className="menu__link--notification" onSelect={handleNotificationClick}>
@@ -156,18 +169,20 @@ export default function Notification(props: Props) {
       );
 
   return (
-    <NavLink {...navLinkProps}>
     <Wrapper>
       <div
         className={classnames('notification__wrapper', {
           'notification__wrapper--unread': !is_read,
         })}
       >
+        <NavLink {...navLinkProps}>
           <div className="notification__icon">{icon}</div>
+        </NavLink>
 
         <div className="notification__content-wrapper">
           <div className="notification__content">
             <div className="notification__text-wrapper">
+              <NavLink {...navLinkProps}>
                 {!isCommentNotification && (
                   <div className="notification__title">{title}</div>
                 )}
@@ -189,6 +204,33 @@ export default function Notification(props: Props) {
                     </div>
                   </>
                 )}
+              </NavLink>
+
+              {isCommentNotification && (
+                <div className="notification__reactions">
+                  <Button
+                    label={__('Reply')}
+                    className="comment__action"
+                    onClick={handleCommentReply}
+                    icon={ICONS.REPLY}
+                  />
+                  <CommentReactions uri={notificationTarget} commentId={notification_parameters.dynamic.hash} />
+                  {/* figure out a better flow for this */}
+                  {/* isReplying && (
+                    <CommentCreate
+                      isReply
+                      uri={notificationTarget}
+                      parentId={notification_parameters.dynamic.hash}
+                      onDoneReplying={() => {
+                        setReplying(false);
+                      }}
+                      onCancelReplying={() => {
+                        setReplying(false);
+                      }}
+                    />
+                    ) */}
+                </div>
+              )}
             </div>
 
             {notification_rule === RULE.NEW_CONTENT && (
@@ -212,9 +254,7 @@ export default function Notification(props: Props) {
 
         <div className="notification__menu">
           <Menu>
-              <MenuButton
+            <MenuButton onClick={(e) => {
-                className={'menu__button notification__menu-button'}
-                onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
               }}>
@@ -233,6 +273,5 @@ export default function Notification(props: Props) {
         </div>
       </div>
     </Wrapper>
-    </NavLink>
   );
 }

ui/scss/component/_notification.scss

@@ -162,6 +162,19 @@ $contentMaxWidth: 60rem;
   }
 }
 
+.notification__reactions {
+  display: flex;
+  margin-top: var(--spacing-s);
+
+  > *:not(:last-of-type) {
+    margin-right: var(--spacing-m);
+  }
+
+  .button__label {
+    margin-left: var(--spacing-xs);
+  }
+}
+
 .notification__bubble {
   height: 1.5rem;
   width: 1.5rem;