✨ Compute navigation information

- Add tests
- Add production code
- Adapt navigation buttons component

frontend/src/components/NavigationButtons.jsx

@@ -19,6 +19,7 @@ const StyledButton = styled(Button)(({ theme }) => ({
 
 const NavigationButtons = (props) => {
   const { toBefore, toNext, toReturn, returnIcon } = props
+
   return (
     <Box
       sx={{
@@ -30,12 +31,16 @@ const NavigationButtons = (props) => {
       }}
     >
       <ButtonGroup size="small">
-        <StyledButton component={Link} to={toBefore}>
-          <NavigateBeforeIcon />
-        </StyledButton>
-        <StyledButton component={Link} to={toNext}>
-          <NavigateNextIcon />
-        </StyledButton>
+        {toBefore && (
+          <StyledButton component={Link} to={toBefore}>
+            <NavigateBeforeIcon />
+          </StyledButton>
+        )}
+        {toNext && (
+          <StyledButton component={Link} to={toNext}>
+            <NavigateNextIcon />
+          </StyledButton>
+        )}
         <StyledButton component={Link} to={toReturn}>
           {returnIcon}
         </StyledButton>

frontend/src/pages/DetailInstallationPage/detailInstallationData.js

@@ -26,7 +26,7 @@ export const contractFields = [
   'discharge_date',
   'status',
 ]
-export default function transformContractDetails(contractData) {
+function transformContractDetails(contractData) {
   const t = i18n.t
   const billingModeOptions = {
     index: t('CONTRACT_DETAIL.BILLING_MODE_INDEX'),
@@ -59,3 +59,26 @@ export default function transformContractDetails(contractData) {
 
   return contractData
 }
+
+function computeNavigationInfo(installations, currentInstallationContractNumber) {
+  if (installations.length < 2) {
+    return {}
+  }
+
+  // Find the index of the current installation
+  const currentIndex = installations.findIndex(
+    (installation) => installation.contract_number === currentInstallationContractNumber
+  );
+
+  // Determine the index of the previous and next installations
+  const previousIndex = currentIndex > 0 ? currentIndex - 1 : installations.length - 1;
+  const nextIndex = currentIndex < installations.length - 1 ? currentIndex + 1 : 0;
+
+  // Extract the contract numbers for the previous and next installations
+  const before = installations[previousIndex].contract_number;
+  const next = installations[nextIndex].contract_number;
+
+  return { before, next };
+}
+
+export { transformContractDetails, computeNavigationInfo }

frontend/src/pages/DetailInstallationPage/detailInstallationData.test.js

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import transformContractDetails from './detailInstallationData'
+import { transformContractDetails, computeNavigationInfo } from './detailInstallationData'
 
 describe('transformContractDetails', () => {
   it('Add `%` to reduction_deviation if cost_deviation is `included`', () => {
@@ -57,3 +57,71 @@ describe('transformContractDetails', () => {
     )
   })
 })
+
+
+describe('computeNavigationInfo', () => {
+  it('Returns empty when installations length is smaller than 2', () => {
+    const installations = [{
+      contract_number: 'a_contract_number',
+      installation_name: 'an_installation_name',
+    }]
+    const currentInstallationContractNumber = 'a_contract_number'
+
+    const result = computeNavigationInfo(installations, currentInstallationContractNumber)
+
+    expect(result).toEqual({})
+  })
+
+  describe('Having the installation 2 elements', () => {
+    it('Returns the not current element as before and next navigation values', () => {
+      const installations = [
+        {
+          contract_number: 'a_contract_number',
+          installation_name: 'an_installation_name',
+        },
+        {
+          contract_number: 'another_contract_number',
+          installation_name: 'another_installation_name',
+        }
+      ]
+      const currentInstallationContractNumber = 'a_contract_number'
+
+      const result = computeNavigationInfo(installations, currentInstallationContractNumber)
+
+      const expected_result = {
+        before: 'another_contract_number',
+        next: 'another_contract_number',
+      }
+      expect(result).toEqual(expected_result)
+    })
+  })
+
+  describe('Having the installation more than 2 elements', () => {
+    it('Returns the not current element as before and next navigation values', () => {
+      const installations = [
+        {
+          contract_number: 'a_contract_number',
+          installation_name: 'an_installation_name',
+        },
+        {
+          contract_number: 'another_contract_number',
+          installation_name: 'another_installation_name',
+        },
+        {
+          contract_number: 'yet_another_contract_number',
+          installation_name: 'yet_another_installation_name',
+        }
+      ]
+      const currentInstallationContractNumber = 'another_contract_number'
+
+      const result = computeNavigationInfo(installations, currentInstallationContractNumber)
+
+      const expected_result = {
+        before: 'a_contract_number',
+        next: 'yet_another_contract_number',
+      }
+      expect(result).toEqual(expected_result)
+    })
+  })
+
+})

frontend/src/pages/DetailInstallationPage/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import Container from '@mui/material/Container'
@@ -12,22 +12,26 @@ import ErrorSplash from '../../components/ErrorSplash'
 import NavigationButtons from '../../components/NavigationButtons'
 import { contractFields } from './detailInstallationData'
 import { installationFields } from './detailInstallationData'
-import transformContractDetails from './detailInstallationData'
-import { useInstallationContext } from '../../components/InstallationProvider'
+import { transformContractDetails, computeNavigationInfo } from './detailInstallationData'
+import { useAuth } from '../../components/AuthProvider'
+// import { useInstallationContext } from '../../components/InstallationProvider'
 
 export default function DetailInstallationPage(params) {
   const { contract_number } = useParams()
   const { t } = useTranslation()
   const [installationDetail, setInstallationDetail] = useState(undefined)
   const [contractDetail, setContractDetail] = useState(undefined)
   const [error, setError] = useState(false)
-  const data = useInstallationContext()
-
-  console.log(data)
+  const [rows, setRows] = React.useState([])
+  const [navigationBeforeUrl, setNavigationBeforeUrl] = React.useState(undefined)
+  const [navigationNextUrl, setNavigationNextUrl] = React.useState(undefined)
+  // const data = useInstallationContext()
+  const { currentUser } = useAuth()
 
   useEffect(() => {
     getDetailInstallation()
-  }, [contract_number])
+    getNavigationInfo()
+  }, [contract_number, currentUser])
 
   async function getDetailInstallation() {
     setError(false)
@@ -43,6 +47,20 @@ export default function DetailInstallationPage(params) {
     setContractDetail(contractData)
   }
 
+  async function getNavigationInfo() {
+    setError(false)
+    try {
+      const installations = await ovapi.installations(currentUser)
+      const navigationInfo = computeNavigationInfo(installations, installationDetail?.contract_number)
+      const navigationBeforeUrl = navigationInfo.before ? `/installation/${navigationInfo.before}` : undefined
+      const navigationNextUrl = navigationInfo.next ? `/installation/${navigationInfo.next}` : undefined
+      setNavigationBeforeUrl(navigationBeforeUrl)
+      setNavigationNextUrl(navigationNextUrl)
+    } catch (error) {
+      setError(error)
+    }
+  }
+
   return !error && (!installationDetail || !contractDetail) ? (
     <Loading />
   ) : (
@@ -58,10 +76,9 @@ export default function DetailInstallationPage(params) {
         />
       ) : (
         <>
-          {/* TODO: get the before and after user installations */}
           <NavigationButtons
-            toBefore="/installation/00001"
-            toNext="/installation/00001"
+            toBefore={navigationBeforeUrl}
+            toNext={navigationNextUrl}
             toReturn="/installation"
             returnIcon={<FormatListBulletedIcon />}
           />