10254850132

Committed 05 Aug 2024 07:29PM UTC coverage: 15.727% (+0.009%) from 15.718%

Build # 10254850132

Build Type

Pull #8731

github

Committed by

web-flow

Commit Message

Merge 902c8e39f into 1b11f10e1

Pull Request Pull Request #8731: First Pass at removing community_id from comments and reactions

Run Details

3545 of 21055 branches covered (16.84%)

Branch coverage included in aggregate %.

11 of 21 new or added lines in 7 files covered. (52.38%)

149 existing lines in 9 files now uncovered.

4693 of 31327 relevant lines covered (14.98%)

4.98 hits per line

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

0.0

/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Members/CommunityMembersPage.tsx

import { DEFAULT_NAME } from '@hicommonwealth/shared';
import { APIOrderDirection } from 'helpers/constants';
import { useBrowserAnalyticsTrack } from 'hooks/useBrowserAnalyticsTrack';
import moment from 'moment';
import { useCommonNavigate } from 'navigation/helpers';
import React, { useEffect, useMemo, useState } from 'react';
import { useLocation } from 'react-router';
import {
  MixpanelPageViewEvent,
  MixpanelPageViewEventPayload,
} from 'shared/analytics/types';
import app from 'state';
import { ApiEndpoints, queryClient } from 'state/api/config';
import {
  useFetchGroupsQuery,
  useRefreshMembershipQuery,
} from 'state/api/groups';
import { SearchProfilesResponse } from 'state/api/profiles/searchProfiles';
import useGroupMutationBannerStore from 'state/ui/group';
import useUserStore from 'state/ui/user';
import { useDebounce } from 'usehooks-ts';
import Permissions from 'utils/Permissions';
import { trpc } from 'utils/trpcClient';
import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
import { CWText } from 'views/components/component_kit/cw_text';
import { getClasses } from 'views/components/component_kit/helpers';
import CWBanner from 'views/components/component_kit/new_designs/CWBanner';
import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
import { CWSelectList } from 'views/components/component_kit/new_designs/CWSelectList';
import { CWTableColumnInfo } from 'views/components/component_kit/new_designs/CWTable/CWTable';
import { useCWTableState } from 'views/components/component_kit/new_designs/CWTable/useCWTableState';
import {
  CWTab,
  CWTabsRow,
} from 'views/components/component_kit/new_designs/CWTabs';
import { CWTextInput } from 'views/components/component_kit/new_designs/CWTextInput';
import useAppStatus from '../../../../hooks/useAppStatus';
import './CommunityMembersPage.scss';
import GroupsSection from './GroupsSection';
import MembersSection from './MembersSection';
import { Member } from './MembersSection/MembersSection';
import {
  BaseGroupFilter,
  MemberResultsOrderBy,
  SearchFilters,
} from './index.types';

const TABS = [
  { value: 'all-members', label: 'All members' },
  { value: 'groups', label: 'Groups' },
];

const GROUP_AND_MEMBER_FILTERS: { label: string; value: BaseGroupFilter }[] = [
  { label: 'All groups', value: 'all-community' },
  { label: 'Ungrouped', value: 'not-in-group' },
];

