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}