10922676522

Committed 18 Sep 2024 01:01PM UTC coverage: 13.821% (-0.02%) from 13.838%

Build # 10922676522

Build Type

Pull #9252

github

Committed by

web-flow

Commit Message

Merge 8bd10f4c5 into 90b6ae344

Pull Request Pull Request #9252: New topic flow - FE & BE integration

Run Details

3045 of 20413 branches covered (14.92%)

Branch coverage included in aggregate %.

0 of 70 new or added lines in 16 files covered. (0.0%)

6 existing lines in 5 files now uncovered.

3970 of 30344 relevant lines covered (13.08%)

3.97 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/views/pages/discussions/ThreadCard/ThreadOptions/ReactionButton/ReactionButton.tsx

import { buildCreateThreadReactionInput } from 'client/scripts/state/api/threads/createReaction';
import { useAuthModalStore } from 'client/scripts/state/ui/modals';
import { notifyError } from 'controllers/app/notifications';
import { SessionKeyError } from 'controllers/server/sessions';
import useAppStatus from 'hooks/useAppStatus';
import type Thread from 'models/Thread';
import React, { useState } from 'react';
import app from 'state';
import {
  useCreateThreadReactionMutation,
  useDeleteThreadReactionMutation,
} from 'state/api/threads';
import useUserStore from 'state/ui/user';
import { getDisplayedReactorsForPopup } from 'views/components/ReactionButton/helpers';
import CWPopover, {
  usePopover,
} from 'views/components/component_kit/new_designs/CWPopover';
import CWUpvoteSmall from 'views/components/component_kit/new_designs/CWUpvoteSmall';
import { TooltipWrapper } from 'views/components/component_kit/new_designs/cw_thread_action';
import { CWUpvote } from 'views/components/component_kit/new_designs/cw_upvote';
import { AuthModal } from 'views/modals/AuthModal';
import { ReactionButtonSkeleton } from './ReactionButtonSkeleton';

type ReactionButtonProps = {
  thread: Thread;
  size: 'small' | 'big';
  showSkeleton?: boolean;
  disabled: boolean;
  tooltipText?: string;
  undoUpvoteDisabled?: boolean;
};

export const ReactionButton = ({
  thread,
  size,
  disabled,
  showSkeleton,
  tooltipText,
  undoUpvoteDisabled,
}: ReactionButtonProps) => {
  const [isAuthModalOpen, setIsAuthModalOpen] = useState<boolean>(false);
  const reactors = thread?.associatedReactions?.map((t) => t.address);

  const { isAddedToHomeScreen } = useAppStatus();
  const { checkForSessionKeyRevalidationErrors } = useAuthModalStore();
  const user = useUserStore();

  const reactionWeightsSum =
    thread?.associatedReactions?.reduce(
      (acc, curr) => acc + (curr.voting_weight || 1),
      0,
    ) || 0;
  const activeAddress = user.activeAccount?.address;
  const thisUserReaction = thread?.associatedReactions?.filter(
    (r) => r.address === activeAddress,
  );
  const hasReacted = thisUserReaction?.length !== 0;
  const reactedId =
    thisUserReaction?.length === 0 ? -1 : thisUserReaction?.[0]?.id;
  const popoverProps = usePopover();

  const communityId = app.activeChainId() || '';
  const { mutateAsync: createThreadReaction, isLoading: isAddingReaction } =
    useCreateThreadReactionMutation({
      communityId,
      threadId: thread.id,
      threadMsgId: thread.canvasMsgId,
    });
  const { mutateAsync: deleteThreadReaction, isLoading: isDeletingReaction } =
    useDeleteThreadReactionMutation({
      communityId,
      address: user.activeAccount?.address || '',
      threadId: thread.id,
      threadMsgId: thread.canvasMsgId,
    });

  if (showSkeleton) return <ReactionButtonSkeleton />;
  const isLoading = isAddingReaction || isDeletingReaction;

  const handleVoteClick = async (event) => {
    event.stopPropagation();
    event.preventDefault();
    if (isLoading || disabled) return;

    if (!user.isLoggedIn || !user.activeAccount) {
      setIsAuthModalOpen(true);
      return;
    }
    if (hasReacted) {
      if (undoUpvoteDisabled) {
        // for contest threads, users can only upvote because we cannot revert onchain transaction
        return notifyError('Upvotes on contest entries cannot be removed');
      }

      deleteThreadReaction({
        communityId,
        address: user.activeAccount?.address,
        threadId: thread.id,
        threadMsgId: thread.canvasMsgId,
        reactionId: reactedId as number,
      }).catch((e) => {
        if (e instanceof SessionKeyError) {
          checkForSessionKeyRevalidationErrors(e);
          return;
        }
        notifyError('Failed to unvote');
        console.error(e.response.data.error || e?.message);
      });
    } else {
      const input = await buildCreateThreadReactionInput({
        communityId,
        address: activeAddress || '',
        threadId: thread.id,
        threadMsgId: thread.canvasMsgId,
        reactionType: 'like',
        isPWA: isAddedToHomeScreen,
      });
      createThreadReaction(input).catch((e) => {
        if (e instanceof SessionKeyError) {
          checkForSessionKeyRevalidationErrors(e);
          return;
        }
        notifyError('Failed to upvote');
        console.error(e.response.data.error || e?.message);
      });
    }
  };

  return (
    <>
      {size === 'small' ? (
        <CWUpvoteSmall
          voteCount={reactionWeightsSum}
          disabled={disabled}
          isThreadArchived={!!thread.archivedAt}
          selected={hasReacted}
          onClick={handleVoteClick}
          popoverContent={getDisplayedReactorsForPopup({
            reactors,
          })}
          tooltipText={tooltipText}
        />
      ) : tooltipText ? (
        <TooltipWrapper disabled={disabled} text={tooltipText}>
          <CWUpvote
            onClick={handleVoteClick}
            voteCount={reactionWeightsSum}
            disabled={disabled}
            active={hasReacted}
          />
        </TooltipWrapper>
      ) : (
        <div
          onMouseEnter={popoverProps.handleInteraction}
          onMouseLeave={popoverProps.handleInteraction}
        >
          <CWUpvote
            onClick={handleVoteClick}
            voteCount={reactionWeightsSum}
            disabled={disabled}
            active={hasReacted}
          />

          {reactors.length > 0 && (
            <CWPopover
              body={getDisplayedReactorsForPopup({
                reactors,
              })}
              {...popoverProps}
            />
          )}
        </div>
      )}
      <AuthModal
        onClose={() => setIsAuthModalOpen(false)}
        isOpen={isAuthModalOpen}
      />
    </>
  );
};