const CommunityMembersPage = () => {
  const location = useLocation();
  const navigate = useCommonNavigate();
  const user = useUserStore();

  const [selectedTab, setSelectedTab] = useState(TABS[0].value);
  const [searchFilters, setSearchFilters] = useState<SearchFilters>({
    searchText: '',
    groupFilter: GROUP_AND_MEMBER_FILTERS[0].value,
  });

  const { isAddedToHomeScreen } = useAppStatus();

  const {
    shouldShowGroupMutationBannerForCommunities,
    setShouldShowGroupMutationBannerForCommunity,
  } = useGroupMutationBannerStore();

  const { trackAnalytics } =
    useBrowserAnalyticsTrack<MixpanelPageViewEventPayload>({
      onAction: true,
    });

  const { data: memberships = null } = useRefreshMembershipQuery({
    communityId: app.activeChainId(),
    address: user?.activeAccount?.address || '',
    apiEnabled: !!user?.activeAccount?.address,
  });

  const debouncedSearchTerm = useDebounce<string | undefined>(
    searchFilters.searchText,
    500,
  );

  const isStakedCommunity = !!app.config.chains.getById(app.activeChainId())
    .namespace;

  const columns: CWTableColumnInfo[] = [
    {
      key: 'name',
      header: 'Name',
      hasCustomSortValue: true,
      numeric: false,
      sortable: true,
    },
    {
      key: 'groups',
      header: 'Groups',
      hasCustomSortValue: true,
      numeric: false,
      sortable: false,
    },
    {
      key: 'stakeBalance',
      header: 'Stake',
      hasCustomSortValue: true,
      numeric: true,
      sortable: true,
      hidden: !isStakedCommunity,
    },
    {
      key: 'lastActive',
      header: 'Last Active',
      numeric: false,
      sortable: true,
    },
  ];

  const tableState = useCWTableState({
    columns,
    initialSortColumn: 'lastActive',
    initialSortDirection: APIOrderDirection.Desc,
  });

  const membershipsFilter = (() => {
    const { groupFilter } = searchFilters;
    if (groupFilter === 'not-in-group') {
      return searchFilters.groupFilter;
    }
    if (typeof groupFilter === 'number') {
      return `in-group:${searchFilters.groupFilter}`;
    }
    return null;
  })();

  const {
    data: members,
    fetchNextPage,
    isLoading: isLoadingMembers,
  } = trpc.community.getMembers.useInfiniteQuery(
    {
      limit: 30,
      order_by: (tableState.orderBy === 'lastActive'
        ? 'last_active'
        : tableState.orderBy) as MemberResultsOrderBy,
      // @ts-expect-error <StrictNullChecks/>
      order_direction: tableState.orderDirection,
      ...(debouncedSearchTerm && {
        search: debouncedSearchTerm,
      }),
      community_id: app.activeChainId(),
      include_roles: true,
      ...(membershipsFilter && {
        memberships: membershipsFilter,
      }),
      include_group_ids: true,
      // only include stake balances if community has staking enabled
      include_stake_balances: !!app.config.chains.getById(app.activeChainId())
        .namespace,
    },
    {
      initialCursor: 1,
      getNextPageParam: (lastPage) => {
        const nextPageNum = lastPage.page + 1;
        if (nextPageNum <= lastPage.totalPages) {
          return nextPageNum;
        }
        return undefined;
      },
      enabled: user.activeAccount?.address ? !!memberships : true,
    },
  );

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

  const filterOptions = useMemo(
    () => [
      {
        // base filters
        label: 'Filters',
        options: GROUP_AND_MEMBER_FILTERS,
      },
      {
        // filters by group name
        label: 'Groups',
        options: (groups || []).map((group) => ({
          id: group.id,
          label: group.name,
          value: group.id,
        })),
      },
    ],
    [groups],
  );

  const formattedMembers = useMemo(() => {
    if (!members?.pages?.length) {
      return [];
    }

    const clonedMembersPages = [...members.pages];

    const results = clonedMembersPages
      .reduce((acc, page) => {
        return [...acc, ...page.results];
      }, [] as SearchProfilesResponse['results'])
      .map((p) => ({
        userId: p.user_id,
        avatarUrl: p.avatar_url,
        name: p.profile_name || DEFAULT_NAME,
        role: p.addresses[0].role,
        groups: (p.group_ids || [])
          .map(
            (groupId) =>
              (groups || []).find((group) => group.id === groupId)?.name,
          )
          .filter(Boolean)
          // @ts-expect-error <StrictNullChecks/>
          .sort((a, b) => a.localeCompare(b)),
        stakeBalance: p.addresses[0].stake_balance,
        lastActive: p.last_active,
      }));

    return results;
  }, [members, groups]);

  const filteredGroups = useMemo(() => {
    const modifiedGroupsArr = (groups || []).map((group) => ({
      ...group,
      // add is group joined flag based on membership
      isJoined: (memberships || []).find(
        (membership) => membership.groupId === group.id,
      )?.isAllowed,
    }));

    const filteredGroupsArr = (modifiedGroupsArr || [])
      .filter((group) =>
        searchFilters.searchText
          ? group.name
              .toLowerCase()
              .includes(searchFilters.searchText.toLowerCase())
          : true,
      )
      .filter((group) => {
        if (searchFilters.groupFilter === 'all-community') return true;
        if (searchFilters.groupFilter === 'not-in-group')
          return !group.isJoined;
        return group.id === parseInt(`${searchFilters.groupFilter}`);
      });

    const clonedFilteredGroups = [...filteredGroupsArr];

    clonedFilteredGroups.sort((a, b) => a.name.localeCompare(b.name));

    return clonedFilteredGroups;
  }, [groups, searchFilters, memberships]);

  const totalResults = members?.pages?.[0]?.totalResults || 0;

  const updateActiveTab = (activeTab: string) => {
    const params = new URLSearchParams();
    params.set('tab', activeTab);
    navigate(`${window.location.pathname}?${params.toString()}`, {}, null);
    setSelectedTab(activeTab);

    let eventType;
    if (activeTab === TABS[0].value) {
      eventType = MixpanelPageViewEvent.MEMBERS_PAGE_VIEW;
    } else {
      eventType = MixpanelPageViewEvent.GROUPS_PAGE_VIEW;
    }

    trackAnalytics({
      event: eventType,
      isPWA: isAddedToHomeScreen,
    });
  };

  useEffect(() => {
    // Invalidate group memberships cache
    queryClient.cancelQueries([ApiEndpoints.FETCH_GROUPS]);
    refetch().catch((e) => console.log(e));
  }, [refetch]);

  useEffect(() => {
    // Set the active tab based on URL
    const params = new URLSearchParams(window.location.search.toLowerCase());
    const activeTab = params.get('tab')?.toLowerCase();

    if (!activeTab || activeTab === TABS[0].value) {
      updateActiveTab(TABS[0].value);
      return;
    }

    updateActiveTab(TABS[1].value);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location.search]);

  const navigateToCreateGroupPage = () => {
    navigate(`/members/groups/create`);
  };

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

  const extraColumns = (member: Member) => {
    return {
      lastActive: {
        sortValue: moment(member.lastActive).unix(),
        customElement: (
          <div className="table-cell">
            {moment(member.lastActive).fromNow()}
          </div>
        ),
      },
    };
  };

  return (
    <CWPageLayout>
      <section className="CommunityMembersPage">
        {/* Header */}
        <CWText type="h2">Members ({totalResults})</CWText>

        {/* Tabs section */}
        <CWTabsRow>
          {TABS.map((tab, index) => (
            <CWTab
              key={index}
              label={tab.label}
              onClick={() => updateActiveTab(tab.value)}
              isSelected={selectedTab === tab.value}
            />
          ))}
        </CWTabsRow>

        {/* Gating group post-mutation banner */}
        {shouldShowGroupMutationBannerForCommunities.includes(
          app.activeChainId(),
        ) &&
          selectedTab === TABS[0].value && (
            <section>
              <CWBanner
                type="info"
                title="Don't see your group right away?"
                body={`
            Our app is crunching numbers, which takes some time.
            Give it a few minutes and refresh to see your group.
          `}
                onClose={() =>
                  setShouldShowGroupMutationBannerForCommunity(
                    app.activeChainId(),
                    false,
                  )
                }
              />
            </section>
          )}

        {/* Filter section */}
        {selectedTab === TABS[1].value && groups?.length === 0 ? (
          <></>
        ) : (
          <section
            className={getClasses<{
              'cols-3': boolean;
              'cols-4': boolean;
            }>(
              {
                'cols-3': !isAdmin,
                'cols-4': isAdmin,
              },
              'filters',
            )}
          >
            <CWTextInput
              size="large"
              fullWidth
              placeholder={`Search ${
                selectedTab === TABS[0].value ? 'members' : 'groups'
              }`}
              containerClassName="search-input-container"
              inputClassName="search-input"
              iconLeft={<CWIcon iconName="search" className="search-icon" />}
              onInput={(e) =>
                setSearchFilters((g) => ({
                  ...g,
                  searchText: e.target.value?.trim(),
                }))
              }
            />
            {user.activeAccount && (
              <div className="select-dropdown-container">
                <CWText type="b2" fontWeight="bold" className="filter-text">
                  Filter
                </CWText>
                <CWSelectList
                  isSearchable={false}
                  isClearable={false}
                  options={filterOptions}
                  value={[
                    ...filterOptions[0].options,
                    ...filterOptions[1].options,
                  ].find(
                    (option) => option.value === searchFilters.groupFilter,
                  )}
                  onChange={(option) => {
                    setSearchFilters((g) => ({
                      ...g,
                      groupFilter: option?.value as BaseGroupFilter,
                    }));
                  }}
                />
              </div>
            )}
            {isAdmin && (
              <CWButton
                buttonWidth="full"
                label="Create group"
                iconLeft="plus"
                onClick={navigateToCreateGroupPage}
              />
            )}
          </section>
        )}

        {/* Main content section: based on the selected tab */}
        {selectedTab === TABS[1].value ? (
          <GroupsSection
            filteredGroups={filteredGroups}
            canManageGroups={isAdmin}
            hasNoGroups={groups?.length === 0}
          />
        ) : (
          <MembersSection
            // @ts-expect-error <StrictNullChecks/>
            filteredMembers={formattedMembers}
            onLoadMoreMembers={() => {
              // @ts-expect-error <StrictNullChecks/>
              if (members?.pages?.[0]?.totalResults > formattedMembers.length) {
                fetchNextPage?.().catch(console.error);
              }
            }}
            isLoadingMoreMembers={isLoadingMembers}
            tableState={tableState}
            extraColumns={extraColumns}
          />
        )}
      </section>
    </CWPageLayout>
  );
};

