fixes: #544 Update the URL to reflect the page the 'User' is on and r…

…emove spreadsheet for additional pages (#591)

packages/smb/src/components/pages/offices/__tests__/offices.tsx

@@ -2,10 +2,53 @@ import * as React from 'react'
 import { mount } from 'enzyme'
 import { MockedProvider } from '@apollo/react-testing'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { Offices, OfficesProps } from '../offices'
+import {
+  Offices,
+  OfficesProps,
+  getTabConfigs,
+  createHandleChangeTabFn,
+  createGetTabConfigsFn,
+  GetTabConfigs,
+} from '../offices'
+import Routes from '@/constants/routes'
+import { History } from 'history'
 
-describe('Offices', () => {
+import AreasTab from '@/components/ui/areas-tab'
+import GlobalSettingsTab from '@/components/ui/global-settings-tab'
+import IntegrationsTab from '@/components/ui/integration-tab'
+import OfficesTab from '@/components/ui/offices-tab'
+
+describe('Page Offices Component', () => {
   describe('Offices', () => {
+    test('fn created by createHandleChangeTabFn should run correctly', () => {
+      const mockedHistory = {
+        push: jest.fn(),
+      }
+      const mockedPath = '/abc'
+      createHandleChangeTabFn((mockedHistory as unknown) as History)(mockedPath)
+      expect(mockedHistory.push).toHaveBeenCalledWith(mockedPath)
+    })
+
+    test('fn created by createGetTabConfigsFn should run correctly', () => {
+      const handleChangeTab = () => {}
+      const getTabConfigs = jest.fn(() => true)
+      const pathname = 'abc'
+
+      expect(
+        createGetTabConfigsFn({
+          handleChangeTab,
+          getTabConfigs: (getTabConfigs as unknown) as GetTabConfigs,
+          pathname,
+        })(),
+      ).toBe(true)
+
+      expect(getTabConfigs).toHaveBeenCalledWith({
+        handleChangeTab,
+        officesUrlPart: Routes.OFFICES,
+        currentBrowserUrl: 'abc',
+      })
+    })
+
     it('should match a snapshot', () => {
       const mockProps: OfficesProps = {}
       const wrapper = mount(
@@ -18,4 +61,47 @@ describe('Offices', () => {
       expect(wrapper).toMatchSnapshot()
     })
   })
+  describe('getTabConfigs', () => {
+    it('should generate tab configs correctly', () => {
+      const mockedHandleTabChange = jest.fn()
+      const officesUrlPart = '/offices'
+      const currentBrowserUrl = '/offices/areas'
+
+      const tabConfigs = getTabConfigs({ handleChangeTab: mockedHandleTabChange, officesUrlPart, currentBrowserUrl })
+
+      expect(tabConfigs).toMatchObject([
+        {
+          tabIdentifier: 'offices',
+          displayText: 'Offices',
+          Component: OfficesTab,
+          active: false,
+          path: '/offices/',
+        },
+        {
+          tabIdentifier: 'areas',
+          displayText: 'Areas',
+          Component: AreasTab,
+          active: true,
+          path: '/offices/areas',
+        },
+        {
+          tabIdentifier: 'globalSettings',
+          displayText: 'Global Settings',
+          path: '/offices/globalsettings',
+          Component: GlobalSettingsTab,
+          active: false,
+        },
+        {
+          tabIdentifier: 'integrations',
+          displayText: 'Integrations',
+          path: '/offices/integrations',
+          Component: IntegrationsTab,
+          active: false,
+        },
+      ])
+
+      tabConfigs[0].onTabClick('')
+      expect(mockedHandleTabChange).toHaveBeenCalledWith('/offices/')
+    })
+  })
 })

packages/smb/src/components/pages/offices/offices.tsx

@@ -1,53 +1,107 @@
 import * as React from 'react'
 import { H3, FlexContainerBasic, FlexContainerResponsive, TabConfig, Tabs } from '@reapit/elements'
+import { useLocation, matchPath, useHistory } from 'react-router-dom'
+import { Route } from 'react-router'
 import OfficesTab from '@/components/ui/offices-tab'
 import AreasTab from '@/components/ui/areas-tab'
 import GlobalSettingsTab from '@/components/ui/global-settings-tab'
 import IntegrationsTab from '@/components/ui/integration-tab'
+import Routes from '@/constants/routes'
+import { History } from 'history'
 
-const tabConfigs = ({ tab, handleChangeTab }: any): TabConfig[] => [
-  {
-    tabIdentifier: 'offices',
-    displayText: 'Offices',
-    onTabClick: handleChangeTab,
-    active: tab === 'offices',
-  },
-  {
-    tabIdentifier: 'areas',
-    displayText: 'Areas',
-    onTabClick: handleChangeTab,
-    active: tab === 'areas',
-  },
-  {
-    tabIdentifier: 'globalSettings',
-    displayText: 'Global Settings',
-    onTabClick: handleChangeTab,
-    active: tab === 'globalSettings',
-  },
-  {
-    tabIdentifier: 'integrations',
-    displayText: 'Integrations',
-    onTabClick: handleChangeTab,
-    active: tab === 'integrations',
-  },
-]
+type ExtendedTabConfig = TabConfig & { path: string; Component: React.FC }
+
+type HandleChangeTab = (tabIdentifier: string) => void
+
+type GetConfigParams = {
+  handleChangeTab: HandleChangeTab
+  officesUrlPart: string
+  currentBrowserUrl: string
+}
+
+export type GetTabConfigs = (params: GetConfigParams) => ExtendedTabConfig[]
+
+export const getTabConfigs: GetTabConfigs = ({ handleChangeTab, officesUrlPart, currentBrowserUrl }) =>
+  [
+    {
+      tabIdentifier: 'offices',
+      displayText: 'Offices',
+      path: '',
+      Component: OfficesTab,
+    },
+    {
+      tabIdentifier: 'areas',
+      displayText: 'Areas',
+      path: 'areas',
+      Component: AreasTab,
+    },
+    {
+      tabIdentifier: 'globalSettings',
+      displayText: 'Global Settings',
+      path: 'globalsettings',
+      Component: GlobalSettingsTab,
+    },
+    {
+      tabIdentifier: 'integrations',
+      displayText: 'Integrations',
+      path: 'integrations',
+      Component: IntegrationsTab,
+    },
+  ].map(tabConfig => {
+    const path = `${officesUrlPart}/${tabConfig.path}`
+    return {
+      ...tabConfig,
+      onTabClick: () => handleChangeTab(path),
+      path,
+      active: Boolean(
+        matchPath(currentBrowserUrl, {
+          path,
+          exact: true,
+        }),
+      ),
+    }
+  })
 
 export type OfficesProps = {}
 
+export const createHandleChangeTabFn = (history: History) => (path: string) => {
+  history.push(path)
+}
+
+export const createGetTabConfigsFn = ({
+  pathname,
+  handleChangeTab,
+  getTabConfigs,
+}: {
+  pathname: string
+  handleChangeTab: HandleChangeTab
+  getTabConfigs: GetTabConfigs
+}) => () => {
+  return getTabConfigs({
+    handleChangeTab,
+    officesUrlPart: Routes.OFFICES,
+    currentBrowserUrl: pathname,
+  })
+}
+
 export const Offices: React.FC<OfficesProps> = () => {
-  const [tab, handleChangeTab] = React.useState('offices')
+  const { pathname } = useLocation()
+  const history = useHistory()
+
+  const handleChangeTab = React.useCallback(createHandleChangeTabFn(history), [])
+
+  const tabConfigs = React.useMemo(createGetTabConfigsFn({ pathname, handleChangeTab, getTabConfigs }), [pathname])
 
-  const currentTab = tabConfigs({}).find(tabObj => tabObj.tabIdentifier === tab)
+  const currentTabConfig = tabConfigs.find(tabConfig => tabConfig.active)
 
   return (
     <FlexContainerBasic hasPadding hasBackground>
       <FlexContainerResponsive flexColumn hasPadding hasBackground>
-        <H3>{currentTab?.displayText}</H3>
-        <Tabs tabConfigs={tabConfigs({ tab, handleChangeTab })} />
-        {tab === 'offices' && <OfficesTab />}
-        {tab === 'areas' && <AreasTab />}
-        {tab === 'globalSettings' && <GlobalSettingsTab />}
-        {tab === 'integrations' && <IntegrationsTab />}
+        <H3>{currentTabConfig?.displayText}</H3>
+        <Tabs tabConfigs={tabConfigs} />
+        {tabConfigs.map(({ tabIdentifier, path, Component }) => (
+          <Route exact key={tabIdentifier} path={path} component={Component} />
+        ))}
       </FlexContainerResponsive>
     </FlexContainerBasic>
   )