10394474284

Committed 14 Aug 2024 08:23PM UTC coverage: 15.761% (-0.08%) from 15.844%

Build # 10394474284

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #8779 from hicommonwealth/malik.8762.community-by-id

Migrated `app.config.chain.getById()` calls to newer `trpc.community.getCommunity()` + cleanup/state-refactor of related components

Run Details

3603 of 21479 branches covered (16.77%)

Branch coverage included in aggregate %.

4 of 363 new or added lines in 73 files covered. (1.1%)

43 existing lines in 35 files now uncovered.

4718 of 31317 relevant lines covered (15.07%)

5.32 hits per line

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

0.0

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

import { ChainBase, DEFAULT_NAME } from '@hicommonwealth/shared';
import ghostSvg from 'assets/img/ghost.svg';
import 'components/user/user.scss';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import app from 'state';
import { useGetCommunityByIdQuery } from 'state/api/communities';
import { useFetchProfilesByAddressesQuery } from 'state/api/profiles';
import useUserStore from 'state/ui/user';
import { Avatar } from 'views/components/Avatar';
import CWPopover, {
  usePopover,
} from 'views/components/component_kit/new_designs/CWPopover';
import { formatAddressShort } from '../../../../../shared/utils';
import Permissions from '../../../utils/Permissions';
import { BanUserModal } from '../../modals/ban_user_modal';
import { CWText } from '../component_kit/cw_text';
import { CWButton } from '../component_kit/new_designs/CWButton';
import { CWModal } from '../component_kit/new_designs/CWModal';
import { UserSkeleton } from './UserSkeleton';
import type { UserAttrsWithSkeletonProp } from './user.types';

