Skip to content

Commit

Permalink
Merge pull request #895 from CruGlobal/lazy-components
Browse files Browse the repository at this point in the history
[no-Jira] Reduce initial client bundle size
  • Loading branch information
canac authored Apr 29, 2024
2 parents d35fe11 + da17fb4 commit c427b08
Show file tree
Hide file tree
Showing 463 changed files with 2,946 additions and 2,442 deletions.
4 changes: 2 additions & 2 deletions __tests__/pages/api/MpdxWebHandoff.test.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getToken } from 'next-auth/jwt';
import { createMocks } from 'node-mocks-http';
import mpdxWebHandoff from '../../../pages/api/mpdx-web-handoff.page';
import { taskFiltersTabs } from '../../../src/utils/tasks/taskFilterTabs';
import mpdxWebHandoff from 'pages/api/mpdx-web-handoff.page';
import { taskFiltersTabs } from 'src/utils/tasks/taskFilterTabs';

jest.mock('next-auth/jwt', () => ({ getToken: jest.fn() }));

Expand Down
2 changes: 1 addition & 1 deletion __tests__/pages/api/handoff.test.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getToken } from 'next-auth/jwt';
import { createMocks } from 'node-mocks-http';
import handoff from 'pages/api/handoff.page';
import makeSsrClient from 'src/lib/apollo/ssrClient';
import handoff from '../../../pages/api/handoff.page';

jest.mock('next-auth/jwt', () => ({ getToken: jest.fn() }));
jest.mock('src/lib/apollo/ssrClient', () => jest.fn());
Expand Down
2 changes: 1 addition & 1 deletion __tests__/pages/api/stopImpersonating.test.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getToken } from 'next-auth/jwt';
import { createMocks } from 'node-mocks-http';
import stopImpersonating from 'pages/api/stop-impersonating.page';
import makeSsrClient from 'src/lib/apollo/ssrClient';
import stopImpersonating from '../../../pages/api/stop-impersonating.page';

jest.mock('next-auth/jwt', () => ({ getToken: jest.fn() }));
jest.mock('src/lib/apollo/ssrClient', () => jest.fn());
Expand Down
2 changes: 1 addition & 1 deletion __tests__/util/testingLibraryReactMock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
import React, { ReactElement } from 'react';
import { RenderOptions, RenderResult, render } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import i18n from 'src/lib/i18n';
import translation from '../../public/locales/en/translation.json';
import i18n from '../../src/lib/i18n';

i18n.addResourceBundle('en', 'translation', translation);