1	import { buildCreateThreadReactionInput } from 'client/scripts/state/api/threads/createReaction';
2	import { useAuthModalStore } from 'client/scripts/state/ui/modals';
3	import { notifyError } from 'controllers/app/notifications';
4	import { SessionKeyError } from 'controllers/server/sessions';
5	import useAppStatus from 'hooks/useAppStatus';
6	import type Thread from 'models/Thread';
7	import React, { useState } from 'react';
8	import app from 'state';
9	import {
10	useCreateThreadReactionMutation,
11	useDeleteThreadReactionMutation,
12	} from 'state/api/threads';
13	import useUserStore from 'state/ui/user';
14	import { getDisplayedReactorsForPopup } from 'views/components/ReactionButton/helpers';
15	import CWPopover, {
16	usePopover,
17	} from 'views/components/component_kit/new_designs/CWPopover';
18	import CWUpvoteSmall from 'views/components/component_kit/new_designs/CWUpvoteSmall';
19	import { TooltipWrapper } from 'views/components/component_kit/new_designs/cw_thread_action';
20	import { CWUpvote } from 'views/components/component_kit/new_designs/cw_upvote';
21	import { AuthModal } from 'views/modals/AuthModal';
22	import { ReactionButtonSkeleton } from './ReactionButtonSkeleton';
23
24	type ReactionButtonProps = {
25	thread: Thread;
26	size: 'small' \| 'big';
27	showSkeleton?: boolean;
28	disabled: boolean;
29	tooltipText?: string;
30	undoUpvoteDisabled?: boolean;
31	};
32
33	export const ReactionButton = ({	×
34	thread,
35	size,
36	disabled,
37	showSkeleton,
38	tooltipText,
39	undoUpvoteDisabled,
40	}: ReactionButtonProps) => {
41	const [isAuthModalOpen, setIsAuthModalOpen] = useState<boolean>(false);	×
42	const reactors = thread?.associatedReactions?.map((t) => t.address);	×
43
44	const { isAddedToHomeScreen } = useAppStatus();	×
45	const { checkForSessionKeyRevalidationErrors } = useAuthModalStore();	×
46	const user = useUserStore();	×
47
48	const reactionWeightsSum =
49	thread?.associatedReactions?.reduce(	×
50	(acc, curr) => acc + (curr.voting_weight \|\| 1),	×
51	0,
52	) \|\| 0;
53	const activeAddress = user.activeAccount?.address;	×
54	const thisUserReaction = thread?.associatedReactions?.filter(	×
55	(r) => r.address === activeAddress,	×
56	);
57	const hasReacted = thisUserReaction?.length !== 0;	×
58	const reactedId =
59	thisUserReaction?.length === 0 ? -1 : thisUserReaction?.[0]?.id;	×
60	const popoverProps = usePopover();	×
61
62	const communityId = app.activeChainId() \|\| '';	×
63	const { mutateAsync: createThreadReaction, isLoading: isAddingReaction } =
64	useCreateThreadReactionMutation({	×
65	communityId,
66	threadId: thread.id,
67	threadMsgId: thread.canvasMsgId,
68	});
69	const { mutateAsync: deleteThreadReaction, isLoading: isDeletingReaction } =
70	useDeleteThreadReactionMutation({	×
71	communityId,
72	address: user.activeAccount?.address \|\| '',	×
73	threadId: thread.id,
74	threadMsgId: thread.canvasMsgId,
75	});
76
77	if (showSkeleton) return <ReactionButtonSkeleton />;	×
78	const isLoading = isAddingReaction \|\| isDeletingReaction;	×
79
80	const handleVoteClick = async (event) => {	×
81	event.stopPropagation();	×
82	event.preventDefault();	×
83	if (isLoading \|\| disabled) return;	×
84
85	if (!user.isLoggedIn \|\| !user.activeAccount) {	×
86	setIsAuthModalOpen(true);	×
87	return;	×
88	}
89	if (hasReacted) {	×
90	if (undoUpvoteDisabled) {	×
91	// for contest threads, users can only upvote because we cannot revert onchain transaction
92	return notifyError('Upvotes on contest entries cannot be removed');	×
93	}
94
95	deleteThreadReaction({	×
96	communityId,
97	address: user.activeAccount?.address,
98	threadId: thread.id,
99	threadMsgId: thread.canvasMsgId,
100	reactionId: reactedId as number,
101	}).catch((e) => {
102	if (e instanceof SessionKeyError) {	×
103	checkForSessionKeyRevalidationErrors(e);	×
104	return;	×
105	}
NEW 106	notifyError('Failed to unvote');	×
UNCOV 107	console.error(e.response.data.error \|\| e?.message);	×
108	});
109	} else {
110	const input = await buildCreateThreadReactionInput({	×
111	communityId,
112	address: activeAddress \|\| '',	×
113	threadId: thread.id,
114	threadMsgId: thread.canvasMsgId,
115	reactionType: 'like',
116	isPWA: isAddedToHomeScreen,
117	});
118	createThreadReaction(input).catch((e) => {	×
119	if (e instanceof SessionKeyError) {	×
120	checkForSessionKeyRevalidationErrors(e);	×
121	return;	×
122	}
NEW 123	notifyError('Failed to upvote');	×
UNCOV 124	console.error(e.response.data.error \|\| e?.message);	×
125	});
126	}
127	};
128
129	return (	×
130	<>
131	{size === 'small' ? (	×
132	<CWUpvoteSmall
133	voteCount={reactionWeightsSum}
134	disabled={disabled}
135	isThreadArchived={!!thread.archivedAt}
136	selected={hasReacted}
137	onClick={handleVoteClick}
138	popoverContent={getDisplayedReactorsForPopup({
139	reactors,
140	})}
141	tooltipText={tooltipText}
142	/>
143	) : tooltipText ? (	×
144	<TooltipWrapper disabled={disabled} text={tooltipText}>
145	<CWUpvote
146	onClick={handleVoteClick}
147	voteCount={reactionWeightsSum}
148	disabled={disabled}
149	active={hasReacted}
150	/>
151	</TooltipWrapper>
152	) : (
153	<div
154	onMouseEnter={popoverProps.handleInteraction}
155	onMouseLeave={popoverProps.handleInteraction}
156	>
157	<CWUpvote
158	onClick={handleVoteClick}
159	voteCount={reactionWeightsSum}
160	disabled={disabled}
161	active={hasReacted}
162	/>
163
164	{reactors.length > 0 && (	×
165	<CWPopover
166	body={getDisplayedReactorsForPopup({
167	reactors,
168	})}
169	{...popoverProps}
170	/>
171	)}
172	</div>
173	)}
174	<AuthModal
175	onClose={() => setIsAuthModalOpen(false)}	×
176	isOpen={isAuthModalOpen}
177	/>
178	</>
179	);
180	};

hicommonwealth / commonwealth / 10922676522

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous