MPDX-7878 - Dynamically loading field array on Add Multiple Contacts Modal

__tests__/pages/api/MpdxWebHandoff.test.ts

@@ -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() }));
 

__tests__/pages/api/handoff.test.ts

@@ -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());

__tests__/pages/api/stopImpersonating.test.ts

@@ -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());

__tests__/util/testingLibraryReactMock.tsx

@@ -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);
 

next.config.js

@@ -100,6 +100,9 @@ const config = {
   },
   experimental: {
     modularizeImports: {
+      lodash: {
+        transform: 'lodash/{{member}}',
+      },
       '@mui/material': {
         transform: '@mui/material/{{member}}',
       },

pages/_app.page.tsx

@@ -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';
@@ -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;
 };
@@ -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"
@@ -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>

pages/_document.page.tsx

@@ -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 {

pages/accountLists.page.tsx

@@ -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,

pages/accountLists/[accountListId].page.tsx

@@ -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,

pages/accountLists/[accountListId]/contacts/ContactsPage.test.tsx → pages/accountLists/[accountListId]/contacts/ContactsWrapper.test.tsx

@@ -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,
@@ -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();
@@ -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 = {
@@ -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>
@@ -144,9 +147,9 @@ describe('Contacts', () => {
         <TestRouter router={router}>
           <ThemeProvider theme={theme}>
             <GqlMockedProvider>
-              <ContactsPage>
+              <ContactsWrapper>
                 <ComponentWrapper />
-              </ContactsPage>
+              </ContactsWrapper>
             </GqlMockedProvider>
           </ThemeProvider>
         </TestRouter>

pages/accountLists/[accountListId]/contacts/ContactsPage.tsx → pages/accountLists/[accountListId]/contacts/ContactsWrapper.tsx

@@ -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;
 

pages/accountLists/[accountListId]/contacts/[[...contactId]].page.tsx

@@ -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;

pages/accountLists/[accountListId]/contacts/[[...contactId]].stories.tsx

@@ -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>
+  );
+};

pages/accountLists/[accountListId]/contacts/contacts.test.tsx

@@ -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';
 
@@ -51,7 +51,7 @@ const mockResponse = {
   },
 };
 
-jest.mock('../../../../src/hooks/useMassSelection');
+jest.mock('src/hooks/useMassSelection');
 
 (useMassSelection as jest.Mock).mockReturnValue({
   ids: [],