10905615875

Committed 17 Sep 2024 02:54PM UTC coverage: 13.673% (-0.01%) from 13.685%

Build # 10905615875

Build Type

Pull #9252

github

Committed by

web-flow

Commit Message

Merge 35910404d into 4a1bad3d0

Pull Request Pull Request #9252: Marcin/9224/topic flow integration

Run Details

3030 of 20606 branches covered (14.7%)

Branch coverage included in aggregate %.

0 of 57 new or added lines in 10 files covered. (0.0%)

6 existing lines in 5 files now uncovered.

3962 of 30532 relevant lines covered (12.98%)

3.93 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/DiscussionsPage.tsx

import { TopicWeightedVoting } from '@hicommonwealth/schemas';
import { getProposalUrlPath } from 'identifiers';
import { getScopePrefix, useCommonNavigate } from 'navigation/helpers';
import React, { useEffect, useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Virtuoso } from 'react-virtuoso';
import useFetchThreadsQuery, {
  useDateCursor,
} from 'state/api/threads/fetchThreads';
import {
  ThreadFeaturedFilterTypes,
  ThreadTimelineFilterTypes,
} from '../../../models/types';
import app from '../../../state';
import { useFetchTopicsQuery } from '../../../state/api/topics';
import { Breadcrumbs } from '../../components/Breadcrumbs';
import { HeaderWithFilters } from './HeaderWithFilters';
import { ThreadCard } from './ThreadCard';
import { sortByFeaturedFilter, sortPinned } from './helpers';

import { slugify, splitAndDecodeURL } from '@hicommonwealth/shared';
import { formatAddressShort } from 'helpers';
import { getThreadActionTooltipText } from 'helpers/threads';
import useBrowserWindow from 'hooks/useBrowserWindow';
import { useFlag } from 'hooks/useFlag';
import useManageDocumentTitle from 'hooks/useManageDocumentTitle';
import 'pages/discussions/index.scss';
import { useGetCommunityByIdQuery } from 'state/api/communities';
import { useFetchCustomDomainQuery } from 'state/api/configuration';
import { useRefreshMembershipQuery } from 'state/api/groups';
import useUserStore from 'state/ui/user';
import Permissions from 'utils/Permissions';
import { checkIsTopicInContest } from 'views/components/NewThreadForm/helpers';
import TokenBanner from 'views/components/TokenBanner';
import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
import useCommunityContests from 'views/pages/CommunityManagement/Contests/useCommunityContests';
import { isContestActive } from 'views/pages/CommunityManagement/Contests/utils';
import useTokenMetadataQuery from '../../../state/api/tokens/getTokenMetadata';
import { AdminOnboardingSlider } from '../../components/AdminOnboardingSlider';
import { UserTrainingSlider } from '../../components/UserTrainingSlider';
import { DiscussionsFeedDiscovery } from './DiscussionsFeedDiscovery';
import { EmptyThreadsPlaceholder } from './EmptyThreadsPlaceholder';

type DiscussionsPageProps = {
  topicName?: string;
};

