10372775105

Committed 13 Aug 2024 03:33PM UTC coverage: 15.84% (+0.009%) from 15.831%

Build # 10372775105

Build Type

Pull #8833

github

Committed by

web-flow

Commit Message

Merge f5fb898f2 into 22bd80b0c

Pull Request Pull Request #8833: Fixed bug where unauthenticated users would get subscription errors in the console.

Run Details

3609 of 21214 branches covered (17.01%)

Branch coverage included in aggregate %.

0 of 53 new or added lines in 4 files covered. (0.0%)

933 existing lines in 38 files now uncovered.

4728 of 31417 relevant lines covered (15.05%)

5.1 hits per line

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

0.0

/packages/commonwealth/client/scripts/views/components/component_kit/cw_sidebar_menu.tsx

import React, { useState } from 'react';

import 'components/component_kit/cw_sidebar_menu.scss';

import { navigateToCommunity, useCommonNavigate } from 'navigation/helpers';
import app from 'state';
import { useToggleCommunityStarMutation } from 'state/api/communities';
import useSidebarStore, { sidebarStore } from 'state/ui/sidebar';
import useUserStore from 'state/ui/user';
import { CommunityLabel } from '../community_label';
import { User } from '../user/user';
import { CWIcon } from './cw_icons/cw_icon';
import { CWText } from './cw_text';
import { getClasses, isWindowSmallInclusive } from './helpers';
import { CWButton } from './new_designs/CWButton';
import type { MenuItem } from './types';
import { ComponentType } from './types';

type CWSidebarMenuItemProps = {
  isStarred?: boolean;
} & MenuItem;

const resetSidebarState = () => {
  if (
    sidebarStore.getState().userToggledVisibility !== 'open' ||
    isWindowSmallInclusive(window.innerWidth)
  ) {
    sidebarStore.getState().setMenu({ name: 'default', isVisible: false });
  } else {
    sidebarStore.getState().setMenu({ name: 'default', isVisible: true });
  }
};

export const CWSidebarMenuItem = (props: CWSidebarMenuItemProps) => {
  const navigate = useCommonNavigate();
  const { setMenu } = useSidebarStore();
  const user = useUserStore();

  // eslint-disable-next-line react/destructuring-assignment
  const [isStarred, setIsStarred] = useState<boolean>(!!props.isStarred);
  const { mutateAsync: toggleCommunityStar } = useToggleCommunityStarMutation();

  /* eslint-disable-next-line react/destructuring-assignment */
  if (props.type === 'default') {
    const {
      disabled,
      iconLeft,
      iconLeftWeight,
      iconRight,
      isSecondary,
      label,
      onClick,
      isButton,
      className,
    } = props;

    if (isButton) {
      return (
        <CWButton
          containerClassName={`${className} px-16 no-outline`}
          key={label as string}
          label={label}
          buttonHeight="sm"
          buttonWidth="full"
          iconLeft={iconLeft}
          iconLeftWeight={iconLeftWeight}
          disabled={disabled}
          onClick={onClick}
        />
      );
    }

    return (
      <div
        className={getClasses<{ disabled?: boolean; isSecondary?: boolean }>(
          { disabled, isSecondary },
          'SidebarMenuItem default',
        )}
        onClick={(e) => {
          if (onClick) onClick(e);
        }}
      >
        <div className="sidebar-menu-item-left">
          {iconLeft && <CWIcon iconName={iconLeft} />}
          <CWText type="b2">{label}</CWText>
        </div>
        {iconRight && <CWIcon iconName={iconRight} iconSize="small" />}
      </div>
    );
    /* eslint-disable-next-line react/destructuring-assignment */
  } else if (props.type === 'header') {
    return (
      <div className="SidebarMenuItem header">
        {/* eslint-disable-next-line react/destructuring-assignment */}
        <CWText type="caption">{props.label}</CWText>
      </div>
    );
    /* eslint-disable-next-line react/destructuring-assignment */
  } else if (props.type === 'community') {
    /* eslint-disable-next-line react/destructuring-assignment */
    const item = props.community;
    const account =
      item && user.accounts.find(({ community }) => item.id == community.id);
    return (
      <div
        className={getClasses<{ isSelected: boolean }>(
          // @ts-expect-error <StrictNullChecks/>
          { isSelected: app.activeChainId() === item.id },
          'SidebarMenuItem community',
        )}
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          setMenu({ name: 'default', isVisible: false });
          resetSidebarState();
          navigateToCommunity({
            navigate,
            path: '/',
            // @ts-expect-error <StrictNullChecks/>
            chain: item.id,
          });
        }}
      >
        {/*// @ts-expect-error <StrictNullChecks/>*/}
        <CommunityLabel community={item} />
        {user.isLoggedIn && account && (
          <div className="roles-and-star">
            <User
              avatarSize={18}
              shouldShowAvatarOnly
              userAddress={account.address}
              userCommunityId={account.community.id}
            />
            <div
              className={isStarred ? 'star-filled' : 'star-empty'}
              onClick={async (e) => {
                e.stopPropagation();
                await toggleCommunityStar({
                  community: item.id,
                });
                setIsStarred((prevState) => !prevState);
              }}
            />
          </div>
        )}
      </div>
    );
  }
};