export default CommunityMembersPage;

1	import { DEFAULT_NAME } from '@hicommonwealth/shared';
2	import { APIOrderDirection } from 'helpers/constants';
3	import { useBrowserAnalyticsTrack } from 'hooks/useBrowserAnalyticsTrack';
4	import moment from 'moment';
5	import { useCommonNavigate } from 'navigation/helpers';
6	import React, { useEffect, useMemo, useState } from 'react';
7	import { useLocation } from 'react-router';
8	import {
9	MixpanelPageViewEvent,
10	MixpanelPageViewEventPayload,
11	} from 'shared/analytics/types';
12	import app from 'state';
13	import { ApiEndpoints, queryClient } from 'state/api/config';
14	import {
15	useFetchGroupsQuery,
16	useRefreshMembershipQuery,
17	} from 'state/api/groups';
18	import { SearchProfilesResponse } from 'state/api/profiles/searchProfiles';
19	import useGroupMutationBannerStore from 'state/ui/group';
20	import useUserStore from 'state/ui/user';
21	import { useDebounce } from 'usehooks-ts';
22	import Permissions from 'utils/Permissions';
23	import { trpc } from 'utils/trpcClient';
24	import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
25	import { CWText } from 'views/components/component_kit/cw_text';
26	import { getClasses } from 'views/components/component_kit/helpers';
27	import CWBanner from 'views/components/component_kit/new_designs/CWBanner';
28	import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
29	import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
30	import { CWSelectList } from 'views/components/component_kit/new_designs/CWSelectList';
31	import { CWTableColumnInfo } from 'views/components/component_kit/new_designs/CWTable/CWTable';
32	import { useCWTableState } from 'views/components/component_kit/new_designs/CWTable/useCWTableState';
33	import {
34	CWTab,
35	CWTabsRow,
36	} from 'views/components/component_kit/new_designs/CWTabs';
37	import { CWTextInput } from 'views/components/component_kit/new_designs/CWTextInput';
38	import useAppStatus from '../../../../hooks/useAppStatus';
39	import './CommunityMembersPage.scss';
40	import GroupsSection from './GroupsSection';
41	import MembersSection from './MembersSection';
42	import { Member } from './MembersSection/MembersSection';
43	import {
44	BaseGroupFilter,
45	MemberResultsOrderBy,
46	SearchFilters,
47	} from './index.types';
48
49	const TABS = [	×
50	{ value: 'all-members', label: 'All members' },
51	{ value: 'groups', label: 'Groups' },
52	];
53
54	const GROUP_AND_MEMBER_FILTERS: { label: string; value: BaseGroupFilter }[] = [	×
55	{ label: 'All groups', value: 'all-community' },
56	{ label: 'Ungrouped', value: 'not-in-group' },
57	];
58
59	const CommunityMembersPage = () => {	×
60	const location = useLocation();	×
UNCOV 61	const navigate = useCommonNavigate();	×
UNCOV 62	const user = useUserStore();	×
63
UNCOV 64	const [selectedTab, setSelectedTab] = useState(TABS[0].value);	×
65	const [searchFilters, setSearchFilters] = useState<SearchFilters>({	×
66	searchText: '',
67	groupFilter: GROUP_AND_MEMBER_FILTERS[0].value,
68	});
69
70	const { isAddedToHomeScreen } = useAppStatus();	×
71
72	const {
73	shouldShowGroupMutationBannerForCommunities,
74	setShouldShowGroupMutationBannerForCommunity,
UNCOV 75	} = useGroupMutationBannerStore();	×
76
77	const { trackAnalytics } =
UNCOV 78	useBrowserAnalyticsTrack<MixpanelPageViewEventPayload>({	×
79	onAction: true,
80	});
81
UNCOV 82	const { data: memberships = null } = useRefreshMembershipQuery({	×
83	communityId: app.activeChainId(),
84	address: user?.activeAccount?.address \|\| '',	×
85	apiEnabled: !!user?.activeAccount?.address,
86	});
87
88	const debouncedSearchTerm = useDebounce<string \| undefined>(	×
89	searchFilters.searchText,
90	500,
91	);
92
UNCOV 93	const isStakedCommunity = !!app.config.chains.getById(app.activeChainId())	×
94	.namespace;
95
UNCOV 96	const columns: CWTableColumnInfo[] = [	×
97	{
98	key: 'name',
99	header: 'Name',
100	hasCustomSortValue: true,
101	numeric: false,
102	sortable: true,
103	},
104	{
105	key: 'groups',
106	header: 'Groups',
107	hasCustomSortValue: true,
108	numeric: false,
109	sortable: false,
110	},
111	{
112	key: 'stakeBalance',
113	header: 'Stake',
114	hasCustomSortValue: true,
115	numeric: true,
116	sortable: true,
117	hidden: !isStakedCommunity,
118	},
119	{
120	key: 'lastActive',
121	header: 'Last Active',
122	numeric: false,
123	sortable: true,
124	},
125	];
126
UNCOV 127	const tableState = useCWTableState({	×
128	columns,
129	initialSortColumn: 'lastActive',
130	initialSortDirection: APIOrderDirection.Desc,
131	});
132
133	const membershipsFilter = (() => {	×
UNCOV 134	const { groupFilter } = searchFilters;	×
UNCOV 135	if (groupFilter === 'not-in-group') {	×
UNCOV 136	return searchFilters.groupFilter;	×
137	}
UNCOV 138	if (typeof groupFilter === 'number') {	×
UNCOV 139	return `in-group:${searchFilters.groupFilter}`;	×
140	}
UNCOV 141	return null;	×
142	})();
143
144	const {
145	data: members,
146	fetchNextPage,
147	isLoading: isLoadingMembers,
UNCOV 148	} = trpc.community.getMembers.useInfiniteQuery(	×
149	{
150	limit: 30,
151	order_by: (tableState.orderBy === 'lastActive'	×
152	? 'last_active'
153	: tableState.orderBy) as MemberResultsOrderBy,
154	// @ts-expect-error <StrictNullChecks/>
155	order_direction: tableState.orderDirection,
156	...(debouncedSearchTerm && {	×
157	search: debouncedSearchTerm,
158	}),
159	community_id: app.activeChainId(),
160	include_roles: true,
161	...(membershipsFilter && {	×
162	memberships: membershipsFilter,
163	}),
164	include_group_ids: true,
165	// only include stake balances if community has staking enabled
166	include_stake_balances: !!app.config.chains.getById(app.activeChainId())
167	.namespace,
168	},
169	{
170	initialCursor: 1,
171	getNextPageParam: (lastPage) => {
UNCOV 172	const nextPageNum = lastPage.page + 1;	×
UNCOV 173	if (nextPageNum <= lastPage.totalPages) {	×
UNCOV 174	return nextPageNum;	×
175	}
176	return undefined;	×
177	},
178	enabled: user.activeAccount?.address ? !!memberships : true,	×
179	},
180	);
181
UNCOV 182	const { data: groups, refetch } = useFetchGroupsQuery({	×
183	communityId: app.activeChainId(),
184	includeTopics: true,
185	enabled: user.activeAccount?.address ? !!memberships : true,	×
186	});
187
UNCOV 188	const filterOptions = useMemo(	×
UNCOV 189	() => [	×
190	{
191	// base filters
192	label: 'Filters',
193	options: GROUP_AND_MEMBER_FILTERS,
194	},
195	{
196	// filters by group name
197	label: 'Groups',
UNCOV 198	options: (groups \|\| []).map((group) => ({	×
199	id: group.id,
200	label: group.name,
201	value: group.id,
202	})),
203	},
204	],
205	[groups],
206	);
207
UNCOV 208	const formattedMembers = useMemo(() => {	×
UNCOV 209	if (!members?.pages?.length) {	×
UNCOV 210	return [];	×
211	}
212
213	const clonedMembersPages = [...members.pages];	×
214
UNCOV 215	const results = clonedMembersPages	×
216	.reduce((acc, page) => {
UNCOV 217	return [...acc, ...page.results];	×
218	}, [] as SearchProfilesResponse['results'])
UNCOV 219	.map((p) => ({	×
220	userId: p.user_id,
221	avatarUrl: p.avatar_url,
222	name: p.profile_name \|\| DEFAULT_NAME,	×
223	role: p.addresses[0].role,
224	groups: (p.group_ids \|\| [])	×
225	.map(
226	(groupId) =>	×
UNCOV 227	(groups \|\| []).find((group) => group.id === groupId)?.name,	×
228	)
229	.filter(Boolean)
230	// @ts-expect-error <StrictNullChecks/>
UNCOV 231	.sort((a, b) => a.localeCompare(b)),	×
232	stakeBalance: p.addresses[0].stake_balance,
233	lastActive: p.last_active,
234	}));
235
236	return results;	×
237	}, [members, groups]);
238
UNCOV 239	const filteredGroups = useMemo(() => {	×
240	const modifiedGroupsArr = (groups \|\| []).map((group) => ({	×
241	...group,
242	// add is group joined flag based on membership
243	isJoined: (memberships \|\| []).find(	×
244	(membership) => membership.groupId === group.id,	×
245	)?.isAllowed,
246	}));
247
UNCOV 248	const filteredGroupsArr = (modifiedGroupsArr \|\| [])	×
249	.filter((group) =>
UNCOV 250	searchFilters.searchText	×
251	? group.name
252	.toLowerCase()
253	.includes(searchFilters.searchText.toLowerCase())
254	: true,
255	)
256	.filter((group) => {
UNCOV 257	if (searchFilters.groupFilter === 'all-community') return true;	×
UNCOV 258	if (searchFilters.groupFilter === 'not-in-group')	×
259	return !group.isJoined;	×
UNCOV 260	return group.id === parseInt(`${searchFilters.groupFilter}`);	×
261	});
262
263	const clonedFilteredGroups = [...filteredGroupsArr];	×
264
UNCOV 265	clonedFilteredGroups.sort((a, b) => a.name.localeCompare(b.name));	×
266
UNCOV 267	return clonedFilteredGroups;	×
268	}, [groups, searchFilters, memberships]);
269
270	const totalResults = members?.pages?.[0]?.totalResults \|\| 0;	×
271
272	const updateActiveTab = (activeTab: string) => {	×
UNCOV 273	const params = new URLSearchParams();	×
UNCOV 274	params.set('tab', activeTab);	×
275	navigate(`${window.location.pathname}?${params.toString()}`, {}, null);	×
276	setSelectedTab(activeTab);	×
277
278	let eventType;
UNCOV 279	if (activeTab === TABS[0].value) {	×
UNCOV 280	eventType = MixpanelPageViewEvent.MEMBERS_PAGE_VIEW;	×
281	} else {
UNCOV 282	eventType = MixpanelPageViewEvent.GROUPS_PAGE_VIEW;	×
283	}
284
UNCOV 285	trackAnalytics({	×
286	event: eventType,
287	isPWA: isAddedToHomeScreen,
288	});
289	};
290
UNCOV 291	useEffect(() => {	×
292	// Invalidate group memberships cache
293	queryClient.cancelQueries([ApiEndpoints.FETCH_GROUPS]);	×
UNCOV 294	refetch().catch((e) => console.log(e));	×
295	}, [refetch]);
296
UNCOV 297	useEffect(() => {	×
298	// Set the active tab based on URL
299	const params = new URLSearchParams(window.location.search.toLowerCase());	×
300	const activeTab = params.get('tab')?.toLowerCase();	×
301
UNCOV 302	if (!activeTab \|\| activeTab === TABS[0].value) {	×
303	updateActiveTab(TABS[0].value);	×
UNCOV 304	return;	×
305	}
306
307	updateActiveTab(TABS[1].value);	×
308	// eslint-disable-next-line react-hooks/exhaustive-deps
309	}, [location.search]);
310
311	const navigateToCreateGroupPage = () => {	×
UNCOV 312	navigate(`/members/groups/create`);	×
313	};
314
UNCOV 315	const isAdmin = Permissions.isCommunityAdmin() \|\| Permissions.isSiteAdmin();	×
316
UNCOV 317	const extraColumns = (member: Member) => {	×
UNCOV 318	return {	×
319	lastActive: {
320	sortValue: moment(member.lastActive).unix(),
321	customElement: (
322	<div className="table-cell">
323	{moment(member.lastActive).fromNow()}
324	</div>
325	),
326	},
327	};
328	};
329
UNCOV 330	return (	×
331	<CWPageLayout>
332	<section className="CommunityMembersPage">
333	{/* Header */}
334	<CWText type="h2">Members ({totalResults})</CWText>
335
336	{/* Tabs section */}
337	<CWTabsRow>
338	{TABS.map((tab, index) => (
UNCOV 339	<CWTab	×
340	key={index}
341	label={tab.label}
UNCOV 342	onClick={() => updateActiveTab(tab.value)}	×
343	isSelected={selectedTab === tab.value}
344	/>
345	))}
346	</CWTabsRow>
347
348	{/* Gating group post-mutation banner */}
349	{shouldShowGroupMutationBannerForCommunities.includes(	×
350	app.activeChainId(),
351	) &&
352	selectedTab === TABS[0].value && (
353	<section>
354	<CWBanner
355	type="info"
356	title="Don't see your group right away?"
357	body={`
358	Our app is crunching numbers, which takes some time.
359	Give it a few minutes and refresh to see your group.
360	`}
361	onClose={() =>
UNCOV 362	setShouldShowGroupMutationBannerForCommunity(	×
363	app.activeChainId(),
364	false,
365	)
366	}
367	/>
368	</section>
369	)}
370
371	{/* Filter section */}
372	{selectedTab === TABS[1].value && groups?.length === 0 ? (	×
373	<></>
374	) : (
375	<section
376	className={getClasses<{
377	'cols-3': boolean;
378	'cols-4': boolean;
379	}>(
380	{
381	'cols-3': !isAdmin,
382	'cols-4': isAdmin,
383	},
384	'filters',
385	)}
386	>
387	<CWTextInput
388	size="large"
389	fullWidth
390	placeholder={`Search ${
391	selectedTab === TABS[0].value ? 'members' : 'groups'	×
392	}`}
393	containerClassName="search-input-container"
394	inputClassName="search-input"
395	iconLeft={<CWIcon iconName="search" className="search-icon" />}
396	onInput={(e) =>
UNCOV 397	setSearchFilters((g) => ({	×
398	...g,
399	searchText: e.target.value?.trim(),
400	}))
401	}
402	/>
403	{user.activeAccount && (	×
404	<div className="select-dropdown-container">
405	<CWText type="b2" fontWeight="bold" className="filter-text">
406	Filter
407	</CWText>
408	<CWSelectList
409	isSearchable={false}
410	isClearable={false}
411	options={filterOptions}
412	value={[
413	...filterOptions[0].options,
414	...filterOptions[1].options,
415	].find(
UNCOV 416	(option) => option.value === searchFilters.groupFilter,	×
417	)}
418	onChange={(option) => {
UNCOV 419	setSearchFilters((g) => ({	×
420	...g,
421	groupFilter: option?.value as BaseGroupFilter,
422	}));
423	}}
424	/>
425	</div>
426	)}
427	{isAdmin && (	×
428	<CWButton
429	buttonWidth="full"
430	label="Create group"
431	iconLeft="plus"
432	onClick={navigateToCreateGroupPage}
433	/>
434	)}
435	</section>
436	)}
437
438	{/* Main content section: based on the selected tab */}
439	{selectedTab === TABS[1].value ? (	×
440	<GroupsSection
441	filteredGroups={filteredGroups}
442	canManageGroups={isAdmin}
443	hasNoGroups={groups?.length === 0}
444	/>
445	) : (
446	<MembersSection
447	// @ts-expect-error <StrictNullChecks/>
448	filteredMembers={formattedMembers}
449	onLoadMoreMembers={() => {
450	// @ts-expect-error <StrictNullChecks/>
UNCOV 451	if (members?.pages?.[0]?.totalResults > formattedMembers.length) {	×
UNCOV 452	fetchNextPage?.().catch(console.error);	×
453	}
454	}}
455	isLoadingMoreMembers={isLoadingMembers}
456	tableState={tableState}
457	extraColumns={extraColumns}
458	/>
459	)}
460	</section>
461	</CWPageLayout>
462	);
463	};
464
465	export default CommunityMembersPage;

hicommonwealth / commonwealth / 10254850132

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