Fix intl errors in browser console

audit-ci.json

@@ -1,5 +1,6 @@
 {
 	"low": true,
+	"skip-dev": true,
 	"allowlist": [
 		"GHSA-xvch-5gv4-984h", // Not used at runtime
 		"GHSA-93q8-gq69-wqmw", // Not used at runtime
@@ -31,6 +32,7 @@
 		"GHSA-c2qf-rxjj-qqgw", // Not used at runtime
 		"GHSA-pxg6-pf52-xh8x|@lhci/cli>*", // Used by lighthouse CI, not at runtime
 		"GHSA-pxg6-pf52-xh8x|@lhci/utils>*", // Used by lighthouse CI, not at runtime
-		"GHSA-pxg6-pf52-xh8x|express>cookie" // Used by lighthouse CI, not at runtime
+		"GHSA-pxg6-pf52-xh8x|express>cookie", // Used by lighthouse CI, not at runtime
+		"GHSA-3xgq-45jj-v275" // cross-spawn is used by @next/eslint-plugin-next,  audit-ci, cross-env, eslint, and jest. It is not used at runtime
 	]
 }

src/components/organisms/cardSlider/index.spec.tsx

@@ -52,8 +52,8 @@ describe('Slider', () => {
 			},
 		});
 
-		expect(screen.getByText('1')).toBeInTheDocument();
-		expect(screen.getByText('2')).toBeInTheDocument();
+		expect(await screen.findByText('1')).toBeInTheDocument();
+		expect(await screen.findByText('2')).toBeInTheDocument();
 	});
 
 	it('displays one item per page on mobile', async () => {

src/components/HOCs/withAuthGuard.spec.tsx → src/components/templates/andAuthGuard.spec.tsx

@@ -6,23 +6,27 @@ import Cookies from 'js-cookie';
 import { __loadRouter } from 'next/router';
 import React, { ReactElement } from 'react';
 
-import withAuthGuard from '~components/HOCs/withAuthGuard';
 import { RegisterSocialDocument } from '~containers/account/__generated__/register';
 import { fetchApi } from '~lib/api/fetchApi';
 import { GetIsAuthenticatedDocument } from '~lib/hooks/__generated__/useIsAuthenticated';
 import renderWithProviders from '~lib/test/renderWithProviders';
+import AndAuthGuard from '~src/components/templates/andAuthGuard';
 
 function render() {
-	const Comp = withAuthGuard(() => <>hello world</>);
+	const Comp = () => <>hello world</>;
 	return (async function (
 		ui: ReactElement,
 		renderOptions?: RenderOptions,
 	): Promise<RenderResult & { queryClient: QueryClient }> {
 		return renderWithProviders(ui, renderOptions);
-	})(<Comp />);
+	})(
+		<AndAuthGuard>
+			<Comp />
+		</AndAuthGuard>,
+	);
 }
 
