Migrate company investment tabs to React Router

src/apps/companies/router.js

@@ -4,7 +4,6 @@ const urls = require('../../lib/urls')
 
 const { LOCAL_NAV, APP_PERMISSIONS, QUERY_FIELDS } = require('./constants')
 
-const setReturnUrl = require('./middleware/set-return-url')
 const { getRequestBody } = require('../../middleware/collection')
 const {
   exportCollection,
@@ -38,7 +37,6 @@ const dnbHierarchyRouter = require('./apps/dnb-hierarchy/router')
 const editHistoryRouter = require('./apps/edit-history/router')
 const matchCompanyRouter = require('./apps/match-company/router')
 const exportsRouter = require('./apps/exports/router')
-const investmentsRouter = require('./apps/investments/router')
 const interactionsRouter = require('../interactions/router.sub-app')
 const companyListsRouter = require('../company-lists/router')
 const referralsRouter = require('./apps/referrals/router')
@@ -81,11 +79,6 @@ router.get(urls.companies.details.route, renderDetails)
 
 router.get(urls.companies.hierarchies.subsidiaries.add.route, addSubsidiary)
 
-router.use(
-  urls.companies.investments.companyInvestment.route,
-  setReturnUrl,
-  investmentsRouter
-)
 router.use(
   urls.companies.interactions.index.route,
   setInteractionsDetails,

src/apps/routers.js

@@ -117,6 +117,9 @@ const reactRoutes = [
   '/companies/:companyId/contacts',
   '/companies/:companyId/orders',
   '/companies/:companyId/account-management',
+  '/companies/:companyId/investments',
+  '/companies/:companyId/investments/projects',
+  '/companies/:companyId/investments/large-capital-profile',
 ]
 
 reactRoutes.forEach((path) => {

src/client/index.jsx

@@ -35,10 +35,8 @@ import ContactDetails from './modules/Contacts/ContactDetails/ContactDetails'
 import ContactAuditHistory from './modules/Contacts/ContactAuditHistory/ContactAuditHistory'
 import InteractionDetails from './modules/Interactions/InteractionDetails'
 import OrdersReconciliationCollection from './modules/Omis/CollectionList/OrdersReconciliationCollection'
-import LargeCapitalProfile from './modules/Companies/CompanyInvestments/LargeCapitalProfile'
 import PropositionDetails from './modules/Investments/Projects/Propositions/PropositionDetails'
 import CompanyHierarchy from './modules/Companies/CompanyHierarchy'
-import CompanyProjectsCollection from './modules/Companies/CompanyInvestments/CompanyProjectsCollection'
 
 import Footer from '../client/components/Footer'
 
@@ -219,9 +217,6 @@ function App() {
         <Mount selector="#contact-form">
           {(props) => <ContactForm {...props} id="contact-form" />}
         </Mount>
-        <Mount selector="#company-projects-collection">
-          {(props) => <CompanyProjectsCollection {...props} />}
-        </Mount>
         <Mount selector="#dashboard-local-header">
           {(props) => (
             <SearchLocalHeader
@@ -248,9 +243,6 @@ function App() {
         <Mount selector="#orders-reconciliation-collection">
           {(props) => <OrdersReconciliationCollection {...props} />}
         </Mount>
-        <Mount selector="#company-large-capital-profile">
-          {(props) => <LargeCapitalProfile {...props} />}
-        </Mount>
         <Mount selector="#proposition-details">
           {(props) => <PropositionDetails {...props} />}
         </Mount>

src/client/modules/Companies/CompanyInvestments/CompanyProjectsCollection.jsx

@@ -1,24 +1,31 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { useParams } from 'react-router-dom'
 
 import { CompanyResource } from '../../../components/Resource'
 import CompanyLayout from '../../../components/Layout/CompanyLayout'
 import ProjectsCollection from '../../Investments/Projects/ProjectsCollection'
 import { state2props } from '../../Investments/Projects/state'
+import DefaultLayoutBase from '../../../components/Layout/DefaultLayoutBase'
 
-const CompanyProjectsCollection = ({ companyId, returnUrl, ...props }) => (
-  <CompanyResource id={companyId}>
-    {(company) => (
-      <CompanyLayout
-        company={company}
-        breadcrumbs={[{ text: 'Investment' }]}
-        returnUrl={returnUrl}
-        isInvestment={true}
-      >
-        <ProjectsCollection company={company} {...props} />
-      </CompanyLayout>
-    )}
-  </CompanyResource>
-)
+const CompanyProjectsCollection = ({ ...props }) => {
+  const { companyId } = useParams()
+  return (
+    <DefaultLayoutBase>
+      <CompanyResource id={companyId}>
+        {(company) => (
+          <CompanyLayout
+            company={company}
+            breadcrumbs={[{ text: 'Investment' }]}
+            isInvestment={true}
+            pageTitle="Investments"
+          >
+            <ProjectsCollection company={company} {...props} />
+          </CompanyLayout>
+        )}
+      </CompanyResource>
+    </DefaultLayoutBase>
+  )
+}
 
 export default connect(state2props)(CompanyProjectsCollection)

src/client/modules/Companies/CompanyInvestments/LargeCapitalProfile/index.jsx

@@ -1,43 +1,43 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import { useParams } from 'react-router-dom'
 
 import {
   CompanyResource,
   LargeInvestorProfileResource,
 } from '../../../../components/Resource'
 import CompanyLayout from '../../../../components/Layout/CompanyLayout'
+import DefaultLayoutBase from '../../../../components/Layout/DefaultLayoutBase'
 
 import CreateLargeCapitalProfile from './CreateLargeCapitalProfile'
 import EditLargeCapitalProfile from './EditLargeCapitalProfile'
 
-const LargeCapitalProfile = ({ companyId, flashMessages }) => {
+const LargeCapitalProfile = () => {
+  const { companyId } = useParams()
   return (
-    <LargeInvestorProfileResource id={companyId}>
-      {(profile) => (
-        <CompanyResource id={companyId}>
-          {(company) => (
-            <CompanyLayout
-              company={company}
-              breadcrumbs={[{ text: 'Investments' }]}
-              flashMessages={flashMessages}
-              isInvestment={true}
-              isLCP={true}
-            >
-              {profile.results.length != 0 ? (
-                <EditLargeCapitalProfile profile={profile} />
-              ) : (
-                <CreateLargeCapitalProfile companyId={companyId} />
-              )}
-            </CompanyLayout>
-          )}
-        </CompanyResource>
-      )}
-    </LargeInvestorProfileResource>
+    <DefaultLayoutBase>
+      <LargeInvestorProfileResource id={companyId}>
+        {(profile) => (
+          <CompanyResource id={companyId}>
+            {(company) => (
+              <CompanyLayout
+                company={company}
+                breadcrumbs={[{ text: 'Investments' }]}
+                isInvestment={true}
+                isLCP={true}
+                pageTitle="Large capital profile"
+              >
+                {profile.results.length != 0 ? (
+                  <EditLargeCapitalProfile profile={profile} />
+                ) : (
+                  <CreateLargeCapitalProfile companyId={companyId} />
+                )}
+              </CompanyLayout>
+            )}
+          </CompanyResource>
+        )}
+      </LargeInvestorProfileResource>
+    </DefaultLayoutBase>
   )
 }
 
-LargeCapitalProfile.propTypes = {
-  companyId: PropTypes.string.isRequired,
-}
-
 export default LargeCapitalProfile

src/client/routes.js

@@ -89,6 +89,8 @@ import CompanyActivityCollection from './components/ActivityFeed/CollectionList/
 import CompanyContactsCollection from './modules/Contacts/CollectionList/CompanyContactsCollection'
 import CompanyOrdersCollection from './modules/Omis/CollectionList/CompanyOrdersCollection'
 import AccountManagement from './modules/Companies/AccountManagement'
+import CompanyProjectsCollection from './modules/Companies/CompanyInvestments/CompanyProjectsCollection'
+import LargeCapitalProfile from './modules/Companies/CompanyInvestments/LargeCapitalProfile'
 
 const routes = {
   companies: [
@@ -212,6 +214,21 @@ const routes = {
       module: 'datahub:companies',
       component: AccountManagement,
     },
+    {
+      path: '/companies/:companyId/investments',
+      module: 'datahub:companies',
+      component: CompanyProjectsCollection,
+    },
+    {
+      path: '/companies/:companyId/investments/projects',
+      module: 'datahub:companies',
+      component: CompanyProjectsCollection,
+    },
+    {
+      path: '/companies/:companyId/investments/large-capital-profile',
+      module: 'datahub:companies',
+      component: LargeCapitalProfile,
+    },
   ],
   contacts: [
     {