// TODO: When this is no longer used, this should be removed in favour of fullUser.tsx
export const User = ({
  shouldLinkProfile,
  shouldShowPopover,
  shouldShowRole,
  shouldShowAsDeleted = false,
  userAddress,
  userCommunityId,
  shouldHideAvatar,
  shouldShowAvatarOnly,
  shouldShowAddressWithDisplayName,
  avatarSize = 16,
  showSkeleton,
  popoverPlacement,
}: UserAttrsWithSkeletonProp) => {
  const popoverProps = usePopover();
  const loggedInUser = useUserStore();

  const { data: users } = useFetchProfilesByAddressesQuery({
    currentChainId: app.activeChainId(),
    profileAddresses: [userAddress],
    profileChainIds: [userCommunityId],
    apiCallEnabled: !!(userAddress && userCommunityId),
  });

  const [isModalOpen, setIsModalOpen] = useState(false);

  const { data: userCommunity, isLoading: isLoadingUserCommunity } =
    useGetCommunityByIdQuery({
      id: userCommunityId || '',
      enabled: !!userCommunityId,
    });

  if (showSkeleton || isLoadingUserCommunity) {
    return (
      <UserSkeleton
        shouldShowAvatarOnly={shouldShowAvatarOnly}
        shouldHideAvatar={shouldHideAvatar}
        shouldShowPopover={shouldShowPopover}
        avatarSize={avatarSize}
      />
    );
  }

  const profile = users?.[0] || {};

  const fullAddress = formatAddressShort(userAddress, userCommunityId);
  const redactedAddress = formatAddressShort(
    userAddress,
    userCommunityId,
    true,
    undefined,
    app.chain?.meta?.bech32Prefix,
  );
  const showAvatar = profile ? !shouldHideAvatar : false;
  const loggedInUserIsAdmin =
    Permissions.isSiteAdmin() || Permissions.isCommunityAdmin(userCommunity);
  const friendlyCommunityName = userCommunity?.name;
  const roleInCommunity = userCommunity?.adminsAndMods?.find(
    ({ address }) => address === userAddress,
  )?.role;
  const isGhostAddress = loggedInUser.addresses.some(
    ({ address, ghostAddress }) => userAddress === address && ghostAddress,
  );

  const roleTags = (
    <>
      {shouldShowRole && roleInCommunity && (
        <div className="role-tag-container">
          <CWText className="role-tag-text">{roleInCommunity}</CWText>
        </div>
      )}
    </>
  );

  const isSelfSelected = loggedInUser.addresses
    .map((a) => a.address)
    .includes(userAddress);

  const userBasisInfo = (
    <>
      {!profile ? (
        shouldShowAsDeleted ? (
          'Deleted'
        ) : (
          DEFAULT_NAME
        )
      ) : !profile?.userId ? (
        redactedAddress
      ) : !shouldShowAddressWithDisplayName ? (
        profile?.name
      ) : (
        <>
          <div>{profile?.name}</div>
          <div className="id-short">{fullAddress}</div>
        </>
      )}
      {roleTags}
    </>
  );

  const userFinal = shouldShowAvatarOnly ? (
    <div className="User avatar-only" key={profile?.address || '-'}>
      <Avatar
        url={profile?.avatarUrl}
        size={profile?.avatarUrl ? avatarSize : avatarSize - 4}
        address={profile?.userId}
      />
    </div>
  ) : (
    <div
      className={`User${
        shouldLinkProfile && profile?.userId ? ' linkified' : ''
      }`}
      key={profile?.address || '-'}
    >
      {showAvatar && (
        <Link
          // @ts-expect-error <StrictNullChecks/>
          to={
            profile && shouldLinkProfile
              ? `/profile/id/${profile?.userId}`
              : undefined
          }
          className="user-avatar"
          style={{ width: `${avatarSize}px`, height: `${avatarSize}px` }}
        >
          <Avatar
            url={profile?.avatarUrl}
            size={avatarSize}
            address={profile?.userId}
          />
        </Link>
      )}
      {
        <>
          {/* non-substrate name */}
          {shouldLinkProfile && profile?.userId ? (
            <Link
              className="user-display-name username"
              to={`/profile/id/${profile?.userId}`}
              onClick={(e) => e.stopPropagation()}
            >
              {userBasisInfo}
            </Link>
          ) : (
            <a className="user-display-name username">{userBasisInfo}</a>
          )}
          {isGhostAddress && (
            <img
              alt="ghost"
              src={ghostSvg}
              width="20px"
              style={{ display: 'inline-block' }}
            />
          )}
        </>
      }
    </div>
  );

  const userPopover = (
    <>
      {profile && (
        <div className="UserPopover" onClick={(e) => e.stopPropagation()}>
          <div className="user-avatar">
            <Avatar
              url={profile?.avatarUrl}
              size={profile?.avatarUrl ? 36 : 32}
              address={profile?.userId}
            />
          </div>
          <div className="user-name">
            {app.chain && app.chain.base === ChainBase.Substrate && (
              <Link
                className="user-display-name substrate@"
                // @ts-expect-error <StrictNullChecks/>
                to={
                  profile?.userId ? `/profile/id/${profile?.userId}` : undefined
                }
              >
                {!profile || !profile?.userId ? (
                  !profile?.userId && userAddress ? (
                    `${userAddress.slice(0, 8)}...${userAddress.slice(-5)}`
                  ) : (
                    redactedAddress
                  )
                ) : !shouldShowAddressWithDisplayName ? (
                  profile?.name
                ) : (
                  <>
                    {profile?.name}
                    <div className="id-short">{redactedAddress}</div>
                  </>
                )}
              </Link>
            )}
          </div>
          {profile?.address && (
            <div className="user-address">{redactedAddress}</div>
          )}
          {friendlyCommunityName && (
            <div className="user-chain">{friendlyCommunityName}</div>
          )}
          {roleTags}
          {/* If Admin Allow Banning */}
          {loggedInUserIsAdmin && !isSelfSelected && (
            <div className="ban-wrapper">
              <CWButton
                onClick={() => {
                  setIsModalOpen(true);
                }}
                label="Ban address"
                buttonType="destructive"
              />
            </div>
          )}
        </div>
      )}
      <CWModal
        size="small"
        zIndex={10001}
        content={
          <BanUserModal
            address={userAddress}
            onModalClose={() => setIsModalOpen(false)}
          />
        }
        onClose={(e) => {
          e.stopPropagation();
          setIsModalOpen(false);
        }}
        open={isModalOpen}
      />
    </>
  );

  return shouldShowPopover ? (
    <div
      className="user-popover-wrapper"
      onMouseEnter={popoverProps.handleInteraction}
      onMouseLeave={popoverProps.handleInteraction}
    >
      {userFinal}
      {profile && (
        <CWPopover
          content={userPopover}
          {...popoverProps}
          placement={popoverPlacement}
        />
      )}
    </div>
  ) : (
    userFinal
  );
};

