Migrate ContactLayout pages to React Router (#7461)

* Migrate ContactLayout to use DefaultLayout * Migrate ContactDetails to React Router * Migrate ContactActivity to React Router * Migrate ContactAuditHistory to React Router * Remove legacy code * Update tests
uktrade · Jan 17, 2025 · d3b1615 · d3b1615
1 parent 0165219
commit d3b1615
Show file tree

Hide file tree

Showing 23 changed files with 323 additions and 367 deletions.
diff --git a/src/apps/contacts/__test__/router.test.js b/src/apps/contacts/__test__/router.test.js
@@ -7,9 +7,7 @@ describe('Contacts router', () => {
       ['/create', '/:contactId/edit'],
       '/export',
       '/:contactId',
-      '/:contactId/details',
       '/:id/unarchive',
-      '/:contactId/audit',
     ])
   })
 })
diff --git a/src/apps/contacts/constants.js b/src/apps/contacts/constants.js
@@ -1,5 +1,3 @@
-const { concat } = require('lodash')
-
 const GLOBAL_NAV_ITEM = {
   path: '/contacts',
   headerKey: 'datahub-contacts',
@@ -24,7 +22,7 @@ const LOCAL_NAV = [
   },
 ]
 
-const APP_PERMISSIONS = concat(LOCAL_NAV, GLOBAL_NAV_ITEM)
+const APP_PERMISSIONS = [LOCAL_NAV, GLOBAL_NAV_ITEM]
 
 const QUERY_FIELDS = [
   'archived',

diff --git a/src/apps/contacts/controllers/activity.js b/src/apps/contacts/controllers/activity.js
diff --git a/src/apps/contacts/controllers/audit.js b/src/apps/contacts/controllers/audit.js
diff --git a/src/apps/contacts/controllers/details.js b/src/apps/contacts/controllers/details.js
@@ -27,25 +27,6 @@ async function getCommon(req, res, next) {
   }
 }
 
-function getDetails(req, res, next) {
-  try {
-    const contactId = req.params.contactId
-    const companyAddress = res.locals?.company.address
-    const permissions = res.locals?.user.permissions
-
-    res.render('contacts/views/details', {
-      props: {
-        contactId,
-        companyAddress,
-        permissions,
-      },
-    })
-  } catch (error) {
-    next(error)
-  }
-}
-
 module.exports = {
-  getDetails,
   getCommon,
 }
diff --git a/src/apps/contacts/controllers/index.js b/src/apps/contacts/controllers/index.js
@@ -1,11 +1,9 @@
 const details = require('./details')
 const edit = require('./edit')
 const archive = require('./archive')
-const audit = require('./audit')
 
 module.exports = {
   details,
   edit,
   archive,
-  audit,
 }
diff --git a/src/apps/contacts/router.js b/src/apps/contacts/router.js
@@ -12,13 +12,9 @@ const {
   redirectToFirstNavItem,
   handleRoutePermissions,
 } = require('../middleware')
-const { getCommon, getDetails } = require('./controllers/details')
+const { getCommon } = require('./controllers/details')
 const createAndEdit = require('./controllers/create-and-edit')
 const { unarchiveContact } = require('./controllers/archive')
-const { getAudit } = require('./controllers/audit')
-const { renderContactActivityForEntity } = require('./controllers/activity')
-
-const { setInteractionsDetails } = require('./middleware/interactions')
 
 router.get(['/create', '/:contactId/edit'], createAndEdit)
 
@@ -32,16 +28,7 @@ router.use(
 )
 
 router.get('/:contactId', redirectToFirstNavItem)
-router.get('/:contactId/details', getDetails)
 
 router.get('/:id/unarchive', unarchiveContact)
 
-router.get('/:contactId/audit', getAudit)
-
-router.use(
-  '/:contactId/interactions',
-  setInteractionsDetails,
-  renderContactActivityForEntity
-)
-
 module.exports = router
