Fix order of hooks error

frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlSection.tsx

@@ -10,7 +10,6 @@ import { MissionHistoryButton } from './MissionHistoryButton'
 import { Robot } from 'models/Robot'
 import { RobotMissionQueueView } from './MissionQueueView'
 import { FrontPageSectionId } from 'models/FrontPageSectionId'
-import { getNoMissionReason } from 'utils/IsRobotReadyToRunMissions'
 
 const MissionControlStyle = styled.div`
     display: flex;
@@ -93,7 +92,7 @@ const MissionControlCard = ({ robot }: { robot: Robot }) => {
                 {ongoingMission ? (
                     <OngoingMissionCard mission={ongoingMission} />
                 ) : (
-                    <OngoingMissionPlaceholderCard noMissionReason={getNoMissionReason(robot)} />
+                    <OngoingMissionPlaceholderCard robot={robot} />
                 )}
             </OngoingMissionControlCardStyle>
             <RobotMissionQueueView robot={robot} />

frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx

@@ -11,6 +11,8 @@ import { TaskType } from 'models/Task'
 import { StyledButton } from 'components/Styles/StyledComponents'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Icons } from 'utils/icons'
+import { Robot } from 'models/Robot'
+import { NoMissionReason } from 'utils/IsRobotReadyToRunMissions'
 
 interface MissionProps {
     mission: Mission
@@ -140,7 +142,7 @@ export const OngoingMissionCard = ({ mission }: MissionProps): JSX.Element => {
     )
 }
 
-export const OngoingMissionPlaceholderCard = ({ noMissionReason }: { noMissionReason?: string }): JSX.Element => {
+export const OngoingMissionPlaceholderCard = ({ robot }: { robot?: Robot }): JSX.Element => {
     const { TranslateText } = useLanguageContext()
 
     return (
@@ -149,11 +151,11 @@ export const OngoingMissionPlaceholderCard = ({ noMissionReason }: { noMissionRe
                 style={{ backgroundColor: tokens.colors.ui.background__light.hex, gap: '8px' }}
             >
                 <Typography variant="h5">{TranslateText('No ongoing missions')}</Typography>
-                {noMissionReason && <Typography variant="body_short">{noMissionReason}</Typography>}
+                {robot && <NoMissionReason robot={robot} />}
             </StyledSmallScreenMissionCard>
             <StyledLargeScreenMissionCard style={{ backgroundColor: tokens.colors.ui.background__light.hex }}>
                 <Typography variant="h5">{TranslateText('No ongoing missions')}</Typography>
-                {noMissionReason && <Typography variant="body_short">{noMissionReason}</Typography>}
+                {robot && <NoMissionReason robot={robot} />}
             </StyledLargeScreenMissionCard>
         </>
     )

frontend/src/utils/IsRobotReadyToRunMissions.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@equinor/eds-core-react'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Robot, RobotFlotillaStatus } from 'models/Robot'
 
@@ -30,30 +31,33 @@ const isRobotPressureTooLow = (robot: Robot): boolean => {
     return false
 }
 
-export const getNoMissionReason = (robot: Robot): string | undefined => {
+export const NoMissionReason = ({ robot }: { robot: Robot }): JSX.Element => {
     const { TranslateText } = useLanguageContext()
-
+    let message = undefined
     if (isBatteryTooLow(robot)) {
-        return robot.model.batteryMissionStartThreshold
+        message = robot.model.batteryMissionStartThreshold
             ? TranslateText(
                   'Battery is too low to start a mission. Queued missions will start when the battery is over {0}%.',
                   [robot.model.batteryMissionStartThreshold.toString()]
               )
             : TranslateText('Battery is too low to start a mission.')
     } else if (isRobotPressureTooHigh(robot)) {
-        return robot.model.upperPressureWarningThreshold
+        message = robot.model.upperPressureWarningThreshold
             ? TranslateText(
                   'Pressure is too high to start a mission. Queued missions will start when the pressure is under {0}mBar.',
                   [(robot.model.upperPressureWarningThreshold * 1000).toString()]
               )
             : TranslateText('Pressure is too high to start a mission.')
     } else if (isRobotPressureTooLow(robot)) {
-        return robot.model.lowerPressureWarningThreshold
+        message = robot.model.lowerPressureWarningThreshold
             ? TranslateText(
                   'Pressure is too low to start a mission. Queued missions will start when the pressure is over {0}mBar.',
                   [(robot.model.lowerPressureWarningThreshold * 1000).toString()]
               )
             : TranslateText('Pressure is too low to start a mission.')
     }
-    return undefined
+    if (!message) {
+        return <></>
+    }
+    return <Typography variant="body_short">{message}</Typography>
 }