-describe('withAuthGuard', () => {
+describe('andAuthGuard', () => {
 	beforeEach(() => __loadRouter({ query: {} }));
 	it('displays login if no email', async () => {
 		when(fetchApi)

src/components/templates/andAuthGuard.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Login from '~components/molecules/login';
+import { getCurrentRequest } from '~lib/api/storeRequest';
+import { getSessionToken } from '~lib/cookies';
+import useIsAuthenticated from '~lib/hooks/useIsAuthenticated';
+
+function AndAuthGuard({
+	children,
+	LoggedOutComponent = Login,
+}: {
+	children: React.ReactNode;
+	LoggedOutComponent?: React.ComponentType;
+}) {
+	const sessionToken = getSessionToken(getCurrentRequest());
+	const { isUserLoggedIn, isFetching } = useIsAuthenticated();
+
+	return (sessionToken && isFetching) || isUserLoggedIn ? (
+		children
+	) : (
+		<LoggedOutComponent />
+	);
+}
+
+export default AndAuthGuard;

src/components/templates/andFailStates.spec.tsx

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import AndFailStates from '~src/components/templates/andFailStates';
+
+jest.mock('next/router');
+
+describe('AndFailStates HOC', () => {
+	it('supports no should404 prop', async () => {
+		jest.mocked(useRouter).mockReturnValue({ isFallback: false } as any);
+
+		render(
+			<AndFailStates
+				Component={() => <p>hello world</p>}
+				componentProps={{}}
+			/>,
+		);
+	});
+});

src/components/templates/andFailStates.tsx

@@ -0,0 +1,45 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import LoadingCards from '~components/molecules/loadingCards';
+import NotFoundBase from '~components/organisms/notFound';
+import { Must } from '~src/types/types';
+
+type WithFailStateOptions<P> = {
+	should404?: (props: P) => boolean;
+	isLoading?: (props: P) => boolean;
+	Loading?: (props: P) => JSX.Element;
+	NotFound?: (props: P) => JSX.Element;
+};
+
+const AndFailStates = <P,>({
+	Component,
+	componentProps,
+	options = {},
+}: {
+	Component: React.FunctionComponent<Must<P>>;
+	componentProps: P;
+	options?: WithFailStateOptions<P>;
+}): JSX.Element => {
+	const {
+		should404: _should404 = () => false,
+		isLoading: _isLoading = () => false,
+		Loading = LoadingCards,
+		NotFound = NotFoundBase,
+	} = options;
+
+	const { isFallback = false } = useRouter() || {};
+	const should404 = _should404(componentProps);
+	const isLoading = _isLoading(componentProps);
+
+	if (!isFallback && should404) {
+		return <NotFound {...(componentProps as Must<P>)} />;
+	}
+
+	if (isFallback || isLoading) {
+		return <Loading {...(componentProps as Must<P>)} />;
+	}
+
+	return <Component {...(componentProps as Must<P>)} />;
+};
+export default AndFailStates;

src/components/templates/andIntl.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+
+import handleIntlError from '~lib/handleIntlError';
+import useLanguageRoute from '~lib/useLanguageRoute';
+import useIntlMessages from '~src/lib/useIntlMessages';
+
+function AndIntl({ children }: { children: React.ReactNode }) {
+	const language = useLanguageRoute();
+	const messages = useIntlMessages(language);
+	return (
+		<IntlProvider
+			messages={messages}
+			locale={language}
+			defaultLocale="en"
+			onError={handleIntlError}
+		>
+			{children}
+		</IntlProvider>
+	);
+}
+
+export default AndIntl;

src/components/templates/andMiniplayer.spec.tsx

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/dom';
 import React, { useContext, useEffect, useState } from 'react';
 
 import AndMiniplayer from '~components/templates/andMiniplayer';
@@ -90,7 +91,9 @@ describe('miniplayer template', () => {
 			},
 		});
 
-		expect(mockPlayer.play).toBeCalled();
+		await waitFor(() => {
+			expect(mockPlayer.play).toBeCalled();
+		});
 	});
 
 	it('loads recording', async () => {

src/containers/about/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import Heading1 from '~components/atoms/heading1';
-import withFailStates from '~components/HOCs/withFailStates';
 import ContentWidthLimiter from '~components/molecules/contentWidthLimiter';
 import AboutNav from '~components/organisms/aboutNav';
+import AndFailStates from '~src/components/templates/andFailStates';
 import { Must } from '~src/types/types';
 
 import { GetAboutPageDataQuery } from './__generated__';
@@ -26,4 +26,11 @@ function About({ page: { body, title, slug } }: Must<AboutProps>): JSX.Element {
 	);
 }
 
-export default withFailStates(About, { useShould404: ({ page }) => !page });
+const WithFailStates = (props: Parameters<typeof About>[0]) => (
+	<AndFailStates
+		Component={About}
+		componentProps={props}
+		options={{ should404: ({ page }) => !page }}
+	/>
+);
+export default WithFailStates;

src/containers/account/index.tsx

@@ -4,24 +4,26 @@ import { FormattedMessage } from 'react-intl';
 import PreferencesForm from '~components/organisms/preferencesForm';
 import ProfileForm from '~components/organisms/profileForm';
 import Heading1 from '~src/components/atoms/heading1';
-import withAuthGuard from '~src/components/HOCs/withAuthGuard';
 import AccountNav from '~src/components/organisms/accountNav';
+import AndAuthGuard from '~src/components/templates/andAuthGuard';
 
 function Account() {
 	const [tab, setTab] = useState<'profile' | 'preferences'>('profile');
 	return (
-		<div>
-			<Heading1>
-				<FormattedMessage
-					id="account__heading"
-					defaultMessage="Account Settings"
-				/>
-			</Heading1>
-			<AccountNav current={tab} onClick={(tab) => setTab(tab)} />
+		<AndAuthGuard>
+			<div>
+				<Heading1>
+					<FormattedMessage
+						id="account__heading"
+						defaultMessage="Account Settings"
+					/>
+				</Heading1>
+				<AccountNav current={tab} onClick={(tab) => setTab(tab)} />
 
-			{tab === 'profile' ? <ProfileForm /> : <PreferencesForm />}
-		</div>
+				{tab === 'profile' ? <ProfileForm /> : <PreferencesForm />}
+			</div>
+		</AndAuthGuard>
 	);
 }
 
-export default withAuthGuard(Account);
+export default Account;

src/containers/account/login.tsx

@@ -1,5 +1,13 @@
-import withAuthGuard from '~components/HOCs/withAuthGuard';
+import React from 'react';
+
+import AndAuthGuard from '~src/components/templates/andAuthGuard';
 
 import LoginRedirect from './loginRedirect';
 
-export default withAuthGuard(LoginRedirect);
+const Login = () => (
+	<AndAuthGuard>
+		<LoginRedirect />
+	</AndAuthGuard>
+);
+
+export default Login;