10858029208

Committed 14 Sep 2024 12:44AM UTC coverage: 13.774% (+0.02%) from 13.759%

Build # 10858029208

Build Type

Pull #8537

github

Committed by

web-flow

Commit Message

Merge 420b974be into 954e5bd9e

Pull Request Pull Request #8537: Canvas v0.10 and federation readiness

Run Details

3043 of 20528 branches covered (14.82%)

Branch coverage included in aggregate %.

23 of 170 new or added lines in 34 files covered. (13.53%)

23 existing lines in 16 files now uncovered.

3969 of 30378 relevant lines covered (13.07%)

3.94 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 { buildCreateThreadInput } from 'client/scripts/state/api/threads/createThread';
import { useAuthModalStore } from 'client/scripts/state/ui/modals';
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 { useCommonNavigate } from 'navigation/helpers';
import React, { useEffect, useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import app from 'state';
import { useGetUserEthBalanceQuery } from 'state/api/communityStake';
import {
  useFetchGroupsQuery,
  useRefreshMembershipQuery,
} from 'state/api/groups';
import { useCreateThreadMutation } from 'state/api/threads';
import { useFetchTopicsQuery } from 'state/api/topics';
import useUserStore from 'state/ui/user';
import JoinCommunityBanner from 'views/components/JoinCommunityBanner';
import CustomTopicOption from 'views/components/NewThreadForm/CustomTopicOption';
import useJoinCommunity from 'views/components/SublayoutHeader/useJoinCommunity';
import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
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 { MessageRow } from 'views/components/component_kit/new_designs/CWTextInput/MessageRow';
import useCommunityContests from 'views/pages/CommunityManagement/Contests/useCommunityContests';
import useAppStatus from '../../../hooks/useAppStatus';
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 ContestTopicBanner from './ContestTopicBanner';
import './NewThreadForm.scss';
import { checkNewThreadErrors, useNewThreadForm } from './helpers';

const MIN_ETH_FOR_CONTEST_THREAD = 0.0005;

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

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

  useAppStatus();

  const communityId = app.activeChainId() || '';
  const { data: topics = [], refetch: refreshTopics } = useFetchTopicsQuery({
    communityId,
    includeContestData: contestsEnabled,
    apiEnabled: !!communityId,
  });

  const { isContestAvailable } = useCommunityContests();

  const sortedTopics = [...topics].sort((a, b) => a.name.localeCompare(b.name));
  const hasTopics = sortedTopics?.length;
  const isAdmin = Permissions.isCommunityAdmin() || Permissions.isSiteAdmin();
  const topicsForSelector = hasTopics ? sortedTopics : [];

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

  const hasTopicOngoingContest = threadTopic?.activeContestManagers?.length > 0;

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

  const contestTopicError = threadTopic?.activeContestManagers?.length
    ? threadTopic?.activeContestManagers
        ?.map(
          (acm) =>
            acm?.content?.filter(
              (c) => c.actor_address === user.activeAccount?.address,
            ).length || 0,
        )
        ?.every((n) => n >= 2)
    : false;

  const { handleJoinCommunity, JoinCommunityModals } = useJoinCommunity();
  const { isBannerVisible, handleCloseBanner } = useJoinCommunityBanner();

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

  const { mutateAsync: createThread } = useCreateThreadMutation({
    communityId,
  });

  const chainRpc = app?.chain?.meta?.ChainNode?.url || '';
  const ethChainId = app?.chain?.meta?.ChainNode?.eth_chain_id || 0;

  const { data: userEthBalance } = useGetUserEthBalanceQuery({
    chainRpc,
    walletAddress: user.activeAccount?.address || '',
    apiEnabled:
      isContestAvailable &&
      !!user.activeAccount?.address &&
      Number(ethChainId) > 0,
    ethChainId: ethChainId || 0,
  });

  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 input = await buildCreateThreadInput({
        address: user.activeAccount?.address || '',
        kind: threadKind,
        stage: app.chain.meta?.custom_stages
          ? parseCustomStages(app.chain.meta?.custom_stages)[0]
          : ThreadStage.Discussion,
        communityId,
        title: threadTitle,
        topic: threadTopic,
        body: serializeDelta(threadContentDelta),
        url: threadUrl,
      });
      const thread = await createThread(input);

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

      navigate(`/discussion/${thread.id}`);
    } catch (err) {
      if (err instanceof SessionKeyError) {
        checkForSessionKeyRevalidationErrors(err);
        return;
      }

      if (err?.message?.includes('limit')) {
        notifyError(
          'Limit of submitted threads in selected contest has been exceeded.',
        );
        return;
      }

      console.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 = !user.activeAccount && isBannerVisible;
  const disabledActionsTooltipText = getThreadActionTooltipText({
    isCommunityMember: !!user.activeAccount,
    isThreadTopicGated: isRestrictedMembership,
  });

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

  const contestTopicAffordanceVisible =
    contestsEnabled && isContestAvailable && hasTopicOngoingContest;

  const walletBalanceError =
    isContestAvailable &&
    hasTopicOngoingContest &&
    parseFloat(userEthBalance || '0') < MIN_ETH_FOR_CONTEST_THREAD;

  useEffect(() => {
    refreshTopics().catch(console.error);
  }, [refreshTopics]);

  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
                  className="topic-select"
                  components={{
                    // eslint-disable-next-line react/no-multi-comp
                    Option: (originalProps) =>
                      CustomTopicOption({
                        originalProps,
                        topic: topicsForSelector.find(
                          (t) => String(t.id) === originalProps.data.value,
                        ),
                      }),
                  }}
                  formatOptionLabel={(option) => (
                    <>
                      {contestTopicAffordanceVisible && (
                        <CWIcon
                          className="trophy-icon"
                          iconName="trophy"
                          iconSize="small"
                        />
                      )}
                      {option.label}
                    </>
                  )}
                  options={sortedTopics.map((topic) => ({
                    label: topic?.name,
                    value: `${topic?.id}`,
                  }))}
                  {...(!!location.search &&
                    threadTopic?.name &&
                    threadTopic?.id && {
                      defaultValue: {
                        label: threadTopic?.name,
                        value: `${threadTopic?.id}`,
                      },
                    })}
                  placeholder="Select topic"
                  customError={
                    contestTopicError
                      ? 'Can no longer post in this topic while contest is active.'
                      : ''
                  }
                  onChange={(topic) => {
                    setCanShowGatingBanner(true);
                    setThreadTopic(
                      // @ts-expect-error <StrictNullChecks/>
                      topicsForSelector.find((t) => `${t.id}` === topic.value),
                    );
                  }}
                />
              )}

              {contestTopicAffordanceVisible && (
                <ContestTopicBanner
                  contests={threadTopic?.activeContestManagers.map((acm) => {
                    return {
                      name: acm?.contest_manager?.name,
                      address: acm?.contest_manager?.contest_address,
                      submittedEntries:
                        acm?.content?.filter(
                          (c) =>
                            c.actor_address === user.activeAccount?.address,
                        ).length || 0,
                    };
                  })}
                />
              )}

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

              <ReactQuillEditor
                contentDelta={threadContentDelta}
                setContentDelta={setThreadContentDelta}
                isDisabled={isRestrictedMembership || !user.activeAccount}
                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}
                />
              )}

              <MessageRow
                hasFeedback={walletBalanceError}
                statusMessage={`Ensure that your connected wallet has at least
                ${MIN_ETH_FOR_CONTEST_THREAD} ETH to participate.`}
                validationStatus="failure"
              />

              <div className="buttons-row">
                {isPopulated && user.activeAccount && (
                  <CWButton
                    buttonType="tertiary"
                    onClick={handleCancel}
                    tabIndex={3}
                    label="Cancel"
                    containerClassName="no-pad"
                  />
                )}
                <CWButton
                  label="Create thread"
                  disabled={
                    isDisabled ||
                    !user.activeAccount ||
                    isDisabledBecauseOfContestsConsent ||
                    walletBalanceError ||
                    contestTopicError
                  }
                  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}
    </>
  );
};