diff --git a/src/apps/contacts/views/audit.njk b/src/apps/contacts/views/audit.njk
diff --git a/src/apps/contacts/views/details.njk b/src/apps/contacts/views/details.njk
diff --git a/src/apps/contacts/views/interactions.njk b/src/apps/contacts/views/interactions.njk
diff --git a/src/apps/routers.js b/src/apps/routers.js
@@ -139,6 +139,9 @@ const reactRoutes = [
   '/investments/eyb-leads/:eybLeadId/details',
   '/companies/:companyId/referrals/send',
   '/companies/:companyId/referrals/:referralId',
+  '/contacts/:contactId/details',
+  '/contacts/:contactId/interactions',
+  '/contacts/:contactId/audit',
 ]
 
 reactRoutes.forEach((path) => {

diff --git a/src/client/DataHub/App.jsx b/src/client/DataHub/App.jsx
@@ -20,10 +20,6 @@ import ManageAdviser from '../../apps/companies/apps/advisers/client/ManageAdvis
 import FlashMessages from '../components/LocalHeader/FlashMessages.jsx'
 import PersonalisedDashboard from '../components/PersonalisedDashboard/index.jsx'
 import InvestmentProjectForm from '../../apps/investments/client/projects/create/InvestmentProjectForm.jsx'
-import ContactActivity from '../modules/Contacts/ContactActivity/ContactActivity.jsx'
-import ContactLocalHeader from '../components/ContactLocalHeader/index.jsx'
-import ContactDetails from '../modules/Contacts/ContactDetails/ContactDetails.jsx'
-import ContactAuditHistory from '../modules/Contacts/ContactAuditHistory/ContactAuditHistory.jsx'
 import InteractionDetails from '../modules/Interactions/InteractionDetails/index.jsx'
 import PropositionDetails from '../modules/Investments/Projects/Propositions/PropositionDetails.jsx'
 import CompanyHierarchy from '../modules/Companies/CompanyHierarchy/index.jsx'
@@ -173,22 +169,9 @@ export const App = () => {
             />
           )}
         </Mount>
-        <Mount selector="#ie-banner">{() => <IEBanner />}</Mount>
         <Mount selector="#contact-form">
           {(props) => <ContactForm {...props} id="contact-form" />}
         </Mount>
-        <Mount selector="#contact-activity">
-          {(props) => <ContactActivity {...props} />}
-        </Mount>
-        <Mount selector="#contact-local-header">
-          {(props) => <ContactLocalHeader {...props} />}
-        </Mount>
-        <Mount selector="#contact-details">
-          {(props) => <ContactDetails {...props} />}
-        </Mount>
-        <Mount selector="#contact-audit-history">
-          {(props) => <ContactAuditHistory {...props} />}
-        </Mount>
         <Mount selector="#interaction-details">
           {(props) => <InteractionDetails {...props} />}
         </Mount>

diff --git a/src/client/components/ContactLocalHeader/index.jsx b/src/client/components/ContactLocalHeader/index.jsx
@@ -10,6 +10,7 @@ import LocalHeaderHeading from '../../../client/components/LocalHeader/LocalHead
 import { Badge } from '..'
 import urls from '../../../lib/urls'
 import ArchivePanel from '../ArchivePanel'
+import { ContactResource } from '../Resource'
 
 const dispatchToProps = (dispatch) => ({
   writeFlashMessage: (message) =>
@@ -58,60 +59,69 @@ const buildBreadcrumbs = (currentTab, id, name) => {
   return initialBreadcrumbs.concat(dynamicBreadcrumbs)
 }
 
-const ContactLocalHeader = ({ contact, writeFlashMessage }) => {
-  return (
-    <>
-      <LocalHeader
-        breadcrumbs={buildBreadcrumbs(currentTab, contact.id, contact.name)}
-      >
-        <GridRow>
-          <GridCol>
-            <StyledLink
-              data-test="company-link"
-              href={urls.companies.overview.index(contact.company.id)}
+export const ContactLocalHeaderComponent = ({ contact, writeFlashMessage }) => (
+  <LocalHeader
+    breadcrumbs={buildBreadcrumbs(currentTab, contact.id, contact.name)}
+  >
+    <GridRow>
+      <GridCol>
+        <StyledLink
+          data-test="company-link"
+          href={urls.companies.overview.index(contact.company.id)}
+        >
+          {contact.company.name}
+        </StyledLink>
+        <StyledLocalHeaderHeading data-test="contact-name">
+          {contact.name}
+          {contact.primary && (
+            <Badge
+              data-test="primary-badge"
+              borderColour="purple"
+              textColour="purple"
+              fontSize={FONT_SIZE.SIZE_24}
             >
-              {contact.company.name}
-            </StyledLink>
-            <StyledLocalHeaderHeading data-test="contact-name">
-              {contact.name}
-              {contact.primary && (
-                <Badge
-                  data-test="primary-badge"
-                  borderColour="purple"
-                  textColour="purple"
-                  fontSize={FONT_SIZE.SIZE_24}
-                >
-                  Primary
-                </Badge>
-              )}
-            </StyledLocalHeaderHeading>
-          </GridCol>
-          {!contact.archived && (
-            <GridCol setWidth="one-quarter">
-              <Button
-                as={'a'}
-                data-test="add-interaction-button"
-                href={urls.companies.interactions.create(contact.company.id)}
-              >
-                Add interaction
-              </Button>
-            </GridCol>
+              Primary
+            </Badge>
           )}
-        </GridRow>
-        {contact.archived && (
-          <ArchivePanel
-            archivedBy={contact.archivedBy}
-            archivedOn={contact.archivedOn}
-            archiveReason={contact.archivedReason}
-            unarchiveUrl={urls.contacts.unarchive(contact.id)}
-            onClick={() => {
-              writeFlashMessage('Contact record updated')
-            }}
-            type="contact"
-          />
-        )}
-      </LocalHeader>
-    </>
+        </StyledLocalHeaderHeading>
+      </GridCol>
+      {!contact.archived && (
+        <GridCol setWidth="one-quarter">
+          <Button
+            as={'a'}
+            data-test="add-interaction-button"
+            href={urls.companies.interactions.create(contact.company.id)}
+          >
+            Add interaction
+          </Button>
+        </GridCol>
+      )}
+    </GridRow>
+    {contact.archived && (
+      <ArchivePanel
+        archivedBy={contact.archivedBy}
+        archivedOn={contact.archivedOn}
+        archiveReason={contact.archivedReason}
+        unarchiveUrl={urls.contacts.unarchive(contact.id)}
+        onClick={() => {
+          writeFlashMessage('Contact record updated')
+        }}
+        type="contact"
+      />
+    )}
+  </LocalHeader>
+)
+
+const ContactLocalHeader = ({ contactId, writeFlashMessage }) => {
+  return (
+    <ContactResource id={contactId}>
+      {(contact) => (
+        <ContactLocalHeaderComponent
+          contact={contact}
+          writeFlashMessage={writeFlashMessage}
+        />
+      )}
+    </ContactResource>
   )
 }