9599443909

Committed 20 Jun 2024 02:36PM UTC coverage: 15.055% (-0.07%) from 15.126%

Build # 9599443909

Build Type

push

github

Committed by

web-flow

Commit Message

Contest - disable unvoting (#8157)

* disable unvoting

* cr

Run Details

3752 of 25086 branches covered (14.96%)

Branch coverage included in aggregate %.

0 of 9 new or added lines in 5 files covered. (0.0%)

5 existing lines in 1 file now uncovered.

5184 of 34269 relevant lines covered (15.13%)

4.88 hits per line

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

0.0

/packages/commonwealth/client/scripts/views/components/NewThreadForm/NewThreadForm.tsx

import { notifyError } from 'controllers/app/notifications';
import { SessionKeyError } from 'controllers/server/sessions';
import { parseCustomStages } from 'helpers';
import { detectURL, getThreadActionTooltipText } from 'helpers/threads';
import { useFlag } from 'hooks/useFlag';
import useJoinCommunityBanner from 'hooks/useJoinCommunityBanner';
import useUserActiveAccount from 'hooks/useUserActiveAccount';
import { useCommonNavigate } from 'navigation/helpers';
import React, { useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import app from 'state';
import {
  useFetchGroupsQuery,
  useRefreshMembershipQuery,
} from 'state/api/groups';
import { useCreateThreadMutation } from 'state/api/threads';
import { useFetchTopicsQuery } from 'state/api/topics';
import JoinCommunityBanner from 'views/components/JoinCommunityBanner';
import useJoinCommunity from 'views/components/SublayoutHeader/useJoinCommunity';
import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
import { CWTextInput } from 'views/components/component_kit/new_designs/CWTextInput';
import { useSessionRevalidationModal } from 'views/modals/SessionRevalidationModal';
import useCommunityContests from 'views/pages/CommunityManagement/Contests/useCommunityContests';
import { ThreadKind, ThreadStage } from '../../../models/types';
import Permissions from '../../../utils/Permissions';
import { CWText } from '../../components/component_kit/cw_text';
import { CWGatedTopicBanner } from '../component_kit/CWGatedTopicBanner';
import { CWSelectList } from '../component_kit/new_designs/CWSelectList';
import { ReactQuillEditor } from '../react_quill_editor';
import {
  createDeltaFromText,
  getTextFromDelta,
  serializeDelta,
} from '../react_quill_editor/utils';
import ContestThreadBanner from './ContestThreadBanner';
import './NewThreadForm.scss';
import {
  checkIsTopicInContest,
  checkNewThreadErrors,
  useNewThreadForm,
} from './helpers';

export const NewThreadForm = () => {
  const navigate = useCommonNavigate();
  const location = useLocation();
  const contestsEnabled = useFlag('contest');

  const [submitEntryChecked, setSubmitEntryChecked] = useState(false);

  const { data: topics = [] } = useFetchTopicsQuery({
    communityId: app.activeChainId(),
  });

  const { contestsData, isContestAvailable } = useCommunityContests();

  const communityId = app.chain.id;
  const hasTopics = topics?.length;
  const isAdmin = Permissions.isCommunityAdmin() || Permissions.isSiteAdmin();

  const topicsForSelector = hasTopics ? topics : [];

  const {
    threadTitle,
    setThreadTitle,
    threadKind,
    threadTopic,
    setThreadTopic,
    threadUrl,
    setThreadUrl,
    threadContentDelta,
    setThreadContentDelta,
    setIsSaving,
    isDisabled,
    clearDraft,
    canShowGatingBanner,
    setCanShowGatingBanner,
  } = useNewThreadForm(communityId, topicsForSelector);

  const isTopicInContest = checkIsTopicInContest(contestsData, threadTopic?.id);

  const { handleJoinCommunity, JoinCommunityModals } = useJoinCommunity();
  const { isBannerVisible, handleCloseBanner } = useJoinCommunityBanner();
  const { activeAccount: hasJoinedCommunity } = useUserActiveAccount();

  const { data: groups = [] } = useFetchGroupsQuery({
    communityId: app.activeChainId(),
    includeTopics: true,
  });
  const { data: memberships = [] } = useRefreshMembershipQuery({
    communityId: app.activeChainId(),
    address: app?.user?.activeAccount?.address,
    apiEnabled: !!app?.user?.activeAccount?.address,
  });

  const {
    mutateAsync: createThread,
    error: createThreadError,
    reset: resetCreateThreadMutation,
  } = useCreateThreadMutation({
    communityId: app.activeChainId(),
  });

  const { RevalidationModal } = useSessionRevalidationModal({
    handleClose: resetCreateThreadMutation,
    error: createThreadError,
  });

  const isDiscussion = threadKind === ThreadKind.Discussion;

  const isPopulated = useMemo(() => {
    return threadTitle || getTextFromDelta(threadContentDelta).length > 0;
  }, [threadContentDelta, threadTitle]);

  const isTopicGated = !!(memberships || []).find((membership) =>
    membership.topicIds.includes(threadTopic?.id),
  );
  const isActionAllowedInGatedTopic = !!(memberships || []).find(
    (membership) =>
      membership.topicIds.includes(threadTopic?.id) && membership.isAllowed,
  );
  const gatedGroupNames = groups
    .filter((group) =>
      group.topics.find((topic) => topic.id === threadTopic?.id),
    )
    .map((group) => group.name);
  const isRestrictedMembership =
    !isAdmin && isTopicGated && !isActionAllowedInGatedTopic;

  const handleNewThreadCreation = async () => {
    if (isRestrictedMembership) {
      notifyError('Topic is gated!');
      return;
    }

    if (!isDiscussion && !detectURL(threadUrl)) {
      notifyError('Must provide a valid URL.');
      return;
    }

    const deltaString = JSON.stringify(threadContentDelta);

    checkNewThreadErrors(
      { threadKind, threadUrl, threadTitle, threadTopic },
      deltaString,
      !!hasTopics,
    );

    setIsSaving(true);

    try {
      const thread = await createThread({
        address: app.user.activeAccount.address,
        kind: threadKind,
        stage: app.chain.meta.customStages
          ? parseCustomStages(app.chain.meta.customStages)[0]
          : ThreadStage.Discussion,
        communityId: app.activeChainId(),
        title: threadTitle,
        topic: threadTopic,
        body: serializeDelta(threadContentDelta),
        url: threadUrl,
        // @ts-expect-error <StrictNullChecks/>
        authorProfile: app.user.activeAccount.profile,
      });

      setThreadContentDelta(createDeltaFromText(''));
      clearDraft();

      navigate(`/discussion/${thread.id}`);
    } catch (err) {
      if (err instanceof SessionKeyError) {
        return;
      }
      console.error(err.response.data.error || err?.message);
      notifyError('Failed to create thread');
    } finally {
      setIsSaving(false);
    }
  };

  const handleCancel = () => {
    setThreadTitle('');
    setThreadTopic(
      // @ts-expect-error <StrictNullChecks/>
      topicsForSelector?.find((t) => t?.name?.includes('General')) || null,
    );
    setThreadContentDelta(createDeltaFromText(''));
  };

  const showBanner = !hasJoinedCommunity && isBannerVisible;
  const disabledActionsTooltipText = getThreadActionTooltipText({
    isCommunityMember: !!hasJoinedCommunity,
    isThreadTopicGated: isRestrictedMembership,
  });

  const contestThreadBannerVisible =
    contestsEnabled && isContestAvailable && isTopicInContest;
  const isDisabledBecauseOfContestsConsent =
    contestThreadBannerVisible && !submitEntryChecked;

  return (
    <>
      <CWPageLayout>
        <div className="NewThreadForm">
          <CWText type="h2" fontWeight="medium" className="header">
            Create thread
          </CWText>
          <div className="new-thread-body">
            <div className="new-thread-form-inputs">
              <CWTextInput
                fullWidth
                autoFocus
                placeholder="Title"
                value={threadTitle}
                tabIndex={1}
                onInput={(e) => setThreadTitle(e.target.value)}
              />

              {!!hasTopics && (
                <CWSelectList
                  options={topics.map((topic) => ({
                    label: topic?.name,
                    value: `${topic?.id}`,
                  }))}
                  {...(!!location.search &&
                    threadTopic?.name &&
                    threadTopic?.id && {
                      defaultValue: {
                        label: threadTopic?.name,
                        value: `${threadTopic?.id}`,
                      },
                    })}
                  placeholder="Select topic"
                  onChange={(topic) => {
                    setCanShowGatingBanner(true);
                    setThreadTopic(
                      // @ts-expect-error <StrictNullChecks/>
                      topicsForSelector.find((t) => `${t.id}` === topic.value),
                    );
                  }}
                />
              )}

              {!isDiscussion && (
                <CWTextInput
                  placeholder="https://"
                  value={threadUrl}
                  tabIndex={2}
                  onInput={(e) => setThreadUrl(e.target.value)}
                />
              )}

              <ReactQuillEditor
                contentDelta={threadContentDelta}
                setContentDelta={setThreadContentDelta}
                isDisabled={isRestrictedMembership || !hasJoinedCommunity}
                tooltipLabel={
                  typeof disabledActionsTooltipText === 'function'
                    ? disabledActionsTooltipText?.('submit')
                    : disabledActionsTooltipText
                }
                placeholder="Enter text or drag images and media here. Use the tab button to see your formatted post."
              />

              {contestThreadBannerVisible && (
                <ContestThreadBanner
                  submitEntryChecked={submitEntryChecked}
                  onSetSubmitEntryChecked={setSubmitEntryChecked}
                />
              )}

              <div className="buttons-row">
                {isPopulated && hasJoinedCommunity && (
                  <CWButton
                    buttonType="tertiary"
                    onClick={handleCancel}
                    tabIndex={3}
                    label="Cancel"
                    containerClassName="no-pad"
                  />
                )}
                <CWButton
                  label="Create thread"
                  disabled={
                    isDisabled ||
                    !hasJoinedCommunity ||
                    isDisabledBecauseOfContestsConsent
                  }
                  onClick={handleNewThreadCreation}
                  tabIndex={4}
                  containerClassName="no-pad"
                />
              </div>

              {showBanner && (
                <JoinCommunityBanner
                  onClose={handleCloseBanner}
                  onJoin={handleJoinCommunity}
                />
              )}

              {isRestrictedMembership && canShowGatingBanner && (
                <div>
                  <CWGatedTopicBanner
                    groupNames={gatedGroupNames}
                    onClose={() => setCanShowGatingBanner(false)}
                  />
                </div>
              )}
            </div>
          </div>
        </div>
      </CWPageLayout>
      {JoinCommunityModals}
      {RevalidationModal}
    </>
  );
};

1	import { notifyError } from 'controllers/app/notifications';
2	import { SessionKeyError } from 'controllers/server/sessions';
3	import { parseCustomStages } from 'helpers';
4	import { detectURL, getThreadActionTooltipText } from 'helpers/threads';
5	import { useFlag } from 'hooks/useFlag';
6	import useJoinCommunityBanner from 'hooks/useJoinCommunityBanner';
7	import useUserActiveAccount from 'hooks/useUserActiveAccount';
8	import { useCommonNavigate } from 'navigation/helpers';
9	import React, { useMemo, useState } from 'react';
10	import { useLocation } from 'react-router-dom';
11	import app from 'state';
12	import {
13	useFetchGroupsQuery,
14	useRefreshMembershipQuery,
15	} from 'state/api/groups';
16	import { useCreateThreadMutation } from 'state/api/threads';
17	import { useFetchTopicsQuery } from 'state/api/topics';
18	import JoinCommunityBanner from 'views/components/JoinCommunityBanner';
19	import useJoinCommunity from 'views/components/SublayoutHeader/useJoinCommunity';
20	import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
21	import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
22	import { CWTextInput } from 'views/components/component_kit/new_designs/CWTextInput';
23	import { useSessionRevalidationModal } from 'views/modals/SessionRevalidationModal';
24	import useCommunityContests from 'views/pages/CommunityManagement/Contests/useCommunityContests';
25	import { ThreadKind, ThreadStage } from '../../../models/types';
26	import Permissions from '../../../utils/Permissions';
27	import { CWText } from '../../components/component_kit/cw_text';
28	import { CWGatedTopicBanner } from '../component_kit/CWGatedTopicBanner';
29	import { CWSelectList } from '../component_kit/new_designs/CWSelectList';
30	import { ReactQuillEditor } from '../react_quill_editor';
31	import {
32	createDeltaFromText,
33	getTextFromDelta,
34	serializeDelta,
35	} from '../react_quill_editor/utils';
36	import ContestThreadBanner from './ContestThreadBanner';
37	import './NewThreadForm.scss';
38	import {
39	checkIsTopicInContest,
40	checkNewThreadErrors,
41	useNewThreadForm,	×
42	} from './helpers';
43
44	export const NewThreadForm = () => {
45	const navigate = useCommonNavigate();	×
46	const location = useLocation();	×
NEW 47	const contestsEnabled = useFlag('contest');	×
48
NEW 49	const [submitEntryChecked, setSubmitEntryChecked] = useState(false);	×
50
51	const { data: topics = [] } = useFetchTopicsQuery({	×
52	communityId: app.activeChainId(),
53	});
54
55	const { contestsData, isContestAvailable } = useCommunityContests();
56
57	const communityId = app.chain.id;
58	const hasTopics = topics?.length;
59	const isAdmin = Permissions.isCommunityAdmin() \|\| Permissions.isSiteAdmin();	×
60
61	const topicsForSelector = hasTopics ? topics : [];	×
62
63	const {
64	threadTitle,
65	setThreadTitle,
66	threadKind,
67	threadTopic,
68	setThreadTopic,
69	threadUrl,
70	setThreadUrl,
71	threadContentDelta,
72	setThreadContentDelta,	×
73	setIsSaving,
74	isDisabled,
75	clearDraft,
76	canShowGatingBanner,	×
77	setCanShowGatingBanner,
78	} = useNewThreadForm(communityId, topicsForSelector);
79
80	const isTopicInContest = checkIsTopicInContest(contestsData, threadTopic?.id);
81
82	const { handleJoinCommunity, JoinCommunityModals } = useJoinCommunity();
83	const { isBannerVisible, handleCloseBanner } = useJoinCommunityBanner();
84	const { activeAccount: hasJoinedCommunity } = useUserActiveAccount();
85
86	const { data: groups = [] } = useFetchGroupsQuery({	×
87	communityId: app.activeChainId(),
88	includeTopics: true,
89	});
90	const { data: memberships = [] } = useRefreshMembershipQuery({	×
91	communityId: app.activeChainId(),
92	address: app?.user?.activeAccount?.address,
93	apiEnabled: !!app?.user?.activeAccount?.address,
94	});
95
96	const {
97	mutateAsync: createThread,
98	error: createThreadError,	×
99	reset: resetCreateThreadMutation,
100	} = useCreateThreadMutation({
101	communityId: app.activeChainId(),	×
102	});
103
104	const { RevalidationModal } = useSessionRevalidationModal({	×
105	handleClose: resetCreateThreadMutation,
106	error: createThreadError,	×
107	});
108
109	const isDiscussion = threadKind === ThreadKind.Discussion;
110
111	const isPopulated = useMemo(() => {
112	return threadTitle \|\| getTextFromDelta(threadContentDelta).length > 0;	×
113	}, [threadContentDelta, threadTitle]);
114		×
115	const isTopicGated = !!(memberships \|\| []).find((membership) =>	×
116	membership.topicIds.includes(threadTopic?.id),	×
117	);	×
118	const isActionAllowedInGatedTopic = !!(memberships \|\| []).find(	×
119	(membership) =>
120	membership.topicIds.includes(threadTopic?.id) && membership.isAllowed,	×
121	);
122	const gatedGroupNames = groups	×
123	.filter((group) =>
124	group.topics.find((topic) => topic.id === threadTopic?.id),	×
125	)
126	.map((group) => group.name);
127	const isRestrictedMembership =
128	!isAdmin && isTopicGated && !isActionAllowedInGatedTopic;	×
129
130	const handleNewThreadCreation = async () => {
131	if (isRestrictedMembership) {	×
132	notifyError('Topic is gated!');
133	return;
134	}
135
136	if (!isDiscussion && !detectURL(threadUrl)) {	×
137	notifyError('Must provide a valid URL.');	×
138	return;	×
139	}
140
141	const deltaString = JSON.stringify(threadContentDelta);	×
142
143	checkNewThreadErrors(
144	{ threadKind, threadUrl, threadTitle, threadTopic },
145	deltaString,
146	!!hasTopics,
147	);
148
149	setIsSaving(true);
150
151	try {
152	const thread = await createThread({
153	address: app.user.activeAccount.address,
154	kind: threadKind,
155	stage: app.chain.meta.customStages	×
156	? parseCustomStages(app.chain.meta.customStages)[0]
157	: ThreadStage.Discussion,
158	communityId: app.activeChainId(),	×
159	title: threadTitle,
160	topic: threadTopic,
161	body: serializeDelta(threadContentDelta),	×
162	url: threadUrl,
163	// @ts-expect-error <StrictNullChecks/>
164	authorProfile: app.user.activeAccount.profile,
165	});
166
167	setThreadContentDelta(createDeltaFromText(''));
168	clearDraft();	×
169
170	navigate(`/discussion/${thread.id}`);	×
171	} catch (err) {
172	if (err instanceof SessionKeyError) {	×
173	return;
174	}
175	console.error(err.response.data.error \|\| err?.message);	×
176	notifyError('Failed to create thread');
177	} finally {	×
178	setIsSaving(false);	×
179	}
180	};
181
182	const handleCancel = () => {
183	setThreadTitle('');	×
184	setThreadTopic(
185	// @ts-expect-error <StrictNullChecks/>
186	topicsForSelector?.find((t) => t?.name?.includes('General')) \|\| null,	×
187	);
188	setThreadContentDelta(createDeltaFromText(''));
189	};
190
191	const showBanner = !hasJoinedCommunity && isBannerVisible;	×
192	const disabledActionsTooltipText = getThreadActionTooltipText({
193	isCommunityMember: !!hasJoinedCommunity,
194	isThreadTopicGated: isRestrictedMembership,
195	});
196
197	const contestThreadBannerVisible =
NEW 198	contestsEnabled && isContestAvailable && isTopicInContest;	×
199	const isDisabledBecauseOfContestsConsent =
200	contestThreadBannerVisible && !submitEntryChecked;	×
201		×
202	return (
203	<>
204	<CWPageLayout>
205	<div className="NewThreadForm">
206	<CWText type="h2" fontWeight="medium" className="header">
207	Create thread	×
208	</CWText>
209	<div className="new-thread-body">
210	<div className="new-thread-form-inputs">
211	<CWTextInput
212	fullWidth
213	autoFocus
214	placeholder="Title"
215	value={threadTitle}
216	tabIndex={1}
217	onInput={(e) => setThreadTitle(e.target.value)}	×
218	/>
219
220	{!!hasTopics && (	×
221	<CWSelectList
222	options={topics.map((topic) => ({
223	label: topic?.name,
224	value: `${topic?.id}`,
225	}))}
226	{...(!!location.search &&	×
227	threadTopic?.name &&
228	threadTopic?.id && {
229	defaultValue: {
230	label: threadTopic?.name,
231	value: `${threadTopic?.id}`,
232	},
233	})}
234	placeholder="Select topic"
235	onChange={(topic) => {
236	setCanShowGatingBanner(true);
237	setThreadTopic(
238	// @ts-expect-error <StrictNullChecks/>	×
239	topicsForSelector.find((t) => `${t.id}` === topic.value),
240	);	×
241	}}
242	/>
243	)}
244
245	{!isDiscussion && (	×
246	<CWTextInput
247	placeholder="https://"
248	value={threadUrl}	×
249	tabIndex={2}
250	onInput={(e) => setThreadUrl(e.target.value)}
251	/>
252	)}
253
254	<ReactQuillEditor
255	contentDelta={threadContentDelta}
256	setContentDelta={setThreadContentDelta}
257	isDisabled={isRestrictedMembership \|\| !hasJoinedCommunity}	×
258	tooltipLabel={
259	typeof disabledActionsTooltipText === 'function'	×
260	? disabledActionsTooltipText?.('submit')
261	: disabledActionsTooltipText
262	}
263	placeholder="Enter text or drag images and media here. Use the tab button to see your formatted post."
264	/>
265
266	{contestThreadBannerVisible && (	×
267	<ContestThreadBanner
268	submitEntryChecked={submitEntryChecked}
269	onSetSubmitEntryChecked={setSubmitEntryChecked}
270	/>
271	)}
272
273	<div className="buttons-row">	×
274	{isPopulated && hasJoinedCommunity && (	×
275	<CWButton
276	buttonType="tertiary"
277	onClick={handleCancel}
278	tabIndex={3}
279	label="Cancel"
280	containerClassName="no-pad"
281	/>
282	)}
283	<CWButton
284	label="Create thread"
285	disabled={
286	isDisabled \|\|	×
287	!hasJoinedCommunity \|\|
288	isDisabledBecauseOfContestsConsent
289	}
290	onClick={handleNewThreadCreation}
291	tabIndex={4}
292	containerClassName="no-pad"
293	/>
294	</div>
295
296	{showBanner && (	×
297	<JoinCommunityBanner
298	onClose={handleCloseBanner}
299	onJoin={handleJoinCommunity}
300	/>
301	)}
302
303	{isRestrictedMembership && canShowGatingBanner && (	×
304	<div>
305	<CWGatedTopicBanner
306	groupNames={gatedGroupNames}
307	onClose={() => setCanShowGatingBanner(false)}
308	/>
309	</div>
310	)}
311	</div>
312	</div>
313	</div>
314	</CWPageLayout>
315	{JoinCommunityModals}
316	{RevalidationModal}
317	</>
318	);
319	};

hicommonwealth / commonwealth / 9599443909

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