diff --git a/src/components/SelectedTap/SelectedTap.js b/src/components/SelectedTap/SelectedTap.js index 64fb44ea..902ae844 100644 --- a/src/components/SelectedTap/SelectedTap.js +++ b/src/components/SelectedTap/SelectedTap.js @@ -14,7 +14,7 @@ import './SelectedTap.css'; import { Paper, SwipeableDrawer } from '@mui/material'; -import SelectedTapDetails from '../SelectedTapMobile/SelectedTapDetails'; +import SelectedTapDetails from '../SelectedTapDetails/SelectedTapDetails'; import useIsMobile from 'hooks/useIsMobile'; diff --git a/src/components/SelectedTapMobile/SelectedTapDetails.js b/src/components/SelectedTapDetails/SelectedTapDetails.js similarity index 68% rename from src/components/SelectedTapMobile/SelectedTapDetails.js rename to src/components/SelectedTapDetails/SelectedTapDetails.js index e0a17b89..04c6b7cc 100644 --- a/src/components/SelectedTapMobile/SelectedTapDetails.js +++ b/src/components/SelectedTapDetails/SelectedTapDetails.js @@ -1,7 +1,7 @@ import { Button, Collapse, IconButton } from '@mui/material'; import { styled } from '@mui/material/styles'; import React, { useState } from 'react'; -import styles from './SelectedTapMobileInfo.module.scss'; +import styles from './SelectedTapDetails.module.scss'; import CloseIcon from '@mui/icons-material/Close'; import { ReactComponent as DirectionIcon } from '../images/ArrowElbowUpRight.svg'; @@ -41,6 +41,28 @@ function SelectedTapDetails(props) { return
; } + const latLongFormatted = getFormattedLatLong(resource.latitude, resource.longitude); + + // Assign title and subtitles, using fallbacks when data is missing + let resourceTitle = "", resourceSubtitleOne, resourceSubtitleTwo; + if (resource.name !== undefined && resource.name.trim().length > 0 && + resource.address !== undefined && resource.address.trim().length > 0) { + resourceTitle = resource.name; + resourceSubtitleOne = resource.address; + resourceSubtitleTwo = latLongFormatted; + } + else if (resource.name !== undefined && resource.name.trim().length > 0) { + resourceTitle = resource.name; + resourceSubtitleOne = latLongFormatted; + } + else if (resource.address !== undefined && resource.address.trim().length > 0) { + resourceTitle = resource.address; + resourceSubtitleOne = latLongFormatted; + } + else if ((resource.latitude !== undefined) && resource.longitude !== undefined) { + resourceTitle = latLongFormatted; + } + let icon; switch (resource.resource_type) { case WATER_RESOURCE_TYPE: @@ -177,17 +199,17 @@ function SelectedTapDetails(props) { />

- {resource.name} + {resourceTitle}

-

{resource.address}

+

{resourceSubtitleOne}
{resourceSubtitleTwo}

{props.children}