9552741620

Committed 17 Jun 2024 06:20PM UTC coverage: 15.138% (+2.3%) from 12.845%

Build # 9552741620

Build Type

Pull #8138

github

Committed by

web-flow

Commit Message

Merge 2510d81a6 into e6265d0a0

Pull Request Pull Request #8138: Contest rollover fix

Run Details

3748 of 24316 branches covered (15.41%)

Branch coverage included in aggregate %.

4 of 40 new or added lines in 5 files covered. (10.0%)

34 existing lines in 8 files now uncovered.

5184 of 34689 relevant lines covered (14.94%)

4.82 hits per line

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

0.0

/packages/commonwealth/client/scripts/views/Sublayout.tsx

import 'Sublayout.scss';
import clsx from 'clsx';
import useBrowserWindow from 'hooks/useBrowserWindow';
import useForceRerender from 'hooks/useForceRerender';
import useWindowResize from 'hooks/useWindowResize';
import React, { useEffect, useState } from 'react';
import { matchRoutes, useLocation } from 'react-router-dom';
import app from 'state';
import useSidebarStore from 'state/ui/sidebar';
import { SublayoutHeader } from 'views/components/SublayoutHeader';
import { Sidebar } from 'views/components/sidebar';
import { useFlag } from '../hooks/useFlag';
import useNecessaryEffect from '../hooks/useNecessaryEffect';
import useStickyHeader from '../hooks/useStickyHeader';
import useUserLoggedIn from '../hooks/useUserLoggedIn';
import { useAuthModalStore, useWelcomeOnboardModal } from '../state/ui/modals';
import { SublayoutBanners } from './SublayoutBanners';
import { AdminOnboardingSlider } from './components/AdminOnboardingSlider';
import { Breadcrumbs } from './components/Breadcrumbs';
import MobileNavigation from './components/MobileNavigation';
import AuthButtons from './components/SublayoutHeader/AuthButtons';
import { UserTrainingSlider } from './components/UserTrainingSlider';
import CollapsableSidebarButton from './components/sidebar/CollapsableSidebarButton';
import { AuthModal, AuthModalType } from './modals/AuthModal';
import { WelcomeOnboardModal } from './modals/WelcomeOnboardModal';

type SublayoutProps = {
  hideFooter?: boolean;
  isInsideCommunity?: boolean;
} & React.PropsWithChildren;