1	import { buildCreateThreadInput } from 'client/scripts/state/api/threads/createThread';
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 { parseCustomStages } from 'helpers';
6	import { detectURL, getThreadActionTooltipText } from 'helpers/threads';
7	import { useFlag } from 'hooks/useFlag';
8	import useJoinCommunityBanner from 'hooks/useJoinCommunityBanner';
9	import { useCommonNavigate } from 'navigation/helpers';
10	import React, { useEffect, useMemo, useState } from 'react';
11	import { useLocation } from 'react-router-dom';
12	import app from 'state';
13	import { useGetUserEthBalanceQuery } from 'state/api/communityStake';
14	import {
15	useFetchGroupsQuery,
16	useRefreshMembershipQuery,
17	} from 'state/api/groups';
18	import { useCreateThreadMutation } from 'state/api/threads';
19	import { useFetchTopicsQuery } from 'state/api/topics';
20	import useUserStore from 'state/ui/user';
21	import JoinCommunityBanner from 'views/components/JoinCommunityBanner';
22	import CustomTopicOption from 'views/components/NewThreadForm/CustomTopicOption';
23	import useJoinCommunity from 'views/components/SublayoutHeader/useJoinCommunity';
24	import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
25	import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
26	import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
27	import { CWTextInput } from 'views/components/component_kit/new_designs/CWTextInput';
28	import { MessageRow } from 'views/components/component_kit/new_designs/CWTextInput/MessageRow';
29	import useCommunityContests from 'views/pages/CommunityManagement/Contests/useCommunityContests';
30	import useAppStatus from '../../../hooks/useAppStatus';
31	import { ThreadKind, ThreadStage } from '../../../models/types';
32	import Permissions from '../../../utils/Permissions';
33	import { CWText } from '../../components/component_kit/cw_text';
34	import { CWGatedTopicBanner } from '../component_kit/CWGatedTopicBanner';
35	import { CWSelectList } from '../component_kit/new_designs/CWSelectList';
36	import { ReactQuillEditor } from '../react_quill_editor';
37	import {
38	createDeltaFromText,
39	getTextFromDelta,
40	serializeDelta,
41	} from '../react_quill_editor/utils';
42	import ContestThreadBanner from './ContestThreadBanner';
43	import ContestTopicBanner from './ContestTopicBanner';
44	import './NewThreadForm.scss';
45	import { checkNewThreadErrors, useNewThreadForm } from './helpers';
46
47	const MIN_ETH_FOR_CONTEST_THREAD = 0.0005;	×
48
49	export const NewThreadForm = () => {	×
50	const navigate = useCommonNavigate();	×
51	const location = useLocation();	×
52	const contestsEnabled = useFlag('contest');	×
53
54	const [submitEntryChecked, setSubmitEntryChecked] = useState(false);	×
55
56	useAppStatus();	×
57
58	const communityId = app.activeChainId() \|\| '';	×
59	const { data: topics = [], refetch: refreshTopics } = useFetchTopicsQuery({	×
60	communityId,
61	includeContestData: contestsEnabled,
62	apiEnabled: !!communityId,
63	});
64
65	const { isContestAvailable } = useCommunityContests();	×
66
67	const sortedTopics = [...topics].sort((a, b) => a.name.localeCompare(b.name));	×
68	const hasTopics = sortedTopics?.length;	×
69	const isAdmin = Permissions.isCommunityAdmin() \|\| Permissions.isSiteAdmin();	×
70	const topicsForSelector = hasTopics ? sortedTopics : [];	×
71
72	const {
73	threadTitle,
74	setThreadTitle,
75	threadKind,
76	threadTopic,
77	setThreadTopic,
78	threadUrl,
79	setThreadUrl,
80	threadContentDelta,
81	setThreadContentDelta,
82	setIsSaving,
83	isDisabled,
84	clearDraft,
85	canShowGatingBanner,
86	setCanShowGatingBanner,
87	} = useNewThreadForm(communityId, topicsForSelector);	×
88
89	const hasTopicOngoingContest = threadTopic?.activeContestManagers?.length > 0;	×
90
91	const user = useUserStore();	×
NEW 92	const { checkForSessionKeyRevalidationErrors } = useAuthModalStore();	×
93
94	const contestTopicError = threadTopic?.activeContestManagers?.length	×
95	? threadTopic?.activeContestManagers
96	?.map(
97	(acm) =>
98	acm?.content?.filter(	×
99	(c) => c.actor_address === user.activeAccount?.address,	×
100	).length \|\| 0,
101	)
102	?.every((n) => n >= 2)	×
103	: false;
104
105	const { handleJoinCommunity, JoinCommunityModals } = useJoinCommunity();	×
106	const { isBannerVisible, handleCloseBanner } = useJoinCommunityBanner();	×
107
108	const { data: groups = [] } = useFetchGroupsQuery({	×
109	communityId,
110	includeTopics: true,
111	enabled: !!communityId,
112	});
113	const { data: memberships = [] } = useRefreshMembershipQuery({	×
114	communityId,
115	address: user.activeAccount?.address \|\| '',	×
116	apiEnabled: !!user.activeAccount?.address && !!communityId,	×
117	});
118
119	const { mutateAsync: createThread } = useCreateThreadMutation({	×
120	communityId,
121	});
122
123	const chainRpc = app?.chain?.meta?.ChainNode?.url \|\| '';	×
124	const ethChainId = app?.chain?.meta?.ChainNode?.eth_chain_id \|\| 0;	×
125
126	const { data: userEthBalance } = useGetUserEthBalanceQuery({	×
127	chainRpc,
128	walletAddress: user.activeAccount?.address \|\| '',	×
129	apiEnabled:
130	isContestAvailable &&	×
131	!!user.activeAccount?.address &&
132	Number(ethChainId) > 0,
133	ethChainId: ethChainId \|\| 0,	×
134	});
135
136	const isDiscussion = threadKind === ThreadKind.Discussion;	×
137
138	const isPopulated = useMemo(() => {	×
139	return threadTitle \|\| getTextFromDelta(threadContentDelta).length > 0;	×
140	}, [threadContentDelta, threadTitle]);
141
142	const isTopicGated = !!(memberships \|\| []).find((membership) =>	×
143	membership.topicIds.includes(threadTopic?.id),	×
144	);
145	const isActionAllowedInGatedTopic = !!(memberships \|\| []).find(	×
146	(membership) =>
147	membership.topicIds.includes(threadTopic?.id) && membership.isAllowed,	×
148	);
149	const gatedGroupNames = groups	×
150	.filter((group) =>
151	group.topics.find((topic) => topic.id === threadTopic?.id),	×
152	)
153	.map((group) => group.name);	×
154	const isRestrictedMembership =
155	!isAdmin && isTopicGated && !isActionAllowedInGatedTopic;	×
156
157	const handleNewThreadCreation = async () => {	×
158	if (isRestrictedMembership) {	×
159	notifyError('Topic is gated!');	×
160	return;	×
161	}
162
163	if (!isDiscussion && !detectURL(threadUrl)) {	×
164	notifyError('Must provide a valid URL.');	×
165	return;	×
166	}
167
168	const deltaString = JSON.stringify(threadContentDelta);	×
169
170	checkNewThreadErrors(	×
171	{ threadKind, threadUrl, threadTitle, threadTopic },
172	deltaString,
173	!!hasTopics,
174	);
175
176	setIsSaving(true);	×
177
178	try {	×
179	const input = await buildCreateThreadInput({	×
180	address: user.activeAccount?.address \|\| '',	×
181	kind: threadKind,
182	stage: app.chain.meta?.custom_stages	×
183	? parseCustomStages(app.chain.meta?.custom_stages)[0]
184	: ThreadStage.Discussion,
185	communityId,
186	title: threadTitle,
187	topic: threadTopic,
188	body: serializeDelta(threadContentDelta),
189	url: threadUrl,
190	});
191	const thread = await createThread(input);	×
192
193	setThreadContentDelta(createDeltaFromText(''));	×
194	clearDraft();	×
195
196	navigate(`/discussion/${thread.id}`);	×
197	} catch (err) {
198	if (err instanceof SessionKeyError) {	×
NEW 199	checkForSessionKeyRevalidationErrors(err);	×
UNCOV 200	return;	×
201	}
202
203	if (err?.message?.includes('limit')) {	×
204	notifyError(	×
205	'Limit of submitted threads in selected contest has been exceeded.',
206	);
207	return;	×
208	}
209
210	console.error(err?.message);	×
211	notifyError('Failed to create thread');	×
212	} finally {
213	setIsSaving(false);	×
214	}
215	};
216
217	const handleCancel = () => {	×
218	setThreadTitle('');	×
219	setThreadTopic(	×
220	// @ts-expect-error <StrictNullChecks/>
221	topicsForSelector?.find((t) => t?.name?.includes('General')) \|\| null,	×
222	);
223	setThreadContentDelta(createDeltaFromText(''));	×
224	};
225
226	const showBanner = !user.activeAccount && isBannerVisible;	×
227	const disabledActionsTooltipText = getThreadActionTooltipText({	×
228	isCommunityMember: !!user.activeAccount,
229	isThreadTopicGated: isRestrictedMembership,
230	});
231
232	const contestThreadBannerVisible =
233	contestsEnabled && isContestAvailable && hasTopicOngoingContest;	×
234	const isDisabledBecauseOfContestsConsent =
235	contestThreadBannerVisible && !submitEntryChecked;	×
236
237	const contestTopicAffordanceVisible =
238	contestsEnabled && isContestAvailable && hasTopicOngoingContest;	×
239
240	const walletBalanceError =
241	isContestAvailable &&	×
242	hasTopicOngoingContest &&
243	parseFloat(userEthBalance \|\| '0') < MIN_ETH_FOR_CONTEST_THREAD;	×
244
245	useEffect(() => {	×
246	refreshTopics().catch(console.error);	×
247	}, [refreshTopics]);
248
249	return (	×
250	<>
251	<CWPageLayout>
252	<div className="NewThreadForm">
253	<CWText type="h2" fontWeight="medium" className="header">
254	Create thread
255	</CWText>
256	<div className="new-thread-body">
257	<div className="new-thread-form-inputs">
258	<CWTextInput
259	fullWidth
260	autoFocus
261	placeholder="Title"
262	value={threadTitle}
263	tabIndex={1}
264	onInput={(e) => setThreadTitle(e.target.value)}	×
265	/>
266
267	{!!hasTopics && (	×
268	<CWSelectList
269	className="topic-select"
270	components={{
271	// eslint-disable-next-line react/no-multi-comp
272	Option: (originalProps) =>
273	CustomTopicOption({	×
274	originalProps,
275	topic: topicsForSelector.find(
276	(t) => String(t.id) === originalProps.data.value,	×
277	),
278	}),
279	}}
280	formatOptionLabel={(option) => (
281	<>	×
282	{contestTopicAffordanceVisible && (	×
283	<CWIcon
284	className="trophy-icon"
285	iconName="trophy"
286	iconSize="small"
287	/>
288	)}
289	{option.label}
290	</>
291	)}
292	options={sortedTopics.map((topic) => ({	×
293	label: topic?.name,
294	value: `${topic?.id}`,
295	}))}
296	{...(!!location.search &&	×
297	threadTopic?.name &&
298	threadTopic?.id && {
299	defaultValue: {
300	label: threadTopic?.name,
301	value: `${threadTopic?.id}`,
302	},
303	})}
304	placeholder="Select topic"
305	customError={
306	contestTopicError	×
307	? 'Can no longer post in this topic while contest is active.'
308	: ''
309	}
310	onChange={(topic) => {
311	setCanShowGatingBanner(true);	×
312	setThreadTopic(	×
313	// @ts-expect-error <StrictNullChecks/>
314	topicsForSelector.find((t) => `${t.id}` === topic.value),	×
315	);
316	}}
317	/>
318	)}
319
320	{contestTopicAffordanceVisible && (	×
321	<ContestTopicBanner
322	contests={threadTopic?.activeContestManagers.map((acm) => {
323	return {	×
324	name: acm?.contest_manager?.name,
325	address: acm?.contest_manager?.contest_address,
326	submittedEntries:
327	acm?.content?.filter(	×
328	(c) =>
329	c.actor_address === user.activeAccount?.address,	×
330	).length \|\| 0,
331	};
332	})}
333	/>
334	)}
335
336	{!isDiscussion && (	×
337	<CWTextInput
338	placeholder="https://"
339	value={threadUrl}
340	tabIndex={2}
341	onInput={(e) => setThreadUrl(e.target.value)}	×
342	/>
343	)}
344
345	<ReactQuillEditor
346	contentDelta={threadContentDelta}
347	setContentDelta={setThreadContentDelta}
348	isDisabled={isRestrictedMembership \|\| !user.activeAccount}	×
349	tooltipLabel={
350	typeof disabledActionsTooltipText === 'function'	×
351	? disabledActionsTooltipText?.('submit')
352	: disabledActionsTooltipText
353	}
354	placeholder="Enter text or drag images and media here. Use the tab button to see your formatted post."
355	/>
356
357	{contestThreadBannerVisible && (	×
358	<ContestThreadBanner
359	submitEntryChecked={submitEntryChecked}
360	onSetSubmitEntryChecked={setSubmitEntryChecked}
361	/>
362	)}
363
364	<MessageRow
365	hasFeedback={walletBalanceError}
366	statusMessage={`Ensure that your connected wallet has at least
367	${MIN_ETH_FOR_CONTEST_THREAD} ETH to participate.`}
368	validationStatus="failure"
369	/>
370
371	<div className="buttons-row">
372	{isPopulated && user.activeAccount && (	×
373	<CWButton
374	buttonType="tertiary"
375	onClick={handleCancel}
376	tabIndex={3}
377	label="Cancel"
378	containerClassName="no-pad"
379	/>
380	)}
381	<CWButton
382	label="Create thread"
383	disabled={
384	isDisabled \|\|	×
385	!user.activeAccount \|\|
386	isDisabledBecauseOfContestsConsent \|\|
387	walletBalanceError \|\|
388	contestTopicError
389	}
390	onClick={handleNewThreadCreation}
391	tabIndex={4}
392	containerClassName="no-pad"
393	/>
394	</div>
395
396	{showBanner && (	×
397	<JoinCommunityBanner
398	onClose={handleCloseBanner}
399	onJoin={handleJoinCommunity}
400	/>
401	)}
402
403	{isRestrictedMembership && canShowGatingBanner && (	×
404	<div>
405	<CWGatedTopicBanner
406	groupNames={gatedGroupNames}
407	onClose={() => setCanShowGatingBanner(false)}	×
408	/>
409	</div>
410	)}
411	</div>
412	</div>
413	</div>
414	</CWPageLayout>
415	{JoinCommunityModals}
416	</>
417	);
418	};

hicommonwealth / commonwealth / 10858029208

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