type SidebarMenuProps = {
  className?: string;
  menuHeader?: { label: string; onClick: (e) => void };
  menuItems: Array<MenuItem>;
};

// eslint-disable-next-line react/no-multi-comp
export const CWSidebarMenu = (props: SidebarMenuProps) => {
  const { className, menuHeader, menuItems } = props;
  const navigate = useCommonNavigate();
  const { setMenu } = useSidebarStore();

  const user = useUserStore();

  return (
    <div
      className={getClasses<{ className: string }>(
        // @ts-expect-error <StrictNullChecks/>
        { className },
        ComponentType.SidebarMenu,
      )}
    >
      <div className="sidebar-top">
        {menuHeader && (
          <div className="sidebar-menu-header" onClick={menuHeader.onClick}>
            <CWIcon iconName="chevronLeft" />
            <CWText type="h5" fontWeight="medium">
              {menuHeader.label}
            </CWText>
          </div>
        )}
        {menuItems.map((item, i) => {
          const itemProps = {
            ...item,
            isStarred:
              item.type === 'community'
                ? !!user.starredCommunities.find(
                    (starCommunity) =>
                      starCommunity.community_id ===
                      (item?.community?.id || ''),
                  )
                : false,
          };

          return (
            <CWSidebarMenuItem
              key={i}
              type={item.type || 'default'}
              {...itemProps}
            />
          );
        })}
      </div>
      <div className="sidebar-bottom">
        {[
          {
            type: 'header',
            label: 'Other',
          },
          {
            type: 'default',
            label: 'Explore communities',
            iconLeft: 'compassPhosphor',
            onClick: () => {
              setMenu({ name: 'default', isVisible: false });
              navigate('/communities', {}, null);
            },
          },
          {
            type: 'default',
            label: 'Notification settings',
            iconLeft: 'person',
            onClick: () => {
              setMenu({ name: 'default', isVisible: false });
              navigate('/notification-settings');
            },
          } as MenuItem,
        ].map((item: MenuItem, i) => {
          return (
            <CWSidebarMenuItem
              key={i}
              type={item.type || 'default'}
              {...item}
            />
          );
        })}
      </div>
    </div>
  );
};