Expand Down
3 changes: 3 additions & 0 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,9 @@ const config = {
},
experimental: {
modularizeImports: {
lodash: {
transform: 'lodash/{{member}}',
},
'@mui/material': {
transform: '@mui/material/{{member}}',
},
Expand Down
40 changes: 15 additions & 25 deletions pages/_app.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,14 @@ import React, { ReactElement, useMemo } from 'react';
import { ApolloProvider as RawApolloProvider } from '@apollo/client';
import createEmotionCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { Box } from '@mui/material';
import StyledEngineProvider from '@mui/material/StyledEngineProvider';
import { Box, StyledEngineProvider } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import {
LocalizationProviderProps,
LocalizationProvider as RawLocalizationProvider,
} from '@mui/x-date-pickers/LocalizationProvider';
import { ErrorBoundary, Provider } from '@rollbar/react';
import { AnimatePresence } from 'framer-motion';
import { DateTime } from 'luxon';
import { Session } from 'next-auth';
import { SessionProvider } from 'next-auth/react';
Expand All @@ -40,12 +38,6 @@ import theme from 'src/theme';
import './helpscout.css';
import './print.css';

const handleExitComplete = (): void => {
if (typeof window !== 'undefined') {
window.scrollTo({ top: 0 });
}
};

export type PageWithLayout = NextPage & {
layout?: React.FC;
};
Expand Down Expand Up @@ -139,6 +131,11 @@ const App = ({
/>
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<link rel="manifest" href="/manifest.json" />
<link
rel="preconnect"
href={process.env.API_URL}
crossOrigin="anonymous"
/>
<link
href={process.env.NEXT_PUBLIC_MEDIA_FAVICON}
rel="icon"
Expand Down Expand Up @@ -186,22 +183,15 @@ const App = ({
>
<SnackbarProvider maxSnack={3}>
<GlobalStyles />
<AnimatePresence
mode="wait"
onExitComplete={handleExitComplete}
>
{/* On the login page and error pages, the user isn't not authenticated and doesn't have an API token,
so don't include the session or Apollo providers because they require an API token */}
{nonAuthenticatedPages.has(router.pathname) ? (
pageContent
) : (
<RouterGuard>
<GraphQLProviders>
{pageContent}
</GraphQLProviders>
</RouterGuard>
)}
</AnimatePresence>
{/* On the login page and error pages, the user isn't not authenticated and doesn't have an API token,
so don't include the session or Apollo providers because they require an API token */}
{nonAuthenticatedPages.has(router.pathname) ? (
pageContent
) : (
<RouterGuard>
<GraphQLProviders>{pageContent}</GraphQLProviders>
</RouterGuard>
)}
<Loading />
</SnackbarProvider>
</LocalizationProvider>
Expand Down
2 changes: 1 addition & 1 deletion pages/_document.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Document, {
import Script from 'next/script';
import React, { ReactElement } from 'react';
import { ServerStyleSheets } from '@mui/styles';
import theme from '../src/theme';
import theme from 'src/theme';

class MyDocument extends Document {
render(): ReactElement {
Expand Down
4 changes: 2 additions & 2 deletions pages/accountLists.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import { Session } from 'next-auth';
import { getSession } from 'next-auth/react';
import { useTranslation } from 'react-i18next';
import { logErrorOnRollbar } from 'pages/api/utils/rollBar';
import AccountLists from 'src/components/AccountLists';
import BaseLayout from 'src/components/Layouts/Primary';
import useGetAppSettings from 'src/hooks/useGetAppSettings';
import makeSsrClient from 'src/lib/apollo/ssrClient';
import AccountLists from '../src/components/AccountLists';
import BaseLayout from '../src/components/Layouts/Primary';
import {
GetAccountListsDocument,
GetAccountListsQuery,
Expand Down
6 changes: 3 additions & 3 deletions pages/accountLists/[accountListId].page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import React, { ReactElement, useEffect, useState } from 'react';
import { Session } from 'next-auth';
import { getSession } from 'next-auth/react';
import { logErrorOnRollbar } from 'pages/api/utils/rollBar';
import Dashboard from 'src/components/Dashboard';
import {
AddMenuItemsEnum,
renderDialog,
} from 'src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu';
import useGetAppSettings from 'src/hooks/useGetAppSettings';
import useTaskModal from 'src/hooks/useTaskModal';
import makeSsrClient from 'src/lib/apollo/ssrClient';
import { suggestArticles } from 'src/lib/helpScout';
import Dashboard from '../../src/components/Dashboard';
import useGetAppSettings from '../../src/hooks/useGetAppSettings';
import useTaskModal from '../../src/hooks/useTaskModal';
import {
GetDashboardDocument,
GetDashboardQuery,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { render, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import TestRouter from '__tests__/util/TestRouter';
import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
import {
ContactsContext,
ContactsType,
} from 'src/components/Contacts/ContactsContext/ContactsContext';
import { FilterPanel } from 'src/components/Shared/Filters/FilterPanel';
import {
filterPanelDefaultMock,
Expand All @@ -14,9 +19,7 @@ import {
} from 'src/components/Shared/Filters/FilterPanel.mocks';
import { ContactFilterStatusEnum } from 'src/graphql/types.generated';
import theme from 'src/theme';
import { GqlMockedProvider } from '../../../../__tests__/util/graphqlMocking';
import { ContactsContext, ContactsType } from './ContactsContext';
import { ContactsPage } from './ContactsPage';
import { ContactsWrapper } from './ContactsWrapper';

const onSelectedFiltersChanged = jest.fn();
const onClose = jest.fn();
Expand All @@ -34,7 +37,7 @@ jest.mock('notistack', () => ({
},
}));

describe('Contacts', () => {
describe('ContactsWrapper', () => {
it('opens and selects a saved filter X2', async () => {
const routeReplace = jest.fn();
const router = {
Expand All @@ -58,15 +61,15 @@ describe('Contacts', () => {
<ThemeProvider theme={theme}>
<TestRouter router={router}>
<GqlMockedProvider>
<ContactsPage>
<ContactsWrapper>
<FilterPanel
filters={[filterPanelDefaultMock, filterPanelFeaturedMock]}
savedFilters={[savedFiltersMock]}
selectedFilters={{}}
onClose={onClose}
onSelectedFiltersChanged={onSelectedFiltersChanged}
/>
</ContactsPage>
</ContactsWrapper>
</GqlMockedProvider>
</TestRouter>
</ThemeProvider>
Expand Down Expand Up @@ -144,9 +147,9 @@ describe('Contacts', () => {
<TestRouter router={router}>
<ThemeProvider theme={theme}>
<GqlMockedProvider>
<ContactsPage>
<ContactsWrapper>
<ComponentWrapper />
</ContactsPage>
</ContactsWrapper>
</GqlMockedProvider>
</ThemeProvider>
</TestRouter>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { useRouter } from 'next/router';
import React, { useEffect, useMemo, useState } from 'react';
import _ from 'lodash';
import { ContactsProvider } from 'src/components/Contacts/ContactsContext/ContactsContext';
import { ContactFilterSetInput } from 'src/graphql/types.generated';
import { suggestArticles } from 'src/lib/helpScout';
import { sanitizeFilters } from 'src/lib/sanitizeFilters';
import { ContactsProvider } from './ContactsContext';

interface Props {
children?: React.ReactNode;
}
export const ContactsPage: React.FC<Props> = ({ children }) => {

export const ContactsWrapper: React.FC<Props> = ({ children }) => {
const router = useRouter();
const { query, replace, pathname, isReady } = router;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,81 @@
import React from 'react';
import _ from 'lodash';
import Head from 'next/head';
import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { loadSession } from 'pages/api/utils/pagePropsHelpers';
import { ContactsContainer } from 'src/components/Contacts/ContactsContainer';
import { ContactsPage } from './ContactsPage';
import {
ContactsContext,
ContactsType,
} from 'src/components/Contacts/ContactsContext/ContactsContext';
import { ContactsLeftPanel } from 'src/components/Contacts/ContactsLeftPanel/ContactsLeftPanel';
import { ContactsMainPanel } from 'src/components/Contacts/ContactsMainPanel/ContactsMainPanel';
import { DynamicContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel';
import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
import Loading from 'src/components/Loading';
import {
TableViewModeEnum,
headerHeight,
} from 'src/components/Shared/Header/ListHeader';
import useGetAppSettings from 'src/hooks/useGetAppSettings';
import { ContactsWrapper } from './ContactsWrapper';

const Contacts: React.FC = ({}) => {
const { t } = useTranslation();
const {
accountListId,
filterPanelOpen,
contactDetailsOpen,
viewMode,
setContactFocus,
} = useContext(ContactsContext) as ContactsType;
const { appName } = useGetAppSettings();

const Contacts: React.FC = () => {
return (
<ContactsPage>
<ContactsContainer />
</ContactsPage>
<>
<Head>
<title>
{appName} |{' '}
{viewMode === TableViewModeEnum.Flows
? t('Contact Flows')
: viewMode === TableViewModeEnum.Map
? t('Contacts Map')
: t('Contacts')}
</title>
</Head>
{accountListId ? (
<SidePanelsLayout
leftPanel={<ContactsLeftPanel />}
leftOpen={filterPanelOpen}
leftWidth="290px"
mainContent={<ContactsMainPanel />}
rightPanel={
<DynamicContactsRightPanel
onClose={() =>
setContactFocus(
undefined,
true,
viewMode === TableViewModeEnum.Flows,
viewMode === TableViewModeEnum.Map,
)
}
/>
}
rightOpen={contactDetailsOpen}
rightWidth="60%"
headerHeight={headerHeight}
/>
) : (
<Loading loading />
)}
</>
);
};

export const getServerSideProps = loadSession;
const ContactsPage: React.FC = () => (
<ContactsWrapper>
<Contacts />
</ContactsWrapper>
);

export default Contacts;
export default ContactsPage;

export const getServerSideProps = loadSession;
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React, { ReactElement } from 'react';
import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
import ContactsPage from './[[...contactId]].page';

export default {
title: 'Contacts/Page',
};

export const Default = (): ReactElement => {
return (
<GqlMockedProvider>
<ContactsPage />
</GqlMockedProvider>
);
};
12 changes: 6 additions & 6 deletions pages/accountLists/[accountListId]/contacts/contacts.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import { ThemeProvider } from '@mui/material/styles';
import { render, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { VirtuosoMockContext } from 'react-virtuoso';
import TestRouter from '__tests__/util/TestRouter';
import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
import { ListHeaderCheckBoxState } from 'src/components/Shared/Header/ListHeader';
import {
PledgeFrequencyEnum,
SendNewsletterEnum,
StatusEnum,
} from 'src/graphql/types.generated';
import TestRouter from '../../../../__tests__/util/TestRouter';
import { GqlMockedProvider } from '../../../../__tests__/util/graphqlMocking';
import { ListHeaderCheckBoxState } from '../../../../src/components/Shared/Header/ListHeader';
import { useMassSelection } from '../../../../src/hooks/useMassSelection';
import theme from '../../../../src/theme';
import { useMassSelection } from 'src/hooks/useMassSelection';
import theme from 'src/theme';
import { ContactsQuery } from './Contacts.generated';
import Contacts from './[[...contactId]].page';

Expand Down Expand Up @@ -51,7 +51,7 @@ const mockResponse = {
},
};

jest.mock('../../../../src/hooks/useMassSelection');
jest.mock('src/hooks/useMassSelection');

(useMassSelection as jest.Mock).mockReturnValue({
ids: [],
Expand Down
Loading

0 comments on commit c427b08

Please sign in to comment.