const Sublayout = ({ children, isInsideCommunity }: SublayoutProps) => {
  const userOnboardingEnabled = useFlag('userOnboardingEnabled');
  const { isLoggedIn } = useUserLoggedIn();
  const forceRerender = useForceRerender();
  const { menuVisible, setMenu, menuName } = useSidebarStore();
  const [resizing, setResizing] = useState(false);
  const [authModalType, setAuthModalType] = useState<AuthModalType>();
  const [profileId, setProfileId] = useState(null);
  useStickyHeader({
    elementId: 'mobile-auth-buttons',
    stickyBehaviourEnabled: userOnboardingEnabled,
    zIndex: 70,
  });
  const { isWindowSmallInclusive, isWindowExtraSmall } = useBrowserWindow({
    onResize: () => setResizing(true),
    resizeListenerUpdateDeps: [resizing],
  });
  const { triggerOpenModalType, setTriggerOpenModalType } = useAuthModalStore();

  useEffect(() => {
    if (triggerOpenModalType) {
      setAuthModalType(triggerOpenModalType);
      // @ts-expect-error StrictNullChecks
      setTriggerOpenModalType(undefined);
    }
  }, [triggerOpenModalType, setTriggerOpenModalType]);

  const { isWelcomeOnboardModalOpen, setIsWelcomeOnboardModalOpen } =
    useWelcomeOnboardModal();

  useEffect(() => {
    let timeout = null;
    if (isLoggedIn) {
      // @ts-expect-error StrictNullChecks
      timeout = setTimeout(() => {
        // @ts-expect-error StrictNullChecks
        setProfileId(app?.user?.addresses?.[0]?.profile?.id);
      }, 100);
    } else {
      setProfileId(null);
    }

    return () => {
      if (timeout !== null) clearTimeout(timeout);
    };
  }, [isLoggedIn]);

  useNecessaryEffect(() => {
    if (
      isLoggedIn &&
      userOnboardingEnabled &&
      !isWelcomeOnboardModalOpen &&
      profileId &&
      !app.user.isWelcomeOnboardFlowComplete
    ) {
      setIsWelcomeOnboardModalOpen(true);
    }

    if (!isLoggedIn && isWelcomeOnboardModalOpen) {
      setIsWelcomeOnboardModalOpen(false);
    }
  }, [
    profileId,
    userOnboardingEnabled,
    isWelcomeOnboardModalOpen,
    setIsWelcomeOnboardModalOpen,
    isLoggedIn,
  ]);

  const location = useLocation();

  useWindowResize({
    setMenu,
  });

  const routesWithoutGenericBreadcrumbs = matchRoutes(
    [
      { path: '/discussions/*' },
      { path: ':scope/discussions/*' },
      { path: '/archived' },
      { path: ':scope/archived' },
    ],
    location,
  );

  const routesWithoutGenericSliders = matchRoutes(
    [
      { path: '/discussions/*' },
      { path: ':scope/discussions/*' },
      { path: '/archived' },
      { path: ':scope/archived' },
    ],
    location,
  );

  useEffect(() => {
    app.sidebarRedraw.on('redraw', forceRerender);

    return () => {
      app.sidebarRedraw.off('redraw', forceRerender);
    };
  }, [forceRerender]);

  useEffect(() => {
    let timer: NodeJS.Timeout;

    if (resizing) {
      timer = setTimeout(() => {
        setResizing(false);
      }, 200); // Adjust delay as needed
    }

    return () => {
      clearTimeout(timer);
    };
  }, [resizing]);

  const chain = app.chain ? app.chain.meta : null;
  // @ts-expect-error StrictNullChecks
  const terms = app.chain ? chain.terms : null;
  // @ts-expect-error StrictNullChecks
  const banner = app.chain ? chain.communityBanner : null;

  return (
    <div className="Sublayout">
      {!isWindowSmallInclusive && (
        <CollapsableSidebarButton
          onMobile={isWindowExtraSmall}
          // @ts-expect-error StrictNullChecks
          isInsideCommunity={isInsideCommunity}
        />
      )}
      <SublayoutHeader
        onMobile={isWindowExtraSmall}
        // @ts-expect-error StrictNullChecks
        isInsideCommunity={isInsideCommunity}
        onAuthModalOpen={(modalType) =>
          setAuthModalType(modalType || AuthModalType.SignIn)
        }
      />
      <AuthModal
        type={authModalType}
        onClose={() => setAuthModalType(undefined)}
        isOpen={!!authModalType}
      />
      <div className="sidebar-and-body-container">
        <Sidebar
          // @ts-expect-error StrictNullChecks
          isInsideCommunity={isInsideCommunity}
          onMobile={isWindowExtraSmall}
        />
        <div
          className={clsx(
            'body-and-sticky-headers-container',
            {
              'menu-visible': menuVisible,
              'menu-hidden': !menuVisible,
              'quick-switcher-visible':
                menuName === 'exploreCommunities' ||
                menuName === 'createContent' ||
                isInsideCommunity,
            },
            resizing,
          )}
        >
          {/* @ts-expect-error StrictNullChecks */}
          <SublayoutBanners banner={banner} chain={chain} terms={terms} />

          <div className="Body">
            <div
              className={clsx('mobile-auth-buttons', {
                isVisible:
                  !isLoggedIn && userOnboardingEnabled && isWindowExtraSmall,
              })}
              id="mobile-auth-buttons"
            >
              <AuthButtons
                fullWidthButtons
                onButtonClick={(selectedType) => setAuthModalType(selectedType)}
              />
            </div>
            {!routesWithoutGenericBreadcrumbs && <Breadcrumbs />}
            {userOnboardingEnabled && !routesWithoutGenericSliders && (
              <UserTrainingSlider />
            )}
            {isInsideCommunity && !routesWithoutGenericSliders && (
              <AdminOnboardingSlider />
            )}
            {children}
          </div>
        </div>
        {userOnboardingEnabled && (
          <WelcomeOnboardModal
            isOpen={isWelcomeOnboardModalOpen}
            onClose={() => setIsWelcomeOnboardModalOpen(false)}
          />
        )}
      </div>
      {isWindowExtraSmall && <MobileNavigation />}
    </div>
  );
};

export default Sublayout;