1	import { ChainBase, DEFAULT_NAME } from '@hicommonwealth/shared';
2	import ghostSvg from 'assets/img/ghost.svg';
3	import 'components/user/user.scss';
4	import React, { useState } from 'react';
5	import { Link } from 'react-router-dom';
6	import app from 'state';
7	import { useGetCommunityByIdQuery } from 'state/api/communities';
8	import { useFetchProfilesByAddressesQuery } from 'state/api/profiles';
9	import useUserStore from 'state/ui/user';
10	import { Avatar } from 'views/components/Avatar';
11	import CWPopover, {
12	usePopover,
13	} from 'views/components/component_kit/new_designs/CWPopover';
14	import { formatAddressShort } from '../../../../../shared/utils';
15	import Permissions from '../../../utils/Permissions';
16	import { BanUserModal } from '../../modals/ban_user_modal';
17	import { CWText } from '../component_kit/cw_text';
18	import { CWButton } from '../component_kit/new_designs/CWButton';
19	import { CWModal } from '../component_kit/new_designs/CWModal';
20	import { UserSkeleton } from './UserSkeleton';
21	import type { UserAttrsWithSkeletonProp } from './user.types';
22
23	// TODO: When this is no longer used, this should be removed in favour of fullUser.tsx
24	export const User = ({	×
25	shouldLinkProfile,
26	shouldShowPopover,
27	shouldShowRole,
28	shouldShowAsDeleted = false,	×
29	userAddress,
30	userCommunityId,
31	shouldHideAvatar,
32	shouldShowAvatarOnly,
33	shouldShowAddressWithDisplayName,
34	avatarSize = 16,	×
35	showSkeleton,
36	popoverPlacement,
37	}: UserAttrsWithSkeletonProp) => {
38	const popoverProps = usePopover();	×
39	const loggedInUser = useUserStore();	×
40
41	const { data: users } = useFetchProfilesByAddressesQuery({	×
42	currentChainId: app.activeChainId(),
43	profileAddresses: [userAddress],
44	profileChainIds: [userCommunityId],
45	apiCallEnabled: !!(userAddress && userCommunityId),	×
46	});
47
48	const [isModalOpen, setIsModalOpen] = useState(false);	×
49
50	const { data: userCommunity, isLoading: isLoadingUserCommunity } =
NEW 51	useGetCommunityByIdQuery({	×
52	id: userCommunityId \|\| '',	×
53	enabled: !!userCommunityId,
54	});
55
NEW 56	if (showSkeleton \|\| isLoadingUserCommunity) {	×
UNCOV 57	return (	×
58	<UserSkeleton
59	shouldShowAvatarOnly={shouldShowAvatarOnly}
60	shouldHideAvatar={shouldHideAvatar}
61	shouldShowPopover={shouldShowPopover}
62	avatarSize={avatarSize}
63	/>
64	);
65	}
66
67	const profile = users?.[0] \|\| {};	×
68
69	const fullAddress = formatAddressShort(userAddress, userCommunityId);	×
70	const redactedAddress = formatAddressShort(	×
71	userAddress,
72	userCommunityId,
73	true,
74	undefined,
75	app.chain?.meta?.bech32Prefix,
76	);
77	const showAvatar = profile ? !shouldHideAvatar : false;	×
78	const loggedInUserIsAdmin =
NEW 79	Permissions.isSiteAdmin() \|\| Permissions.isCommunityAdmin(userCommunity);	×
80	const friendlyCommunityName = userCommunity?.name;	×
81	const roleInCommunity = userCommunity?.adminsAndMods?.find(	×
82	({ address }) => address === userAddress,	×
83	)?.role;
84	const isGhostAddress = loggedInUser.addresses.some(	×
85	({ address, ghostAddress }) => userAddress === address && ghostAddress,	×
86	);
87
88	const roleTags = (
89	<>	×
90	{shouldShowRole && roleInCommunity && (	×
91	<div className="role-tag-container">
92	<CWText className="role-tag-text">{roleInCommunity}</CWText>
93	</div>
94	)}
95	</>
96	);
97
98	const isSelfSelected = loggedInUser.addresses	×
99	.map((a) => a.address)	×
100	.includes(userAddress);
101
102	const userBasisInfo = (
103	<>	×
104	{!profile ? (	×
105	shouldShowAsDeleted ? (	×
106	'Deleted'
107	) : (
108	DEFAULT_NAME
109	)
110	) : !profile?.userId ? (	×
111	redactedAddress
112	) : !shouldShowAddressWithDisplayName ? (	×
113	profile?.name
114	) : (
115	<>
116	<div>{profile?.name}</div>
117	<div className="id-short">{fullAddress}</div>
118	</>
119	)}
120	{roleTags}
121	</>
122	);
123
124	const userFinal = shouldShowAvatarOnly ? (	×
125	<div className="User avatar-only" key={profile?.address \|\| '-'}>	×
126	<Avatar
127	url={profile?.avatarUrl}
128	size={profile?.avatarUrl ? avatarSize : avatarSize - 4}	×
129	address={profile?.userId}
130	/>
131	</div>
132	) : (
133	<div
134	className={`User${
135	shouldLinkProfile && profile?.userId ? ' linkified' : ''	×
136	}`}
137	key={profile?.address \|\| '-'}	×
138	>
139	{showAvatar && (	×
140	<Link
141	// @ts-expect-error <StrictNullChecks/>
142	to={
143	profile && shouldLinkProfile	×
144	? `/profile/id/${profile?.userId}`
145	: undefined
146	}
147	className="user-avatar"
148	style={{ width: `${avatarSize}px`, height: `${avatarSize}px` }}
149	>
150	<Avatar
151	url={profile?.avatarUrl}
152	size={avatarSize}
153	address={profile?.userId}
154	/>
155	</Link>
156	)}
157	{
158	<>
159	{/* non-substrate name */}
160	{shouldLinkProfile && profile?.userId ? (	×
161	<Link
162	className="user-display-name username"
163	to={`/profile/id/${profile?.userId}`}
164	onClick={(e) => e.stopPropagation()}	×
165	>
166	{userBasisInfo}
167	</Link>
168	) : (
169	<a className="user-display-name username">{userBasisInfo}</a>
170	)}
171	{isGhostAddress && (	×
172	<img
173	alt="ghost"
174	src={ghostSvg}
175	width="20px"
176	style={{ display: 'inline-block' }}
177	/>
178	)}
179	</>
180	}
181	</div>
182	);
183
184	const userPopover = (
185	<>	×
186	{profile && (	×
187	<div className="UserPopover" onClick={(e) => e.stopPropagation()}>	×
188	<div className="user-avatar">
189	<Avatar
190	url={profile?.avatarUrl}
191	size={profile?.avatarUrl ? 36 : 32}	×
192	address={profile?.userId}
193	/>
194	</div>
195	<div className="user-name">
196	{app.chain && app.chain.base === ChainBase.Substrate && (	×
197	<Link
198	className="user-display-name substrate@"
199	// @ts-expect-error <StrictNullChecks/>
200	to={
201	profile?.userId ? `/profile/id/${profile?.userId}` : undefined	×
202	}
203	>
204	{!profile \|\| !profile?.userId ? (	×
205	!profile?.userId && userAddress ? (	×
206	`${userAddress.slice(0, 8)}...${userAddress.slice(-5)}`
207	) : (
208	redactedAddress
209	)
210	) : !shouldShowAddressWithDisplayName ? (	×
211	profile?.name
212	) : (
213	<>
214	{profile?.name}
215	<div className="id-short">{redactedAddress}</div>
216	</>
217	)}
218	</Link>
219	)}
220	</div>
221	{profile?.address && (	×
222	<div className="user-address">{redactedAddress}</div>
223	)}
224	{friendlyCommunityName && (	×
225	<div className="user-chain">{friendlyCommunityName}</div>
226	)}
227	{roleTags}
228	{/* If Admin Allow Banning */}
229	{loggedInUserIsAdmin && !isSelfSelected && (	×
230	<div className="ban-wrapper">
231	<CWButton
232	onClick={() => {
233	setIsModalOpen(true);	×
234	}}
235	label="Ban address"
236	buttonType="destructive"
237	/>
238	</div>
239	)}
240	</div>
241	)}
242	<CWModal
243	size="small"
244	zIndex={10001}
245	content={
246	<BanUserModal
247	address={userAddress}
248	onModalClose={() => setIsModalOpen(false)}	×
249	/>
250	}
251	onClose={(e) => {
252	e.stopPropagation();	×
253	setIsModalOpen(false);	×
254	}}
255	open={isModalOpen}
256	/>
257	</>
258	);
259
260	return shouldShowPopover ? (	×
261	<div
262	className="user-popover-wrapper"
263	onMouseEnter={popoverProps.handleInteraction}
264	onMouseLeave={popoverProps.handleInteraction}
265	>
266	{userFinal}
267	{profile && (	×
268	<CWPopover
269	content={userPopover}
270	{...popoverProps}
271	placement={popoverPlacement}
272	/>
273	)}
274	</div>
275	) : (
276	userFinal
277	);
278	};

hicommonwealth / commonwealth / 10394474284

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