1	import React, { useState } from 'react';
2
3	import 'components/component_kit/cw_sidebar_menu.scss';
4
5	import { navigateToCommunity, useCommonNavigate } from 'navigation/helpers';
6	import app from 'state';
7	import { useToggleCommunityStarMutation } from 'state/api/communities';
8	import useSidebarStore, { sidebarStore } from 'state/ui/sidebar';
9	import useUserStore from 'state/ui/user';
10	import { CommunityLabel } from '../community_label';
11	import { User } from '../user/user';
12	import { CWIcon } from './cw_icons/cw_icon';
13	import { CWText } from './cw_text';
14	import { getClasses, isWindowSmallInclusive } from './helpers';
15	import { CWButton } from './new_designs/CWButton';
16	import type { MenuItem } from './types';
17	import { ComponentType } from './types';
18
19	type CWSidebarMenuItemProps = {
20	isStarred?: boolean;
21	} & MenuItem;
22
23	const resetSidebarState = () => {	×
24	if (	×
25	sidebarStore.getState().userToggledVisibility !== 'open' \|\|	×
26	isWindowSmallInclusive(window.innerWidth)
27	) {
28	sidebarStore.getState().setMenu({ name: 'default', isVisible: false });	×
29	} else {
30	sidebarStore.getState().setMenu({ name: 'default', isVisible: true });	×
31	}
32	};
33
34	export const CWSidebarMenuItem = (props: CWSidebarMenuItemProps) => {	×
35	const navigate = useCommonNavigate();	×
36	const { setMenu } = useSidebarStore();	×
UNCOV 37	const user = useUserStore();	×
38
39	// eslint-disable-next-line react/destructuring-assignment
UNCOV 40	const [isStarred, setIsStarred] = useState<boolean>(!!props.isStarred);	×
UNCOV 41	const { mutateAsync: toggleCommunityStar } = useToggleCommunityStarMutation();	×
42
43	/* eslint-disable-next-line react/destructuring-assignment */
UNCOV 44	if (props.type === 'default') {	×
45	const {
46	disabled,
47	iconLeft,
48	iconLeftWeight,
49	iconRight,
50	isSecondary,
51	label,
52	onClick,
53	isButton,
54	className,
55	} = props;	×
56
UNCOV 57	if (isButton) {	×
UNCOV 58	return (	×
59	<CWButton
60	containerClassName={`${className} px-16 no-outline`}
61	key={label as string}
62	label={label}
63	buttonHeight="sm"
64	buttonWidth="full"
65	iconLeft={iconLeft}
66	iconLeftWeight={iconLeftWeight}
67	disabled={disabled}
68	onClick={onClick}
69	/>
70	);
71	}
72
UNCOV 73	return (	×
74	<div
75	className={getClasses<{ disabled?: boolean; isSecondary?: boolean }>(
76	{ disabled, isSecondary },
77	'SidebarMenuItem default',
78	)}
79	onClick={(e) => {
UNCOV 80	if (onClick) onClick(e);	×
81	}}
82	>
83	<div className="sidebar-menu-item-left">
84	{iconLeft && <CWIcon iconName={iconLeft} />}	×
85	<CWText type="b2">{label}</CWText>
86	</div>
87	{iconRight && <CWIcon iconName={iconRight} iconSize="small" />}	×
88	</div>
89	);
90	/* eslint-disable-next-line react/destructuring-assignment */
UNCOV 91	} else if (props.type === 'header') {	×
UNCOV 92	return (	×
93	<div className="SidebarMenuItem header">
94	{/* eslint-disable-next-line react/destructuring-assignment */}
95	<CWText type="caption">{props.label}</CWText>
96	</div>
97	);
98	/* eslint-disable-next-line react/destructuring-assignment */
99	} else if (props.type === 'community') {	×
100	/* eslint-disable-next-line react/destructuring-assignment */
101	const item = props.community;	×
102	const account =
UNCOV 103	item && user.accounts.find(({ community }) => item.id == community.id);	×
104	return (	×
105	<div
106	className={getClasses<{ isSelected: boolean }>(
107	// @ts-expect-error <StrictNullChecks/>
108	{ isSelected: app.activeChainId() === item.id },
109	'SidebarMenuItem community',
110	)}
111	onClick={(e) => {
UNCOV 112	e.preventDefault();	×
113	e.stopPropagation();	×
114	setMenu({ name: 'default', isVisible: false });	×
115	resetSidebarState();	×
116	navigateToCommunity({	×
117	navigate,
118	path: '/',
119	// @ts-expect-error <StrictNullChecks/>
120	chain: item.id,
121	});
122	}}
123	>
124	{/// @ts-expect-error <StrictNullChecks/>/}
125	<CommunityLabel community={item} />
126	{user.isLoggedIn && account && (	×
127	<div className="roles-and-star">
128	<User
129	avatarSize={18}
130	shouldShowAvatarOnly
131	userAddress={account.address}
132	userCommunityId={account.community.id}
133	/>
134	<div
135	className={isStarred ? 'star-filled' : 'star-empty'}	×
136	onClick={async (e) => {
UNCOV 137	e.stopPropagation();	×
138	await toggleCommunityStar({	×
139	community: item.id,
140	});
UNCOV 141	setIsStarred((prevState) => !prevState);	×
142	}}
143	/>
144	</div>
145	)}
146	</div>
147	);
148	}
149	};
150
151	type SidebarMenuProps = {
152	className?: string;
153	menuHeader?: { label: string; onClick: (e) => void };
154	menuItems: Array<MenuItem>;
155	};
156
157	// eslint-disable-next-line react/no-multi-comp
UNCOV 158	export const CWSidebarMenu = (props: SidebarMenuProps) => {	×
159	const { className, menuHeader, menuItems } = props;	×
160	const navigate = useCommonNavigate();	×
161	const { setMenu } = useSidebarStore();	×
162
UNCOV 163	const user = useUserStore();	×
164
UNCOV 165	return (	×
166	<div
167	className={getClasses<{ className: string }>(
168	// @ts-expect-error <StrictNullChecks/>
169	{ className },
170	ComponentType.SidebarMenu,
171	)}
172	>
173	<div className="sidebar-top">
174	{menuHeader && (	×
175	<div className="sidebar-menu-header" onClick={menuHeader.onClick}>
176	<CWIcon iconName="chevronLeft" />
177	<CWText type="h5" fontWeight="medium">
178	{menuHeader.label}
179	</CWText>
180	</div>
181	)}
182	{menuItems.map((item, i) => {
UNCOV 183	const itemProps = {	×
184	...item,
185	isStarred:
186	item.type === 'community'	×
187	? !!user.starredCommunities.find(
188	(starCommunity) =>
UNCOV 189	starCommunity.community_id ===	×
190	(item?.community?.id \|\| ''),	×
191	)
192	: false,
193	};
194
UNCOV 195	return (	×
196	<CWSidebarMenuItem
197	key={i}
198	type={item.type \|\| 'default'}	×
199	{...itemProps}
200	/>
201	);
202	})}
203	</div>
204	<div className="sidebar-bottom">
205	{[
206	{
207	type: 'header',
208	label: 'Other',
209	},
210	{
211	type: 'default',
212	label: 'Explore communities',
213	iconLeft: 'compassPhosphor',
214	onClick: () => {
UNCOV 215	setMenu({ name: 'default', isVisible: false });	×
216	navigate('/communities', {}, null);	×
217	},
218	},
219	{
220	type: 'default',
221	label: 'Notification settings',
222	iconLeft: 'person',
223	onClick: () => {
UNCOV 224	setMenu({ name: 'default', isVisible: false });	×
225	navigate('/notification-settings');	×
226	},
227	} as MenuItem,
228	].map((item: MenuItem, i) => {
UNCOV 229	return (	×
230	<CWSidebarMenuItem
231	key={i}
232	type={item.type \|\| 'default'}	×
233	{...item}
234	/>
235	);
236	})}
237	</div>
238	</div>
239	);
240	};

hicommonwealth / commonwealth / 10372775105

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