const DiscussionsPage = ({ topicName }: DiscussionsPageProps) => {
  const communityId = app.activeChainId() || '';
  const navigate = useCommonNavigate();
  const [includeSpamThreads, setIncludeSpamThreads] = useState<boolean>(false);
  const [includeArchivedThreads, setIncludeArchivedThreads] =
    useState<boolean>(false);
  const [searchParams] = useSearchParams();
  // @ts-expect-error <StrictNullChecks/>
  const stageName: string = searchParams.get('stage');

  const weightedVotingEnabled = useFlag('farcasterContest');

  const featuredFilter: ThreadFeaturedFilterTypes = searchParams.get(
    'featured',
  ) as ThreadFeaturedFilterTypes;

  const dateRange: ThreadTimelineFilterTypes = searchParams.get(
    'dateRange',
  ) as ThreadTimelineFilterTypes;

  const { data: community } = useGetCommunityByIdQuery({
    id: communityId,
    enabled: !!communityId,
    includeNodeInfo: true,
  });

  const { data: topics, isLoading: isLoadingTopics } = useFetchTopicsQuery({
    communityId,
    apiEnabled: !!communityId,
  });
  const contestAddress = searchParams.get('contest');
  const contestStatus = searchParams.get('status');

  const containerRef = useRef();

  useBrowserWindow({});

  const isAdmin = Permissions.isSiteAdmin() || Permissions.isCommunityAdmin();

  const topicObj = topics?.find(({ name }) => name === topicName);
  const topicId = topicObj?.id;

  const user = useUserStore();

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

  const { data: domain } = useFetchCustomDomainQuery();

  const { contestsData } = useCommunityContests();

  const { dateCursor } = useDateCursor({
    dateRange: searchParams.get('dateRange') as ThreadTimelineFilterTypes,
  });

  const isOnArchivePage =
    location.pathname ===
    (domain?.isCustomDomain ? `/archived` : `/${app.activeChainId()}/archived`);

  const { data: tokenMetadata } = useTokenMetadataQuery({
    tokenId: topicObj?.tokenAddress || '',
  });

  const { fetchNextPage, data, isInitialLoading, hasNextPage } =
    useFetchThreadsQuery({
      communityId: communityId,
      queryType: 'bulk',
      page: 1,
      limit: 20,
      topicId,
      stage: stageName ?? undefined,
      includePinnedThreads: true,
      ...(featuredFilter && {
        orderBy: featuredFilter,
      }),
      toDate: dateCursor.toDate,
      // @ts-expect-error <StrictNullChecks/>
      fromDate: dateCursor.fromDate,
      includeArchivedThreads: isOnArchivePage || includeArchivedThreads,
      // @ts-expect-error <StrictNullChecks/>
      contestAddress,
      // @ts-expect-error <StrictNullChecks/>
      contestStatus,
      apiEnabled: !!communityId,
    });

  const threads = sortPinned(sortByFeaturedFilter(data || [], featuredFilter));

  // Checks if the current page is a discussion page and if the window is small enough to render the mobile menu
  // Checks both for mobile device and inner window size for desktop responsiveness
  const filteredThreads = threads.filter((t) => {
    if (!includeSpamThreads && t.markedAsSpamAt) return null;

    if (!isOnArchivePage && !includeArchivedThreads && t.archivedAt)
      return null;

    if (isOnArchivePage && !t.archivedAt) return null;

    return t;
  });

  //splitAndDecodeURL checks if a url is custom or not and decodes the url after splitting it
  const topicNameFromURL = splitAndDecodeURL(location.pathname);

  //checks for malformed url in topics and redirects if the topic does not exist
  useEffect(() => {
    if (
      !isLoadingTopics &&
      topicNameFromURL &&
      topicNameFromURL !== 'archived'
    ) {
      const validTopics = topics?.some(
        (topic) => topic?.name === topicNameFromURL,
      );
      if (!validTopics) {
        navigate('/discussions');
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [topics, topicNameFromURL, isLoadingTopics]);

  useManageDocumentTitle('Discussions');

  const isTopicWeighted =
    weightedVotingEnabled &&
    topicId &&
    topicObj.weightedVoting === TopicWeightedVoting.ERC20;

  const activeContestsInTopic = contestsData?.filter((contest) => {
    const isContestInTopic = (contest.topics || []).find(
      (topic) => topic.id === topicId,
    );
    const isActive = isContestActive({ contest });
    return isContestInTopic && isActive;
  });

  return (
    // @ts-expect-error <StrictNullChecks/>
    <CWPageLayout ref={containerRef} className="DiscussionsPageLayout">
      <DiscussionsFeedDiscovery
        orderBy={featuredFilter}
        community={communityId}
        includePinnedThreads={true}
      />
      <Virtuoso
        className="thread-list"
        style={{ height: '100%', width: '100%' }}
        data={isInitialLoading ? [] : filteredThreads}
        customScrollParent={containerRef.current}
        itemContent={(i, thread) => {
          const discussionLink = getProposalUrlPath(
            thread.slug,
            `${thread.identifier}-${slugify(thread.title)}`,
          );

          const isTopicGated = !!(memberships || []).find(
            (membership) =>
              thread?.topic?.id &&
              membership.topicIds.includes(thread.topic.id),
          );

          const isActionAllowedInGatedTopic = !!(memberships || []).find(
            (membership) =>
              thread?.topic?.id &&
              membership.topicIds.includes(thread.topic.id) &&
              membership.isAllowed,
          );

          const isRestrictedMembership =
            !isAdmin && isTopicGated && !isActionAllowedInGatedTopic;

          const disabledActionsTooltipText = getThreadActionTooltipText({
            isCommunityMember: !!user.activeAccount,
            isThreadArchived: !!thread?.archivedAt,
            isThreadLocked: !!thread?.lockedAt,
            isThreadTopicGated: isRestrictedMembership,
          });

          const isThreadTopicInContest = checkIsTopicInContest(
            contestsData,
            thread?.topic?.id,
          );

          return (
            <ThreadCard
              key={thread?.id + '-' + thread.readOnly}
              thread={thread}
              canReact={!disabledActionsTooltipText}
              canComment={!disabledActionsTooltipText}
              onEditStart={() => navigate(`${discussionLink}`)}
              onStageTagClick={() => {
                navigate(`/discussions?stage=${thread.stage}`);
              }}
              threadHref={`${getScopePrefix()}${discussionLink}`}
              onBodyClick={() => {
                const scrollEle = document.getElementsByClassName('Body')[0];

                localStorage[`${communityId}-discussions-scrollY`] =
                  scrollEle.scrollTop;
              }}
              onCommentBtnClick={() =>
                navigate(`${discussionLink}?focusComments=true`)
              }
              disabledActionsTooltipText={disabledActionsTooltipText}
              hideRecentComments
              editingDisabled={isThreadTopicInContest}
            />
          );
        }}
        endReached={() => {
          hasNextPage && fetchNextPage();
        }}
        overscan={50}
        components={{
          // eslint-disable-next-line react/no-multi-comp
          EmptyPlaceholder: () => (
            <EmptyThreadsPlaceholder
              isInitialLoading={isInitialLoading}
              isOnArchivePage={isOnArchivePage}
            />
          ),
          // eslint-disable-next-line react/no-multi-comp
          Header: () => (
            <>
              <Breadcrumbs />
              <UserTrainingSlider />
              <AdminOnboardingSlider />
              {isTopicWeighted && (
                <TokenBanner
                  name={tokenMetadata?.name}
                  ticker={topicObj?.tokenSymbol}
                  avatarUrl={tokenMetadata?.logo}
                  popover={{
                    title: tokenMetadata?.name,
                    body: formatAddressShort(topicObj.tokenAddress!, 6, 6),
                  }}
                />
              )}

              <HeaderWithFilters
                // @ts-expect-error <StrictNullChecks/>
                topic={topicName}
                stage={stageName}
                featuredFilter={featuredFilter}
                dateRange={dateRange}
                totalThreadCount={
                  isOnArchivePage
                    ? filteredThreads.length || 0
                    : threads
                      ? community?.lifetime_thread_count || 0
                      : 0
                }
                isIncludingSpamThreads={includeSpamThreads}
                onIncludeSpamThreads={setIncludeSpamThreads}
                isIncludingArchivedThreads={includeArchivedThreads}
                onIncludeArchivedThreads={setIncludeArchivedThreads}
                isOnArchivePage={isOnArchivePage}
                activeContests={activeContestsInTopic}
              />
            </>
          ),
        }}
      />
    </CWPageLayout>
  );
};

export default DiscussionsPage;

1	import { TopicWeightedVoting } from '@hicommonwealth/schemas';
2	import { getProposalUrlPath } from 'identifiers';
3	import { getScopePrefix, useCommonNavigate } from 'navigation/helpers';
4	import React, { useEffect, useRef, useState } from 'react';
5	import { useSearchParams } from 'react-router-dom';
6	import { Virtuoso } from 'react-virtuoso';
7	import useFetchThreadsQuery, {
8	useDateCursor,
9	} from 'state/api/threads/fetchThreads';
10	import {
11	ThreadFeaturedFilterTypes,
12	ThreadTimelineFilterTypes,
13	} from '../../../models/types';
14	import app from '../../../state';
15	import { useFetchTopicsQuery } from '../../../state/api/topics';
16	import { Breadcrumbs } from '../../components/Breadcrumbs';
17	import { HeaderWithFilters } from './HeaderWithFilters';
18	import { ThreadCard } from './ThreadCard';
19	import { sortByFeaturedFilter, sortPinned } from './helpers';
20
21	import { slugify, splitAndDecodeURL } from '@hicommonwealth/shared';
22	import { formatAddressShort } from 'helpers';
23	import { getThreadActionTooltipText } from 'helpers/threads';
24	import useBrowserWindow from 'hooks/useBrowserWindow';
25	import { useFlag } from 'hooks/useFlag';
26	import useManageDocumentTitle from 'hooks/useManageDocumentTitle';
27	import 'pages/discussions/index.scss';
28	import { useGetCommunityByIdQuery } from 'state/api/communities';
29	import { useFetchCustomDomainQuery } from 'state/api/configuration';
30	import { useRefreshMembershipQuery } from 'state/api/groups';
31	import useUserStore from 'state/ui/user';
32	import Permissions from 'utils/Permissions';
33	import { checkIsTopicInContest } from 'views/components/NewThreadForm/helpers';
34	import TokenBanner from 'views/components/TokenBanner';
35	import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
36	import useCommunityContests from 'views/pages/CommunityManagement/Contests/useCommunityContests';
37	import { isContestActive } from 'views/pages/CommunityManagement/Contests/utils';
38	import useTokenMetadataQuery from '../../../state/api/tokens/getTokenMetadata';
39	import { AdminOnboardingSlider } from '../../components/AdminOnboardingSlider';
40	import { UserTrainingSlider } from '../../components/UserTrainingSlider';
41	import { DiscussionsFeedDiscovery } from './DiscussionsFeedDiscovery';
42	import { EmptyThreadsPlaceholder } from './EmptyThreadsPlaceholder';
43
44	type DiscussionsPageProps = {
45	topicName?: string;
46	};
47
48	const DiscussionsPage = ({ topicName }: DiscussionsPageProps) => {	×
49	const communityId = app.activeChainId() \|\| '';	×
50	const navigate = useCommonNavigate();	×
51	const [includeSpamThreads, setIncludeSpamThreads] = useState<boolean>(false);	×
52	const [includeArchivedThreads, setIncludeArchivedThreads] =
53	useState<boolean>(false);	×
54	const [searchParams] = useSearchParams();	×
55	// @ts-expect-error <StrictNullChecks/>
56	const stageName: string = searchParams.get('stage');	×
57
58	const weightedVotingEnabled = useFlag('farcasterContest');	×
59
60	const featuredFilter: ThreadFeaturedFilterTypes = searchParams.get(	×
61	'featured',
62	) as ThreadFeaturedFilterTypes;
63
64	const dateRange: ThreadTimelineFilterTypes = searchParams.get(	×
65	'dateRange',
66	) as ThreadTimelineFilterTypes;
67
68	const { data: community } = useGetCommunityByIdQuery({	×
69	id: communityId,
70	enabled: !!communityId,
71	includeNodeInfo: true,
72	});
73
74	const { data: topics, isLoading: isLoadingTopics } = useFetchTopicsQuery({	×
75	communityId,
76	apiEnabled: !!communityId,
77	});
78	const contestAddress = searchParams.get('contest');	×
79	const contestStatus = searchParams.get('status');	×
80
81	const containerRef = useRef();	×
82
83	useBrowserWindow({});	×
84
85	const isAdmin = Permissions.isSiteAdmin() \|\| Permissions.isCommunityAdmin();	×
86
NEW 87	const topicObj = topics?.find(({ name }) => name === topicName);	×
NEW 88	const topicId = topicObj?.id;	×
89
90	const user = useUserStore();	×
91
92	const { data: memberships = [] } = useRefreshMembershipQuery({	×
93	communityId: communityId,
94	address: user.activeAccount?.address \|\| '',	×
95	apiEnabled: !!user.activeAccount?.address && !!communityId,	×
96	});
97
98	const { data: domain } = useFetchCustomDomainQuery();	×
99
100	const { contestsData } = useCommunityContests();	×
101
102	const { dateCursor } = useDateCursor({	×
103	dateRange: searchParams.get('dateRange') as ThreadTimelineFilterTypes,
104	});
105
106	const isOnArchivePage =
107	location.pathname ===	×
108	(domain?.isCustomDomain ? `/archived` : `/${app.activeChainId()}/archived`);	×
109
NEW 110	const { data: tokenMetadata } = useTokenMetadataQuery({	×
111	tokenId: topicObj?.tokenAddress \|\| '',	×
112	});
113
114	const { fetchNextPage, data, isInitialLoading, hasNextPage } =
115	useFetchThreadsQuery({	×
116	communityId: communityId,
117	queryType: 'bulk',
118	page: 1,
119	limit: 20,
120	topicId,
121	stage: stageName ?? undefined,	×
122	includePinnedThreads: true,
123	...(featuredFilter && {	×
124	orderBy: featuredFilter,
125	}),
126	toDate: dateCursor.toDate,
127	// @ts-expect-error <StrictNullChecks/>
128	fromDate: dateCursor.fromDate,
129	includeArchivedThreads: isOnArchivePage \|\| includeArchivedThreads,	×
130	// @ts-expect-error <StrictNullChecks/>
131	contestAddress,
132	// @ts-expect-error <StrictNullChecks/>
133	contestStatus,
134	apiEnabled: !!communityId,
135	});
136
137	const threads = sortPinned(sortByFeaturedFilter(data \|\| [], featuredFilter));	×
138
139	// Checks if the current page is a discussion page and if the window is small enough to render the mobile menu
140	// Checks both for mobile device and inner window size for desktop responsiveness
141	const filteredThreads = threads.filter((t) => {	×
142	if (!includeSpamThreads && t.markedAsSpamAt) return null;	×
143
144	if (!isOnArchivePage && !includeArchivedThreads && t.archivedAt)	×
145	return null;	×
146
147	if (isOnArchivePage && !t.archivedAt) return null;	×
148
149	return t;	×
150	});
151
152	//splitAndDecodeURL checks if a url is custom or not and decodes the url after splitting it
153	const topicNameFromURL = splitAndDecodeURL(location.pathname);	×
154
155	//checks for malformed url in topics and redirects if the topic does not exist
156	useEffect(() => {	×
157	if (	×
158	!isLoadingTopics &&	×
159	topicNameFromURL &&
160	topicNameFromURL !== 'archived'
161	) {
162	const validTopics = topics?.some(	×
163	(topic) => topic?.name === topicNameFromURL,	×
164	);
165	if (!validTopics) {	×
166	navigate('/discussions');	×
167	}
168	}
169	// eslint-disable-next-line react-hooks/exhaustive-deps
170	}, [topics, topicNameFromURL, isLoadingTopics]);
171
172	useManageDocumentTitle('Discussions');	×
173
174	const isTopicWeighted =
NEW 175	weightedVotingEnabled &&	×
176	topicId &&
177	topicObj.weightedVoting === TopicWeightedVoting.ERC20;
178
179	const activeContestsInTopic = contestsData?.filter((contest) => {	×
180	const isContestInTopic = (contest.topics \|\| []).find(	×
181	(topic) => topic.id === topicId,	×
182	);
183	const isActive = isContestActive({ contest });	×
184	return isContestInTopic && isActive;	×
185	});
186
187	return (	×
188	// @ts-expect-error <StrictNullChecks/>
189	<CWPageLayout ref={containerRef} className="DiscussionsPageLayout">
190	<DiscussionsFeedDiscovery
191	orderBy={featuredFilter}
192	community={communityId}
193	includePinnedThreads={true}
194	/>
195	<Virtuoso
196	className="thread-list"
197	style={{ height: '100%', width: '100%' }}
198	data={isInitialLoading ? [] : filteredThreads}	×
199	customScrollParent={containerRef.current}
200	itemContent={(i, thread) => {
201	const discussionLink = getProposalUrlPath(	×
202	thread.slug,
203	`${thread.identifier}-${slugify(thread.title)}`,
204	);
205
NEW 206	const isTopicGated = !!(memberships \|\| []).find(	×
207	(membership) =>
NEW 208	thread?.topic?.id &&	×
209	membership.topicIds.includes(thread.topic.id),
210	);
211
212	const isActionAllowedInGatedTopic = !!(memberships \|\| []).find(	×
213	(membership) =>
NEW 214	thread?.topic?.id &&	×
215	membership.topicIds.includes(thread.topic.id) &&
216	membership.isAllowed,
217	);
218
219	const isRestrictedMembership =
220	!isAdmin && isTopicGated && !isActionAllowedInGatedTopic;	×
221
222	const disabledActionsTooltipText = getThreadActionTooltipText({	×
223	isCommunityMember: !!user.activeAccount,
224	isThreadArchived: !!thread?.archivedAt,
225	isThreadLocked: !!thread?.lockedAt,
226	isThreadTopicGated: isRestrictedMembership,
227	});
228
229	const isThreadTopicInContest = checkIsTopicInContest(	×
230	contestsData,
231	thread?.topic?.id,
232	);
233
234	return (	×
235	<ThreadCard
236	key={thread?.id + '-' + thread.readOnly}
237	thread={thread}
238	canReact={!disabledActionsTooltipText}
239	canComment={!disabledActionsTooltipText}
240	onEditStart={() => navigate(`${discussionLink}`)}	×
241	onStageTagClick={() => {
242	navigate(`/discussions?stage=${thread.stage}`);	×
243	}}
244	threadHref={`${getScopePrefix()}${discussionLink}`}
245	onBodyClick={() => {
246	const scrollEle = document.getElementsByClassName('Body')[0];	×
247
248	localStorage[`${communityId}-discussions-scrollY`] =	×
249	scrollEle.scrollTop;
250	}}
251	onCommentBtnClick={() =>
252	navigate(`${discussionLink}?focusComments=true`)	×
253	}
254	disabledActionsTooltipText={disabledActionsTooltipText}
255	hideRecentComments
256	editingDisabled={isThreadTopicInContest}
257	/>
258	);
259	}}
260	endReached={() => {
261	hasNextPage && fetchNextPage();	×
262	}}
263	overscan={50}
264	components={{
265	// eslint-disable-next-line react/no-multi-comp
266	EmptyPlaceholder: () => (
267	<EmptyThreadsPlaceholder	×
268	isInitialLoading={isInitialLoading}
269	isOnArchivePage={isOnArchivePage}
270	/>
271	),
272	// eslint-disable-next-line react/no-multi-comp
273	Header: () => (
274	<>	×
275	<Breadcrumbs />
276	<UserTrainingSlider />
277	<AdminOnboardingSlider />
278	{isTopicWeighted && (	×
279	<TokenBanner
280	name={tokenMetadata?.name}
281	ticker={topicObj?.tokenSymbol}
282	avatarUrl={tokenMetadata?.logo}
283	popover={{
284	title: tokenMetadata?.name,
285	body: formatAddressShort(topicObj.tokenAddress!, 6, 6),
286	}}
287	/>
288	)}
289
290	<HeaderWithFilters
291	// @ts-expect-error <StrictNullChecks/>
292	topic={topicName}
293	stage={stageName}
294	featuredFilter={featuredFilter}
295	dateRange={dateRange}
296	totalThreadCount={
297	isOnArchivePage	×
298	? filteredThreads.length \|\| 0	×
299	: threads	×
300	? community?.lifetime_thread_count \|\| 0	×
301	: 0
302	}
303	isIncludingSpamThreads={includeSpamThreads}
304	onIncludeSpamThreads={setIncludeSpamThreads}
305	isIncludingArchivedThreads={includeArchivedThreads}
306	onIncludeArchivedThreads={setIncludeArchivedThreads}
307	isOnArchivePage={isOnArchivePage}
308	activeContests={activeContestsInTopic}
309	/>
310	</>
311	),
312	}}
313	/>
314	</CWPageLayout>
315	);
316	};
317
318	export default DiscussionsPage;

hicommonwealth / commonwealth / 10905615875

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