Disable thread actions for users that have not joined the community

packages/commonwealth/client/scripts/views/components/ReactionButton/CommentReactionButton.tsx

@@ -1,52 +1,47 @@
-import 'components/ReactionButton/CommentReactionButton.scss';
-import { notifyError } from 'controllers/app/notifications';
 import React, { useState, useEffect } from 'react';
+import { notifyError } from 'controllers/app/notifications';
 import app from 'state';
 import type ChainInfo from '../../../models/ChainInfo';
 import type Comment from '../../../models/Comment';
 import ReactionCount from '../../../models/ReactionCount';
 import {
   useCreateCommentReactionMutation,
   useDeleteCommentReactionMutation,
-  useFetchCommentReactionsQuery
+  useFetchCommentReactionsQuery,
 } from '../../../state/api/comments';
 import Permissions from '../../../utils/Permissions';
 import { LoginModal } from '../../modals/login_modal';
-import { CWIcon } from '../component_kit/cw_icons/cw_icon';
 import { Modal } from '../component_kit/cw_modal';
-import { CWTooltip } from '../component_kit/cw_popover/cw_tooltip';
-import {
-  getClasses,
-  isWindowMediumSmallInclusive,
-} from '../component_kit/helpers';
-import {
-  getDisplayedReactorsForPopup,
-  onReactionClick,
-} from './helpers';
+import { isWindowMediumSmallInclusive } from '../component_kit/helpers';
+import { getDisplayedReactorsForPopup, onReactionClick } from './helpers';
+import CWUpvoteSmall from 'views/components/component_kit/new_designs/CWUpvoteSmall';
 
 type CommentReactionButtonProps = {
   comment: Comment<any>;
+  disabled: boolean;
 };
 
 export const CommentReactionButton = ({
   comment,
+  disabled,
 }: CommentReactionButtonProps) => {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [reactors, setReactors] = useState<Array<any>>([]);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [reactionCounts, setReactionCounts] = useState<ReactionCount<any>>();
-  const { mutateAsync: createCommentReaction } = useCreateCommentReactionMutation({
-    commentId: comment.id,
-    chainId: app.activeChainId()
-  })
-  const { mutateAsync: deleteCommentReaction } = useDeleteCommentReactionMutation({
-    commentId: comment.id,
-    chainId: app.activeChainId()
-  })
+  const { mutateAsync: createCommentReaction } =
+    useCreateCommentReactionMutation({
+      commentId: comment.id,
+      chainId: app.activeChainId(),
+    });
+  const { mutateAsync: deleteCommentReaction } =
+    useDeleteCommentReactionMutation({
+      commentId: comment.id,
+      chainId: app.activeChainId(),
+    });
   const { data: reactions } = useFetchCommentReactionsQuery({
     chainId: app.activeChainId(),
     commentId: comment.id,
-  })
+  });
 
   useEffect(() => {
     const redrawFunction = (comment_id) => {
@@ -82,8 +77,6 @@ export const CommentReactionButton = ({
       return r.Address.address === activeAddress;
     });
 
-    setIsLoading(true);
-
     deleteCommentReaction({
       canvasHash: foundReaction.canvas_hash,
       reactionId: foundReaction.id,
@@ -92,34 +85,49 @@ export const CommentReactionButton = ({
         likes: likes - 1,
         hasReacted: false,
       },
-    }).then(() => {
-      setReactors(
-        reactors.filter(({ Address }) => Address.address !== userAddress)
-      );
-      setReactionCounts(app.comments.reactionCountsStore.getByPost(comment));
-      setIsLoading(false);
-    }).catch(() => {
-      notifyError('Failed to update reaction count');
-    });
+    })
+      .then(() => {
+        setReactors(
+          reactors.filter(({ Address }) => Address.address !== userAddress)
+        );
+        setReactionCounts(app.comments.reactionCountsStore.getByPost(comment));
+      })
+      .catch(() => {
+        notifyError('Failed to update reaction count');
+      });
   };
 
   const like = (chain: ChainInfo, chainId: string, userAddress: string) => {
-    setIsLoading(true);
-
     createCommentReaction({
       address: userAddress,
       commentId: comment.id,
       chainId: chainId,
-    }).then(() => {
-      setReactors([
-        ...reactors,
-        { Address: { address: userAddress, chain } },
-      ]);
-      setReactionCounts(app.comments.reactionCountsStore.getByPost(comment));
-      setIsLoading(false);
-    }).catch(() => {
-      notifyError('Failed to save reaction');
     })
+      .then(() => {
+        setReactors([
+          ...reactors,
+          { Address: { address: userAddress, chain } },
+        ]);
+        setReactionCounts(app.comments.reactionCountsStore.getByPost(comment));
+      })
+      .catch(() => {
+        notifyError('Failed to save reaction');
+      });
+  };
+
+  const handleVoteClick = async (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!app.isLoggedIn() || !app.user.activeAccount) {
+      setIsModalOpen(true);
+    } else {
+      onReactionClick(e, hasReacted, dislike, like);
+    }
+  };
+
+  const handleVoteMouseEnter = async () => {
+    setReactors(reactions);
   };
 
   return (
@@ -130,66 +138,16 @@ export const CommentReactionButton = ({
         onClose={() => setIsModalOpen(false)}
         open={isModalOpen}
       />
-      <button
-        className={getClasses<{ disabled?: boolean }>(
-          { disabled: isLoading || isUserForbidden },
-          `CommentReactionButton ${hasReacted ? ' has-reacted' : ''}`
-        )}
-        // TODO: won't be needed now?
-        onMouseEnter={async () => {
-          setReactors(reactions);
-        }}
-        onClick={async (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-
-          if (!app.isLoggedIn() || !app.user.activeAccount) {
-            setIsModalOpen(true);
-          } else {
-            onReactionClick(e, hasReacted, dislike, like);
-          }
-        }}
-      >
-        {likes > 0 ? (
-          <CWTooltip
-            content={
-              <div className="reaction-button-tooltip-contents">
-                {getDisplayedReactorsForPopup({
-                  reactors: reactors.map((r) => r.Address.address),
-                })}
-              </div>
-            }
-            renderTrigger={(handleInteraction) => (
-              <div
-                onMouseEnter={handleInteraction}
-                onMouseLeave={handleInteraction}
-                className="btn-container"
-              >
-                <CWIcon
-                  iconName="upvote"
-                  iconSize="small"
-                  {...(hasReacted && { weight: 'fill' })}
-                />
-                <div
-                  className={`reactions-count ${hasReacted ? ' has-reacted' : ''
-                    }`}
-                >
-                  {likes}
-                </div>
-              </div>
-            )}
-          />
-        ) : (
-          <>
-            <CWIcon iconName="upvote" iconSize="small" />
-            <div
-              className={`reactions-count ${hasReacted ? ' has-reacted' : ''}`}
-            >
-              {likes}
-            </div>
-          </>
-        )}
-      </button>
+      <CWUpvoteSmall
+        voteCount={likes}
+        disabled={isUserForbidden || disabled}
+        selected={hasReacted}
+        onMouseEnter={handleVoteMouseEnter}
+        onClick={handleVoteClick}
+        tooltipContent={getDisplayedReactorsForPopup({
+          reactors: reactors.map((r) => r.Address.address),
+        })}
+      />
     </>
   );
 };

packages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx

@@ -1024,8 +1024,7 @@ export const ComponentShowcase = () => {
           />
           <CWThreadAction
             action="upvote"
-            count={1}
-            onClick={() => console.log('Upvote action clicked!!')}
+            onClick={() => console.log('Upvote action clicked!')}
           />
           <CWThreadAction
             action="overflow"
@@ -1049,7 +1048,6 @@ export const ComponentShowcase = () => {
           />
           <CWThreadAction
             action="upvote"
-            count={1}
             onClick={() => console.log('Upvote action clicked!')}
             disabled
           />

packages/commonwealth/client/scripts/views/components/component_kit/cw_content_page.tsx

@@ -8,8 +8,8 @@ import MinimumProfile from '../../../models/MinimumProfile';
 import { Thread } from '../../../models/Thread';
 import Topic from '../../../models/Topic';
 import { ThreadStage } from '../../../models/types';
-import { AuthorAndPublishInfo as ThreadAuthorAndPublishInfo } from '../../pages/discussions/ThreadCard/AuthorAndPublishInfo';
-import { Options as ThreadOptions } from '../../pages/discussions/ThreadCard/Options';
+import { AuthorAndPublishInfo } from '../../pages/discussions/ThreadCard/AuthorAndPublishInfo';
+import { ThreadOptions } from '../../pages/discussions/ThreadCard/ThreadOptions';
 import { CWCard } from './cw_card';
 import { CWTab, CWTabBar } from './cw_tabs';
 import { CWText } from './cw_text';
@@ -116,7 +116,7 @@ export const CWContentPage = ({
           title
         )}
         <div className="header-info-row">
-          <ThreadAuthorAndPublishInfo
+          <AuthorAndPublishInfo
             showSplitDotIndicator={true}
             isNew={!!displayNewTag}
             isLocked={thread?.readOnly}
@@ -156,8 +156,8 @@ export const CWContentPage = ({
       {body &&
         body(
           <ThreadOptions
-            canVote={!thread?.readOnly}
-            canComment={!thread?.readOnly}
+            upvoteBtnVisible={!thread?.readOnly}
+            commentBtnVisible={!thread?.readOnly}
             thread={thread}
             totalComments={thread?.numberOfComments}
             onLockToggle={onLockToggle}

packages/commonwealth/client/scripts/views/components/component_kit/cw_popover/cw_popover.tsx

@@ -17,6 +17,7 @@ type UsePopoverProps = {
 type PopoverProps = {
   content: React.ReactNode;
   placement?: Placement;
+  disablePortal?: boolean;
 } & UsePopoverProps;
 
 export type PopoverTriggerProps = {
@@ -44,14 +45,20 @@ export const usePopover = (): UsePopoverProps => {
   };
 };
 
-export const Popover = (props: PopoverProps) => {
-  const { anchorEl, content, id, open, placement } = props;
-
+export const Popover = ({
+  anchorEl,
+  content,
+  id,
+  open,
+  placement,
+  disablePortal,
+}: PopoverProps) => {
   return (
     <PopperUnstyled
       id={id}
       open={open}
       anchorEl={anchorEl}
+      disablePortal={disablePortal}
       placement={placement || 'bottom-start'}
       modifiers={[
         {

packages/commonwealth/client/scripts/views/components/component_kit/cw_popover/cw_tooltip.tsx

@@ -13,17 +13,23 @@ type TooltipProps = {
   content: string | React.ReactNode;
   hasBackground?: boolean;
   placement?: Placement;
+  disablePortal?: boolean;
 } & PopoverTriggerProps;
 
-export const CWTooltip = (props: TooltipProps) => {
-  const { content, hasBackground, renderTrigger, placement } = props;
-
+export const CWTooltip = ({
+  content,
+  hasBackground,
+  renderTrigger,
+  placement,
+  disablePortal,
+}: TooltipProps) => {
   const popoverProps = usePopover();
 
   return (
     <>
       {renderTrigger(popoverProps.handleInteraction)}
       <Popover
+        disablePortal={disablePortal}
         placement={placement}
         content={
           typeof content === 'string' ? (