1	import 'Sublayout.scss';
2	import clsx from 'clsx';
3	import useBrowserWindow from 'hooks/useBrowserWindow';
4	import useForceRerender from 'hooks/useForceRerender';
5	import useWindowResize from 'hooks/useWindowResize';
6	import React, { useEffect, useState } from 'react';
7	import { matchRoutes, useLocation } from 'react-router-dom';
8	import app from 'state';
9	import useSidebarStore from 'state/ui/sidebar';
10	import { SublayoutHeader } from 'views/components/SublayoutHeader';
11	import { Sidebar } from 'views/components/sidebar';
12	import { useFlag } from '../hooks/useFlag';
13	import useNecessaryEffect from '../hooks/useNecessaryEffect';
14	import useStickyHeader from '../hooks/useStickyHeader';
15	import useUserLoggedIn from '../hooks/useUserLoggedIn';
16	import { useAuthModalStore, useWelcomeOnboardModal } from '../state/ui/modals';
17	import { SublayoutBanners } from './SublayoutBanners';
18	import { AdminOnboardingSlider } from './components/AdminOnboardingSlider';
19	import { Breadcrumbs } from './components/Breadcrumbs';
20	import MobileNavigation from './components/MobileNavigation';
21	import AuthButtons from './components/SublayoutHeader/AuthButtons';
22	import { UserTrainingSlider } from './components/UserTrainingSlider';
23	import CollapsableSidebarButton from './components/sidebar/CollapsableSidebarButton';
24	import { AuthModal, AuthModalType } from './modals/AuthModal';
25	import { WelcomeOnboardModal } from './modals/WelcomeOnboardModal';
26
27	type SublayoutProps = {
28	hideFooter?: boolean;
29	isInsideCommunity?: boolean;
30	} & React.PropsWithChildren;
31
32	const Sublayout = ({ children, isInsideCommunity }: SublayoutProps) => {
33	const userOnboardingEnabled = useFlag('userOnboardingEnabled');
UNCOV 34	const { isLoggedIn } = useUserLoggedIn();	×
35	const forceRerender = useForceRerender();
36	const { menuVisible, setMenu, menuName } = useSidebarStore();	×
37	const [resizing, setResizing] = useState(false);
38	const [authModalType, setAuthModalType] = useState<AuthModalType>();
39	const [profileId, setProfileId] = useState(null);	×
40	useStickyHeader({	×
41	elementId: 'mobile-auth-buttons',
42	stickyBehaviourEnabled: userOnboardingEnabled,
43	zIndex: 70,
44	});
45	const { isWindowSmallInclusive, isWindowExtraSmall } = useBrowserWindow({	×
UNCOV 46	onResize: () => setResizing(true),	×
47	resizeListenerUpdateDeps: [resizing],
48	});
49	const { triggerOpenModalType, setTriggerOpenModalType } = useAuthModalStore();
50
51	useEffect(() => {	×
UNCOV 52	if (triggerOpenModalType) {	×
53	setAuthModalType(triggerOpenModalType);
54	// @ts-expect-error StrictNullChecks
UNCOV 55	setTriggerOpenModalType(undefined);	×
56	}
57	}, [triggerOpenModalType, setTriggerOpenModalType]);
58		×
59	const { isWelcomeOnboardModalOpen, setIsWelcomeOnboardModalOpen } =
60	useWelcomeOnboardModal();
61
62	useEffect(() => {
63	let timeout = null;
64	if (isLoggedIn) {	×
65	// @ts-expect-error StrictNullChecks
66	timeout = setTimeout(() => {
67	// @ts-expect-error StrictNullChecks
68	setProfileId(app?.user?.addresses?.[0]?.profile?.id);
69	}, 100);
70	} else {
71	setProfileId(null);
72	}
73
UNCOV 74	return () => {	×
75	if (timeout !== null) clearTimeout(timeout);	×
76	};
77	}, [isLoggedIn]);
78
79	useNecessaryEffect(() => {
80	if (	×
81	isLoggedIn &&	×
82	userOnboardingEnabled &&
83	!isWelcomeOnboardModalOpen &&
84	profileId &&
85	!app.user.isWelcomeOnboardFlowComplete	×
86	) {
87	setIsWelcomeOnboardModalOpen(true);
88	}
89
UNCOV 90	if (!isLoggedIn && isWelcomeOnboardModalOpen) {	×
91	setIsWelcomeOnboardModalOpen(false);	×
92	}
93	}, [
94	profileId,
95	userOnboardingEnabled,
96	isWelcomeOnboardModalOpen,
97	setIsWelcomeOnboardModalOpen,
98	isLoggedIn,	×
99	]);
100
UNCOV 101	const location = useLocation();	×
102
103	useWindowResize({
104	setMenu,	×
105	});	×
106
107	const routesWithoutGenericBreadcrumbs = matchRoutes(
108	[
109	{ path: '/discussions/*' },
110	{ path: ':scope/discussions/*' },
111	{ path: '/archived' },
112	{ path: ':scope/archived' },
113	],	×
114	location,
115	);
116
117	const routesWithoutGenericSliders = matchRoutes(
118	[	×
119	{ path: '/discussions/*' },
120	{ path: ':scope/discussions/*' },
121	{ path: '/archived' },
122	{ path: ':scope/archived' },
123	],
124	location,
125	);
126
127	useEffect(() => {
128	app.sidebarRedraw.on('redraw', forceRerender);
129
130	return () => {
UNCOV 131	app.sidebarRedraw.off('redraw', forceRerender);	×
132	};
133	}, [forceRerender]);
134
135	useEffect(() => {
136	let timer: NodeJS.Timeout;
137
138	if (resizing) {	×
139	timer = setTimeout(() => {
140	setResizing(false);
141	}, 200); // Adjust delay as needed
142	}
143
144	return () => {
145	clearTimeout(timer);
146	};
147	}, [resizing]);
148
149	const chain = app.chain ? app.chain.meta : null;	×
150	// @ts-expect-error StrictNullChecks
151	const terms = app.chain ? chain.terms : null;	×
152	// @ts-expect-error StrictNullChecks
153	const banner = app.chain ? chain.communityBanner : null;	×
154
155	return (
156	<div className="Sublayout">
157	{!isWindowSmallInclusive && (	×
158	<CollapsableSidebarButton
159	onMobile={isWindowExtraSmall}
160	// @ts-expect-error StrictNullChecks
161	isInsideCommunity={isInsideCommunity}
162	/>
163	)}
164	<SublayoutHeader
165	onMobile={isWindowExtraSmall}
166	// @ts-expect-error StrictNullChecks
167	isInsideCommunity={isInsideCommunity}
168	onAuthModalOpen={(modalType) =>	×
UNCOV 169	setAuthModalType(modalType \|\| AuthModalType.SignIn)	×
170	}
171	/>
172	<AuthModal
173	type={authModalType}
174	onClose={() => setAuthModalType(undefined)}	×
175	isOpen={!!authModalType}
176	/>
177	<div className="sidebar-and-body-container">
178	<Sidebar
179	// @ts-expect-error StrictNullChecks	×
180	isInsideCommunity={isInsideCommunity}
181	onMobile={isWindowExtraSmall}	×
182	/>
183	<div	×
184	className={clsx(
185	'body-and-sticky-headers-container',
186	{
187	'menu-visible': menuVisible,	×
188	'menu-hidden': !menuVisible,
189	'quick-switcher-visible':
190	menuName === 'exploreCommunities' \|\|	×
191	menuName === 'createContent' \|\|
192	isInsideCommunity,
193	},
194	resizing,
195	)}
196	>
197	{/* @ts-expect-error StrictNullChecks */}
198	<SublayoutBanners banner={banner} chain={chain} terms={terms} />
199		×
200	<div className="Body">
201	<div
202	className={clsx('mobile-auth-buttons', {
203	isVisible:
204	!isLoggedIn && userOnboardingEnabled && isWindowExtraSmall,	×
205	})}
206	id="mobile-auth-buttons"
207	>
208	<AuthButtons
209	fullWidthButtons
210	onButtonClick={(selectedType) => setAuthModalType(selectedType)}
211	/>
212	</div>
213	{!routesWithoutGenericBreadcrumbs && <Breadcrumbs />}	×
214	{userOnboardingEnabled && !routesWithoutGenericSliders && (	×
215	<UserTrainingSlider />
216	)}
217	{isInsideCommunity && !routesWithoutGenericSliders && (	×
218	<AdminOnboardingSlider />
219	)}
220	{children}	×
221	</div>
222	</div>
223	{userOnboardingEnabled && (	×
224	<WelcomeOnboardModal
225	isOpen={isWelcomeOnboardModalOpen}
226	onClose={() => setIsWelcomeOnboardModalOpen(false)}
227	/>
228	)}
229	</div>
230	{isWindowExtraSmall && <MobileNavigation />}	×
231	</div>
232	);
233	};
234		×
235	export default Sublayout;

hicommonwealth / commonwealth / 9552741620

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